DOM / DOM Functions / Events handlers / if-else, and, or, === / 분리
1. DOM (Document Object Module)
자바스크립트는 html 에 있는 모든 요소를 가지고 온다. 그리고 그걸 객체화 해서
접근할 수 있게끔 한다. 한번에 보면 무슨말인지 몰라도 밑에 예시들을 보면 무슨말인지 이해 될듯
2. DOM Functions
이전에 만들었던 calculator.plus(), console.log() 과 같이 함수를 만들어 쓸 수도 있지만
브라우저에서 기본 제공하는 더 많은 함수들이 있다.
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<h1 id="title">This Works!</h1>
<script src="index.js"></script>
</body>
</html>
이런 html 페이지가 있다.
const title = document.getElementById("title");
title.innerHTML = "Hi! From JS";index.js 에 이런 내용을 적었다. html 에 있는 <h1> 의 id 를 title 이라고 선언한 것을
자바스크립트가 document (object)를 통해 getElementById 라는 객체(함수) 를 통해 title 을 가져 오고
내용을 바꿨다.
이렇게 HTML 을 DOM 객체로 바꿀 수 있다는걸 확인 했다.
3. Modify DOM
위에서 한번 document 를 통해 title (h1 id) 을 접근한 적이 있다.
...
<body>
<h1 id="title">This Works!</h1>
<script src="index.js"></script>
</body>
...const title = document.getElementById("title");이것처럼 innerHTML 같은 다른 객체 친구들이 뭐가 있을까?
console.dir(title);
title.style.color = "red"
자바스크립트로 HTML을 수정할 수 있는지 확인 했다!
4. document.querySelector
노드의 첫 번째 자식을 반환한다. 무슨말이냐면 document 로 가서 모든 자식들 중에서 찾는다.
지금까지는 document.getElementById("title") 으로 id 를 명시해서 사용했지만 이젠 이건 안쓰고
querySelector 를 쓸거다!
const title = document.querySelector("#title");은 id 로 title 을 찾는다는 거고
const title = document.querySelector(".title");은 class 로 title 을 찾는다는 거다.
5. Event
자바스크립트로 위에서 html과 css를 접근해서 수정해보았다. 하지만 자바스크립트는
html과 css를 위한것보다 이벤트에 반응하기 위해서 만들어졌다.
이벤트란? 웹사이트에서 발생하는 것들! click, submit, load, 등.
우린 이걸 중간에서 가로챌 수 있다!
const title = document.querySelector("#title");
function handleClick(){
title.style.color = "blue";
}
title.addEventListener("click", handleClick);이렇게 자바스크립트에서 html에서 id 가 title 에 대한거에 "click" 이벤트를 핸들링해보자
만들어놓은 함수 handleClick() 을 쓸껀데 단, addEventListener 2번째 인자에
handleClick() 이라고 쓰면 안된다!! handleClick 이라고 써야 한다.
클릭 이벤트를 감지했다가 클릭 이벤트가 오면 함수 실행 -> handleClick
가 아니라 감지 그딴거 말고 바로 즉시 그 함수를 실행시켜라 -> handleClick()
title.addEventListener("click", handleClick); // 이벤트 연결
title.addEventListener("click", handleClick()); // 즉시 함수 호출
6. if-else / and, or / ===
모든 프로그래밍 언어 공통이다. 조건문. 걍 똑같다. condition 이 참이면 첫번째 블록. 아니면 else
if(condition){
block
} else {
block
}else if 도 같다. 조건에 예를들어 if(10 > 5) 처럼 부등호 사용하는것도 같고.
그리고 && (AND) 연산자. if( (20 > 5) && (10 < 7) )같은 둘다 참이여야 하는 거
또, || (OR) 연산자도 같다.
하지만, === 연산자도 있었다.. == 2개가 아니라 === 3개라고? 차이점은 무엇일까?
1] == 는 서로 비교하는 대상의 타입이 다르면 형변환 해서 값을 비교한다.
2] === 는 서로 비교하는 대상의 타입도 고려하고 값도 고려한다.
2 == '2' // true
1 == true // true
0 == false // true
2 === '2' // false
1 === true // false
0 === false // false
== 보다는 좀 더 정확한 비교 판단을 위해 === 을 권장한다.
7. if-else + event handler
한번 위에서 배운 if-else 문과 함께 클릭 이벤트를 감지해서 클릭 했을 때마다 색을 바꿔보자
아래 사진처럼 남색 This Works! 를 클릭하면 , 회색 This Works! 로 색 변환. 또 클릭하면 반대로. 무한반복
const title = document.querySelector("#title");
const BASE_COLOR = "rgb(52, 73, 94)"; // 이렇게 써도 되고
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;
}
}
// 처음 실행하면 BASE_COLOR 로 셋팅 + 클릭 이벤트 감지
function init(){
title.style.color = BASE_COLOR;
title.addEventListener("click", handleClick);
}
init(); // 초기화
그렇다면 저 addEventListener 안에 있는 "click" 처럼 또 무슨 기능들이 있어?
developer.mozilla.org/ko/docs/Web/Events
이벤트 참조
DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가
developer.mozilla.org
8. 분리
지금까지 했던 방식은 별로 추천 하지 않는 방법이다. (그런데 왜한거냐)
자바스크립트에서 CSS, HTML 여기저기 건드리는게 아니라 HTML은 HTML 파일에서만 작업하고
CSS 는 CSS 파일에서만 작업하고.. 자바스크립트는 로직만 담당하게.
무슨말이냐면 자바스크립트에서 title.style.color = "red" 처럼 직접 건드는
이런 나쁜 행동을 안하겠다는 뜻이다. 그럼 색상 바꿀라고 하는데 어떻게 바꿔?
한번 해보자
// index.css
body{
background-color: peru;
}
h1{
color: #34495e;
}
.clicked {
color: #7f8c8d;
}css 파일에 clicked 라는 클래스가 있다 색상을 정의해놨네 (#7f8c8d)
// index.html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<h1 id="title">This Works!</h1>
<script src="index.js"></script>
</body>
</html>
뭘 할거냐면 밑에 id="title" 옆에다가
자바스크립트의 로직을 통해 class="clicked" 를 넣었따 뺐다 하고 싶다
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked"; // css 에 있던 class 명칭
function handleClick(){
const currentClass = title.className; // 클릭하면 현재 class name 가져오고
if(currentClass !== CLICKED_CLASS){ // 비교해서 다르면
title.className = CLICKED_CLASS; // 넣어주고
} else {
title.className = ""; // 같으면 빼주고 (공백으로)
}
}
function init(){
title.addEventListener("click", handleClick);
}
init(); 
근데 이건 너무 1차원적이라 이미 기존에 class 가 입혀져 있으면 ...
classname = "" 으로 바꿔버리면 기존에 있던 class 도 같이 없어질꺼자너.....
그래서 아래와 같이 바꾸면 된다. 위에서는 너무 직접적으로 className 을 변경했다면
classList 라는 객체를 이용해서 조심스럽게(?) 클래스 리스트에 넣었다 뺐다 한다.
물론 전에 클래스 리스트에도 포함되어 있는지 contains 를 사용했고
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked"; // css 에 있던 class 명칭
function handleClick(){
const hasClass = title.classList.contains(CLICKED_CLASS); // classList 에 clicked 가 contain 해있는지?
if(!hasClass) {
title.classList.add(CLICKED_CLASS); // 없으면 classList 에 clicked 클래스만 넣고
} else {
title.classList.remove(CLICKED_CLASS); // 있으면 조심스럽게 clicked 클래스만 빼고
}
}
function init(){
title.addEventListener("click", handleClick);
}
init();
근데.. 더 간편하게 토글 이라는 것을 이용할 수 있다. 있는지 체크해서 있으면 add, 없으면 remove
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked"; // css 에 있던 class 명칭
function handleClick(){
title.classList.toggle(CLICKED_CLASS); // 이 한줄이면 된다 ㄷㄷ
}
function init(){
title.addEventListener("click", handleClick);
}
init();
developer.mozilla.org/en-US/docs/Web/API/Element/classList
Element.classList
The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.
developer.mozilla.org