8. 브라우저 객체 모델

다루는 내용

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

1. window 객체

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

  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() 는 최상위 창에서만 동작하며, 기본적으로 비활성화 되어 있음

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

• resizeTo() / resizeBy()

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

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

  //<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) 에 대한 포인터는 존재하지만, 그 역은 존재하지 않음

• 브라우저에서 자바스크립트는 단일 스레드로 실행되지만, 타임 아웃과 인터벌을 통해 코드가 특정 시간에 실행되게끔 조절할 수 있음

  • 타임 아웃 : 일정 시간 뒤에 코드를 실행

    setTimeout(function() {
      console.log("Hey");
    }, 1000);

  • 인터벌 : 페이지가 종료되거나 인터벌을 취소하기 전까지 일정한 시간마다 코드를 실행

    setInterval(function() {
      console.log("Hey");
    }, 1000)

• 자바스크립트는 단일 스레드이므로 한 번에 한 가지 코드만 실행가능, 즉 큐를 이용해 코드의 실행을 관리

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

  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 을 사용하여 페이지 이동

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

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

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

3. navigator 객체

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

4. screen 객체

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

5. history 객체

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

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