javascript 브라우저의 객체

javascript 실행 순서

1. Window 객체 생성: 웹페이지와 탭마다 생성 됩니다.
2. Document 객체 생성: Windows 객체의 프로퍼티로 생성됩니다.
3. DOM 트리 구축 시도: document.readyState가 loading 입니다.
4. HTML 문서를 순서에 따라 분석, DOM객체와 텍스트 노드 추가합니다.
5. script 요소를 만나면 그 시점에서 실행됩니다. HTML문서의 구문 분석이 일시정지 됩니다.
6. DOM 트리 구축을 완료: document.readyState가 interactive로 바뀝니다.
7. Document객체에 DOM 트리 구축 완료를 알리기 위히 DOMContentLoaded 이벤트를 발생시킵니다.
8. img 등 외부 리소스를 읽어옵니다.
9. 리소스를 모두 읽으면 document.readyState 가 complete로 바뀝니다.
10. Windows 객체 상대로 load 이벤트가 발생합니다.
11. 이제부터 발생할 이벤트에 대해서 수신하는 상태가 됩니다. 이벤트 핸들러는 비동기적으로 실행 됩니다.

 

window 객체의 주요 프로퍼티

screen, document, location, navigator, history, event, console, window, self

parent : 부모 window 객체, 최상위 부모인 경우 self와 같음.

top :  top레벨의 window 객체, 최상위인 경우 self와 같음.

opener : 현재 창을 생성한 window 객체를 가리킵니다.

closed : 현재 창이 닫혀있는지를 뜻하는 boolean 값

name : 현재 창의 이름(읽기/쓰기)

status : 현재 상태 표시줄의 텍스트(읽기/쓰기)

screenX, screenY : 화면의 왼쪽 위를 기준으로 브라우저의 왼쪽 윗부분의 X,Y좌표, 익스플로러는 지원 안함.

screenLeft, screenTop : 위와 마찬가지 이지만 파이어폭스는 지원하지 않음.

innerHeight, innerWidth : 창 안쪽의 높이와 너비(스크롤바 제외)

outerHeight, outerWidth : 창 바깥의 높이와 너비(스크롤바 포함)

scrollX, scrollY : 수평 수직 스크롤되는 픽셀 수

pageXOffset, pageYOffset : 각각 scrollX, scrollY 와 같음.

 

window 객체의 주요 메서드

alert(message) : 경고창에 message 표시

prompt(message, default) : 입력 창에 message 표시

confirm(question) : 확인 창에 question 표시

setTimeout(callback, delay) :   delay(밀리세컨드) 후에 callback 함수를 호출합니다.

setInterval(callback, interval) : interval(밀리세컨드) 마다 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) : 창의 너비를 width 만큼 높이를 height만큼 키웁니다.

resizeTo(width, height) : 창의 너비를 width로 높이를 height로 설정합니다.

scrollBy(x, y) : 스크롤을 수평으로 x, 수직으로 y 만큼 이동합니다.

scrollTo(x, y) : 스크롤을 좌표(x, y)로 이동합니다.

print() : 인쇄 대화상자를 엽니다.

 

location 객체

표시되는 문서의 URL을 관리합니다.

프로퍼티

host : host.example.com:80

hostname : host.example.com

href : 전체 URL

pathname : 사이트 루트를 기준으로한 상대 경로

port : 포트번호

protocol : 프로토콜

search : get방식 요청의 질의 문자열

메서드

 assign(url) : url이 가리키는 문서를 읽습니다. 히스토리에 남습니다.

reload() : 문서를 다시 읽습니다.

replace(url) : url로 이동합니다. 히스토리에 남지 않습니다.

toString() : location.href 값을 리턴합니다.

 

history 객체

웹페이지 방문 이력을 관리하는 객체 입니다.

프로퍼티

length : 현재 세션의 이력 개수(읽기 전용)

scrollRestoration : (auto/manual) 자동 스크롤 기능을 켜고 끕니다.

state : 상태 값(읽기 전용)

메서드

back() : 히스토리 하나를 뒤로 가기 합니다.

forward() : 히스토리 하나를 앞으로 가기 합니다.

