#3.6 – 3.8 event 직접

#3.6

const h1 = document.querySelector(".hello h1:first-child");
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);

handleTitleClick 함수는 h1을 클릭하면 색상이 토마토와 파랑으로 바뀌는 함수입니다.

색상을 바꾸려면 현재 색상을 저장할 현재 색상과 새 색상을 저장할 새 색상 변수가 있어야 합니다.

각각은 const와 let으로 표시되며 현재 색상이 파랑이면 else이면 newColor는 토마토이고 현재 색상이 파랑이 아니면 newColor = 파랑입니다. 이 작업을 수행할 때 newColor의 색상을 지정하기만 하면 h1.style.color = newColor가 됩니다. 쓰다.

강의를 처음 설명할 때 newColor를 현재 색상으로 사용해 보았습니다. 그러나 이 경우 현재 색상의 기준이 사라지는 동시에 새로운 색상과 구분하기 어려워져 비교가 불가능해진다. (내가 이해하는 것을 말로 표현하자면)

한 번의 클릭으로 색상을 변경하려면 한 번이면 충분하지만 그 이상을 사용하려면 새 색상을 삽입할 변수가 필요합니다.

설명에 오류가 있으면 언제든지 의견을 남겨주세요!

#3.7

위의 코드블럭처럼 CSS를 자바스크립트로 수정하고 꾸미는 것은 좋지 않습니다.

그래서 css에서 클릭했을 때 추가할 스타일 클래스를 주입하고 자바스크립트로 클래스를 주입하고 제거하는 방법이 있습니다.

const h1 = document.querySelector(".hello h1:first-child");
function handleTitleClick(){
	const clickedClass = "clicked";
    if(h1.className === clickedClass){
    	h1.className = "";
    }else{
    	h1.className = clickedClass;
    }
}

여기서 스타일은 style.css에서 clicked라는 클래스로 추가됩니다.

클릭한 단어는 반복적으로 사용되기 때문에 별도의 변수로 저장되며, const를 사용하는 것은 자바스크립트를 사용할 때 앞으로 반복될 일에 대한 오류를 줄이는 방법이다.

위의 handleTitleClick() 함수에서 h1.className을 클릭하면 h1이라는 클래스 이름이 없고,

그렇지 않은 경우 추가를 클릭합니다.

그런 다음 원하는 style.css가 추가됩니다. 하지만 h1에 클래스 이름이 있다면 어떨까요?

위의 코드는 클래스 이름 자체를 clicked로 변경합니다.

#3.8

위와 동일
const clickedClass = "active";
if(h1.classList.contains(clickedClass)){
	h1.classList.remove(clickedClass);
}else{
	h1.classList.add(clickedClass);
}

className은 클래스 이름을 완전히 변경했지만 classList는 클릭이 h1의 클래스에 있는지 확인할 수 있습니다.

또한 추가 h1.classList.add(클래스 이름); h1에 새 클래스 이름을 추가하고

h1.classList.remove(클래스 이름); h1에서 클래스 이름을 삭제합니다.

그러나 코드는 여전히 길다.

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

Toggle을 사용하면 한 줄로 표현할 수 있습니다.

Toggle은 내용(토큰)을 대괄호()로 묶고, 제거하고, 반복하는 기능을 가지고 있습니다.