자바스크립트(addEventListener, classList)를 활용하여 패널 이동 구현하기 (4)

#자바스크립트 #패스트캠퍼스

​

​

웹사이트 디자인 소개 및 학습목표

디자인소개

패스트 캠퍼스 "최성일"강사님의 강의를 듣고 내용정리를 한 것 입니다. 디자인은 강의의 템플릿을 아주 살짝 변형하였습니다. 모든 디자인 저작권은 강사님께 있습니다.

​

학습목표

• 음악패널 옆에 버튼을 넣어 누르면 다음 패널로 넘어가게끔 구현한다.
• 자바 스크립트 addEventListener 활용방법을 배운다.

​

패널이동 구현하기

​

js

버튼 클릭시 패널이 해당 방향으로 돌아가게끔 만들 것이다. 공부해야할 것은 classList.add & remove , addEventListener "click"의 이해이다.

+ for of 문

​

JavaScript로 패널 회전시키기

                                    const frame= document.querySelector("main");
const prev = document.querySelector("btnPrev");
const next = document.querySelector("btnNext");
const num = 0;

prev.addEventListener("click", e=>{
    frame.style.transform= rotate(`${deg* ++num}deg`);
})

​

#querySelector 의 이해

frame => 패널들을 감싸는 부모요소를 뜻한다. 패널을 둘러싼 전체영역, 큰 원으로 생각

prev => class="btnPrev"를 포함하고 있는 요소를 뜻한다. 이전 버튼으로 생각하면 됨

next => class ="btnNext"를 포함하고 있는 요소를 뜻한다. 이후 버튼으로 생각하면 됨

​

#addEventListener를 넣어 클릭시 이벤트가 발생하도록 만들었다.

​

• prev.addEventListener("click" : 이전버튼 클릭을 하였을 때
• e =>{} : 다음과 같은 이벤트를 발생시켜라.
• {frame.style.transform=**rotate**(**${deg\* ++num}deg**)\] : 메인요소를 deg x ++num만큼 회전시켜라.

\*여기서 deg는 45를 뜻한다 (이전글 참고)

\deg \ ++num의 원리는 아래를 참고하기

​

++num의 이해

const num=0; 처음에 변수값을 지정하였다.

                                    
Prev.addEventListener('click', e=>{

num ++ ;
console.log(num++);
})



이전 버튼(Prev)을 눌릴때 num값을 1씩 증가시키도록 코드를 짰다. 콘솔로 찍어보면 다음과 같은 결과가 나온다.

​

누를때마다 0,1,2,3,4,5,6 ---

이때 num++ 은 초기값이 0부터 시작하는 증가연산자를 후위로 주었기 때문에 발생하게 된다.

​

++num 으로 변경하면

누를때마다 1,2,3,4,5,6 ----

초기값이 1부터 시작한다.

                                    
Prev.addEventListener('click', e=>{

num ++ ;
console.log(num++);
})



한번 누르면 45씩 회전해야 되기 때문에 {deg(45) \* ++num}deg로 해주면 45도 ,90도, 135도 --- 로 전체 패널이 회전한다 (frame= main, 패널을 감싸는 전체요소)

​

회전에서 양수는 시계방향 회전이다. 전체패널이 둥근 원이면 패널의 시계방향으로 회전시 이전 패널로 회전하게 된다.

​

#

​

addEventListener 이해하기

​

패널 이동에 쓰인 addEventListener을 간단하게 이해해 보자.

​

                                    const menu = document.querySelector(".menu")

menu.addEventListener("click", e=>{})

보통 위와 같은 형태로 사용하게 된다. 여기서 menu는 변수를 의미하고 addEventListener를 통해 클릭시("click") 이벤트(e=>{})가 생기도록 만든다.

​

e=>{ } : 이벤트 발생시 작동하는 구문이다. 내가 원하는거 마음대로 구현되도록 하면된다.

​

"click"은 menu라는 변수를 클릭시 발생하도록 만든 규칙으로 보면 편하겠다. click외에도 여러가지 이벤트 종류가 있다.

​

여러가지 이벤트 요소들

​

• click : 마우스 클릭시 발생하는 이벤트
• mouseover : 마우스를 해당요소 위에 올리면 발생하는 이벤트
• mouseout : 마우스를 해당요소 위에 뒀다가 떼면 발생하는 이벤트
• mousedown : 클릭 하고있는 상태, 드래그 같은거 할 때 발생하는 이벤트
• mouseup : 마우스 버튼을 떼는 순간 발생하는 이벤트
• keypress : 키를 누르는 순간, 키를 누를 때 계속 발생하는 이벤트
• keydown : 키를 누를 때 발생하는 이벤트
• load : 웹페이지에서 사용할 파일이 모두 다운 되었을 때 발생하는 이벤트
• scroll : 스크롤 할 때 발생하는 이벤트

​

​