#2-6 DOM If else Function practice

 

 

if else DOM 사용

function init()

function init() {
	title.style.color = BASE_COLOR;
   	title.addEventListener("click", handleClick);
}
init();

어플리케이션을 초기화 한다.

title 컬러를 if else로 활용하기

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

const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#7f8c8d";

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

누군가 title을 처음으로 클릭 한다면 처음엔 currentColor === BASE_COLOR --> 처음엔 true
true가 작동하면 title.style.color는 OTHER_COLOR가 작동한다. 하지만 다음 작동엔
currentColor === BASE_COLOR은 false가 되면서 else에 있는 BASE_COLOR가 다시 작동한다.
클릭할 때 마다 색이 변한다.(이 것이 로직을 추가하는 방법 중 하나)

자바스크립트가 만들어진 이유

클릭, 크기조절, 드래그, 더블클릭, 마우스엔터 등의 이벤트 효과를 사용하기 위해서

이벤트의 근원을 알고 싶다면 MDN 사이트를 활용하자( MDN 클릭 시 사이트 이동 )

offline / online 이벤트 사용하기

function handleOffline() {
	console.log("Bye bye");
}

function handleOnline() {
	console.log("Welcome back");
}

window.addEventlistener("offline", handleOffline);
window.addEventlistener("online", handleOnline);

인터넷 작동을 on 시키면 console에 Welcome back이 출력되고,
인터넷 작동을 off시키면 console에 Bye bye가 출력된다.