(JavaScript)니콜라스 강의 따라하기

1. hello js를 클릭하여 클래스 추가 or 삭제(className)

const title = document.querySelector("#title");
//html 문서에서 ID가 title인 element를 가져옴

const CLIKED_CLASS = "clicked";
// 변수 CLIKED_CLASS에 clicked를 할당

function handleClick() {
    const currentClass = title.className;
    //변수 currentClass에 title.className을 할당
    if(currentClass !== CLIKED_CLASS){
        title.className = CLIKED_CLASS;
    }else {
        title.className = "";
    };
};
// currentClass가 CLIKED_CLASS와 불일치 하면 CLIKED_CLASS의 클래스 추가하고 일치하면 클래스 빈칸.

function init(){
    title.addEventListener("click", handleClick);
};
//title 태그 클릭 시 handleClick 함수 실행. *주의: handleClick()로 하지 말것!!! 새로고침 하면 바로 실행됨
init();

실행 결과

• 실행 전 페이지

• hello js 클릭: class="clicked"가 생성됨.
  

2. hello js를 클릭하여 클래스 추가 or 삭제(clasList/contains/add/remove)

const title = document.querySelector("#title");

const CLIKED_CLASS = "clicked";

function handleClick() {
    const hasClass = title.classList.contains(CLIKED_CLASS);
  //true/false를 줄것이다.
    if(!hasClass){
        title.classList.add(CLIKED_CLASS);
    }else {
        title.classList.remove(CLIKED_CLASS);
    };
};
// title.classList가 click을 포함하고 있으면 true, 없으면 false.
function init(){
    title.addEventListener("click", handleClick);
};
init();

*실행결과

*실행 전 페이지

• hello js 클릭: class에 clicked 추가 or 삭제 반복

3. hello js를 클릭하여 클래스 추가 or 삭제(toggle)

const title = document.querySelector("#title");

const CLIKED_CLASS = "clicked";

function handleClick() {
    const hasClass = title.classList.toggle(CLIKED_CLASS);
////클래스의 값이 있는지 체크해서 없으면 add 있으면 remove를 해준다.
};
function init(){
    title.addEventListener("click", handleClick);
};
init();

• classList.toggle() 로 인해 위에서 작성한 코드가 매우 섹시한 코드가 되었습니다. 똑같이 동작을 하더군요. 참 쉽죠잉?