2021.09.25 > JS #3.0~#3.5 수강
2021.10.24 > 복습
2021.10.25 > 정리

console.dir(value);

• 이 코드는 콘솔에 함수나 객체의 속성을 object의 형태로 출력해준다.

• 우리는 이 많은 property의 값을 가져오고, 또 바꿔줄 수 있다.

• console.log(value); 와의 차이점에 대해선, 아래 url을 참고하도록 하자. https://jongbeom-dev.tistory.com/115
  
  

JS ON THE BROWSER

#3.0 - The Document Object

브라우저에 이미 존재하는 object
자바스크립트로 html의 elements를 변경하고, 읽을 수 있다.
html이 자바스크립트파일을 import하는게 선행되어야, 존재할 수 있다.

#3.1~#3.2 - Elements 가져오기

html에서 id 혹은 class를 통해 element를 찾아주는 document의 함수들
찾고 나면 자바스크립트에서 html을 수정할 수 있다.
document.body/head/title 은 따로 불러와줄 필요가 없다~

getElementById();

• 위 함수를 통해 html의 id를 가져올 수 있다.
  const a = document.getElementById("idName");
  
  

getElementsByClassName();

• 위 함수를 통해 html의 class를 가져올 수 있다.

• 동일한 이름의 class가 여러개면, 많은 elements 를 array 로써 가져올 수 있다.

• array로 불러와지면, "."을 통해 뭔가를 가져올 수 없다.
  const a = document.getElementsByClassName("className");
  
  

getElementsByTagName();

• 위 함수를 통해 html의 tag에 해당되는 모든것을 가져올 수 있다.

• 많은 elements 를 array 로써 가져올 수 있다.
  const a = document.getElementsByTagName("tagName");
  
  

querySelector();

• id 혹은 class의 elements를 CSS 방식으로 검색할 수 있다.

• 중복되는 elements가 많아도 오직 첫번째의 것만 가져온다!
  const a = document.querySelector(".className h1")
  
  

querySelectorAll();

• id 혹은 class의 elements 를 CSS 방식으로 검색할 수 있다.

• ()안의 조건에 해당되는 모든 elements를 array로써 가져올 수 있다.
  
  

#3.3~#3.5 - Events

위의 함수들로 html의 elements 를 가져왔다면, 이벤트를 적용해보자.

addEventListener();

특징

• 자바스크립트에게 event를 들려줄 수 있다.
  a.addEventListener("자바에게 들려주고픈 이벤트");

• 자바스크립트가 event에 반응해서, function을 실행시켜준다.
  function에 ()버튼은 필요 없다. 자바가 알아서 발동해줄 것임
  a.addEventListener("자바에게 들려주고픈 이벤트", functionName);

• 아래는 addEventListner() 함수를 대체할 수 있다.
  a.onEventName = functionName;
  

• addEventListner()함수는 나중에 removeEventListner()할 수 있다.

들려주고픈 이벤트 찾기

• 구글에서 "Web APIs"가 포함된 MDN 문서 찾기
  이유는 이게 JS 관점의 HTML heading element라는 의미이기 때문이다.

• console.dir()에 value를 입력해주면, 콘솔에 수많은 property가 나온다.
  이 중 on~ 이 붙은 항목을 이벤트로 사용할 수 있다. (사용할땐 on 은 빼고 사용)
  
  

그 외

• window
  document와 마찬가지로 자바스크립트에서 기본적으로 제공
  https://developer.mozilla.org/ko/docs/Web/API/Window

• window와 document의 차이점
  Document - 문서 객체 모델의 최상위 객체
  쉽게 말해, window는 웹브라우저 창, document는 웹브라우저 창 안에 보이는 문서라고 생각하면 된다. 실제로 document 객체는 window 객체의 속성이기도 하다.
  

• 메서드(method): 객체내부에 선언한 함수
  functionName: function() {};

• clean code: 반복되는 string을 틈틈이 변수에 저장하자!

---