728x90
마우스 위치에 따른 이미지 변경
<body>
<div>
<img src="icon03.jpg">
</div>
</body>
<script>
let imgBox = document.querySelector("img");
imgBox.addEventListener("mouseover", ()=>{
imgBox.src="icon04.jpg";
});
imgBox.addEventListener( "mouseout", ()=>{
imgBox.src="icon03.jpg";
})
</script>위에서 mouseover & mouseout 이벤트가 발생할때 마다
img의 src 값을 변경 하였어요 !
첫번째 문제라 난이도가 easy하네요
메뉴의 버튼을 클릭했을때 마다 슬라이드 토글
<body>
<button id="bttn">클릭해주세요</button>
<nav id="nav">
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">Typescript</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</nav>
</body>
<script>
document.querySelector("#bttn").addEventListener("click",()=>{
document.querySelector("#nav").classList.toggle('active');
document.querySelector("#bttn").classList.toggle('active');
});
</script>classList.toggle??
Element.classList
classList는 DOMTokenList 객체로 element의 class 속성을 보여주고 &
classList가 읽기전용이어도 다양한 메소드를 통해 class 목록을 조작할 수 있습니다.
그니까 우리가 코드를 작성할때 classList로 속성값을 추가하거나 값을 변경할수 있어요 !
Element.classList.toggle
toggle은 동전의 앞면과 뒷면이 순서대로 나오는 거에요.
즉 0과 1이 반복되는 행위를 의미합니다.
기존 값이 0이었다면 1로 바뀌고
기존 값이 1이었다면, 0으로 바뀌게 됩니다.
그래서 toggle 메서드는 클래스가 존재한다면 클래스를 제거하고,
클래스가 존재하지 않는다면 클래스를 추가하는 메서드입니다.
document.querySelector("#bttn").classList.toggle('active');
위소스에서 active는 계속 삭제 추가 삭제 추가 되는거에요 !
이건 예전에 했던건데 classList를 적다가 생각나서 간략히 정리해 볼게요 !
Element.classList.add
명시된 클래스를 추가
Element.classList.remove
명시된 클래스를 제거
1~100까지 랜덤 배열 생성 (수업시간에 잠깐 얘기했던..)
//0부터 99까지 값이 들어갈 배열을 선언했어요
let numArr01=[] ;
// 임의의값 arrChk= Math.floor(Math.random()*(100))을 통해서 임의의값을 넣을거에요
let arrChk = 0;
for (let i = 0 ; numArr01.length <100; i++ ) {
arrChk= Math.floor(Math.random()*(100));
//indexOf를 통해서 임의로 생성된 값이 numArr01안에 없을경우에만 추가해주는거에요
if(numArr01.indexOf(arrChk) == -1){
numArr01.push(arrChk);
}
}indexOf와 push를 이용했는데...
결과는 만족스럽지 않아요
왜냐면...?
반복횟수를 줄일수 있는 방법을 생각해 봐야겠어요 ...
반복횟수를 최소화 한건.. 다음에 올릴게요 !
오늘도 고생하셨어요
빠읭