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

#3.0 The Document Object

 

HTML은 접착제와 같은 역할을 한다. HTML이 CSS와 JavaScript를 가져오기 때문이다.

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

즉, HTML의 Element들을 JS를 통해 변경하고 읽을 수 있다는 것이다.

 

콘솔에 document를 입력하면 작성한 HTML을 가져올 수 있다.

document는 정말 많은 것들이 들어있는 object이다.

JS에서 document는 HTML를 뜻한다.

 

원래의 title

title을 바꿀 수 있는 방법은 몇개의 방법을 보자면

 

첫번째는 HTML코드에서 직접적으로 바꿔주는 방법이 있고

 

콘솔창에 document.title = "Hi"라는 코드를 입력해주어도 document.title이 바로 바뀌는 것을 확인할 수 있다.

하지만 새로고침을 하면 다시 Momentum app으로 돌아간다.

 

 

JS에서는 "Hello! From JS!"로 타이틀을 설정하고, HTML에서는 "Hello! From HTML!"로 설정할 경우

타이틀은 어떤 것으로 변경될까?

 

타이틀은 JS에서 설정한 "Hello! From JS!"로 변경됐다! 즉, JS로 HTML를 변경했다.

JS는 HTML에 접근하고 읽을 수 있다.

 

#3.1 HTML in JavaScript

 

getElementByID()는 string을 전달 받는 함수이다.

 

위 코드를 작성한 뒤 저장하고 새로고침해서 콘솔창을 확인해보면

다양한 document가 나온다.

console.log(title);이라고 해도 되지만 오른쪽 사진과 같이 자세한 결과를 가지기 위해서는

console.dir(title); 이라고 코드를 작성해줘야한다.

 

그 중에서 innerText를 변경하는 방법

 

현재 innerText는 "Grab me!"라고 되어있다. 

 

코드를 작성하고 저장, 새로고침을 하고 브라우저에서 확인해보면

innerText가 "Grab me!"에서 "Got you!"로 변경된 것을 확인 할 수 있다.

방금 innerText는 HTML이 아닌 JS에 의해서 변경되었다.

 

그게 가능할 수 있었던 이유는

HTML에 id를 추가했고 JS에서 getElementById라는 함수로  element를 가져왔기 때문이다.

getElementById()라는 함수로 id를 이용해 element를 찾는다면

element에서 어느 항목이든 가져올 수 있고 변경할 수 있다.

 

#3.2 Searching For Elements

 

HTML에 <h1>을 5개 만들고 콘솔창을 킨다면 nulld의 innerText 프로퍼티를 바꿀 수 없다는 에러가 발생한다.

 

이러한 에러가 발생하는 이유는

현재 코드 내에 어떤 값이 null인데 아무것도 없는 것(null)의 innerText를 접근하려고 했기 때문이다.

 

hello cass를 사용하는 방법

JS에서 코드를 작성 할 때, HTML에 있는 ClassName과 같아야한다.

새로고침을 하고 콘솔창을 보면 모든 h1 elements가 나온다.

 

getElementsByClassName는 array를 가져다준다.

getElementsByTagName 또한 array를 가져다준다.

 

querySelector은 CSS selector을 사용해서 검색할 수 있다.

위 코드는 첫번째로 검색된 하나의 element만을 반환해준다.

만약 이 조건에 맞는 모든 element를 찾고 싶다면 querySelectorAll 을 사용하면 된다.

 

id를 통해서 찾고 싶다고 하더라도, querySelector을 활용해서 찾을 수 있다.

두 코드는 같은 일을 한다!

차이점을 찾아보자면 h1을 가지고 오고 싶거나, hello란 id 하위의 form을 가져오고 싶을 때는

getElementById를 사용할 수 없다.

 

hello라는 class 안의 h1을 가져오고 innerText를 바꾸는 코드를 작성해보았다.

 

#3.3 Events

 

왼쪽 사진과 같은 코드를 통해서 콘솔창에서 h1를 찾아 자세한 항목을 보면

on으로 시작되어있는 많은 property가 보이는데 이 모든게 Event이다!

 

style 안에 있는 color이 처음에 아직 설정하지 않은 기본 상태이기 때문에 공백으로 설정되어있다.

 

왼쪽 코드를 통해서 h1.style 안에 있는 color를 blue로 설정해주면

브라우저에 있는 Grab me!라는 글자의 색도 파랑색으로 바뀐다.

즉, h1의 style을 JS에서 변경할 수 있다는 뜻이다.

 

Event는 뭘까?

사용자가 click을 하면 그게 event이다! h1위로 마우스가 올라가도  event이다!

만약 사용자가 입력을 끝내거나, 자신의 이름을 적거나, enter를 누르는 것 모두가event이다!

 

모든 event들을 JS는 listen 할 수 있다!

 

Click listen

 

첫번째로 HTML element를 JS로 가져온다.

 

title에 eventListener을 추가한다.

eventListener은 말 그대로 event를 listen하는 것이다. 이때 JS에 무슨 event를 listen하고 싶은지 알려줘야한다.

모든 event를 알고 싶은게 아니라 단 하나의 event만을 알고 싶기 때문이다.

위 코드는 click event에 대해서 listen하는 코드이다!

코드의 역할은 JS에서는 title을 지켜보다가 누군가 title을 click하는 것을 listen할 것이다.

 

 

누군가 title을 click했을 때 무언가를 해줘야하기에 handleTitleClick라는 함수를 정의해주었다.

Grab me1!를 누르면 코드를 짜준대로 title was clicked!라는 문구가 콘솔에 출력된다.

 

콘솔을 누르면 누를 때마다 콘솔창 앞에 숫자가 하나씩 늘어나면서 몇번 눌렀는지를 확인할 수 있다.

 

#3.4 Event part Two

 

마우스가 title위에 올라갈 때, click은 하지 않고 그냥 위에 위치할 때의 event를 listen 해볼 것이다.

그 event는 mouseenter이라고 불리는 event이다.

 

Grab me1! 위에 마우스를 올려두면 콘솔창에  "mouse is here!" 이라는 문구가 출력된다.

 

 

코드를 작성하고 브라우저를 새로고침 했을 때의 기본적으로 보이는 화면이다!

 

Grab me1! 위에 마우스를 가져가면 콘솔창에 뜨는게 아닌 글씨가 바뀌는 것을 확인할 수 있다!

 

마찬가지로 마우스를 다른 곳에 옮기면 콘솔창에 Mouse is gone!이라는 문구가 출력되는게 아니라

innerText가 바뀐 것을 확인할 수 있다.