티스토리 뷰
[모던자바스크립트]13 웹 브라우저의 객체
13.1 클라이언트 측 자바스크립트
13.1.1 웹 브라우저에서 자바스크립트가 하는 일
- 웹 페이지의 Document 객체 제어 (HTML요소와 CSS스타일 작업) :DOM API 활용
- 웹 페이지의 Window 객체 제어 및 브라우저 제어 : 내장객체 활용(Location,Navigator...)
- 웹 페이지에서 발생하는 이벤트 처리 : 이벤트 처리기, 타이머 등
- HTML를 이용한 통신 제어 : XMLHttpRequest객체 활용
웹 애플리케이션 :
웹 브라우저 기능은 웹에서 문서를 표시하기 위한 소프트웨어 였습니다.
현재는 웹 애플리케이션을 실행하는 운영체제로 자리매김하고 있습니다.
- 파일 읽기와 쓰기
- 데이터베이스 기능
- 비동기 통신
- 2차원,3차원 컴퓨터 그래픽스 기능
- 키보드로 입력
- 마우스로 드래그 앤 드롭
- 멀티스레딩
이러한 기능을 활용하면 일반 데스크톱 애플리케이션과 비교해도 손색없는 기능을 지닌 웹 애플리케이션을 만들 수 있습니다.
이러한 처리는 기본적으로 자바스크립트로 작성합니다.
빨라진 바바스크립트
크롬과 파이어 폭스가 실행 중에 자바스크립트 코드를 컴파일 하는 JIT 컴파일러 (Just In Time Compiler)를 도입하면서 C++등으로 구현한 데스크톱 애플리케이션과 견줄 수 있을 만큼의 실행 속도를 구현했습니다.
13.1.2 자바스크립트 코드를 삽입하는 방법
- script 요소의 내용물로 작성하기 (인라인 스크립트) ex) console.log("Hello~");
- 외부 파일 읽어 들이기 ex) <script src="../sampe.js"></script>
- 이벤트 처리기 속성에 작성하기 ex) <input type="button" onclick="consolelog('Jalee');">
- JavaScript: URL(자바스크립 의사 프로토콜) ex) <a href="javascript:console.log('jalee');">What's your name?</a>
13.1.3 웹 브라우저에서의 자바스크립트 실행 순서
- 웹 페이지를 열면 가장 먼저 Window객체가 생성됩니다. Window 객체는 웹 페이지의 전역 객체로 웹 페이지와 탭마다 생성됩니다.
- Document 객체(readyState프로퍼티 : HTML문서의 해석 상태를 뜻하는 문자열이 저장, 초기값: "loading" 문자열)가 Window객체의 프로퍼티로 생성되며 웹페이지를 해석해서 DOM 트리의 구축을 시도합니다.
- HTML문서는 HTML구문을 작성 순서에 따라 분석하며 Document객체 요소와 텍스트 노드를 추가해 나갑니다.
- HTML문서 안에 script요소 안의 코드 또는 외부파일에 저장된 코드의 구문을 분석합니다. (script 요소의 구문을 분석해서 실행 할 때는 HTML문서의 구문 분석이 일시적으로 막히고, 자바스크립트 코드의 실행을 완료한 후에는 일시적으로 막혀 있던 HTML 문서의 구문분석을 재개 합니다.)
- HTML 문서의 모든 내용을 읽은 후, DOM 트리 구축을 완료하면 document.readyState 프로퍼티 값이 "interactive" 로 바뀝니다.
- 웹 브라우저는 Document 객체에 DOM트리 구축완료를 알리기 위해 DOMCONTENTLOADED이벤트를 발생시킵니다.
- img 요소가 있을시, 이미지 파일 등의 외부 리소스를 이 시점에 읽어 들입니다.
- 모든 리소스를 읽어 들인 후 document.readyState 프로퍼티 값이 "complete"로 바뀝니다. 마지막으로 웹 브라우저는 Window객체를 상대로 load 이벤트를 발생시킵니다.
- ㅣ 시점부터 다양한 이벤트(사용자 정의, 네트워크) 를 수신하며, 이벤트가 발생하면 이벤트 처리기가 비동기로 호출합니다.
async와 defer속성
<script async src="../sample.js"></script>
비동기적으로 실행됩니다.
장점 : HTML문서의 구문 분석 처리를 막지 않으며, script 요소의 코드를 최대한 빨리 실행합니다.
단점 : 다 읽어 들인 코드부터 비동기적으로 실행하므로 실행 순서가 보장되지 않습니다.
결론 : 읽어 들이는 순서에 의존하는 script요소에는 async속성을 설정하지 말아야 합니다.
<script defer src="../sample.js"></script>
DOM트리 구축이 끝난 후에 실행됩니다.
자바스크립트 코드로요소 객체에 이벤트 처리기를 등록하는 초기화 작업을 할 수 있습니다.
DOMcontentLoaded이벤트의 대안으로 활용할 수 있습니다.
async, defer 속성이 설정된 script 요소에 documnet.write()가 있으면 async,defer속성이 무시되어 동기적으로 실행됩니다.
async, defer 지원하지 않는 웹 브라우저도 script요소를 동기적으로 실행합니다.
13.1.4 웹 브라우저의 호환성
13.1.5 크로스 브라우징 대책
모든 웹 브라우저 대응하기란 현실적으로 불가능합니다.
구체적인 크로스 브라우징 대책
1. 기능성 테스트
if(element.addEventListener){ //DOM() 테스트
element.addEventListener("click", handlerm false);
} else if(element.attachEvent){ //IE()테스트
element.attachEvent("onclick", hanler);
} else { //일반적인 방법 이용
element.onclick = handler;
}
장점: 특정 웹 블아ㅜ저 버전에 국한되지 않는 코드를 작성할 수있다. 오래된 긴으만 지원하던 웹 브라우저가 버전을 업그레이드 하여 새로운 기능을 지원해도 문제없이 동작합니다.
2. 브라우저 테스트
특정 웹 브라우저에만 국한된 버그에 대처할 때는 기능성 테스트를 사용할 수 없습니다.
이때는 웹 브라우저의 종류와 버전, OS등의 정보를 파악하고 대책을 마련합니다.
웹 브라우저 정보를 구할 때는 Navigator 객체를 사용합니다.
브라우저 테스트는 꼭 필요한 경우에만 사용하고 그 외에는 기본적으로 사용하지 않는게 좋습니다.
3. 라이브러리 사용해서 대응
호환성 문제를 해결해 주는 라이브러리를 사용하면 호환성 문제를 신경쓰지 않고 코드를 작성 할 수 있습니다.
ex) IE8, canvas 요소를 지원하지 않지만 excanvas.js 라이브러리를 사용하면 Canvas기능을 에뮬레이트 할 수 있습니다.
이 외에도 호환선 문제를 해결하는 라이브러리로 jQuery(독자적인 API로 제어)가 널리 사용되고 있습니다.
13.1.6 Window 객체
- 대화상자 (aler, prompt, confirm)
- Console 객체
- 이벤트 처리기를 등록하는 방법
- 타이머(setTimeout, setInterval)
- documnet.write
- Canvas
| Window객체 메서드 | 설명 |
| alert(message) | 경고 대화 상자 표시 |
| prompt(massage, default) | 입력 대화 상자 표시 |
| confirm(question) | 확인 대화 상자 표시 |
| setTimeout(callback, interval) | interval(ms)마다 callback 호출 |
| setInterval(callback, delay) | delay(ms)마다 callback 호출 |
| clearTimeout(timeoutId) | timeoutId의 setTimeout을 취소 |
| clearInterval(intervalId) | intervalId의 setInterval을 취소 |
| blur() | 창에서 포커스 제거 |
| focus() | 창에서 포커스 |
| close() | 창 닫음 |
| open() | 새 창 |
| moveBy(x, y) | 창을 수평으로 x, 수직으로 y 이동 |
| moveTo(x, y) | 창을 좌표 (x,y) 이동 |
| resizeBy(width, height) | 창의 너비를 높이를 키운다 |
| resizeTo(width, height) | 창의 너비 높이를 설정한다. |
| scrollBy(x,y) | 스크롤 수평으로 x, 수직으로 y 이동 |
| scrollTo(x, y) | 스크롤을 좌표 (x,y)로 이동 |
| print() | 창안의 문서를 인쇄한는 대화 상자를 연다. |
'JAVASCRIPT' 카테고리의 다른 글
| [Javascript] 문서제어 (0) | 2020.06.14 |
|---|---|
| [javascript] 웹브라우저 객체 2 (0) | 2020.06.07 |
| [Javascript] RegExp객체 (0) | 2020.05.24 |
| [Javascript] 패턴 매칭을 하는 문자열 메서드 (0) | 2020.05.24 |
| [Javascript] gallary view (0) | 2020.05.13 |
댓글
© 2018 eh2world