Function Practice
1. DOM과 조건문 (if~else)
1-1. JS코드만으로 Style과 클릭변경 효과주기
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코드 깔끔히 정리
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초씩 교차적으로 글색상이 변경됨
1-3. 토글함수를 이용한 가장 깔끔한 코드
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick(){
title.classList.toggle(CLICKED_CLASS);
}
function init(){
title.addEventListener("click", handleClick);
}
init();
2. Online / Offline (와이파이 껐다 켜기)
function handleOffline(){
console.log("Byebye");
}
function handleOnline(){
console.log("Welcome back");
}
function init(){
window.addEventListener("offline", handleOffline);
window.addEventListener("online", handleOnline);
}
init();
Last updated
Was this helpful?