#3 JAVASCRIPT ON THE BROWSER

1.마우스가 title위로 올라가면 텍스트가 변경되어야 합니다.
2.마우스가 title을 벗어나면 텍스트가 변경되어야 합니다.
3.브라우저 창의 사이즈가 변하면 title이 바뀌어야 합니다.
4.마우스를 우 클릭하면 title이 바뀌어야 합니다.
5.title의 색상은 colors 배열에 있는 색을 사용해야 합니다.
6..css 와 .html 파일은 수정하지 마세요.
7.모든 함수 핸들러는 superEventHandler내부에 작성해야 합니다.
8.모든 조건이 충족되지 못하면 ❌를 받습니다.

오늘도 정말 힘들게 챌린지 클리어..생각보다힘들다...

---

3.0 The Document Object

• Javascript 가 HTML와 연결되어있다.
• Javascript에서 HTML 을 불러 올 수도 있고, Javascript에서 수정도 가능하다
• console에 document를 입력하면, 작성한 HTML을 가져올 수 있어.
  document는 브라우저에 존재하는 object(객체)이다
• js를 통해 html를 바꿀 수도 있다. document.title = "Hi";
  모든 것들은 document로부터 시작해. web site를 의미하기 때문.
  document.body를 호풀하면 body항목만 가지고 온다.

---

3.1 HTML in Javascript

-브라우저에서 제공하는 객체(object) 중 document라는 객체는
JS에서 HTML파일을 불러올 수 있도록 도와준다.
document라는 객체 안에 getElementById 라는 함수가 있는데
이 함수의 기능은 해당 HTML의 고유 ID를 추적하여 해당 HTML파일을 찾은뒤에
JS가 해당 ID를 가진 HTML 파일을 보완 수정할 수 있도록 해준다.

---

3.2 Searching For Elements

• getElementsByClassName() : 많은 element를 가져올때 씀(array를 반환)
• getElementsByTagName() : name을 할당할 수 있음(array를 반환)
• querySelector : element를 CSS selector방식으로 검색할 수 있음 (ex. h1:first-child)
  단 하나의 element를 return해줌
  ⇒ hello란 class 내부에 있는 h1을 가지고 올 수 있다(id도 가능함)
• 첫번째 element만 가져옴
• 조건에 맞는 세개 다 가져오고 싶으면 querySelectorAll
  ⇒ 세개의 h1이 들어있는 array를 가져다 줌
• querySelector("#hello); 와 getElementById("hello"); 는 같은 일을 하는 것임
  하지만 후자는 하위요소 가져오는 것을 못하므로 전자를 주로 쓸것이다

---

3.3 Events

• element의 내부를 보고 싶으면 console.dir()
  기본적으로 object로 표시한 element를 보여줌(전부 js object임)
  그 element 중 앞에 on이 붙은 것들은 event임
• event: 어떤 행위를 하는 것
  모든 event는 js가 listen할 수 있음
• eventListener : event를 listen함 → js에게 무슨 event를 listen하고 싶은 지 알려줘야 함
• title.addEventListener("click") : 누군가가 title을 click하는 것을 listen할 거임 → 무언가를 해줘야함

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

function handleTitleClick(){
title.style.color = "blue";
}
title.addEventListener("click",handleTitleClick);

• click하면 handleTitleClick이라는 function이 동작하길 원함
  그래서 handle~ 함수에 () 를 안넣은 것이다
  즉, js가 대신 실행시켜주길 바라는 것이다
• function이 js에게 넘겨주고 유저가 title을 click할 경우에 js가 실행버튼을 대신 눌러주길 바라는 것임( 직접 handleTitleClick(); 이렇게 하는 것이 아니라)
• 함수에서 () 이 두 괄호를 추가함으로써 실행버튼을 누를 수 있는 것

---

3.4 Events part Two

• listen하고 싶은 event 찾는 방법!

1. 구글에 찾고 싶은 element의 이름 검색하기 ex) h1 html element mdn(mozilla developer network)
2. 그 중에서 web APIs 이 포함된 페이지 찾기 (JS 관점의 HTML heading element란 의미)

• console.dir을 통해서 element를 console에 출력시키기 console.dir(title);=> 여기서도 사용가능한 event 찾을 수 있다. property 이름 앞에 on 이 있다면 그게 바로 event listener!!!! 사용할때는 on 빼고 쓰기
  style은 CSS를 통해서 변경되어야 한다.

---

3.5 More Events

• event를 사용하는 두 가지 방법

1. title.addEventListener("click", handleTItleClick);
2. title.onClick = handleTitleClick;
   첫 번째 방법 더 선호.

• window object이용하기

1. resize event
   코드 : window.addEventListener("resize", handleWindowResize);
2. copy event
3. wifi event
   body는 특별해서 document.body 이런 식으로 호출할 수 있음. 하지만
   document.div 이런식으로 가지고 올 수 없음.

---