JS: 노마드코더 3강 정리

1. The Document Object & HTML in JS

1) Document

    : Javascript기준 HTML문서를 의미함, document 객체는 JS에서 HTML파일을 불러 올 수 있도록 도움을 주는 역할을 함

-> 사용예시

• document.getElementById(“idName”)
  : HTML에 있는 id를 불러올 수 있음

+)

• title(위에서 값을 받은 변수명).innerText = “got you”
  : innerText는 Element 내에서 사용자에게 '보여지는' 텍스트 값을 읽어옴

2) Selector(?)

1) getElementsBy____()

• getElementsByClassName()
  : class속성인 element를 가져옴(array 반환)

• getElementsByTagName()
  : 태그 이름과 값을 가져옴(array 반환)

• getElementById(“idName”)
  : id속성인 element를 가져옴, 하나의 값

2) querySelector/querySelectorAll
   : 가장 많이 사용함, css셀렉터처럼 사용할 수 있어 간편하고 유용함

• querySelector
  : element를 CSS selector방식으로 검색할 수 있음, 동일한 속성이 있다면 단 하나의 element를 return함
  ex) document.querySelector("h1:first-child");

• querySelectorAll
  : querySelector와 다르게 같은 속성을 가진 같은 tag가 여러개인 경우 사용함, 전부 가져옴

---

2. Event

    : 어떤 행위를 하는 것

element의 내부를 알고 싶으면 console.dir() 기본적으로 object로 표시한 element를 보여줌(전부 js object임)

or

-> 이 중에서 on____의 이름을 가진 것들이 event

1) Event 적용하기

• eventListener   마법의 소라고동
  : 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이 동작하길 원함
//handleTitleClick()이라고 하면 안됨

event 적용법 두 가지

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

→ 둘 다 같은 효과를 내지만 removeEventListener을 통해서 event listener을 제거할수있기 때문에 밑에 있는 listener 방식을 더 선호함

2) windiw object

    : document와 같이 JS내에서 기본적으로 제공하는 객체

• resize event
• copy event
• wifi event

//이런 식으로 사용함
window.addEventListener("resize", handleWindowResize);

3) document.head/title/body

    : 중요한 부분을 차지하고 있기 때문에 document.____의 방식으로 사용가능함

※ h1이나 div 같은 것 tag들은 document.body 이런 식으로 호출이 안돼서 querySelcetor나 getElementById로 호출해야 함

---

3. CSS in JS

style작업에 적합한 도구 == CSS
animation에 적합한 도구 == JS
html 파일은 CSS문서와 JS문서를 import하고 있다.

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

function handleTitleClick() {
	const currentColor = h1.style.color;
    let newColor;
    
    if (currentColor === "blue") {
    	newColor = "tomato";
    } else {
    	newColor = "blue";
    }
    h1.style.color = newColor;
}

h1.addEventListener("click", handleTitleClick);

1) 위 코드 쪼개기
style.css

h1 {
	color: cornflowerblue;
}

.clicked {
	color: tomato;
}

app.js

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

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

h1.addEventListener("click", handleTitleClick);

→ 위 코드를 줄이긴 했지만 "clicked"를 두 번 사용했기 때문에 오류의 위험이 있기에 더 줄여야 함

function handleTitleClick() {
  const clickedClass = "clicked";
  
  if(h1.className === clickedClass) {
  	h1.className = "";
  } else {
  	h1.className = clickedClass;
  }
}

→ 함수 내에 const clickedClass = "clicked";를 새롭게 정의함, 하지만 이렇게 되면 원래 h1의 className이 사라지게 됨.
const clickedClass = "clicked (원래 class 이름)"; 이렇게 선언해야 원래 이름이 사라지지 않음

**class를 추가할 때마다 js랑 css에서 업데이트를 계속 해야 하기에 js로 모든 class name을 변경하지 않도록 함

1) classList

    : class들의 목록으로 작업할수 있게끔 허용함, 반면에 className은 이전 calss를 상관하지않고 교체해 버림

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

→ <h1 class="sexy-font clicked">Click me!</h>

→ <h1 class="sexy-font">Click me!</h>

//위 두 과정을 반복함, 원래의 classname은 보존됨

2) toggle function

class name이 존재하는지 확인
↓
class name이 존재한다면 toggle은 class name을 제거
↓
class name이 존재하지 않는다면 toggle은 class name을 추가

→if-else를 toggle로 구현 가능함

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