BOM

BOM (Browser Object Model)

BOM(Browser Object Model)은 웹 브라우저 환경의 다양한 기능을 객체처럼 다루는 모델입니다. 대부분의 브라우저에서 구현은 되어있지만, 정의된 표준이 없어 브라우저 제작사 마다 세부사항이 다르고 다소 한정적이라는 특징이 있습니다. BOM의 역할은 웹 브라우저의 버튼, URL 주소 입력 창, 타이틀 바 등 웹브라우저 윈도우 및 웹페이지의 일부분을 제어할수 있게끔 하는 것입니다. window 객체를 통해 접근이 가능합니다. 아래는 대표적인 BOM 객체들입니다.

1) window: Global Context. 브라우저 창 객체
2) screen: 사용자 환경의 디스플레이 정보 객체
3) location: 현재 페이지의 url을 다루는 객체
4) navigator: 웹브라우저 및 브라우저 환경 정보 객체
5) history: 현재의 브라우저가 접근했던 URL history

window.close();  //window는 전역객체이기 때문에 생략 가능

open('https://zerocho.herokuapp.com'); // 새 탭
open('https://zerocho.herokuapp.com', '_self'); // 현재 탭
open('', '', 'width=200,height=200'); // 가로세로 200px의 팝업창

window.encodeURI();
window.decodeURI();

setTimeout(function() {
  alert('1초 뒤');
}, 1000);

setInterval(function() {
  console.log('1초마다');
});

//setTimeout을 변수에 저장해두고 정지하고 싶을 때
//clearTimeout 함수의 매개변수로 해당 변수를 넣어준다.
var timeout = setTimeout(function() {}, 1000);
clearTimeout(timeout);

//태그를 매개변수로 넣어서 CSS 스타일을 알 수 있다
console.log(getComputedStyle(document.getElementById('app-root')));

navigator.userAgent; // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36"

navigator.language; // "ko"
navigator.cookieEnabled; // true
navigator.vendor; // "Google Inc"

screen.availHeight; // 1080
screen.availWidth; // 1920
screen.colorDepth; // 24

location.host; // "www.zerocho.com"
location.hostname; // "www.zerocho.com"
location.protocol; // "https:"
location.href; // "https://www.zerocho.com/category/Javascript/post/..."
location.pathname; // "/category/Javascript/post/..."

location.reload(); //새로고침
location.replace(); //현재 주소를 다른 주소로 대체

//앞으로 가기
history.forward();
history.go(1);

//뒤로 가기
history.backward();
history.go(-1);

출처: https://edu.nextstep.camp/s/uInR9EAA/ls/2DsAX0hN https://www.zerocho.com/category/JavaScript/post/573b321aa54b5e8427432946