📌 목차

✨ 바닐라 JS로 크롬 앱 만들기

💁🏻

1. INTRODUCTION
2. WELCOME TO JAVASCRIPT
3. JAVASCRIPT ON THE BROWSER
4. LOGIN
5. CLOCK
6. QUOTES AND BACKGROUND
7. TO DO LIST
8. WEATHER

JavaScript on the browser

3.0 The Document Object

JavaScript가 어떻게 브라우저를 움직이는지 알아볼거야. 그러기 위해서는
JavaScript와 Html이 어떻게 상호작용하는지 알아봐야해

모든 것들은 document로 부터 시작해!
document는 여러분의 web site를 의미하거든.

document는 Html의 내용을 Javascript의 관점으로 보여줘.
document.title = "Momentum"

HTML은 접착제 같은 것. HTML이 CSS와 JavaScript를 가져오지.

우리는 JavaScript가 HTML에 이미 연결 돼 있다는 것을 배웠어.
JavaScript는 여러분의 HTML에 접근하고 읽을 수 있어.
그리고 HTML의 Element들을 JavaScript를 통해 변경할 수도 있어.

이 부분은 HTML,JS의 연결을 이해하는 아주 중요한 부분이지만
처음 노마드 코더 챕터 3수업으로 들었을 때는 이해하기가 아주 어려웠다.
> HTML,JS,브라우저의 작동 방식을 이해하는 데는 드림코딩 앨리님의 유투브를 먼저 듣고
이해하는 것이 확실히 도움이 되었다.
나같은 초보자라면 먼저 드림코딩 강의 듣고오는 것을 추천.

3.1 HTML in JavaScript

console에서
document.getElementById("title") 로
JavaScript로 id가 title인 <h1>태그를 가져왔어.

이걸 App.js에서 가져오게하려면
js 파일에

const title = document.getElementById('title')

라고 써야해.
그리고, h1.title 하나에서 엄청 많은 값을 읽어올 수 있어.
이 모든 것들은 HTML에서 표현될 수 있는거야.
여기서 JavaScript가 HTML의 element를 가져와서 브라우저에서 보여주는 이 연결이 아주 중요한거야.
우리는 HTML에서 element들을 가지고 와서, JavaScript를 통해 element들을 변경할거야.

3.2 Searching For Elements

querySelector 과 querySelectorAll을 쓰는게 좋다.
querySelector는 element를 CSS방식으로 검색할 수 있어.
예를 들면 h1같은걸 가져올 수 있지.

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

querySelector을 쓸 때는 hello가 class name이라는 것과 그 안의 h1을 명시해줘야 해.
그리고 querySelector은 해당되는 elements중 첫번째만 가져오니까
다 가져오고 싶으면 querySelectorAll을 써야해.

3.3~5 Events

element의 내부를 보고 싶다면
console.log 대신 console.dir를 사용하면 돼.

우리가 JavaScript에서 대부분 작업할 일은, Event를 listen하는 거야.

첫번째로 click을 listen해보자..!
먼저 title에 eventListener을 추가할거야
eventListener은 말그대로 Event를 listen하는거야.
하지만 Javascript에 무슨 Event를 listen하고 싶은지 알려줘야 해

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

function handleTitleClick() {
  console.log('title was clicked!')
  title.style.color = 'blue'
}

title.addEventListener('click', handleTitleClick)

1. querySelector로 title element를 찾고
2. addEventListener에서 click event를 listen하도록 하고,
3. click event가 발생하면, 두번째 인수(argument)인 handleTitleClick function이 실행되는거야

listen하고 싶은 event를 찾는 가장 좋은 방법은
구글에 찾고 싶은 element의 이름, 예를들어 h1 html element mdn을 검색하는거야.
우리는 JavaScript의 element를 원하니, 링크에 Web APIs라는 문장이 포함된 페이지를 찾아. 왜냐면 이건 JS관점의 HTML Heading Element란 의미야.

console.dir을 입력해서 찾은 property중에 on이 붙은 것도 다 Event야.
쓸때는 on을 떼고 쓰면 돼

title.addEventListener('mouseenter', handleMouseEnter)
title.addEventListener('mouseleave', handleMouseLeave)

title.onclick = handleMouseEnter;
title.addEventListener(“mouseenter” , handleMouseEnter);

위에 두 코드는 동일하나 addEventListener를 선호하는 이유는
removeEventListener을 통해서 event listener을 제거할 수 있기 때문!

document에서 body,head,title 은 중요해서 언제든

document.body 로 가져올수있지만
div나 h1 등 element 들은 querySelector / getElementById 같은걸로 찾아야 해.
document.querySelector(“h1”)

3.6~8 CSS in JS

JavaScript는 HTML을 변경할거고 CSS는 HTML을 바라보고 있지.

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

function handleTitleClick() {
	if (h1.className === "active") {
	  h1.className = "";
	} else {
	  h1.className = "active";
	}

	h1.addEventListener("click", handleTitleClick);

===는 값과 타입이 일치하는지 비교하는 거고
=는 뒤에 오는 값을 앞에 써진 값에 할당하는거야.

raw string 대신 const를 지정해주자.

className을 덮어쓰지 않고 css를 추가하고 싶다.
우리가 해줘야 하는건, Javascript로 모든 classname을 변경하지 않는거야

toggle

toggle은 h1의 classList에 clicked class가 이미 있는지 확인해서
만약 있다면, toggle이 clicked를 제거해주고
만약 없다면, clicked를 classList에 추가해줄거야.

const h1 = document.querySelector('div.hello:first-child h1')

function handleTitleClick() {
  const clickedClass = 'clicked'
  if (h1.classList.contains(clickedClass)) {
    h1.classList.remove(clickedClass)
  } else {
    h1.classList.add(clickedClass)
  }
}
//위의 긴 함수를 toggle을 사용하면 밑에처럼 한줄로 줄일 수 있어. 짱이야~

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

h1.addEventListener('click', handleTitleClick)