[JS/노마드코더] 바닐라 JS로 크롬 앱 만들기(3) - 브라우저에서 자바스크립트 사용하기

자바스크립트와 HTML이 어떻게 상호작용하는지 알아보겠습니다.

✔Document 객체

HTML을 자바스크립트 관점에서 객체로 보여줍니다.
콘솔창에 document를 입력하면 html파일을 볼 수 있습니다.

document.title //자바스크립트 코드에서 HTML의 title을 가져올 수 있습니다.
document.title = "New Title" //자바스크립트에서 HTML을 읽고 수정할 수 있습니다.

✔Searching For Elements

document.getElementById("title") //id로 태그를 찾아주며 string을 매개변수로 받는 함수입니다.
>> <h1 id="title">Grab me!</h1>

console.dir() //객체의 데이터를 JSON과 같은 트리 구조로 자세히 보여줍니다.

const title = document.getElementById("title");
title.innerText = "Got you!"; //id로 찾은 태그 안의 여러값들을 자바스크립트에서 변경할 수 있습니다.

const hellos = document.getElementsByClassName("hello"); //ClassName으로 여러개 한번에 가져올 때 사용합니다. hellos에는 배열이 저장됩니다.
hellos. //(X) 객체가 자체가 아니고 array이기때문에 hellos. 으로 사용할 수 없습니다.

const title = document.getElementsByTagName("h1"); //TagName으로 여러개를 한번에 가져올 때 사용합니다. title에는 배열이 저장됩니다.
title. //(X) 위와 같은 이유로 불가능

<div class="hello">
  <h1>Grab me1!</h1>
</div>
<div class="hello">
  <h1>Grab me2!</h1>
</div>

const title = document.querySelector(".hello h1"); //★CSS selector. 하나의 객체만 반환해준다.
//결과 .hello h1 이 여러개라도 ★첫번째★ element만 가져옴.
<h1>Grab me1!</h1>
const title = document.querySelectorAll(".hello h1");
// 다 가져옴
<h1>Grab me1!</h1>
<h1>Grab me2!</h1>

✔Events

const title = document.queryselector("h1");

function handleTitleClick() {
  title.style.color = "blue";
  console.log("title was clicked!");
}
title.addEventListener("click", handleTitleClick); // 방법1
title.onclick = handleTitleClick; // 방법2

EventListener는 함수를 넘겨주고 유저가 click할 경우에 JS가 실행버튼을 대신 눌러주도록하는 것입니다.

• 상황에따라 어떤 event가 필요한지 알아보는 방법
  console.dir(알아보고싶은 element);

앞에 on이 붙어있으면 이벤트 리스너입니다.
이벤트 리스너를 추가할때는 on을 떼고 뒤에 단어를 addEventListener의 첫번째 인자로 전달하면됩니다.

ex) onmouseenter -> addEventListener("mouseenter", );

function handleMouseEnter() {
  title.innerText="Mouse is here!");
}
function handleMouseLeave() {
  title.innerText="Mouse is gone!");
}
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

이렇게 addEventListener를 더 선호한다. 이유는 removeEventListener로 간단하게 제거할 수 있는 장점이 있기때문이다.

더 많은 이벤트들(window)

• resize

function handleWindowResize() {
  document.body.style.backgroundColor = "tomato"; // body, head..이런것들은 querySelector없이도 접근할 수 있다. (기본제공)
}
window.addEventListener("resize", handleWindowResize);

웹에서 윈도우(창) 사이즈가 바뀌는 걸 감지할 수 있습니다.

• clipboard

function handleWindowCopy() {
  alert("copier!");
}
window.addEventListener("copy", handleWindowCopy);

웹에서 클립보드 활동을 감지할 수 있습니다.

• wifi

function handleWindowOffline() {
  alert("no WIFI");
}
function handleWindowOnline() {
  alert("ALL GOOD");
}
window.addEnventListener("offline", handleWindowOffline);
window.addEnventListener("online", handleWindowOnline);

웹에서 와이파이 연결 여부를 감지할 수 있습니다.