[JS]02. JavaScript on the Browser 3

04. CSS in JavaScript

- Click event에 따라 글자색이 바뀌도록 하는 JS code

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

function handleTitleClick() {
    const currentColor = h1.style.color;
        // getter, 현재 h1의 color 값을 받아오는 변수 
    let newColor;
        // setter, 변수에 새로이 대입된 색상 값을 h1.style.color에 최종적으로 할당하는 역할 
    if(currentColor === "blue") {
        newColor = "tomato";
    } else {
        newColor = "blue"
    }
    h1.style.color = newColor;
        // condition 문을 통해 변한 newColor 의 값을 h1에 저장 -> 색상이 반응하도록 함

}

h1. addEventListener ("click", handleTitleClick);

-> style 작업은 CSS가, animation 작업은 JS가 적합함 

 

- style 작업은 CSS에서 animation 작업은 JS에서 코드 작성하여 서로 영향을 주고 받도록 함 

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

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

h1. addEventListener ("click", handleTitleClick);

====================================

/** in css **/
body{
    background: rgba(75, 159, 255, 0.838);
}

h1 {
    color:rgb(28, 28, 87);
    transition: color 0.5s ease-in-out;
}

/** css에서 생성한 class **/
.active {
    color: tomato;
}

 

** 코드를 깔끔하게 작성하는 법 

- className과 같은 문자열(raw string)은 오타로 인해 오류가 발생하는 경우가 있으므로 variable로 저장하여 사용하는 것이 좋음 

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

function handleTitleClick() {
    const clickedClass = "clicked"
        // className을 변수에 저장하여 실수를 줄임
    if(h1.className === clickedClass) {
        h1.className = "";
    } else {
        h1.className = clickedClass;
    }
}

h1. addEventListener ("click", handleTitleClick);

 

** bug ! h1 tag에 class가 기존에 존재해 있다면?

- className의 경우 이전 class를 상관하지 않고 기존 class에서 새로운 class로 교체함 

-> classList를 활용하여 classe들의 목록으로 작업할 수 있게끔 수정함 

// in HTML
	<h1 class="cute_font">Click me!</h1>
=================================================

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

function handleTitleClick() {
    const clickedClass = "clicked"
        // className을 변수에 저장하여 실수를 줄임
    if(h1.classList.contains(clickedClass)) {
            // 해당 요소의 class에 clickedClass가 있는지 확인함 
            // 요소가 본래 지닌 class에 영향을 주진 않음 
        h1.classList.remove(clickedClass);
            // clickedClass가 포함된 부분을 지움 
    } else {
        h1.classList.add(clickedClass);
            // clickedClass를 포함함
    }
}

h1. addEventListener ("click", handleTitleClick);

 

- toggle : 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 함

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

function handleTitleClick() {
    h1.classList.toggle("clicked");
        // toggle: h1의 classLsit에 clicked class가 이미 있는지 확인해서 
        // 있다면 제거, 없다면 추가해줌 (이전의 condition문을 대체함)
}

h1. addEventListener ("click", handleTitleClick);