코딩일기: 노마드 코더로 공부 2일차

 

function handleTitleClick(){

  const currentColor = h1.style.color;

  let newColor;

  if (currentColor === "blue") {

    newColor = "tomato";

  } else {

    newColor = "blue";

  }

  h1.style.color = newColor

}

title.addEventListener("click",handleTitleClick);

현재 컬러에 따라서 클릭할 때마다 특정 색으로 변경하는 코드

이런 식으로 자바스크립트로도 style을 바꿀 수 있지만 style에 적합한 도구는 css임

 

 

 

따라서 이런 식으로 css와 javascript를 활용하는 것이 좋다.

h1 {

  color: cornflowerblue;

}

.active {

  color: tomato;

}

(css 파일)

 

function handleTitleClick(){

  h1.className = "active";

}

title.addEventListener("click",handleTitleClick);

(js 파일)

 

h1을 클릭했을 때, h1에 active라는 클래스를 추가해 주는 코드이다.

미리 작성해 둔 css속성으로 인해, h1을 클릭했을 시 토마토 색깔로 변할 것이다.

style을 변경할 때는 이런 식으로 변경하는 것이 좋다. style을 설정할 때 적합한 언어는 css이고, 이것이 유지보수에도 더 좋기 때문

 

function handleTitleClick(){

  const clickedClass = "active"

  if (h1.className === clickedClass) {

    h1.className = ""

  } else {

    h1.className = clickedClass

  }

}

 

title.addEventListener("click",handleTitleClick);

조건문을 사용하여 클릭할 때 현재 클래스 값에 따라서 색이 변하게 하였다.

클래스를 제거하고 싶으면 빈문자열("")을 입력해주면 된다.

실수를 줄여주기 위해 클래스명은 따로 변수를 만들어 저장해 준다.

 

이 방법은(className 사용하는 것) 만약 h1에 기존의 클래스가 있었다면 그것을 새 클래스로 교체해 버린다.

물론 기존 클래스 + 새 클래스를 입력해도 되지만 클래스가 늘어나면 늘어날수록 번거로워질 것이다.

따라서 classList를 사용하는 것이 좋다.

 

function handleTitleClick(){

  const clickedClass = "active"

  if (h1.classList.contains(clickedClass)) {

    h1.classList.remove(clickedClass)

  } else {

    h1.classList.add(clickedClass)

  }

}

title.addEventListener("click",handleTitleClick);

classList에는 여러 속성들을 사용할 수 있다.

contains는 클래스가 포함되어 있는지 아닌지를 판별할 수 있다.

remove는 말그대로 클래스를 지워주고, add는 추가하여 준다.

이렇게 하면 클래스 전체를 교체하지 않고 특정 클래스만 선택하여 추가 또는 제거할 수 있다.

 

 

classList에는 toggle라는 것도 존재하는데, 이 함수는 위 작업을 이 함수 하나만으로 동작하게 해준다. 위의 코드가 toggle 함수에 담겼다고 생각하면 될 것 같다.

function handleTitleClick(){

  h1.classList.toggle("active")

}

title.addEventListener("click",handleTitleClick);

훨씬 코드가 짧고 깔끔해졌다. (클래스명을 딱 한 번만 사용하기 때문에 여기서 변수는 제거해줘도 무방하다.)