WEB UI 개발

1. window 객체

  1) 브라우저의 window 전역객체 

  2) window에는 많은 메서드들이 존재하며, 아래처럼 사용할 수 있다.

window.setTimeout();
setTimeout(); // window는 디폴트 개념이라 생략이 가능하다.

2. setTimeout의 활용

   1) setTimeout은 콜백함수다.

   2) 콜백함수: 함수를 인자로 받으며, 보통 나중에 실행되는 함수

      (※ 참고: 자바스크립트는 함수를 인자로 받을 수 있고 반활할 수도 있다.)

function run(){
	setTimeout(function(){
    	var msg = "hello code";
        console.log(msg); // 이 함수(메시지)는 즉시 실행되지 않고,
    }, 1000); // 1초(1000밀리세컨드) 뒤에 실행됨.
}

run();

   3) setTimeout의 특성을 잘 이해하면, 지연실행이 필요한 경우에 활용할 수 있다.

   4) 이를 비동기식이라고 한다. 스택에 다른 요소들이 모두 쌓이고 빠져나간 후, 비동기는 마지막에 실행이 된다.

 

3.  DOM과 querySelector

   1) DOM(Document Object Model) : 브라우저가 HTML코드를 저장하는 객체 모델.

     - DOM Tree: DOM 방식으로 저장된 정보. 결국 HTML element는 Tree 형태로 저장이 된다.

     - 복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색알고리즘을 구현하기엔 너무 힘들다. 그래서 브라우저는 DOM이라는 개념을 통해 다양한 DOM API(함수의 묶음)를 제공하고 있다.

    => 브라우저는 DOM Tree를 찾고 조작하는 것을 쉽게 도와주는 여러가지 메서드(DOM API)를 제공한다.

 

    2) getElement

document.getElementById("");
document.getElementById("").className;
document.getElementById("").style.display = "none" ; // display 속성 삭제해주세요.

    3) Element.querySelector()

      - DOM을 찾는데 특히 유용한 메서드

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

document.querySelector("div");
document.querySelector("#id");
document.querySelectorAll("div");

4. 브라우저 이벤트

   1) Event

     - 브라우저에는 많은 이벤트가 발생한다. 브라우저의 크기를 마우스로 조절하고, 스크롤을 하고, 마우스로 이동하고 무언가를 선택할 때도 이벤트가 발생한다.

    - 그때마다 브라우저는 이벤트를 발생시켜주니(이벤트가 일어났다고 알려주니까), 우리는 그때 어떤 일을 하라고 할 일을 명령할 수 있다.

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

 

    2) 이벤트 등록: addEventListener 함수 사용

var el = document.getElementById("outside");
el.addEventListener("click", function(){ // 두 번째 인자로 '할 일' 메서드를 넣는다.
	// do something...                 
}, false}

    - addEventListener 함수의 두 번째 인자는 함수다. 이 함수는 나중에 이벤트가 발생할 때 실행되는 함수로, 이벤트 핸들러 혹은 이벤트 리스너라고 한다. 다시 말해 이는 콜백함수로써 이벤트가 발생할 때 실행되는 것이다.

 

    3) 이벤트 객체

    - 이벤트 리스너가 실행될 때, 어떤 이벤트에 의해서 실행됐는지, 그 모든 정보를 담은 이벤트 객체가 매개변수로 생성된다.

    - 따라서, 이벤트 리스너 안에서는 이벤트 객체를 활용해 추가적인 작업을 할 수 있게 된다.

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

     - 가장 많이 쓰이는 건 event.target 이다. 해당 이벤트가 발생한 element를 가리킨다.

     - element도 객체이므로, 그 안에 classname 등 element가 가진 속성을 사용할 수 있다.