[TIL-43] 노마드코더 크롬앱(JS) 클론코딩 #3.6~#3.8

#3 JS로 브라우저에 HTML과 상호작용하기

• 클릭하면 파란색, 한 번 더 하면 빨간색, 또 하면 파란색으로 반복되게 하기
  • 어떤 조건이 true인지 확인해줘야 함. 즉, if 조건문 필요!
    • function handleTitleClick() {
        if (title.style.color !== "teal") {
          title.style.color = "teal";
        } else {
          title.style.color = "tomato";
        }
      }
  • title.style.color를 변수 이용해서 코드 개선
    • function handleTitleClick() {
        const currentColor = title.style.color;
        let newColor;
        if (currentColor !== "teal") {
          newColor = "teal";
        } else {
          newColor = "tomato";
        }
        title.style.color = newColor;
      }
    • 뭘 하려고 하는지 눈에 좀 더 명확히 보임.
    • [질문] 처음 색깔을 const로 정의하면 newColor 대로 바뀌고 나서 또 클릭할 때 작동할 수 없지 않나?
      • const currentColor = title.style.color;
        let newColor;
        
        function handleTitleClick() {
          if (currentColor !== "teal") {
            newColor = "teal";
          } else {
            newColor = "tomato";
          }
          title.style.color = newColor;
        }
      • 처음에 변수 위치를 이렇게 잘못 써서 그럼.
• 자바스크립트 스텝
  1. element 찾기
  2. 이벤트 listen하기
  3. 이벤트에 반응하기

 

스타일은 CSS에서

• JS에서 스타일을 바꾸는 건 적합하지 않음.
  • JS는 애니메이션에 적합한 도구.
  • CSS 작업은 하지 않음. 색깔, 스타일 놉!
• CSS & JS 이용해서 작업하기
  • CSS
    • .active {
        color: tomato;
      }
      • active라는 클래스 가진 요소는 tomato 색이 될 것.
  • JS
    • tomato 적용하고 싶은 요소 골라서 active 클래스 전달.
      • title.className = "active";
      • JS에서는 html을 변경해서 css 스타일이 적용되게 함.
    • 클릭할 때마다 active 클래스를 추가하거나 제거해서 색상 바꿀 수 있음.
      • function handleTitleClick() {
          if (title.className === "active") {
            title.className = "";
          } else {
            title.className = "active";
          }
        }
    • 코드 개선 1
      • active라는 클래스명은 사용자가 직접 정한 raw vlaue임.
      • 오류 가능성 줄이기 위해 css에서 사용한 클래스명을 변수로 적어둠.
        • const className = "active";
      • 그럼 이제 자바스크립트에서 변수명 쓰다가 틀려도 콘솔에서 알려줌.
    • 코드 개선 2
      • 해당 element에 원래 클래스가 있었을 경우, 최초의 클래스명이 교체됨.
      • 따라서 js로 모든 클래스명을 바꾸지 않아야 함. 그러려면 classList 사용.
      • classList 안의 함수 이용하면 원하는 클래스만 골라서 변경할 수 있음.
        • classList.contains : 명시한 class가 html 요소의 클래스에 포함되는지 알려줌.
        • classList.remove : 필요없는 클래스 제거
        • classList.add : 필요한 클래스 추가
        • function handleTitleClick() {
            const clickedClass = "active";
            if (title.classList.contains(clickedClass)) {
              title.classList.remove(clickedClass);
            } else {
              title.classList.add(clickedClass);
            }
          }
      • toggle 함수 :  클래스명이 존재하는지 확인하고, 존재한다면 제거함. 존재하지 않으면 추가함.
        • function handleTitleClick() {
            title.classList.toggle("active");
          }
        • 클래스명을 한번만 쓰니까 굳이 변수 만들 필요 없음.
        • if문 5줄 쓸 필요 없음.