📙노마드코더 Vanilla JS 기초 정리2

const와 let

const h1 = document.querySelector("div.hello:first-child h1");
h1.innerText = "Click ME!";

function handleTitleClick(){
    const currentColor = h1.style.color;
    let newColor;

    if(currentColor === "blue") {
        newColor = "tomato";
    } else {
        newColor = "blue";
    }
     h1.style.color = newColor;

}

h1.addEventListener("click", handleTitleClick);

let newColor; 라는 빈 변수를 준 이유: const를 사용하여 currentColor를 정의하면 값을
변경할 수 없기 때문에 let으로 빈 변수를 만들어 줌.
이후에 newColor = "tomato";가 실제로 실행은 되었으나 newColor가 무엇인지 정의되어있지 않아 눈에 보이는 색상이 변하지 않음.
따라서 h1.style.color = newColor;라는 변수를 추가한다.
반대로 newColor = h1.style.color; 는 왜 안되는지 모르겠음
그러나 자바스크립트에서 css를 코드로 직접 바꾸는 것은 별로 좋은 방법이 아님

class를 추가하여 JS에서 동작하기

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
    const activeClass = "active"
    if(h1.className === activeClass) {
        h1.className = "";
    } else {
        h1.className = activeClass;
    }
}

addEventListener("click", handleTitleClick);

실행은 잘 되나 버그가 하나 존재함
만약 h1에 "active" 이외에 이미 존재했던 폰트를 변경하는 class가 있다면,
click이벤트를 실행할 때 폰트 class를 없애버림.

즉, 명령어대로만 class를 남기고 나머지 모든 class는 없는 존재가 되어버린다..

버그를 해결하려면,,

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
	const activeClass = "active";
	if (h1.classList.contains(activeClass)) {
		h1.classList.remove(activeClass);
	} else {
		h1.classList.add(activeClass);
	}
}

h1.addEventListener("click", handleTitleClick);

className이 아닌 classList를 추가하여 위 버그를 해결할 수 있다.

h1.classList.contains(activeClass) -----> h1.classList에 activeClass가 포함되어 있다면,
h1.classList.remove(activeClass); -----> h1.classList에 activeClass를 제거해라.

else {
h1.classList.add(activeClass);
}
-----> 만약,h1.classList에 activeClass가 포함되어 있지 않다면 h1.classList에 activeClass를 추가해라.
그러나 이 코드도 toggle을 사용하여 줄일 수 있음

최종 코드

const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
	
    h1.classList.toggle("active");
}
h1.addEventListener("click", handleTitleClick);

toggle을 사용하여 코드를 간단하게 줄임. (if문도 사용x)
const activeClass ="active"; 의 변수도 없애버림.(왜냐면 "active"를 한번만 사용하니깐 변수로 지정할 필요가 없음.)