[JavaScript] #2.7 DOM - If else - Function practice part Two - className, classList (#코딩공부)
<복습>
https://wook-2124.tistory.com/79
[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://youtu.be/NUh9afZ5xUs <복습> https://wook-2124.tistory.com/75 [JavaScript]..
wook-2124.tistory.com
<준비물>
Online IDE, Editor, and Compiler - Fast, Powerful, Free
Repl.it is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages: Clojure, Haskell, Kotlin (beta), QBasic, Forth, LOLCODE, BrainF, Emoticon, Bloop, Unlambda, JavaScript, CoffeeS
repl.it
Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨
280 handpicked colors ready for COPY & PASTE
flatuicolors.com
https://developer.mozilla.org/ko/docs/Web/API/Element/className
Element.className
className 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/API/Element/classList
Element.classList
Element.classList는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다.
developer.mozilla.org
<코드기록>
// JavaScript에서 CSS가 하는 일까지 겹쳐서 하고싶지 않음
// 때문에 style.css에서 h1 자체의 color를 지정하고
// index.html에서 class="clicked"를 만들어 따로 color를 지정함
// https://flatuicolors.com/ 에서 원하는 색깔 가져오기
body {
background-color: #ecf0f1;
}
h1 {
color: #34495e;
}
.clicked {
color: #8e44ad;
}// const로 CLICKED_CLASS를 "clicked"라고 지정함
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {}
function init() {
title.addEventListener("click", handleClick);
}
init();
// !== 같지 않다면 (===의 반대)
// 만약(if) currentClass가 "clicked"가 아니라면(!==)
// title의 className을 "clicked"라고 부여하고
// 그렇지 않으면(else) "_", 빈칸으로 두기
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 = "";
}
}
function init() {
title.addEventListener("click", handleClick);
}
init();// button의 cursor(커서)를 pointer로 정하고
// index.html의 <h1>에 class="button"을 추가하면 title에서의 마우스 커서가 pointer로 바뀜
// 하지만 "click" event가 발생하면 class="clicked"로 바뀌면서 class="button"이 없어짐
body {
background-color: #ecf0f1;
}
.button {
cursor: pointer;
}
h1 {
color: #34495e;
transition: color 0.5s ease-in-out;
}
.clicked {
color: #8e44ad;
}
<!DOCTYPE html>
<html>
<head>
<title>JH</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1 id="title" class="button">This works!</h1>
<script src="script.js"></script>
</body>
</html>// "click" event가 발생해도 index.html <h1>을 보면 class="button clicked"로
// button 뒤에 clicked가 add(추가)되는 것을 알 수 있음
// 때문에 button class의 pointer도 그대로이고
// 다시 "click" event가 발생하면 clicked가 remove됨
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {
const currentClass = title.className;
if (currentClass !== CLICKED_CLASS) {
title.classList.add(CLICKED_CLASS);
}
else {
title.classList.remove(CLICKED_CLASS);
}
}
function init() {
title.addEventListener("click", handleClick);
}
init();
// classList의 method인 contains 객체 이용하기
// value가 contain(포함)됐는지 확인하는 역할
// hasClass는 title의 classList에 contains(CLICKED_CLASS, 즉 "clicked"를 포함)하고 있는지 보는 역할
// 때문에 만약(if) hasClass를 가지고 있지 않다면(!) "clicked"를 add(추가)해주고, 갖고 있다면 remove(제거)함
// 위 코드에서 조금 더 예쁘게 바뀜
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {
const hasClass = title.classList.contains(CLICKED_CLASS);
if (!hasClass) {
title.classList.add(CLICKED_CLASS);
}
else {
title.classList.remove(CLICKED_CLASS);
}
}
function init() {
title.addEventListener("click", handleClick);
}
init();
// classList의 method인 toggle 객체 이용해서 요약하기
// add(추가)기능과 remove(제거)기능이 다 들어가있음
// 3단계로 나눠서 같은 기능을 하는 코드를 적어봤는데,
// 이렇듯 과정을 알아야 어떤 원리에 의해 쉽게 코딩할 수 있는지 알 수 있음
// https://developer.mozilla.org/ko/docs/Web/API/Element/classList (MDN 참고하기)
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {
title.classList.toggle(CLICKED_CLASS);
}
function init() {
title.addEventListener("click", handleClick);
}
init();1. stlye.css
JavaScript에서 CSS가 하는 일까지 겹쳐서 하고싶지 않아 style.css에서 <h1> 자체의 color를 지정하고, index.html에서 class="clicked"를 만들어 따로 .clicked으로 color를 지정했다.
https://flatuicolors.com/에서 원하는 색깔 가져오기
Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨
280 handpicked colors ready for COPY & PASTE
flatuicolors.com
2. className
https://developer.mozilla.org/ko/docs/Web/API/Element/className
Element.className
className 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.
developer.mozilla.org
요약하자면 특정 Element의 class 속성의 값을 가져오거나 설정한다.
먼저 const로 CLICKED_CLASS를 "clicked"라고 지정했다.
그리고 만약(if) currentClass(title.className)이 !== CLICKED_CLASS("clicked")와 같지 않다면 (===의 반대), title.className으로 CLICKED_CLASS("clicked")라고 설정하고 그렇지 않으면(else) "_" 빈칸으로 두게끔 function handleClick을 정했다.
"click" event가 발생해서 handleClick이 실행되고 currentClass(title.className)에 "clicked"가 없기 때문에 clicked를 부여하고, class="clicked"를 설정해서 title의 color가 css에서 정한 .clicked의 color로 바뀌었다.
3. transition, cursor
transition으로 color가 0.5초마다 변하게끔 설정했다.
index.html에 class="button"을 추가하고, style.css에서 .button 설정으로 button에 마우스를 갖다대면 cursor(커서)가 pointer로 바뀌게끔 설정했다.
사진에서는 마우스가 보이지 않지만 title에 마우스 cursor를 갖다대면 cursor가 pointer로 바뀌고, Elements로 class='button'이 있다.
하지만 title을 "click"하는 event가 발생하면, class='clicked'로 대체되면서 class='button'이 없어져서 title에 마우스 cursor를 갖다대도 cursor가 pointer로 변하지 않았다.
4. classList - add, remove (method)
https://developer.mozilla.org/ko/docs/Web/API/Element/classList
Element.classList
Element.classList는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다.
developer.mozilla.org
classList는 className과는 다르게 add, remove, toggle, contains등과 같은 method(내장함수)를 갖는다.
classList의 method인 add와 remove를 이용해서 아까와 같이 "clicked"를 add, remove해줬다.
title에 "click" event가 발생해도 button에 대한 마우스 cursor의 pointer도 그대로고, class="button clicked"처럼 button과 clicked가 뒤바뀐 것이 아니라, button뒤에 clicked가 add(추가) 된 것을 알 수 있다.
5. classList - contains (method)
classList의 method인 contains은 지정한 class의 값(value)이 Element의 class에 존재하는지, 즉 포함돼있는지 확인하는 역할이다.
hasClass로 title.classList.contains(CLICKED_CLASS), 즉 title(Element)의 classList에 CLICKED_CLASS("clicked")를 포함하고 있는지 확인하는 hasClass를 const로 정의해줬다.
그렇게 만약(if) hasClass를 가지고 있지 않다면(!) title의 classList에 "clicked"를 add(추가)해주고, 그렇지 않고(else) title의 classList에 "clicked"를 갖고 있으면 remove(제거)해줬다.
6. classList - toggle (method)
classList의 method인 toggle은 add와 remove를 둘 다 갖고있다.
그 길었던 코드를 한 문장으로 줄였다...
toggle은 title의 classList에 CLICKED_CLASS("clicked")가 없으면 class를 add(추가)하고 존재한다면 class를 remove(제거)하는 기능을 한다.
이렇게 className으로 class 자체를 바꾸는 법, classList의 add, remove method를 이용해서 추가, 제거하는 법, classList의 contains method를 이용해서 존재하는지 확인하고 add, remove하는 법, 마지막으로 classList의 toggle을 이용해서 한번에 add,remove를 하는 법까지 총 4가지 방법을 알아봤다.
※ 코로나19 조심하세요!!!!
