Bom

• window: 브라우저 윈도우 모양 제어, 새 윈도우 열기/닫기
• location: 브라우저 윈도우에 로드한 HTML 페이지의 URL 관리
• navigator: 브라우저에 대한 다양한 정보 제공
• screen: 브라우저가 실행되고 있는 스크린 장치에 대한 정보 제공
• history: 브라우저 윈도우에 로드한 URL 리스트와 히스토리

자바스크립트로 브라우저를 제어하기 위해 지원하는 객체들은 위와 같다.

국제 표준이 없기 때문에, 브라우저별로 BOM 객체가 상이

window¶

• 열려 있는 브라우저 윈도우나 탭 윈도우의 속성을 나타내는 객체
• 브라우저 윈도우나 탭 윈도우마다 별도의 window 객체 생성
  window 객체의 생성
• 브라우저가 새로운 웹 페이지를 로드
• <iframe> 태그 당 하나의 window 객체 생성
• 자바스크립트 코드로 윈도우 열기 시
  자바스크립트 코드로 window 객체 접근
• window 혹은 window.self 혹은 self
• 다양한 윈도우 객체의 프로퍼티, 메소드, 이벤트 리스너

윈도우 열기¶

window.open()

• 윈도우를 새로 열고 웹 페이지 출력
• 3개의 매개변수를 가진 함수
• window.open(sURL, sWindowName, sFeature)
  • sURL: 윈도우에 출력할 웹 페이지 주소 문자열
  • sWindowName: 새로 여는 윈도우의 이름 문자열로, 생략 가능
  • sFeature: 윈도우 모양, 크기 등의 속성들을 표현하는 문자열
• 윈도우 이름: 개발자가 임의로 정하지만, 지정된 윈도우가 존재

sWindowName¶

sFeature¶

yes는 속성을 반영하도록 지시
no가 디폴트이며 0과 같은 값

윈도우 닫기¶

var newWin=null; // 새로 연 윈도우 기억
function load(URL) {
newWin = window.open(URL, "myWin", "left=300,top=300,width=400,height=300");
}
function closeNewWindow() {
if(newWin==null || newWin.closed) // 윈도우가 열리지 않았거나 닫힌 경우
return; // 윈도우가 없는 경우 그냥 리턴
else
newWin.close(); // 열어 놓은 윈도우 닫기
}

타이머 활용¶

window 객체의 타이머 기능 2가지

• 타임아웃 코드 1회 호출
• setTimeout()/clearTimeout()
• 타임아웃 코드 반복 호출
• setInterval()/clearInterval()

setTimeout()/clearTimeout()¶

var timerID = setTimeout("timeOutCode", msec);
clearTimeout(timerID);

setInterval()/clearInterval()¶

var timerID = setInterval("timeOutCode", msec);
clearInterval(timerID);

윈도우 위치 및 크기 조절¶

윈도우를 오른쪽으로 5픽셀, 아래로 10픽셀 이동

window.moveBy(5, 10);
moveBy(5, 10);

window.moveTo(25, 10);
self.moveTo(25, 10);

window.resizeBy(-5, 10);
resizeTo(self.outerWidth-5, self.outerHeight+10);

window.resizeTo(200, 300);

웹 페이지 스크롤¶

웹 페이지를 위로 10픽셀 스크롤(마우스 스크롤 다운)

window.scrollBy(0, 10); // 옆으로 0, 위로 10픽셀

window.scrollBy(10, -15);

window.scrollTo(0, 200);

location¶

• 윈도우에 로드된 웹 페이지의 URL 정보를 나타내는 객체
• location 객체로 현재 윈도우에 웹 페이지 열기
  

  window.location = "http://www.naver.com";
  window.location.href = = "http://www.naver.com";
  window.location.assign("http://www.naver.com");
  window.location.replace("http://www.naver.com");
  

• 새 윈도우에 웹 페이지 열기
  

  var win=window.open(); // 빈 윈도우 열기
  win.location="http://www.naver.com"; // 네이버 페이지 로드
  

프로퍼티와 메소드¶

navigator¶

• 현재 작동중인 브라우저에 대한 다양한 정보를 나타내는 객체
• window.navigator 또는 navigator

screen¶

• 브라우저가 실행되는 스크린 장치에 관한 정보를 담고 있는 객체
• window.screen 혹은 screen

history¶

• 윈도우에서 방문한 웹 페이지 리스트(히스토리)를 나타내는 객체
• Window.history 혹은 history