BOM

브라우저 객체 모델 (BOM)

**브라우저 객체 모델(BOM, Browser Object Model)**은 자바스크립트가 웹 브라우저의 기능들에 접근하고 제어할 수 있게 도와주는 객체들의 집합입니다.

문서 내용 자체를 다루는 DOM과 달리, BOM은 브라우저 창의 크기, 주소창의 경로, 방문 기록, 사용자의 기기 정보 등 브라우저 그 자체를 제어하는 데 집중합니다.

---

1. window 객체

BOM의 최상위 객체로, 브라우저 창 그 자체를 나타냅니다. 자바스크립트의 모든 전역 변수와 함수는 사실 이 window 객체의 프로퍼티와 메서드입니다.

📋 window 객체의 주요 속성과 메서드

구분	이름	설명
속성	innerWidth / innerHeight	브라우저 창의 안쪽 너비와 높이 (뷰포트 크기)
속성	localStorage / sessionStorage	웹 브라우저의 로컬/세션 저장소
메서드	alert() / confirm() / prompt()	알림창, 확인창, 입력창을 띄움
메서드	open() / close()	새 창을 열거나 현재 창을 닫음
메서드	setTimeout() / setInterval()	특정 시간 뒤에 함수를 실행하거나 반복 실행함

---

2. navigator 객체

사용자가 사용 중인 웹 브라우저의 종류, 버전, 운영체제 등 브라우저의 정보를 담고 있는 객체입니다.

📋 navigator 객체의 주요 속성과 메서드

구분	이름	설명
속성	userAgent	브라우저와 운영체제의 전체 정보 문자열을 반환
속성	language	브라우저에 설정된 기본 언어
속성	onLine	현재 네트워크 연결 상태 (온라인/오프라인) 여부
메서드	geolocation	사용자의 현재 위치 정보를 파악하는 기능을 제공
메서드	clipboard	텍스트 복사 및 붙여넣기 등 클립보드 기능 제공

---

3. location 객체

현재 페이지의 URL 주소와 관련된 정보를 담고 있으며, 주소를 변경하여 페이지를 이동시킬 때 자주 사용합니다.

📋 location 객체의 주요 속성과 메서드

구분	이름	설명
속성	href	현재 페이지의 전체 URL 주소 (값을 바꾸면 해당 주소로 이동)
속성	host	URL의 호스트 이름과 포트 번호
속성	pathname	도메인 뒤의 세부 경로명
메서드	reload()	현재 페이지를 새로고침함
메서드	replace(url)	현재 페이지를 새로운 URL로 대체 (뒤로 가기 기록이 남지 않음)

---

4. history 객체

브라우저의 **방문 기록(History)**을 관리하는 객체입니다. 사용자가 이전에 방문한 페이지로 이동하거나 앞으로 이동할 때 사용합니다.

📋 history 객체의 주요 속성과 메서드

구분	이름	설명
속성	length	현재 브라우저 창에 쌓인 방문 기록의 전체 개수
메서드	back()	이전 페이지로 이동 (브라우저의 뒤로 가기 버튼과 동일)
메서드	forward()	다음 페이지로 이동 (브라우저의 앞으로 가기 버튼과 동일)
메서드	go(n)	입력한 숫자만큼 페이지 이동 (예: -2는 두 단계 뒤로 가기)

---

5. screen 객체

사용자의 모니터(화면) 크기나 해상도 정보를 제공하는 객체입니다. 브라우저 창의 크기가 아닌, 실제 물리적인 모니터의 사양을 알려줍니다.

📋 screen 객체의 주요 속성

구분	이름	설명
속성	width / height	모니터 화면의 전체 너비와 높이 해상도
속성	availWidth / availHeight	작업 표시줄 등을 제외한 실제 사용 가능한 화면 크기
속성	colorDepth	화면에서 한 픽셀당 표현 가능한 비트 수 (색상 표현력)

---

🖥️ 실전 예제 코드: "BOM 객체 정보 출력하기"

JavaScript

 

// 현재 페이지 주소 출력 및 이동
console.log("현재 주소:", location.href);
// location.href = "https://www.google.com"; // 주석 해제 시 구글로 이동

// 브라우저 정보 확인
console.log("사용 중인 브라우저:", navigator.userAgent);

// 뒤로 가기 버튼 만들기
function goBack() {
    history.back();
}

