#2-6 DOM If else Function practice

if 를 이용한 DOM 요소 조작 함수

엘리먼트에 색상값을 확인한후 색상이 같은지 확인 한 후 그후, 다른색으로 변경할 것이다.

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

const BASE_COLOR = "black";
const OTHER_COLOR = "#7f8c8d";

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);
}
init();

handleClick 함수를 #title 엘리먼트에 콜백함수를 추가 하였다.
만약 title의 색상이  OTHER_COLOR 변수의 색상값과 같은지 확인지 확인한 후 만약 값이 다르다면 색상 값을 변경한다.

현재 색상과 OTHER_COLOR 색상이 다르기때문에 색이 바뀐다.

자바스크립트의 이벤트

자바스크립트에는 많은 이벤트가 있는데 이 이벤트들을 mdn 에서 검색 할 수 있다.
javascript dom event mdn을 검색하면
https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

MDN 웹페이지가 나온다.

이벤트 목록중 온라인 이벤트와 오프라인 이벤트가 있다.

'online, offline' 이벤트

function handleOffline(){
	console.log("offline");
}
function handleOnline(){
	console.log("offline");
}

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

온라인환경과 오프라인 환경을 이벤트로 감지를 해주는데 네트워크를 껐다가 키면
해당 사진과 같은 결과물이 나온다.

결과값