[JS] Javascript 기초정리2

Dom

브라우저에서는 HTML코드를 DOM(Document Object Model)이라는 객체 형태의 모델로 저장

- getElementById() : ID 정보를 통해찾을 수 있음

document.getElementById("select_id");

- querySelector() : DOM을 찾는데 유용한 selector

document.querySelector("#select_id");

Event

브라우저에서는 수많은 이벤트들이 발생함

다시말해, HTML 엘리먼트별로 어떤 이벤트가 발생했을 때 특정 행위를 하고싶다면, 대상 Element를 찾고 어떤 Event를 등록하면된다!!

var el = document.querySelector(".outside");
 
 
el.addEventListener("click",function(e){
  var target = e.target;
  console.log(target.className, target.nodeName);
  console.log(target.innerText);
})

Ajax 통신 (XMLHTTPRequest 통신)

웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 기술

새로고침없이 원하는 데이터를 서버로부터 받을 수 있다.

# JSON : 표준적인 데이터 포맷을 결정하기 위해서 주로 JSON(Javascript Object Notation) 포맷을 사용

function ajax(data) {
  var oReq = new XMLHttpRequest();
 
 
  oReq.addEventListener("load",function(){
    console.log(this.responseText);
  })
 
 
  oReq.open("GET","http://www.example.org/param?data=data") // Parameter를 붙여 보낼수 있음
  oReq.send();
}

- XMLHttpRequest 객체를 생성해서, open 메소드로 요청을 준비하고, send 메소드로 서버에 보냄

- 요청처리가 완료되면 (서버에서 응답이 오면) load Event가 발생하고 콜백함수가 실행됨

- 콜백함수가 실행될 때는 이미 ajax함수는 반환하고 callStack에서 사라진 상태

- 즉, 비동기 로직!!