go(number) : 히스토리를 number 만큼 진행합니다. 음수인 경우 뒤로 가기 합니다.

pushState(state, title, url) : 창에 웹 페이지 히스토리를 추가합니다. 단 페이지는 이동하지 않습니다.

replaceState(state, title, url) : 현재 창의 히스토리를 수정합니다.

 

navigator 객체

웹 브라우저의 정보를 관리합니다.

프로퍼티

appCodeName : 브라우저의 내부 코드 네임

appName : 브라우저의 이름

appVersion : 브라우저의 버전

geolocation : 단말기의 물리적 위치 GeoLocation 객체

language : 브라우저의 UI언어

mimeTypes[] : 브라우저가 지원하는 MIME 타입 

onLine : 네트워크에 연결 여부 boolean

platform : 운영체제(플랫폼) 정보

plugins : 브라우저에 설치된 플러그인 목록

userAgent : 브라우저가 USER-AGENT 헤더에 보내는 문자열

메서드

javaEnabled() : java를 사용할 수 있는지 여부 boolean

getUserMedia() : 단말기의 마이크와 카메라에서 autio와 video 스트림을 리턴

registerContentHandler(mimeType, uri, title) : 웹사이트를 특정 MIMI타입과 연결

vibrate() : 단말기를 진동시킴

 

screen 객체

화면의 크기나 색상 등을 관리합니다.

프로퍼티

availTop : 사용가능 화면의 첫 픽셀의 y좌표

availLeft : 사용가능 화면의 첫 픽셀의 x좌표

availHeight : 사용가능 화면의 높이

availWidth : 사용가능 화면의 너비

colorDepth : 색상 심도 (비트수)

pixelDepth : 픽셀 비트으 심도 (비트수)

height : 화면 높이

width : 화면 너비

orientation : 화면 방향

 

document 객체

웹 페이지(DOM)를 관리합니다.

프로퍼티

characterSet : 문서의 문자 인코딩(읽기 전용)

cookie : 쿠키(쉼표로 연결된)

domain : 문서의 도메인(읽기 전용)

lastModified : 문서를 마지막 수정한 날(읽기 전용)

location : Location 객체(url)

readyState : 문서의 로딩 상태(읽기 전용)

referrer : 문서에 링크된 페이지 URL(읽기 전용)

title : 문서 제목

URL : 문서 URL(읽기 전용)

메서드

close() : document.open() 메서드로 연 문서를 닫습니다.

open() : 문서를 쓰기 위해서 엽니다.

write(text) : 열린 문서에 기록합니다.

writeln(text) : 열린 문서에 기록하고 줄바꿈 합니다.

 

브라우저 창 제어

브라우저의 각각 창과 탭은 별도의 브라우징 컨텍스트를 가지고 각각 Window객체를 가집니다.

각각의 창과 탭은 서로 간섭(상호작용) 할 수 없지만 부모 자식 관계로 생성(open)된 컨텍스트 간에는 상호작용을 할 수 있습니다.

var w = open(url, 창의 이름, 옵션);

옵션

여기서 옵션은 창의 크기 등을 쉼표로 연결해서 표기합니다.

width : 창 너비

height : 창 높이

location : 주소 표시줄 표시 여부 (yes/no)

scrollbars : 스크롤 표시 여부(yes/no)

resizable : 창 크기 변경 가능 여부(yes/no)

toolbar : 도구 모음 표시 여부(yes/no)

status : 상태 표시줄 표시 여부(yes/no)

menubar : 메뉴 막대 표시 여부(yes/no)

window.onload = function(){
    var w;
    document.getElementById("open").onclick = function(){
        w = open("newPage.html", "new page", "width=400, height=300");
    };
}

 

부모창과 자식창의 참조

open() 메서드가 리턴한 값으로 부모창이 자식 창을 참조 할 수 있습니다. 위의 소스에서는 참조변수 w로 참조할 수 있습니다.

open 메서드로 연 창은 위치, 크기, 스크롤을 moveBy(), moveTo(), resizeBy() 등 Window객체의 메서드로 상호작용 할 수 있습니다.

또 자식 창에서 부모창과 상호작용할 때는 opener 키워드를 통해 Windows객체를 참조할 수 있습니다.