[Vanilla JS]노마드 코더 #2 2.4까지 내용에서 배운 것

1. title 활용

 

<h1>으로 작성해준 제목에 "title"이라는 id를 붙였다.

 

이 title을 JS를 이용해 변경해보는 방법을 배웠다.

 

(1) getElementById() 이용

console.title = document.getElementById("title");

title.innerHTML = "Hi! From JS";

<h1> 부분(id = title인 부분)이 "Hi! From JS"로 바뀐 것을 알 수 있다.

즉 Java Script를 이용해 html을 수정할 수 있다는 것이 핵심이다.

 

 

(2) querySelector() 이용

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

title.innerHTML = "Hi! From JS";

 

이 코드의 결과는 위와 동일하다.

 

 

document =객체

querySelector("#title"): id가 "title"인 첫 번째 값을 찾는다.

quertSelector(".title"): class 이름이 "title"인 첫 번째 값을 찾는다.

 

 

querySelector 상세 설명

 

 

 

 

(2) Event

(1) resize

이 코드는 아래의 그림처럼 윈도우의 크기를 마우스로 조정할 때마다 console에 resize되는 event 객체를 발생시킨다.

handleResize함수를 호출할 때, event가 발생할 때에만 호출되도록 설정해야 한다.

window.addEventListener("resize", handleRezise())와 같이 작성하면 함수가 조건에 관계 없이 항상 호출되므로,

"()"를 작성하면 안 된다.

 

 

(2) handClick

이 코드는 웹페이지에서 title을 클릭하면 색깔이 파란색으로 바뀌도록 작성한 것이다.

 

실행 결과

클릭 전

 

클릭 후

 

아직 다시 클릭하면 색깔을 되돌리는 코드는 작성하지 않았다.