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초씩 교차적으로 글색상이 변경됨<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1 id="title" class="clicked">This works!</h1>
<script src="index.js"></script>
</body>
</html>}
h1{
color:#34495e;
transition:color .5s ease-in-out;
}
.clicked{
color:#7f8c8d;
}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();const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick(){
const hasClass = title.classList.contains(CLICKED_CLASS);
if (hasClass){
title.classList.remove(CLICKED_CLASS);
} else {
title.classList.add(CLICKED_CLASS);
}
}
function init(){
title.addEventListener("click", handleClick);
}
init();<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1 id="title" class="btn">This works!</h1>
<script src="index.js"></script>
</body>
</html>body {
background-color:#ecf0f1;
}
.btn{
cursor:pointer;
}
h1{
color:#34495e;
transition:color .5s ease-in-out;
}
.clicked{
color:#7f8c8d;
}toggle 함수를 이용하여 깔끔한 코드로 클릭 반복 가능
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();Last updated