들어가기 전에...


JavaScript에서 Browser로 확장되었다. 이제 Network을 통해 외부 영역에서 들어오고 나가는 방식에 대해 처리해 보는 과정을 진행한다. Event는 이러한 외부로 부터 들어오는 입력을 처리할 수 있는 방법을 제공한다. 마우스 클릭, 키 이벤트, 포커스 등을 처리 할 수 있다. 


* focus와 blur는 반대로 발생하는 이벤트이다. 돋보기를 연상하면 쉽게 이해할 수 있을거다.

  fucus: 포커스가 되었을 때 발생하는 이벤트

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


이벤트

이벤트는 하위 요소에서 상위 요소로 버블링 되는 특성을 가지고 있다. 하위 요소에서 클릭된 이벤트는 상위요소에도 통지되어 처리되어 진다. 이러한 버블링 현상은 억제할 필요가 있는데 브라우저에 따라 틀리다.

- IE: cancelBublble(e), 그외: stopPropagation()



JavaScript에서 Multi-threading


브라우저 자체는 단일 쓰레드로 동작한다. JavaScript역시 내부적으로 unique thread에서 처리한다. DOM 객체를 처리하기 위한 언어로 특별히 멀티 쓰레드를 고려하지 않았던것이다. '웹 페이지를 처리하는데 왜 여러 쓰레드가 필요하지?'라고 반문 할 수도 있을것이다. 하지만, 웹앱의 사용이 늘어나면서 멀티 쓰레드 환경이 필요 할 경우가 생기고 있다. 예를 들어 음악 파일을 찾고, 파일을 열고 메타데이터를 추출한다고 하면 많은 시간을 요구하게 된다. 무지 오랜 시간이 걸리고 답답할 것이다. 이럴때는 실행을 시켜 놓고 알려주는 방식이 더 효과적일 것이다.



위의 그림에서 보면 Browser와 OS간의 통신은 이미 정의 되어있다. 이러한 일들도 매우 제한적이고 Browser에서 정의해 놓은 것들만 가능하다. 점선은 이를 표시한다. ActiveX는 웹 브라우저와 통신을 하는 하나의 실행 프로그램이다. 별개의 프로그램으로 OS의 많은 기능을 쓸수도 있고, 모든 프로그램에 영향을 미칠 수도 있다. IE는 이러한 ActiveX를 사용하여 OS와 동작할 수 있도록 한것이다. Chrome은 브라우저의 안전성 및 다른 프로그램과의 관계를 위하여 ActiveX를 지원하지 않고 브라우져에서 지원하는 OS와의 통신만을 쓸것을 권고한다.


멀티 쓰레딩을 활용하기 위한 다음 방법을 보자. HTML5의 Web Worker는 이러한 부분을 해결해주고 있다.  

(Introduction to HTML5 Web Workers: The JavaScript Muti-threading Approach)


Ajax

Ajax(Asynchronous JavaScript + XML)은 JavaScript의 XMLHttpRequest를 이용하여 서버 측과 비동기 통신 후 DOM을 이용해 페이지에 반영하는 구조라고 할 수 있다. 


리퀘스트 객체의 생성은 아래와 같고,


var req = new XMLHttpRequest(); 


Asynchronous한 통신을 받기 위한 Request객체의 프로퍼티에 Callback 함수 등록해야 한다.


req.onreadystatechange = showResult;


req.readyState는 데이터가 모두 취득 되었는지를 반환하는 것으로 4일경우 모든 데이터 취득 완료를 뜻한다. 

req.status는 완료된 데이터의 상태를 나타내는 것으로 200, 401등의 Http Request의 상태를 반환한다.


XML의 두가지 문제

Ajax에 XML은 필수가 아니다. 최근에는 XML의 다음과 같은 문제때문에 JSON을 많이 사용한다고 한다.

1. 데이터가 장황해지기 쉽다.: 태그등의 데이터가 많아 성능 저하와 연결 될 수 있다.

2. DOM 조작이 번잡해진다.: XML을 처리하려면 간단한 DOM 조작도 장황해 지는 수가 있다.


참고 할만한 JavaScript 서적

모던 웹을 위한 JavaScript + jQuery 입문(한빛 미디어)

JavaScript Cookbook: 한 권으로 끝내는 문제해결(한빛 미디어) = ( 문제 해결용으로 좋다)


이벤트 리스너 등록

요소노드.addEventListener(이벤트명, 이벤트 핸들러, 이벤트의 전달방향)

elem.addEventListener(window, 'load', init, false); (init은 처리할 함수 이다.)



coffee.js


cookie.js


exTest2.html


exTest3.html


exTest4.html


exTest5.html


exTest6.html




Posted by 빨간 양말