티스토리 뷰

카테고리 없음

웹 브라우저의 객체

_Woogie 2022. 11. 12. 16:16

 

클라이언트 측 자바스크립트

기술적인 측면에서 웹 브라우저에서 자바스크립트가 하는 일은 크게 네 가지로 분류할 수 있다.

  1. 웹 페이지의 Document 객체 제어(HTML, CSS 작업)
  2. 웹 페이지의 Window 객체 제어 및 브라우저 제어
  3. 웹 페이지에서 발생하는 이벤트 처리
  4. HTTP를 이용한 통신 제어

 

최신 웹 브라우저에서는 다음과 같은 기능을 제공한다.

  • 파일 읽기와 쓰기
  • 데이터베이스 기능
  • 비동기 통신
  • 2,3차원 그래픽 등등..

이전까지는 자바스크립트의 속도가 매우 느렸으나, 크롬과 파이어폭스가 실행 중에 JS코드를 컴파일하는 JIT 컴파일러 (Just In Time Compiler)를 도입하면서 빠른 실행 속도를 구현했다.

 

 

웹 브라우저에서의 자바스크립트 실행 순서

웹 브라우저에서 HTML문서를 분석하고 표시하는 프로그램을 렌더링 엔진이라고 한다. 렌더링 엔진은 다음과 같은 처리 과정을 거쳐 HTML 문서의 구문을 분석하고 DOM 트리를 구축한 후에 JS코드를 실행한다.

순서를 알아보자.

 

1. 웹 브라우저로 웹 페이지를 열면 가장 먼저 Window 객체가 생성된다.

2. Document 객체가 Window 객체의 프로퍼티로 생성되며 웹 페이지를 해석해서 DOM 트리의 구축을 시도한다.
Document 객체는 readState 프로퍼티를 가지고 있고 초깃값은 loading이라는 문자열이다.

3. HTML문서는 HTML구문을 작성 순서에 따라 분석하며 Document 객체 요소와 텍스트 노드를 추가한다.

4. HTML문서 안에 script요소가 있으면 script코드의 구문을 분석하고 그 결과 오류가 발생하지 않으면 그 시점에 코드를 실행한다. script코드가 실행할 때는 HTML문서의 구문 분석이 일시적으로 멈추고 script코드가 완료하면 다시 HTML문서 구문 분석을 실행한다 (script요소는 동기적)

5. HTML문서의 모든 내용을 읽고 DOM 트리 구축을 완료하면 document.readState 프로퍼티 값이 interactive로 바뀐다.

6. 웹 브라우저는 Document 객체에 DOM트리 구축 완료를 알리기 위해 DOMContentLoaded 이벤트를 발생시킨다.

7. 이 시점에 img 등 외부 리소스를 읽어들인다.

8. 모든 리소스를 읽어 들인 후에는 document.readState프로퍼티 값이 complete로 바뀐다. 그리고 웹 브라우저는 Window 객체를 상대로 load 이벤트를 발생시킨다.

9. 이 시점부턴 다양한 이벤트(사용자 정의, 네트워크 이벤트)를 수신하고 발생하면 이벤트 처리기가 비동기로 호출된다.

 

Window

클라이언트 측 자바스크립트에서 가장 중요한 객체는 Window 객체이다. 전역 객체이고 전역 변수는 Window 객체의 프로퍼티이다.

 

Window 객체의 주요 프로퍼티 (요약)

screen Screen 객체를 가리킨다.
document Document 객체를 가리킨다.
location Location 객체를 가리킨다.
navigator Navigator 객체를 가리킨다.
parent 해당 창이 프레임 안의 창이면 부모 window 객체를 가리킨다.
closed 현재 창이 닫혀 있는지를 뜻하는 논리값.
screenX, screenY 화면의 왼쪽 윗부분을 기준으로 수평위치와 수직 위치.
innerHeight, innerWidth 창 안쪽의 높이와 너비(스크롤 영역은 제외).
outerHeight, outerWidth 창 바깥의 높이와 너비(스크롤 영역 포함).
scrollX, scrollY 수평 방향과 수직 방향으로 HTML 문서가 스크롤되는 픽셀의 수.

 

Window 객체의 주요 메서드 (요약)

alert(message) 경고 대화상자를 표시.
prompt(message, default) 입력 대화상자를 표시.
confirm(question) 확인 대화상자를 표시.
setTimeout(callback, interval) interval마다 callback을 호출.
setInterval(callback, delay) delay후에 callback을 호출.
blur() 창에서 포커스를 제거.
focus() 창에 포커스를 준다.
moveBy(x,y) 창을 수평으로 x, 수직으로 y만큼 이동.
moveTo(x,y) 창을 좌표 (x,y)로 이동.
resizeBy(width, height) 창의 너비를 width, 높이를 height만큼 키운다.
resizeTo(width, height) 창의 너비를 width, 높이를 height로 설정한다.

 

