HTML.윈도우와 브라우저 관련 객체

 

자바스크립트 BOM 완전 정리 – Window 객체와 주요 BOM 객체들

안녕하세요! 웹 페이지의 HTML 요소 제어를 배웠다면, 이제는 웹 페이지를 담고 있는 브라우저 자체를 제어하는 방법을 배워볼 차례입니다. 오늘은 BOM(Browser Object Model)의 핵심인 window 객체와 그 외 유용한 브라우저 관련 객체들을 쉽게 이해하고, 꼭 필요한 핵심 코드 예제도 함께 소개합니다.

목차

• 1. BOM(Browser Object Model)이란?
• 2. Window 객체: 브라우저의 최상위 객체
• 3. 그 외 유용한 BOM 객체들
• 4. 마무리하며

---

1. BOM(Browser Object Model)이란?

HTML DOM이 웹 페이지의 콘텐츠를 객체로 표현해 자바스크립트로 조작할 수 있게 한다면, BOM은 웹 페이지를 둘러싼 브라우저의 다양한 기능을 자바스크립트로 제어할 수 있도록 해주는 객체 모델입니다.

주요 BOM 객체들:
window, location, navigator, screen, history

이를 통해 새 창을 열거나 닫고, 주소창을 변경하거나, 사용자의 화면 해상도를 알아내는 등 브라우저 관련 작업을 할 수 있습니다.

2. Window 객체: 브라우저의 최상위 객체

window 객체는 모든 전역 변수, 함수, 그리고 BOM의 다른 객체들의 부모 역할을 하는 최상위 객체입니다.

Window 객체의 주요 기능과 예제

새 창 열기 / 닫기

// 새 창 열기
const newWin = window.open("https://example.com", "exampleWindow", "width=600,height=400,resizable=yes");

// 새 창 닫기 (스크립트로 연 창에 한함)
newWin.close();

윈도우 위치 이동 및 크기 조절

// 창 위치 이동
window.moveTo(100, 100);

// 창 크기 조절
window.resizeTo(800, 600);

타이머 기능

// 1초 후에 함수 실행
setTimeout(() => {
  alert("1초 후 메시지!");
}, 1000);

// 0.5초마다 반복 실행 (5회 후 중지)
let count = 0;
const timerId = setInterval(() => {
  console.log(`반복 실행 ${count + 1}회`);
  count++;
  if (count === 5) clearInterval(timerId);
}, 500);

대화상자

// alert
alert("안녕하세요!");

// confirm
if (confirm("정말 삭제하시겠습니까?")) {
  console.log("삭제 처리");
} else {
  console.log("취소됨");
}

// prompt
const name = prompt("이름을 입력하세요", "익명");
console.log("입력한 이름:", name);

기타 유용한 메소드

• window.print(): 현재 페이지 인쇄
• window.focus(): 창에 포커스 주기
• window.blur(): 창에서 포커스 제거

3. 그 외 유용한 BOM 객체들

Location 객체 – URL 다루기

// 현재 URL 정보
console.log(location.href);
console.log(location.hostname);
console.log(location.pathname);

// 페이지 이동
// location.href = "https://naver.com";

// 새로고침
location.reload();

Navigator 객체 – 브라우저 정보

console.log("브라우저 이름:", navigator.appName);
console.log("브라우저 버전:", navigator.appVersion);
console.log("사용자 에이전트:", navigator.userAgent);
console.log("운영체제:", navigator.platform);
console.log("브라우저 언어:", navigator.language);

Screen 객체 – 화면 정보

console.log("화면 전체 너비:", screen.width);
console.log("화면 전체 높이:", screen.height);
console.log("사용 가능한 너비:", screen.availWidth);
console.log("사용 가능한 높이:", screen.availHeight);
console.log("색상 깊이:", screen.colorDepth);

History 객체 – 방문 기록 제어

// 이전 페이지로 이동
history.back();

// 다음 페이지로 이동
history.forward();

// 특정 기록 위치로 이동 (음수: 뒤로, 양수: 앞으로)
history.go(-2);

4. 마무리하며

자바스크립트의 BOM을 잘 활용하면, 웹 페이지를 넘어서 브라우저 자체의 다양한 기능까지 자유롭게 제어할 수 있습니다. Window 객체는 타이머, 대화상자, 창 제어 등 핵심 기능을 제공하며, Location, Navigator, Screen, History 객체는 각각 URL, 브라우저 정보, 화면 정보, 방문 기록 등을 다룰 수 있게 해줍니다.
실제 프로젝트에서 BOM을 적절히 활용해 사용자 경험을 크게 향상시켜 보세요!