Function Practice

1. DOM과 조건문 (if~else)

1-1. JS코드만으로 Style과 클릭변경 효과주기

기본 JS코드

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

const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "red";

function handleClick(){
  const currentColor = title.style.color;
  if (currentColor === BASE_COLOR){
    title.style.color = OTHER_COLOR;
  } else {
    title.style.color = BASE_COLOR;
  }
}

function init(){ //어플리케이션 초기
  title.style.color = BASE_COLOR;
  title.addEventListener("click", handleClick); //원할 때 handleClick 호출
}

init(); //타이틀을 클릭할 때 마다 회색-빨강 교차적으로 글색상이 변경됨

1-2. CSS에 Style을 주어 JS코드 깔끔히 정리

JS

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

function handleClick(){
  const currentClass = title.className;
  if (currentClass !== CLICKED_CLASS){
    title.className = CLICKED_CLASS;
  } else {
    title.className = ""; //Blank
  }
}

function init(){
  title.addEventListener("click", handleClick);
}

init(); //타이틀을 클릭할 때 마다 회색-진회색 0.5초씩 교차적으로 글색상이 변경됨

HTML

CSS

1-3. 토글함수를 이용한 가장 깔끔한 코드

JS(toggle)

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

const CLICKED_CLASS = "clicked";

function handleClick(){
  title.classList.toggle(CLICKED_CLASS);
}

function init(){
  title.addEventListener("click", handleClick);
}

init();

JS(before)

HTML

CSS

toggle 함수를 이용하여 깔끔한 코드로 클릭 반복 가능

Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨flatuicolors.com

2. Online / Offline (와이파이 껐다 켜기)

search : javascript dom event mdn

function handleOffline(){
    console.log("Byebye");
}
 
function handleOnline(){
    console.log("Welcome back");
}
 
function init(){
    window.addEventListener("offline", handleOffline);
    window.addEventListener("online", handleOnline);
}
init();