[Front End] Web UI development

Window 객체

- 브라우저 개발을 하다 보면, Window 객체(전역객체)가 있다. Window에는 많은 메서드들이 존재한다.

- Window 객체(전역객체)에 속한 메서드에는 경고창을 띄워주는 alert 그리고 setTimeout 메서드 등이 있다.

window.setTimeout()
setTimeout() //window는 전역객체라서 생략 가능하다.

 

setTimeout 메서드

- setTimeout은 일정 시간후에 동작한다. 

- setTimeout은 콜백함수이다.

- 콜백함수란, 인자로 함수를 받고 보통 나중에 실행되는 함수를 말한다.

- 자바스크립트에서는 함수를 인자로 받을 수 있고 함수를 반환할 수도 있다. 

 

예제1

function run() {
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);  //이 메시지는 즉시 실행되지 않습니다. 1000ms(1초)후에 실행된다.
    }, 1000);
}

run();

- setTimeout가 인자로 받는 함수는 콜백함수이며 run 함수의 실행이 끝나고 나서 실행된다.(정확히는 stack에 쌓여있는 함수들의 실행이 끝나고 나서 실행된다.)

 

예제2

function run() {
    console.log("start");
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);  //이 메시지는 즉시 실행되지 않습니다.
    }, 1000);
    console.log("end");
}

run();

/*
실행결과
start 
end
hello codesquad
*/

DOM(Document Object Model)

- 브라우저에서는 HTML 코드를 DOM이라는 객체형태의 Tree 모델로 저장한다. 이를 DOM Tree라고 한다.

- 복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색 알고리즘을 구현하는 것은 너무 힘들다. 

- 그래서 브라우저에서는 DOM Tree를 찾고 조작하는 것을 쉽게 도와주는 여러가지 메서드를 DOM API를 통해 제공하고 있다.

Dom tree

 

DOM API - getElementByld()

- 태그 ID 정보를 사용하여 HTML 태그 객체를 찾는다.

document.getElementById("search");

getElementByld() 예제

DOM API - querySelector()

- DOM을 찾는데 특히 유용한 querySelector 메서드이다.

- CSS 스타일을 결정할 때 사용하던 Select 문법을 적용하여 DOM에 접근할 수 있다.

- DOM을 찾을 때 querySelector만 써도 충분하고 빠르다.

- selector문법은 querySelector와 querySelectorAll 메서드에서 사용할 수 있다. 다양한 css selector 문법을 사용해서 원하는 엘리먼트를 찾을 수 있다. 

document.querySelector("div");

document.querySelector("a");

document.querySelector(".special_bg");

document.querySelector("#search");

 

querySelector() 예제

Event

- 브라우저에는 많은 이벤트가 발생한다.

- 브라우저 화면의 크기를 마우스로 조절할 때, 스크롤을 할 때, 마우스로 이동하거나 무언가를 선택할 때도 이벤트가 발생한다.

- 이벤트를 브라우저가 발생시켜주니, 우리는 그 때 어떤 일을 하라고 할 일을 등록할 수 있다. 

- 다시 말해, HTML 엘리먼트별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위를 하고 싶다면, 대상 엘리먼트를 찾고 어떤 일을 등록하면 된다. 

 

Event 등록

- addEventListener 함수를 사용해서 이벤트를 등록할 수 있다.

- addEventListener 함수의 두 번째 인자는 함수이다. 이 함수는 나중에 이벤트가 발생할 때 실행되는 함수(콜백함수)로 이벤트 핸들러(Event Handler) 또는 이벤트 리스너(Event Listener)라고 한다. 

var el = document.querySelector(".outside");
el.addEventListener("click", function(){
console.log('클릭 됐습니다.'); // 클래스가 "outside"인 태그를 클릭하면, "클랙 됐습니다." 출력
}, false);

 

Event 객체

- 브라우저는 Event 리스너를 호출할 때, 사용자로부터 어떤 Event가 발생했는지에 대한 정보를 담은 Event 객체를 생성해서 Event 리스너 함수에 전달한다. 따라서 Event 리스너 안에서는 Event 객체를 활용해서 추가적인 작업을 할 수 있다. 

- 가장 많이 쓰는 건 event.target으로 Event가 발생한 element를 가라킨다.

var el = document.getElementById("outside");
el.addEventListener("click", function(evt){
 console.log(evt.target);
 console.log(evt.target.nodeName);
}, false);

 

Ajax(XMLHTTPRequest 통신)

- Ajax는 웹 페이지의 데이터를 갱신할 때, 브라우저의 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발했다. 더 좋은 UX를 제공할 수 있는 기술이다. 

- Ajax 통신으로는 XML, Plain Text, JSON 등 다양한 포멧의 데이터를 주고 받을 수 있다. 일반적으로는 사용이 편리한 JSON 포멧으로 데이터를 주고 받는다.

function ajax(data) {
 var oReq = new XMLHttpRequest(); // 1.XMLHttpRequest객체를 생성한다.
 
// 4.요청처리가 완료되면(서버에서 응답이 오면) load 이벤트가 발생하고, 콜백함수(두 번째 인자)가 실행된다.
oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 
 //2.open 메서드로 요청을 준비한다.
 oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 //3.send 메서드로 요청을 서버로 보낸다.
 oReq.send();
}

/*
콜백함수 function()이 실행될 때는 이미 ajax 함수는 끝나고 콜스택에서 사라진 상태이다.
이는 setTimeout 함수의 콜백함수의 실행과 유사하게 동작하는 비동기로직이다. 
*/

 

JSON (JavaScript Object Notation)

- "속성-값" 의 쌍으로 구성되는 경량의 data 교환 포멧이다.

- 일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 데이터 포멧이다.

- 비동기 클라이언트-서버 통신(Ajax)에서 사용되고 과거 XML을 대체하는 주요 데이터 포멧이다.

- 본래는 자바스크립트 언어로부터 파생되어 자바스크립트의 구문 형식을 따르지만 언어 독립형 데이터 포멧이다. 즉, 프로그래밍 언어나 플랫폼에 독립적이다.