자주 쓰이는 객체들만 자세히 알아보자.

 

Location 객체

Location 객체는 창에 표시되는 문서의 URL을 관리한다. window.location 또는 location으로 참조 할 수 있다.

 

Location 객체의 프로퍼티

hash 앵커 부분 #anchor
host 호스트 이름 : 포트번호 www.example.com:80
hostname 호스트 이름 www.example.com
href 전체 URL http://www.example.com:80/test/index.html?q=value#anchor
pathname 웹 사이트의 루트를 기준으로 한 상대 경로 /test
protocol 프로토콜 http:
search 질의 문자열 ?q=value

 

Location 객체의 메서드

assign(url) url이 가리키는 문서를 읽는다. 웹 브라우저의 이력에 남는다.
reload() 문서를 다시 읽어 들인다.
replace(url) url로 이동한다. 웹 브라우저의 이력에 남지 않는다.
toString() location.href 값을 반환한다.

 

Location 객체의 사용 예

해당 URL이 가리키는 문서를 읽어들인다. (이력이 남기 때문에 뒤로가기 버튼으로 돌아갈 수 있다.)

location.href = "http://www.gulbut.co.kr/";
location.assign("http://www.gulbut.co.kr/");

 

URL이 가리키는 문서를 읽어 들일 때 이력을 남기지 않는다. (뒤로가기 버튼으로 돌아갈 수 없다.)

location.replace("http://www.gilbut.co.kr/");

 

URL에 상대경로를 지정할 수도 있다. 다음 코드는 3초 후에 같은 사이트의 다른 페이지로 이동하는 코드이다.

setTimeout(function () {
  location.replace("/book/bookList.aspx");
}, 3000);

 

reload로 현재 페이지를 다시 읽어들인다.

location.reload();

 

hash 프로퍼티에 HTML 요소의 id를 대입하면 그 요소로 스크롤한다.

location.hash = "#header"; // id = "header"인 요소로 스크롤

 

search 프로퍼티 값을 바꾸면 서버에 질의 문자열로 보낸다.

location.search = "some data"; // URL 끝에 "?some%20data"를 덧붙여 서버에 보낸다

 

History 객체

History 객체는 창의 웹 페이지 열람 이력을 관리한다. window.history 또는 history로 참조 가능하다.
History 사용 예는 다음과 같다.

 

웹 페이지 열람 이력을 진행하거나 되돌아갈 때는 back과 forword메서드를 사용

history.back(); // 웹페이지 열람 이력 하나 되돌아가기
history.forward(); // 웹페이지 열람 이력 하나 진행하기

 

횟수를 지정해서 돌아가거나 진행할 땐 go 메서드를 사용

history.go(-3); // 웹 페이지 열람 이력 세 개 되돌아가기
history.go(2); // 웹 페이지 열람 이력 두 개 진행하기

 

페이지 전환을 하지 않고 열람 이력만 추가하고자 할 때는 pushState 메서드를 사용

history.pushState(null, null, "page2.html");

// pushState의 인수는 3가지가 있다.
// state : 새롭게 추가되는 웹 페이지 열람 이력과 연결할 객체
// title : 새로운 열람 웹 페이지 이력을 가리키는 문자열
// url : 새로운 열람 이력의 URL

 

Screen 객체

Screen 객체는 화면 크기와 색상 등의 정보를 관리한다.

 

Screen 객체의 주요 프로퍼티

availTop, availLeft 사용할 수 있는 화면의 첫 번째 픽셀의 y, x좌표
availHeight, availWidth 사용할 수 있는 화면의 높이, 너비
orientation 화면 방향

위의 표에 나와있는 "사용할 수 있는 화면"이란 작업 표시줄 등을 제외한 나머지 부분을 뜻한다.
Screen 객체를 사용하면 스마트폰 등의 작은 화면에 표시할 때 작은 글꼴, 작은 화면을 표시할 떄 사용할 수 있다.

 

 

Document 객체

Document 객체는 창에 표시되고 있는 웹 페이지를 관리한다. Document 객체는 클라이언트 측 자바스크립트에서 가장 중요한 객체이다.

 

Document 객체의 주요 프로퍼티

characterSet 문서에 적용된 문자 인코딩(읽기전용)
cookie 문서의 cookie를 쉼표로 연결한 문자열
domain 문서의 도메인(읽기전용)
lastModified 문서를 마지막 수정한 날(읽기전용)
referrer 문서에 링크된 페이지 URL
title 문서 제목
URL 문서 URL(읽기 전용)

 

Document 객체의 주요 메서드

close(), open() 문서를 닫거나 연다
write(text) 문서를 쓰기 위해 연다

 

 


이 시리즈의 모든 코드는 모던 자바스크립트 입문(徹底マスターJavaScriptの教科書) 에서 인용한 것입니다. [ISBN #978-4797388640]. Copyright 2017 by 磯博