자바스크립트로 크롬 앱 만들기 - 노마드 코더 클론코딩 #7 에러 최소화 시키기,toggle

클릭하면 글자 색 바뀌게 하기

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

function handleTitleClick(){
    if(h1.style.color === "blue"){
        h1.style.color = "tomato";
    }
    else {
        h1.style.color = "blue";
    }
}

h1.addEventListener("click", handleTitleClick);

 

더 보기 좋게 바꿔보자. 👇

 

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

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);

 

1. currentColor는 getter로써, 최근 color값을 복사하는 역할을 합니다. 그렇기에 의미론적으로 봤을 때 const로 선언하는 것이 적절합니다.
2. newColor는 setter로써, 변수에 대입된 색상값을 h1.style.color에 최종적으로 할당하는 역할을 합니다. 그리고 이것도 의미론적으로 봤을 때 값이 변경될 수 있다는 것을 염두에 두기 위해 let으로 선언하는 것이 적절합니다.
3. 다들 아시겠지만 프로그래밍언어에서 "="(equal) 표시는 오른쪽에 있는 값을 왼쪽에 대입한다는 뜻입니다. 이를 염두에 두시면 코드를 이해하는데 편하실 것 같습니다.
4. (참고) 함수 내에서 선언된 변수는 함수 밖에서는 존재하지 않습니다. 그렇기 때문에 const currentColor로 변수 선언을 하더라도, 함수가 호출될 때 마다 새로운 값을 받을 수 있습니다.

이를 토대로 코드를 순차적으로 이해하면,

1) click event 발생 및 함수 실행
2) currentColor 변수 선언 후 h1.style.color 값 복사 (getter)
3) newColor 변수 선언
4) currentColor 현재 값 확인
5) 조건에 따라 newColor에 "tomato" or "blue" 값 대입
6) 마지막으로 h1.style.color에 newColor값 대입 (setter)

 

 

---

=== 값이 일치함.
= color를 바꿔줌.

element의 style을 JS에서 변경하는걸 선호하지 않는다. 왜냐면 다른 언어들을 섞는 걸 선호하지 않기 때문이다. JS를 상호작용을 만들어 내는데 적합하다고 생각하고, HTML은 다른 선택사항이 없고, CSS는 JS파일에서도 할 수 있지만 sytle은 CSS에서 하는걸 선호한다.

step1. element를 찾아라.
step2. event를 listen해라.
step3. 그 event에 반응해라.

 

 

---

style작업에 적합한 도구는 CSS다!!
animation에 적합한 도구는 JS다!!
html 파일은 CSS문서와 JS문서를 import하고 있다. 

 

➡️내가 JS에서 하고 싶은건, h1에 active class를 전달하는 것! 이렇게 하면 더 적은 JS코드로 동일한 결과를 얻는다.

 

 

 

---

 

error 발생 최소화하기!

오타를 쳐서 실수를 할 수 있기 때문에 raw string을 쓰는 대신, const를 생성하기!!!

 

👇

 

 

 

---

class list

 

 

function handleTitleClick(){
    const clickedClass = “clicked”;
    if (h1.classList.contains(clickedClass)){
        h1.classList.remove(clickedClass);
    } else {
        h1.classList.add(clickedClass);
    }
}

 

function handleTitleClick(){
    h1.classList.toggle("clicked");
}

 

이 두개는 같다!!!! toggle 짱!

 

 

1. className은 이전의 class들은 상관하지 않고 모든걸 교체해버린다.
2. classList 우리가 class들의 목록으로 작업할수 있도록 허용해준다.
3. contains은 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다.
4.remove는 명시한 class name을 제거하고 add는 명시한 class name을 추가해준다.
5.toggle은 토큰이 존재하면 토큰을 제거, 토큰이 존재하지 않으면 토큰 추가 한다.