노마드코더 바닐라JS 로 크롬 앱 반들기 Day2

Javascript on the Browser

3.0) The Document Object

• Javascript로 HTML 변경 가능
• JS는 이미 HTML에 연결되어있음.가져오기 가능

3.1) HTML in Javascript

• document.getElementById("~~~")
  ~~의 이름을 가진 ID들을 호출해줌.

  • HTML을 가져오는 것을 JS 에서 함. 그리고 JS는 HTML의 elements를 가져오는 것이지, HTML그 자체를 보여주는 것은 아님.
    -> 이것은 매우매우 중요한 개념!!

• document에서 엘레먼트를 가져오거나, 엘레먼트를 수정할 수 있음.

3.2) Searching For Elements

• getElementsByClassName("") : 많은 요소들을 한번에 가져올때 사용.
• getElementsByTagName("") :tag 의 요소들을 가져올때 사용.

  • querySelector(".id h1")
    CSS처럼 사용 가능. 단 하나의 Elements를 출력해줌. 여러개가 있어서 단 하나만 출력해줌.
  • querySelectorAll
    조건에 맞는 전체 어레이를 다 가져다줌.

3.3) Events

• event : 브라우저 위에서 일어나는 어떠한 행위를 모두 말함
• element.addEventListener("??") : 누군가 ~~~를 click했을 때 그것을 Listen 해줌.
• element.addEventListener("click",함수);

3.4) Events part 2

• event를 찾고싶다면, mdn(Mozilla Developer Network)에 검색해보는 것이 좋음. Ex) h1 html element mdn (with Web APIs)
• property에 on이 붙어있으면 event listener 임.
• mouseenter mouseleave... 등등등 정말 많은 이벤트가 있음.
• style 자체는 css로 변경하는 것이 맞음.

3.5) More Events

• elements.onclick = 함수
• addEventListener을 선호하는 이유는, 추후 removeEventListene을 사용할 수 있기 때문임.
• window는 document처럼 자바스크립트에서 기본 제공하는 것.
• element, tag, window 모두 패턴은 같음.
• resize, online, offline 등 다양한 이벤트 있음.. (매우 신기..)

3.6) CSS in Javascript

• style은 JS 보다는 CSS에서 하는 것을 선호.
• function 안에 if 구문을 넣어서 클릭할 떄마다 색깔 바뀌는것 구현해봄.

 1. find the element
 2. listen for the evente
 3. react to that element

3.7) CSS in Javascript part Two

• Dancing between JS HTML CSS
• 자바스크립트가 style을 직접 변화시키는 것이 아님
• JS는 HTML을 변경하고, CSS는 JS를 바라보고 있음.
• 더 적은 자바스크립트 코드로 만들어내야함.
• 코드를 짤 땐 중복을 줄여나가는 것이 중요함.

3.7) CSS in Javascript part 2

-HTML에서 클래스 이름을 임의로 바꾸는 경우, 코드가 동작하지 않는 버그같은게 생길 수 있음.

3.8) CSS in Javascript part 3

• classList class들의 목록으로 작업할 수 있도록 해줌.
• Class가 여럿일때, 특정 클래스를 뽑아서 그 클래스에 한해서만 동작하도록 함.
• h1.classList.contains(~~~) , classList.remove , classList.add.. 등등 매우 자주 하는 작업들.
• toggle function > class name이 있는지 체크하고, 있으면 없애고 없으면 추가함. (아주 멋진 함수!!!!!)