삼항연산자를 활용하여 패널 순서 정리하기 (parseInt & getAttribute) (7)

삼항연산자를 활용하여 패널 순서 정리하기 (parseInt & getAttribute) (7) — #preventdefault #getattribute #parseInt #삼항연산자 웹사이트 디자인 소개 및 학습목표 디자인소개 패...

#SVG UI#Naver Blog

#preventdefault #getattribute #parseInt #삼항연산자

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

디자인소개

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

처음부터 끝까지 하나 하나 손코딩 하는 모습을 보여드릴 것이며. 이전글을 보고오시면 더욱 이해가 빠릅니다.

학습목표

사용되는언어

HTML

HTML

li에 data-index 값 부여하기

<li data-index="0"> //.bg생략 </li> <li data-index="1"> //.bg생략 </li> <li data-index="2"> //.bg생략 </li> <li data-index="3"> //.bg생략 </li>	li 속성 추가"data-index"js에서 활용할 li태그에 data-index를 부여하였다.순서값을 임의로 부여한 것으로 보면 이해가 쉬울듯하다

JS

필요 태그 모두 찾기

const panel= document.querySelector('.panel');const panel\_li = panel.querySelectorAll('li');const btnUp = document.querySelector('.btnUp');const btnDown = document.querySelector('.btnDown');const len = panel\_li.length-1;	panel = ul .panelpanel\_li = ul> libtnUp = .btnUpbtnDown = .btnDownlen = 전체 패널 갯수 -1 =3 //이유:패널수는 4인데 배열은 0부터 싲가해서 전체 배열의 index값은 최대 3이 됨. 활용할 수 있도록 설정

.btnUp 클릭이벤트 만들기

btnUp.addEventListener ("click", e=>{ e.preventDfault();})	btnUp에 클릭이벤트를 우선 걸어준다.preventDfault();는 a태그 본기능을 막아준다 (링크기능)

in "click"이벤트 1) 필요한 요소 만들기

btnUp.addEventListener ("click", e=>{ current\_item = panel.querySelector('.on'); let current\_index = parseInt(current\_item.getAttribute("data-index")); let next\_index = null; })	in "click" = btnUp버튼 클릭시current\_item = on이 붙은 '현재' 패널current\_index = on 패널의 data-index를 정수로 변환 한 값 //data-index 속성은 문자라서 정수로 변환 해줘야한다.next\_index = 다음 패널의 순번 비워둔다 //함수활용할 것

in "click"이벤트 2)삼항연산자

btnUp.addEventListener ("click",e=>{ (current\_index !==len) ? next\_index=current\_index+1 : next\_index=0;})	삼항연산자란?(조건) ? true일때 시행 : false일때 시행 현재 패널이 마지막 번째(3)이라면, 다음 패널은 0이되고 아니라면 +1더해준다.이후 패널 순서에 따라 class on, up, down을 계속해서 바꿔야 하기 떄문에 next\_index값을 필수로 구해줘야 한다.

복습

짚어갈 포인트

js위주라 다소 어렵고 지루할 수 있는 파트이다. 어려우면 이글은 넘어가고 모두 공부한 후 다시 복습할 때 보면 도움이 될거라고 생각한다...! 거의 다왔다 조금만 힘내자 !