[WebDevCurriculum] addEventListener / class toggle

개요

Javascript의 기능 중 가장 기본이 되며, 실무에서도 활용도가 높은

• querySelector
• addEventListener
• class toggle

에 대해 이해한다.

Checklist

• querySelector
  let row1Squares = document.querySelectorAll('.row1 .square');
  → selector(식별자)에 기재된 class의 tag attribute(속성)을 나타낸다.

• addEventListener
  node.addEventListener('click', click1);
  → 특정 'type'에 기재된 event가 발생할 경우 callback 함수를 동작한다.

for(let node of row1Squares) {
					node.addEventListener('click', click1);
				}

				function click1(e){
					let color = e.target.style.backgroundColor
					if(color==='') {e.target.style.backgroundColor = 'yellow'}
					else if(color==='yellow') {e.target.style.backgroundColor= ''};
				}

• class toggle
  e.target.classList.toggle('enabled');
  → 특정 시점 및 이벤트 동작 등에 맞추어 class를 toggle(추가/제거)한다.
  → 별도의 if logic이 필요하지 않으므로, 간편한 분기처리가 가능해진다.

function click2(e){
					let classList = e.target.classList;
					console.log(classList);

						e.target.classList.toggle('enabled');
				}

참고개념

• DOM
  → 최종적인 application 모습은 여러 document가 누적된 DOM형태이며, DOM을 활용하여 다양한 속성을 추가 및 제거할 수 있다.
  → DOM에 대한 개념은 Javascript의 원론적 개념인 VanillaJS를 잘 이해하고 있어야 한다.

정리

0. why

• VanillaJS와 관련한 기본적인 API나 메소드 등에 대해 잘 숙지하고 있어야, 실무에서 활용되는 여러 Javascript logic을 이해할 수 있다.

1. what

• Javascript 언어가 가지는 특징이나 기본적인 개념에 대해 이해한다.

2. how

• 실무 Javascript와 많은 연관이 있는 VanillaJS 문법 및 API 등을 파악한다.

참고자료

다양한 class 추가/제거 관련 메소드들(★toggle)
https://www.codingfactory.net/10295

Jqeury / class add or remove
https://liufeier.tistory.com/22