반응형
BOM (Browser Object Model)
- 브라우저 자체를 객체처럼 다루는 기능
- 브라우저의 기능을 자바스크립트로 제어하는 구조
- window (창)
- navigator (사용자 환경)
- location (주소)
- screen (화면)
- history (방문 기록)
참조 자료
https://enjoydev.life/blog/frontend/1-dom
window 객체
- 브라우저 창 전체, 최상위 객체
예문 - 알림 창 띄우기
window.alert("안녕하세요!");
실습 - 팝업 띄우기
function openPopup() {
window.open("popup.html", "popup", "width=300,height=300");
}
실습 - 3초 후 알림
setTimeout(() => {
alert("3초가 지났습니다!");
}, 3000);
navigator 객체
- 사용자 브라우저 정보, 운영체제 정보 등을 담고 있음
- navigator.userAgent
- navigator.language
- navigator.platform
실습
console.log("브라우저 이름:", navigator.appName);
console.log("사용자 에이전트:", navigator.userAgent);
console.log("온라인 상태:", navigator.onLine);
console.log("사용 언어:", navigator.language);
location 객체
- 현재 페이지의 URL 정보에 접근하거나 다른 페이지로 이동할 때 사용
console.log("전체 URL:", location.href);
console.log("호스트:", location.hostname);
console.log("경로:", location.pathname);
location.reload(); // 페이지 새로고침
실습
if (confirm("구글로 이동할까요?")) {
location.href = "https://www.google.com";
}
else {
location.reload();
}
screen 객체
- 화면 해상도 같은 사용자의 화면 정보 제공
console.log("화면 너비:", screen.width);
console.log("화면 높이:", screen.height);
실습 - 사용자 화면의 가용 영역
console.log("사용 가능한 너비:", screen.availWidth);
console.log("사용 가능한 높이:", screen.availHeight);
history 객체
- 방문 기록 이동 등의 사용자의 브라우저 방문 기록을 제어
history.back(); // 뒤로가기
history.forward(); // 앞으로가기
예문
console.log("방문한 페이지 수:", history.length);실습 - 사용자의 언어에 따라 인사 메시지
const lang = navigator.language;
if (lang.startsWith("ko")) {
alert("안녕하세요!");
} else if (lang.startsWith("en")) {
alert("Hello!");
} else {
alert("Welcome!");
}요약
연습문제 - 탭 닫기 전 경고 알림창 띄우기
- ＃window.onbeforeunload 이용
<!DOCTYPE html>
<html>
<head>
<title>탭 닫기 방지</title>
</head>
<body>
<h2>작업 중입니다. 이 페이지를 닫지 마세요!</h2>
<script>
window.onbeforeunload = function () {
return "작업 내용이 저장되지 않을 수 있습니다. 정말 떠나시겠습니까?";
};
</script>
</body>
</html>
연습문제 - 사용자의 브라우저 정보 및 위치 정보 출력
- ＃window.navigator, ＃window.screen, ＃window.location 이용
<!DOCTYPE html>
<html>
<head>
<title>BOM 브라우저 정보</title>
</head>
<body>
<h2>📱 브라우저 정보</h2>
<ul id="info"></ul>
<script>
const info = document.getElementById("info");
const li = (text) => `<li>${text}</li>`;
info.innerHTML += li(`언어: ${navigator.language}`);
info.innerHTML += li(`브라우저: ${navigator.userAgent}`);
info.innerHTML += li(`화면 해상도: ${screen.width}x${screen.height}`);
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
info.innerHTML += li(`위도: ${position.coords.latitude}`);
info.innerHTML += li(`경도: ${position.coords.longitude}`);
}, () => {
info.innerHTML += li("위치 정보를 가져올 수 없습니다.");
});
} else {
info.innerHTML += li("이 브라우저는 위치 정보를 지원하지 않습니다.");
}
</script>
</body>
</html>
출력 화면
반응형
'Front-End > JavaScript' 카테고리의 다른 글
| JavaScript #17 (fetch, 비동기 처리) (1) | 2025.07.07 |
|---|---|
| JavaScript #16 (ES6, ESNext 문법) (2) | 2025.07.07 |
| JavaScript #14 (form) (0) | 2025.06.30 |
| JavaScript #13 (DOM 이벤트) (1) | 2025.06.26 |
| JavaScript #12 (배열) (0) | 2025.06.25 |
