BOM(Browser Object Model)

💁‍♀️ BOM(Browser Object Model)이란,
브라우저 객체 모델을 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체

---

👀 브라우저 환경

자바스크립트가 돌아가는 플랫폼을 호스트(host)라고 부름.

• 호스트 환경이 웹 브라우저일 때 사용할 수 있는 기능은 개괄적으로 아래와 같음
  • window
    ㄴ DOM
    ㄴ BOM (location, navigator, screen, history, ...)
    ㄴ JavaScript (Object, Array, Function, ...)

---

• 최상단의 window 객체는 자바스크립트 코드의 전역 객체이자 브라우저 창을 대변하고 이를 제어할 수 있는 메소드를 제공
• window 객체는 전역 객체이므로 메소드 호출 시 생략 가능

1) open

window.open(url, name, params) 메소드로 새 창을 열 수 있음.

• url : 새 창에 로드할 url
• name : 새 창의 이름으로 해당 이름을 가진 창이 이미 있으면 그 안에서 열리고 그렇지 않으면 새 창이 열림
• params : 새 창의 설정을 쉼표로 구분하여 문자열로 전달

<button id="btn1">새로운 창 열기</button>
<button id="btn2">새로운 창 열기</button>

document.getElementById('btn1').onclick = () => {
    window.open('http://www.google.com', 'popup1', 'width=1080, height=800');
};

document.getElementById('btn2').onclick = () => {
	open('http://www.naver.com', 'popup2'); // 따로 크기를 지정하지 않았을 경우 새 창
}

2) alert

window.alert(message) 메소드는 확인 버튼을 가지며 메세지를 지정할 수 있는 경고 대화상자를 띄움

window.alert('오늘 점심은 떡볶이!')

3) confirm

window.confirm(message) 메소드는 확인과 취소 두 버튼을 가지며 메세지를 지정할 수 있는 모달 대화상자를 띄움. '확인'을 누를 시 true, '취소'를 누르거나 ESC 키를 누르면 false 반환

const answer = window.confirm('더 드시려면 확인을 누르세요!')

if(answer) { // true or false가 반환되기 때문에 선택에 따른 다른 결과를 콘솔에 출력 가능
        console.log('순대 한 접시 추가!');
} else {
        console.log('흠 평소답지않군');
}

4) propmt

window.prompt(message, default) 메소드는 사용자가 텍스트를 입력할 수 있도록 안내하는 선택적 메세지를 갖고 있는 대화 상자를 띄움. default는 텍스트 입력 필드에 기본으로 채워 넣을 문자열.
반환 값은 확인을 누를 시 사용자가 입력한 문자열이며 취소를 누르거나 ESC 키를 누르면 null이다.

        const likeNumber = window.prompt('몇 인분 더 먹을거에요?', 3); // 3은 창 안의 default 값

        if(likeNumber) {
            console.log(`떡볶이 ${likeNumber}인분 추가!`)
        } else {
            console.log('안드세유?')
        }

---

👀 BOM

1) location

💁‍♀️ 현재 url을 읽을 수 있게 해주고 새로운 url로 변경(redirect)할 수 있게 해줌

/* 다양한 방식으로 연결 */
document.getElementById('btn1').onclick = () => location.assign('http://www.google.com');
document.getElementById('btn2').onclick = () => location = 'http://www.google.com';
document.getElementById('btn3').onclick = () => location.href = 'http://www.google.com';
document.getElementById('btn4').onclick = () => location.replace('http://www.google.com'); // 이전 페이지를 참조 불가 (뒤로가기 X)
document.getElementById('btn5').onclick = () => location.reload();
document.getElementById('btn6').onclick = () => location = location;
document.getElementById('btn7').onclick = () => location.href = location.href;

2) navigator

💁‍♀️ 브라우저와 운영체제에 대한 정보를 제공

for(prop in navigator) {
	console.log(`${prop} : ${navigator[prop]}`); // 콘솔에 정보 출력
}

3) screen

💁‍♀️ 웹 브라우저 화면이 아닌 '운영체제 화면'의 속성을 가지는 객체

• screen.width, screen.height : 화면 너비와 높이
• screen.availwidth, screen.availHeight : 실제 화면에서 사용 가능한 (상태 표시줄 등을 제외한) 너비와 높이
• screen.colorDepth : 사용 가능한 색상 수
• screen.pixelDepth : 한 픽셀 당 비트 수

for(prop in screen) {
	console.log(`${prop} : ${screen[prop]}`);
}

4) history

💁‍ 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공

• length : 현재 페이지를 포함해, 세션 기록의 길이를 나타내는 정수 값
• back() : 뒤로 가기
• forward() : 앞으로 가기
• go() : 인수로 전달한 값만큼 이동

<button id="btn1">뒤로 가기</button>
<button id="btn2">앞으로 가기</button>
<input type="number" name="page">
<button id="btn3">입력한 만큼 이동하기</button>

console.log(history.length);
document.getElementById('btn1').onclick = () => history.back();     // 뒤로가기
document.getElementById('btn2').onclick = () => history.forward();  // 앞으로 가기
document.getElementById('btn3').onclick = () => {
	let page = document.querySelector('input[name=page]').value;
	history.go(page); // 입력한 만큼 이동하기
};