바닐라 JS로 크롬 앱 만들기 (#3)

 

 

JS를 사용하는 이유는 HTML과 상호작용을 하기 위해서다.

HTML의 Element들은 JS를 통해 변경하고 읽을 수 있다.

 

Document

- 브라우저에 이미 존재하는 obejct

- html코드를 JS 관점으로 보고 있는 것이다.

- JS는 html에 접근하고 읽을 수 있을 뿐만아니라 변경 가능하다.

 

console.dir(document)으로 확인가능

console.dir : 객체의 속성을 계층 구조로 출력

console.log : document.body 객체를 출력하면 태그 내용 출력

 

JS로 정보를 가지고 올 수 있는 방법

document 객체와 element 를 가져오는 수 많은 함수들을 이용하는 것이다.

document.getElementById("title"); // html에서 id를 통해 element를 찾아준다.

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

// 값 변경
title.innerHTML = "Got You!";

 

 

element를 가지고 오는 방법

getElementsByClassName() : 많은 element를 한번에 가지고 와야하는 경우 사용 

getElementsByTagName()

querySelector()

 - element를 css방식으로 검색할 수 있다. ( ex. document.querySelector("#title"); )

 - 하나의 element만 return 해준다.

querySelectorAll() : selector 의 조건에 부합하는 모든 element를 return

 

event

: 클릭하거나 마우스가 태그 위로 올라가는 등의 행위 모두 event

 

addEventListener("event 종류", event 발생시 호출할 function);

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

function handleTitleClick() {
	h1.style.color = "blue";
	console.log("title was cli cked!");
}

// click event 발생시 handleTitleClick 함수 실행
h1.addEventListener("click", handleTitleClick);

handleTitleClick() 이렇게 함수를 호출하면 바로 실행.

위에선 클릭 이벤트가 발생했을 때 함수를 실행할 것이므로 중괄호를 제외하고 함수 호출

 

removeEventListener 로 이벤트 제거 가능

 

title.addEventListener("click", handleTitleClick); 를 

title.onclick = handleTitleClick; 으로 변경 가능!

 

window

현재 스크립트가 작동 중인 창을 나타내는 객체

 

resize : 브라우저 창의 크기를 조절할때 발생한다.

function handleWindowResize() {
	document.body.style.backgroundColor = "tomato";
	console.log("I have been resized");
}
 
// 브라우저 창 크기 변화가 있으면 body backgroundColor가 tomato 색으로 변한다.
 window.addEventListener("resize", handleWindowResize);

 

document의 body, head, title 들은 중요하기 때문에 document.body 로 존재

나머지 element 들은 querySelector, getElementById 등으로 찾아야 한다.

 

CSS in JS

 

JS 안에서 style 로 CSS에 접근하여 조작

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

function handleTitleClick(){
  const currenColor = h1.style.color;
  let newColor;
  if(currenColor === “blue”){
	newColor = “tomato”;
  }else{
	newColor = “blue”;
  }
  h1.style.color = newColor;
}

h1.addEventListener(“click”, handTitleClick);

 

class 전체를 교체하는 것이 아닌 원래 상태에 추가하는 방법

✅ classList 

 - element의 class 내용물을 조작하는 것을 허용한다.

 - contains : HTML element의 class에 포함되어 있는지 확인

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

function handleTitleClick(){
	const clickedClass = "clicked";
    
    if (h1.classList.contains(clickedClass)){
    	h1.classList.reomve(clickedClass);
    } else{
    	h1.classList.add(clickedClass);
    }
    	
}

h1.addEventListener(“click”, handTitleClick);

 

✅ toggle

classList에 해당 class가 있는지 확인해서, 있다면 해당 클래스 제거, 없다면 추가해준다.

function handleTitleClick() {
  h1.classList.toggle('clicked');
}

 

 

 

' 노마드 코드 - 바닐라 JS로 크롬 앱 만들기' 공부하면서 정리한 내용입니다.