8. 브라우저 객체 모델

다루는 내용

BOM 의 핵심인 window 객체에 대한 이해
창과 프레임, 팝업 컨트롤
location 객체에서 얻는 페이지 정보
navigator 객체를 통한 브라우저 이해

1. window 객체

웹페이지에서 정의한 모든 객체, 변수, 함수에서는 window 가 Global 객체 구실을 함

1
2
3
4
5
6
7
8


var age = 29;
function sayAge() {
  console.log(this.age);
}
  
console.log(window.age); // 29
sayAge(); // 29
window.sayAge(); // 29

var 연산자를 써서 window에 추가한 프로퍼티는 [[Configurable]] 속성이 false 로 지정되기에 delete 를 통해 삭제 불가능
페이지에 프레임이 들어있으면 각 프레임은 독자적인 window 객체를 가지며 이 객체들은 frames 컬렉션에 저장됨
- parent 객체는 항상 현재 프레임의 바로 상위인 부모 프레임
- 프레임을 사용하면 브라우저에 Global 객체가 여럿 존재하며, 각 프레임의 전역 변수는 해당 프레임의 전역 변수

moveTo() / moveBy() 는 최상위 창에서만 동작하며, 기본적으로 비활성화 되어 있음

1
2


window.moveTo(100,100); // 창을 100,100 위치로 옮김
window.moveBy(0,100); // 창을 아래로 100 만큼 옮김

resizeTo() / resizeBy()

1
2


window.resizeTo(100,100); // 창 크기를 100 x 100 으로
window.resizeBy(100,50); // 창의 크기를 200 x 150 으로

window.open() 메소드는 URL 로 이동한 후 브라우저 창을 새로 띄움

1
2
3
4
5
6
7


//<a href="http://ysjune.github.io" target="blank"></a>
window.open("http://ysjune.github.io", "blank");
  
var popup = window.open("http://ysjune.github.io","popup", "height=400, width=400, top=10, left=10, resizable=yes");
// 400x400 크기에 가로 세로 10 픽셀 씩 떨어져 있으며, 크기 조절 가능
  
popup.close(); // 팝업 창은 close() 메소드를 통해 닫을 수 있음

팝업 창에는 자신을 연 창(parent) 에 대한 포인터는 존재하지만, 그 역은 존재하지 않음
브라우저에서 자바스크립트는 단일 스레드로 실행되지만, 타임 아웃과 인터벌을 통해 코드가 특정 시간에 실행되게끔 조절할 수 있음
- 타임 아웃 : 일정 시간 뒤에 코드를 실행
  1 2 3
  
  setTimeout(function() { console.log("Hey"); }, 1000);
- 인터벌 : 페이지가 종료되거나 인터벌을 취소하기 전까지 일정한 시간마다 코드를 실행
  1 2 3
  
  setInterval(function() { console.log("Hey"); }, 1000)
자바스크립트는 단일 스레드이므로 한 번에 한 가지 코드만 실행가능, 즉 큐를 이용해 코드의 실행을 관리

인터벌 사이의 시간을 정확히 보장하기 어렵고, 이따금 일부 인터벌을 건너 뛰기도 해서 실무에서는 잘 사용하지 않는다. 기능을 쓴다면, 아래처럼 setTimeout 을 사용

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var num = 0;
var max = 10;
  
function incrementNum() {
  num++;
    
  if(num < max) {
    setTimeout(incrementNum, 500);
  } else {
    alert("Done");
  }
}
  
setTimeout(incrementNum, 500);

시스템 대화 상자
- alert : 확인 창
- confirm : yes/no
- prompt : 입력 파라미터를 받는 창

2. location 객체

현재 창에 불러온 문서 정보와 함께 일반적인 내비게이션 기능을 제공
window.location == document.location
URL을 파싱해서 정보를 가지고 있음
- hash : “#posts” - url 해쉬
- host : “ysjune.github.io:80” - 서버 이름과 포트번호
- search : “?name=snack” - URL 쿼리 스트링
- 등등
쿼리 스트링의 매개변수는 대개 인코드되어 있으므로 decodeURIComponent()로 디코드 하여 사용

location 을 사용하여 페이지 이동

1
2
3
4
5
6
7


location.assign("http://ysjune.github.io");
  
== window.location = "http://ysjune.github.io";
  
== location.href = "http://ysjune.github.io";
  
// URL 값을 지정하면 assign() 메소드를 호출한 것과 같음

현재 페이지를 다시 불러오는 메소드는 reload()

1
2


location.reload();  // 가능하면 캐시
location.reload(true);  // 항상 서버에서

3. navigator 객체

일반적으로 웹 페이지를 실행 중인 브라우저 타입을 판단하는 데 사용
plugins 배열에서 플러그인 정보를 얻을 수 있음
- name - 플러그인 이름
- description - 플러그인 설명
- filename - 플러그인 파일 이름
- length - 플러그인이 처리하는 마임 타입 숫자

4. screen 객체

픽셀 너비와 높이 등 클라이언트 화면에 관한 정보

5. history 객체

창을 첫 번째 연 이후 사용자의 내비게이션 히스토리를 보관

1
2
3
4
5
6
7


history.go(-1); // 한 페이지 뒤로
  
history.go(1); // 한 페이지 앞으로
  
history.back(); // 한 페이지 뒤로 
  
history.forward(); // 한 페이지 앞으로