[JavaScript] #2.6 DOM - If else - Function practice (#코딩공부)

https://youtu.be/UwnBvuFyiBU

---

<복습>

https://wook-2124.tistory.com/77

[JavaScript] #2.5 If, else, and, or (#코딩공부)

 

<준비물>

https://repl.it/

Online IDE, Editor, and Compiler - Fast, Powerful, Free

https://flatuicolors.com

Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조

 

<코드기록>

// init - 어플리케이션을 initialize(초기화)함 (처음에는 무조건 init으로 지정한 색깔이 나옴)
// click event가 발생하면 handleClick function이 실행되고,
// console.log(title.style.color)대로 rgb(52, 73, 94)라는 색깔 명칭이 나옴
const title = document.querySelector("#title");

const BASE_COLOR = "#34495e";

function handleClick(){
  console.log(title.style.color);
}

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


// https://flatuicolors.com 에서 원하는 색깔 가져오기
// currentColor = title.style.color로 설정하고,
// if(만약) 처음 클릭할 때 condition(조건)으로 
// currentColor가 BASE_COLOR 색이라면 OTHER_COLOR로 바뀌게 하고, 
// 그렇지 않다면(else, 첫 번째 클릭 이후) 다시 BASE_COLOR로 바뀌게 설정함
const title = document.querySelector("#title");

const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "rgb(127, 140, 141)";

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


// https://developer.mozilla.org/ko/docs/Web/Events (event 참조 사이트)
// click 대신 mouseenter를 EventListener로 해주면 title에 마우스만 갖다대도 색깔이 변함
const title = document.querySelector("#title");

const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "rgb(127, 140, 141)";

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("mouseenter", handleClick);
}
init();

---

1. init

init은 말그대로 initialize(초기화)하는 것이다. function init으로 정한 title.style.color = BASE_COLOR처럼 처음에는 무조건 #34495e 색깔이 지정이되고, "click" event에 반응한다.

 

"click" event가 발생하면 handle function이 호출되어 console.log(title.style.color)대로 rgb(52, 73, 94), 즉 #34495e 라는 색깔 명칭이 console에 출력된다.

---

2. 색깔 바꾸기

https://flatuicolors.com

Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨

위 사이트에서 원하는 색깔을 가져오면 된다.

 

원하는 색깔을 클릭하면 copy 된다.

---

3. if문으로 적용하기

사이트에서 copy한 색깔을 OTHER_COLOR = #7f8c8d로 새롭게 지정해주고, if문으로 만약(if) 처음 클릭할 때 condition(조건)으로 currentColor가 === BASE_COLOR 색이라면 OTHER_COLOR로 바꿔주고, 그렇지 않다면(else) 다시 BASE_COLOR로 바뀌게끔 설정했다.

 

"click" event가 발생하기 전 BASE_COLOR가 출력되고 있는 사진이다.

 

title "click" event로 handleClick function이 호출되고 currentColor가 BASE_COLOR이므로, if문의 condition(조건)이 ture(참)이 되어 OTHER_COLOR로 지정한 색깔로 바뀌었다.

 

다시 title을 "click"해주면 마찬가지로 handleClick function이 실행되고, if문의 condition(조건)인 currentColor === BASE_COLOR가 false(거짓)이므로 OTHER_COLOR가 다시 BASE_COLOR로 바뀐다.

---

4. mouseenter

"click" event 대신 "mouseenter"를 설정하면 title을 click하지 않고 mouse(마우스)만 갖다대도 handleClick function을 실행해 색깔이 변한다.

 

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조

위 사이트에서 어떤 event들이 있는지 알 수 있다.

---

※ 코로나19 조심하세요!!!!