Browser Object Model
1. BOM
자바스크립트의 BOM(Browser Object Model)은 웹 브라우저를 제어할 수 있게 해주는 객체 모델로, 웹 페이지 외부의 브라우저 자체와 상호작용할 수 있도록 도와줍니다. BOM의 핵심 객체는 window로, 브라우저 창 자체를 의미하며, 모든 전역 객체와 함수를 포함합니다. 이 window 객체를 통해 alert, setTimeout, console 같은 기능뿐 아니라, location(주소 정보), navigator(브라우저 정보), history(방문 기록), screen(화면 해상도 정보) 등의 하위 객체에 접근할 수 있습니다. BOM은 HTML 문서와 직접적으로 연결되지 않고 브라우저 환경 자체와 관련된 기능을 제공하기 때문에, 자바스크립트를 이용해 페이지를 동적으로 제어하거나 브라우저 정보를 확인하고 조작하는 데 매우 중요합니다.
2. window 객체
window 객체는 자바스크립트에서 브라우저 창을 대표하는 최상위 객체로, 전역 범위에서 정의된 변수나 함수, 타이머, 팝업, 브라우저 정보 등 대부분의 기능을 포함하고 있습니다. HTML 페이지를 로드하면 브라우저는 자동으로 window 객체를 생성하며, 자바스크립트 코드에서 명시적으로 window.를 쓰지 않아도 사용할 수 있는 이유는 이 객체가 전역 컨텍스트로 작동하기 때문입니다. alert(), setTimeout(), console.log() 같은 전역 함수들도 사실상 window.alert(), window.setTimeout()과 같은 방식으로 작동하며, location, navigator, history, screen 같은 하위 객체들을 통해 주소 정보, 브라우저 정보, 방문 기록, 화면 해상도 등을 제어할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>window 객체</title>
</head>
<body>
<h2>window 객체</h2>
<button onclick="showWindowInfo()">브라우저 정보 보기</button>
<script>
function showWindowInfo() {
console.log("브라우저 이름:", window.navigator.appName);
console.log("브라우저 엔진:", window.navigator.product);
console.log("사용자 에이전트:", window.navigator.userAgent);
console.log("현재 페이지 URL:", window.location.href);
console.log("창 너비:", window.innerWidth);
console.log("창 높이:", window.innerHeight);
window.setTimeout(function () {
window.alert("3초가 지났습니다!");
}, 3000);
}
</script>
</body>
</html>
3. location 객체
location 객체는 자바스크립트에서 현재 웹 페이지의 URL(주소) 정보를 다루고 제어할 수 있게 해주는 window 객체의 하위 객체입니다. 이 객체를 통해 현재 페이지의 전체 URL을 확인하거나, 사용자를 다른 페이지로 이동시키는 등의 작업을 할 수 있습니다. location 객체는 주소창과 관련된 정보를 다루거나 페이지 이동을 제어할 때 매우 유용하게 사용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>location 객체</title>
</head>
<body>
<h2>location 객체</h2>
<button onclick="showLocationInfo()">주소 정보 보기</button>
<button onclick="goToNaver()">네이버로 이동</button>
<button onclick="reloadPage()">페이지 새로고침</button>
<script>
// 주소 정보를 출력하는 함수
function showLocationInfo() {
console.log("전체 URL:", location.href);
console.log("프로토콜:", location.protocol);
console.log("호스트:", location.host);
console.log("호스트명:", location.hostname);
console.log("포트번호:", location.port);
console.log("경로:", location.pathname);
console.log("쿼리 문자열:", location.search);
console.log("해시값:", location.hash);
}
// 다른 페이지로 이동
function goToNaver() {
location.href = "https://www.naver.com";
}
// 현재 페이지를 새로고침
function reloadPage() {
location.reload();
}
</script>
</body>
</html>
4. history 객체
history 객체는 자바스크립트에서 브라우저의 방문 기록을 제어할 수 있는 객체로, 사용자가 이전에 방문했던 페이지로 이동하거나 앞으로 다시 이동할 수 있는 기능을 제공합니다. window 객체의 하위에 위치하며, history.back()은 브라우저의 뒤로 가기(←), history.forward()는 앞으로 가기(→) 기능을 수행하고, history.go(n)은 현재 위치에서 상대적인 n번째 페이지로 이동하게 합니다. 이 객체는 싱글 페이지 애플리케이션(SPA)에서도 자주 사용되며, URL 변경 없이도 히스토리를 조작할 수 있어 사용자 경험을 개선하는 데 중요한 역할을 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>history 객체</title>
</head>
<body>
<h2>history 객체</h2>
<button onclick="goBack()">뒤로 가기</button>
<button onclick="goForward()">앞으로 가기</button>
<button onclick="goSteps(-2)">2단계 뒤로 가기</button>
<button onclick="showHistoryLength()">방문 기록 개수</button>
<script>
function goBack() {
history.back(); // 이전 페이지로 이동
}
function goForward() {
history.forward(); // 다음 페이지로 이동
}
function goSteps(n) {
history.go(n); // n단계 앞으로(+), 뒤로(-) 이동
}
function showHistoryLength() {
alert("방문 기록 수: " + history.length);
}
</script>
</body>
</html>
5. navigator 객체
navigator 객체는 자바스크립트에서 브라우저에 대한 정보를 제공하는 객체로, 사용자의 브라우저 종류, 버전, 운영체제, 언어 설정, 온라인 여부 등 다양한 환경 정보를 확인할 수 있도록 해줍니다. 이 객체는 window.navigator를 통해 접근하며, 대표적인 프로퍼티로는 userAgent(브라우저와 OS 정보), language(사용자 언어 설정), platform(운영체제), onLine(온라인 여부), cookieEnabled(쿠키 사용 가능 여부) 등이 있습니다. 이 정보는 웹사이트가 사용자 환경에 맞게 콘텐츠를 조정하거나 기능을 제한할 때 유용하게 사용됩니다. 단, 보안상의 이유로 일부 정보는 제한되거나 정확하지 않을 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>navigator 객체</title>
</head>
<body>
<h2>navigator 객체</h2>
<button onclick="showNavigatorInfo()">브라우저 정보 보기</button>
<script>
function showNavigatorInfo() {
console.log("브라우저 이름 (userAgent):", navigator.userAgent);
console.log("운영체제 (platform):", navigator.platform);
console.log("언어 설정 (language):", navigator.language);
console.log("온라인 여부 (onLine):", navigator.onLine);
console.log("쿠키 사용 가능 여부 (cookieEnabled):", navigator.cookieEnabled);
}
</script>
</body>
</html>
navigator.geolocation
navigator.geolocation은 자바스크립트에서 사용자의 위치 정보를 가져오기 위한 API로, GPS, Wi-Fi, IP 주소 등을 이용해 현재 위치를 알아냅니다. 이 기능은 사용자의 명시적인 동의가 있어야 작동하며, 주요 메서드로는 getCurrentPosition()(현재 위치 1회 조회), watchPosition()(위치 추적), clearWatch()(위치 추적 중단) 등이 있습니다. 위치 정보를 활용하면 날씨 앱, 지도 앱, 근처 맛집 찾기 등 다양한 위치 기반 서비스를 구현할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Geolocation</title>
</head>
<body>
<h2>내 현재 위치 보기</h2>
<button onclick="getLocation()">위치 가져오기</button>
<p id="locationInfo">위치 정보가 여기에 표시됩니다.</p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
document.getElementById("locationInfo").innerText =
"이 브라우저는 위치 정보를 지원하지 않습니다.";
}
}
function showPosition(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
document.getElementById(
"locationInfo"
).innerText = `위도: ${latitude}, 경도: ${longitude}`;
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("사용자가 위치 정보 제공을 거부했습니다.");
break;
case error.POSITION_UNAVAILABLE:
alert("위치 정보를 사용할 수 없습니다.");
break;
case error.TIMEOUT:
alert("위치 정보를 가져오는 데 시간이 초과되었습니다.");
break;
default:
alert("알 수 없는 오류가 발생했습니다.");
}
}
</script>
</body>
</html>