⏰ 2024.11.27 (D+35)
1. BOM (Browser Object Model) 객체란?
- BOM (Browser Object Model)은 웹 브라우저를 제어
- 브라우저의 정보를 다루는 JavaScript 객체들을 제공하는 모델
- HTML, CSS와 함께 웹 페이지의 동적 기능을 구현하는 데 중요한 역할
- 주로 location, history, navigator, screen, window 객체 등이 포함
- 브라우저의 동작을 제어하고, 사용자 환경에 대한 정보를 처리
2. 주요 BOM 객체 설명
1) location 객체
- location 객체는 브라우저에서 현재 URL을 다루는 객체
- 페이지의 이동, 새로 고침, URL 정보 등을 다룬다
✅ location.href
: 현재 페이지의 전체 URL을 반환하거나, 페이지를 새로운 URL로 이동
(예) location.href = 'https://www.example.com'을 실행하면 해당 URL로 이동✅ location.protocol
: URL의 프로토콜 부분을 반환
(예: http:, https:)✅ location.hostname
: URL의 도메인 부분을 반환
(예: www.example.com)✅ location.port
: URL에서 포트 번호를 반환
(예: 80, 443)✅ location.pathname
: URL에서 경로 부분을 반환
(예: /about/index.html)✅ location.search
: URL에서 쿼리 문자열(검색 파라미터)을 반환
(예: ?id=123&name=abc)✅ location.reload()
: 페이지를 새로 고침✅ location.replace()
: 현재 페이지를 새로운 페이지로 교체
(뒤로 가기 기능이 비활성화)
2) history 객체
- history 객체는 브라우저의 히스토리(방문한 페이지 목록)를 다루는 객체
- 사용자가 이전 또는 다음 페이지로 이동할 수 있도록 한다
✅ history.back()
: 브라우저의 "뒤로 가기" 버튼과 같은 기능
(이전 페이지로 이동)✅ history.forward()
: "앞으로 가기" 버튼과 같은 기능
(다음 페이지로 이동)✅ history.go()
: 주어진 인자에 해당하는 위치로 이동
(예: history.go(-1)은 한 페이지 뒤)
(예: history.go(1)은 한 페이지 앞으로 이동)
3) navigator 객체
- navigator 객체는 사용자의 브라우저 및 환경에 대한 정보를 제공하는 객체
- 사용자가 어떤 브라우저를 사용하는지, 어떤 운영체제를 사용하는지 등의 정보 파악 가능
✅ navigator.userAgent
: 사용자의 브라우저와 운영체제에 대한 정보를 포함하는 문자열을 반환
(예: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"✅ navigator.vendor
: 브라우저 벤더 정보(예: Google Inc., Mozilla) 등을 반환✅ navigator.geolocation
: 사용자의 위치 정보를 얻을 수 있는 Geolocation API를 제공
4) screen 객체
- screen 객체는 사용자의 화면 해상도와 관련된 정보를 제공
- 화면 크기나 해상도와 같은 정보를 다룰 수 있다
✅ screen.width
: 화면의 전체 가로 해상도를 반환✅ screen.height
: 화면의 전체 세로 해상도를 반환✅ screen.availWidth
: 화면에서 사용 가능한 가로 해상도를 반환
(예: 작업 표시줄을 제외한 크기)✅ screen.availHeight
: 화면에서 사용 가능한 세로 해상도를 반환
(예: 작업 표시줄을 제외한 크기)✅ screen.availTop
: 화면의 상단 좌표를 반환
(예: 작업 표시줄 등의 높이를 나타냅니다)
5) window 객체
- window 객체는 브라우저 창 자체를 제어하는 객체
- 페이지의 크기, 위치, 창 리사이징 등을 다룰 수 있다
✅ window.innerWidthh
: 브라우저 콘텐츠 영역의 가로 크기를 반환✅ window.innerHeight
: 브라우저 콘텐츠 영역의 세로 크기를 반환
3. HTML 코드 설명
- 위 코드에서는 BOM 객체의 다양한 기능들을 활용하여 브라우저의 정보를 출력
- 페이지 이동 및 상태 변경을 제어하는 기능을 구현
1) 로그인 기능
function fnLogin() {
var username = document.querySelector('#user').value;
var password = document.querySelector('#pass').value;
if (username === 'KIM' && password === '1234') {
location.replace('DOM09_4.html'); // 로그인 성공 시 페이지 이동
} else {
alert('아이디와 비번이 틀려요'); // 로그인 실패 시 경고
}
}- 사용자가 로그인 버튼을 클릭하면 입력한 아이디와 비밀번호를 검증
- 아이디가 KIM이고 비밀번호가 1234인 경우 DOM09_4.html 페이지로 이동
- location.replace() 메소드를 사용하여 페이지를 새로 교체하므로 뒤로 가기 기능이 비활성화
2) location 객체 활용
console.log(location.protocol); // http: 또는 https:
console.log(location.hostname); // www.example.com
console.log(location.href); // 전체 URL
console.log(location.pathname); // /about/index.html
console.log(location.search); // ?id=123&name=abc- location 객체의 속성을 출력하여 현재 페이지의 URL 정보
(프로토콜, 호스트명, 경로, 쿼리 문자열 등)를 확인
3) history 객체 활용
<input type="button" value="다음 페이지" onclick="history.go(1)" />
<input type="button" value="이전 페이지" onclick="history.back()" />- history.go(1)은 히스토리에서 다음 페이지로 이동
- history.back()은 이전 페이지로 이동하는 기능을 제공
4) navigator 객체 활용
<input type="button" value="웹브라우저 종류" onclick="console.log(navigator.userAgent);" />- 사용자가 사용하는 브라우저와 운영체제에 대한 정보를 navigator.userAgent를 통해 콘솔에 출력
5) screen 객체 활용
console.log(screen.availWidth); // 사용 가능한 화면 가로 크기
console.log(screen.availHeight); // 사용 가능한 화면 세로 크기
console.log(screen.width); // 전체 화면 가로 크기
console.log(screen.height); // 전체 화면 세로 크기- 화면의 해상도와 사용 가능한 영역을 screen 객체를 통해 확인
6) 브라우저 크기 변경 시 동작
window.onresize = () => {
console.log('컨텐츠 영역의 가로폭:', window.innerWidth);
console.log('컨텐츠 영역의 세로폭:', window.innerHeight);
};- 브라우저 창의 크기가 변경될 때마다, window.innerWidth와 window.innerHeight를 사용하여 콘텐츠 영역의 크기를 콘솔에 출력