// 3초 뒤에 알림창 띄우기
window.setTimeout(() => {
    alert("BOM 공부는 즐겁나요?");
}, 3000);

---

학습 정리

• **window**는 모든 브라우저 객체의 뿌리가 되는 가장 큰 단위이다.
• **location**은 주소창을 제어하고, **history**는 페이지 이동 기록을 담당한다.
• **navigator**는 브라우저의 정보를, **screen**은 모니터의 사양을 알려준다.

---

 

---

---

🖥️ BOM 객체별 실전 예제 코드

1. window 객체 예제: 창 제어와 타이머

window 객체는 브라우저의 전반적인 기능을 제어합니다. window.은 생략하고 사용할 수 있습니다.

JavaScript

 

// 1. 대화 상자 띄우기
alert("반갑습니다! 확인을 눌러주세요.");

const isExit = confirm("정말로 페이지를 나가시겠습니까?");
if (isExit) {
    console.log("사용자가 확인을 눌렀습니다.");
}

// 2. 타이머 기능 (3초 뒤에 실행)
setTimeout(() => {
    console.log("3초가 지났습니다!");
}, 3000);

// 3. 브라우저 창 크기 확인
console.log(`창 너비: ${innerWidth}, 창 높이: ${innerHeight}`);

---

2. location 객체 예제: 주소 정보와 이동

현재 접속 중인 페이지의 주소를 분석하거나 다른 페이지로 보낼 때 사용합니다.

JavaScript

 

// 1. 현재 주소 정보 상세 출력
console.log("전체 URL: ", location.href);
console.log("호스트: ", location.host);
console.log("경로: ", location.pathname);

// 2. 페이지 이동 함수
function goToGoogle() {
    location.href = "https://www.google.com";
}

// 3. 페이지 새로고침 함수
function refreshPage() {
    location.reload();
}

---

3. navigator 객체 예제: 브라우저 정보와 권한

브라우저의 특성이나 사용자의 환경(배터리, 위치 등)을 파악합니다.

JavaScript

 

// 1. 브라우저 및 운영체제 정보 출력
console.log("브라우저 정보: ", navigator.userAgent);

// 2. 온라인/오프라인 상태 확인
if (navigator.onLine) {
    console.log("현재 인터넷에 연결되어 있습니다.");
} else {
    console.log("네트워크 연결이 끊겼습니다.");
}

// 3. 사용자의 언어 설정 확인
console.log("설정된 언어: ", navigator.language);

---

4. history 객체 예제: 방문 기록 제어

사용자의 방문 기록을 바탕으로 앞뒤 페이지 이동을 구현합니다.

JavaScript

 

// 1. 이전 페이지로 이동 (뒤로 가기)
function goBack() {
    history.back();
}

// 2. 다음 페이지로 이동 (앞으로 가기)
function goForward() {
    history.forward();
}

// 3. 방문 기록 개수 확인
console.log(`현재 탭에 쌓인 방문 기록: ${history.length}개`);

// 4. 특정 단계만큼 이동 (2단계 전으로)
// history.go(-2);

---

5. screen 객체 예제: 화면 사양 확인

브라우저 창이 아닌 사용자의 실제 모니터 크기를 확인하여 적절한 해상도 처리를 돕습니다.

JavaScript

 

// 1. 모니터 전체 해상도 확인
const screenW = screen.width;
const screenH = screen.height;
console.log(`모니터 해상도: ${screenW} x ${screenH}`);

// 2. 실제 사용 가능한 화면 크기 (작업 표시줄 제외)
const availW = screen.availWidth;
const availH = screen.availHeight;
console.log(`사용 가능한 해상도: ${availW} x ${availH}`);

---

🎓 학습 포인트

1. window는 모든 BOM 객체의 부모이며, 전역 범위를 담당합니다.
2. location의 href 속성을 수정하면 즉시 페이지가 이동됩니다.
3. history는 보안상 사용자가 어떤 사이트를 방문했는지 구체적인 URL은 알려주지 않고, 앞뒤 이동 기능만 제공합니다.
4. navigator를 활용하면 사용자가 모바일로 접속했는지 PC로 접속했는지 판단하는 기능을 만들 수 있습니다.

---

이제 BOM 객체들의 이론과 실습 코드를 모두 갖추게 되었습니다.

---