HTML5 Intermediate 5일

* 서버와 클라이언트의 MVC 모델

* Client의 MVC 모델을 구현한 라이브러리: Backbone, Angular JS.

* JS는 모든 것이 객체이다. function 도 객체임.

- 함수, 변수 등을 선언하면 window 객체의 멤버가 되어 Global하게 사용할 수 있음.

* 일반 JS 메소드에서 this는 window 객체임. --> window를 생략할 수 있으므로 함수처럼 보이는 것임.

- 엄밀히 말하면 JS에서는 함수라는 것이 없음. 함수처럼 보이는 애들은 모두 메소드이며 특정 경우 객체를 생략할 수 있으므로 함수로 보이는 것임.

- 생략된 객체는 경우에 따라 달라짐. 보통의 경우는 windows 객체이며, Worker의 JS 파일에서는 Worker를 의미함.

- Worker JS에 다음과 같은 코드가 있다고 할 때 postMessage()는 worker의 것을 호출함.

function loadHandler() {

if( xhr.status === 200 ) {

/* 여기서 this는 xhr 객체임. 따라서 this.postMessage()로 호출하면 안됨. */

postMessage( new Protocol(2, xhr.responseText) );

}

else {

postMessage( new Protocol(2, '통신 오류 발생: ' + xhr.status) );

}

}

xhr.addEventListener('load', loadHandler);

-

* 이벤트 핸들러에서 this를 사용하면 그 이벤트 핸들러를 추가한 객체를 의미함.

- btn.onclick = function() { this. ~ } ==> this는 btn임.

* 서버와 통신 방식 비교

방식	Req-Res	Async	bidirection
form	X	X	X
AJAX	O	△	X
Web Socket	O	O	O

* Web Socket은 클라이언트의 표준임.

* Web Socket은 기본적으로 utf8을 이용함.

* Web Socket 서버 라이브러리 JavaDoc (tomcat 7.0)

- http://tomcat.apache.org/tomcat-7.0-doc/websocketapi/index.html

* Web Socket Binary 통신은

- AJAX에서 파일을 주고 받을 때와 같이 사용됨.

- blob 이라는 놈을 사용해야 함.

* 포커스를 잃을 때 발생하는 이벤트: blur

* 포커스를 얻을 때 발생하는 이벤트: focus

* Drag & Drop 하려면 draggable 속성이 true이여야 함. 이 속성은 모든 Tag에 적용될 수 있음.