🗓 진행일: 3월 10일
📎 3.0 ~ 3.5
3.0 The Document Object
document는 HTML을 JavaScript 관점에서 보여주고 있음
JavaScript는 이미 HTML과 연결되어있음
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Hello! From HTML!</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>app.js
document.title = "Hello! From JS!";3.1 HTML in Javascript
HTML을 JavaScript에서 다룰 수 있게 한다 (읽기, 수정)
index.html
<body>
<h1 class="hello!" id="title">Grab me!</h1>
<script src="app.js"></script>
</body>app.js
const title = document.getElementById("title");
//console.dir(title); // element 요소를 더 자세하게 가져오는 방법
title.innerText = "Got you!";이렇게 해서 title 변경해보기
3.2 Searching For Elements
index.html
<body>
<div class="hello">
<h1>Grab me! 1</h1>
</div>
<div class="hello">
<h1>Grab me! 2</h1>
</div>
<div class="hello">
<h1>Grab me! 3</h1>
</div>
</body>- getElementsByClassName: 클래스 이름으로 array 형식으로 가져오기
- getElementsByTagName: 태그명으로 array 형식으로 가져오기
- 그리고 querySelector: 클래스와 아이디, 태그로 가져오게 할 수 있음
- querySelectorAll: 괄호 내에 해당하는 것 모두 가져오기
app.js
const title = document.querySelector(".hello h1");
// const title = document.querySelectorAll(".hello h1:first-child");
// element를 css 방식으로 조회하기 (hello라는 클래스 내 h1 가져오기)
// 못 찾으면 null 반환
title.innerText = "test";
console.log(title);3.3 Events
document는 HTML이 app.js를 load하기 때문에 존재하는 것이다
와 여기서 이벤트 리스너 배우네;;
index.html
<body>
<div class="hello">
<h1>Click me!</h1>
</div>
</body>app.js
const title = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
title.style.color = "blue";
}
title.addEventListener("click", handleTitleClick);
// title이라는 html을 찾아오고,
// 이벤트 리스너를 추가하고,
// click 이벤트를 읽게 했어
// 그리고 이벤트가 들어오면 어떤 함수를 실행해야 하는지 전달 (중요!! 여기서 () 이거 넣으면 실행 돼)3.4 Events part Two
이벤트 검색 방법: h1 html element mdn
(mdn에 찾아보래 mozila...?)
그리고 Web APIs가 붙은 애들로 찾을 것~~
app.js
const title = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
title.style.color = "blue";
}
function handleMouseEnter() {
title.innerText = "Mouse is here!";
}
function hanleMouseLeave() {
title.innerText = "Mouse is gone!";
}
title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", hanleMouseLeave);3.5 More Events
app.js
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
h1.style.color = "blue";
}
function handleMouseEnter() {
// console.log("mouse is here!");
h1.innerText = "Mouse is here!";
}
function hanleMouseLeave() {
h1.innerText = "Mouse is gone!";
}
function handleWindowResize() {
document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy() {
alert("copier!");
}
function handleWindowOffline() {
alert("SOS no WIFI");
}
function handleWindowOnline() {
alert("ALL GOOD");
}
h1.addEventListener("click", handleTitleClick);
h1.addEventListener("mouseenter", handleMouseEnter);
h1.addEventListener("mouseleave", hanleMouseLeave);
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);
자존감은 일상의 성실함으로부터 온다