#3

#3.0 The Document Object

JavaScript는 HTML을 읽어온다.
JavaScript는 HTML에 접근하고 읽을 수 있게 설정되어 있다.

Browser가 HTML 정보가 아주 많이 들어있는 document라는 object를 전달해준다.
document는 JavaScript에서 HTML에 접근할 수 있는 방법이다.

JavaScript는 HTML과 연결되어 있다.

그래서,
HTML에서 여러 정보를 가져올 수 있고,
JavaScript에서 HTML을 변경할 수 있다.

#3.1 HTML in JavaScript

document는 JavaScript에서 HTML에 접근할 수 있는 방법이다.

document의 함수

• id로 HTML Element 가져오려면?
  document의 getElementById란 함수를 통해 id로 element를 가져올 수 있다.

document.getElementById("elementId")

#3.2 Searching For Elements

querySelector
단 하나의 element를 return 해준다. 없으면 null을 return
여러개 있으면 첫번째 element return

querySelector는 element를 CSS방식으로 검색할 수 있다.

document.querySelector(".hello h1"); //hello class의 h1 elementdocument.querySelector(".hello:first-child h1"); //hello class를 가진 first-child의 h1 element

document.querySelector("#hello"); //id가 hello인 element

querySelectorAll
여러개의 elements return

#3.3 Events

HTML이 app.js를 load한다.
browser가 js에서 document에 접근할 수 있게 해준다.
페이지에서 element를 찾아오고,
해당 element에 event listener를 추가하고,
event가 감지되면(click하거나, 무언가 입력하거나, 엔터를 누르거나 등),
event를 listen하고 event에 반응한다.

const title = document.querySelector(".hello h1");

function handleTitleClick() {
	title.style.color = "blue";
}
title.addEventListener("click", handleTitleClick);

#3.4 Events part Two

#3.5 More Events

window

function handleWindowResize() {
	document.body.style.backgroundColor = "tomato";
}
window.addEventListener("resize", handleWindowResize);

#3.6 CSS in JavaScript

step1. element를 찾아라

step2. event를 listen 해라

step3. 그 event에 반응하라

javascript에서 직접 style 건드리는 코드

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
	if(h1.style.color === "blue") {
    	h1.style.color = "tomato";
    } else {
    	h1.style.color = "blue";
    }
}

h1.addEventListener("click", handleTitleClick);

#3.7 CSS in JavaScript

js는 HTML을 변경
css는 HTML을 바라보고 있다(HTML에 의해 style변경)
style은 css에서 건드리도록 코드를 짜는 게 더 좋다.

js

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
	h1.className = "active"; // className은 class 전체를 replace한다.
}

h1.addEventListener("click", handleTitleClick);

css

h1 {
  color: red;
}

.active {
  color: blue;
}

#3.8 CSS in JavaScript

className과 다르게 classList는 다양한 함수를 활용할 수 있다.

clickedClass="clicked";
h1.classList.contains(clickedClass);
h1.classList.remove(clickedClass);
h1.classList.add(clickedClass);

// toggle은 있으면 remove 없으면 add 해준다!!!
h1.classList.toggle(clickedClass);

Challenge

const title = document.querySelector("h2");

const superEventHandler = {
  handleMouseenter: function () {
    title.innerHTML = "mouseenter";
    title.style.color = colors[0];
  },
  handleMouseleave: function () {
    title.innerHTML = "mouseleave";
    title.style.color = colors[1];
  },
  handleContextmenu: function () {
    title.innerHTML = "contextmenu";
    title.style.color = colors[2];
  },
  handleResize: function () {
    title.innerHTML = "resize";
    title.style.color = colors[3];
  }
};

title.addEventListener("mouseenter", superEventHandler.handleMouseenter);
title.addEventListener("mouseleave", superEventHandler.handleMouseleave);
title.addEventListener("contextmenu", superEventHandler.handleContextmenu);
window.addEventListener("resize", superEventHandler.handleResize);