[Vanilla JS]노마드 코더 #2 Theory에서 배운 것

1. 클릭할 때마다 title 색 바꾸기

const title = document.querySelector("#title");

 

const BASE_COLOR = "white";

const OTHER_COLOR= "blue";

 

function handleClick() {

  const currentColor = title.style.color;    //title의 현재 색 가져오기

  if (currentColor === BASE_COLOR) { title.style.color = OTHER_COLOR; }

  //현재 색이 BASE_COLOR이면 다른 색으로 바꾸기

  else { title.style.color = BASE_COLOR; }

  //현재 색이 BASE_COLOR가 아니면 BASE_COLOR로 바꾸기

}

 

function init() {

  title.style.color = BASE_COLOR;

  title.addEventListener("click", handleClick);    //"click"을 "clicked"로 작성해서 오류를 찾는 데 오래 걸렸다.

}

 

init();

 

적용

클릭 전

다시 클릭

다시 클릭

 

 

 

 

2. 인터넷 연결 표시하기

function handleOffline() {

  console.log("Bye bye");

}

 

function handleOnline() {

  console.log("Welcome back");

}

 

window.addEventListener("offline", handleOffline);

window.addEventListener("online", handleOnline);

 

 

적용

 

첫 번째 줄: 인터넷 연결이 끊겼을 때

두 번째 줄: 인터넷이 다시 연결되었을 때

 

 

 

 

3. 클래스 이름 변경하기

(1) 작성한 html 코드

"This works!"의 클래스 이름을 "btn"으로 지정하였다.

 

 

 

 

(2) 작성한 css 코드

 

 

 

 

(3) 작성한 JS 코드

 

function handleClick() {

  const currentClass = title.className;    //title의 클래스 이름 가져오기

  if (currentClass !== CLICKED_CLASS) { title.className = CLICKED_CLASS; }

  else { title.className = ""; }

}

 

이렇게 코드를 작성했을 때 title을 클릭하면 class 이름이 "clicked"로 바뀐다.

하지만 title을 다시 클릭하더라도 원래의 class 이름으로 돌아가지 못한다.

클릭 전

클릭 후("btn"이 사라진다.)

 

 

이 점을 보완한 코드를 작성하면 다음과 같다.

function handleClick() {

  const hasClass = title.classList.contains(CLICKED_CLASS);

  if (hasClass) { title.classList.remove(CLICKED_CLASS); }
  else { title.classList.add(CLICKED_CLASS); }

}

 

 

클릭 했을 때

"btn" class가 사라지지 않는 것을 알 수 있다.

 

 

위의 코드를 한 줄로 작성하는 것도 가능하다.

function handleClick() {

  title.classList.toggle(CLICKED_CLASS);

}