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

PreviousConditional NextMomentum App

Last updated 3 years ago

Was this helpful?

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 함수를 이용하여 깔끔한 코드로 클릭 반복 가능

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