-
브라우저 객체(BOM)웹 프로그래밍/FE(Front-End) 2021. 7. 4. 23:20
오늘은 브라우저 객체(BOM)에 대해 정리해보려고 한다.
BOM(Browser Object Model)은 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델로 웹 브라우저가 가지고 있는 모든 객체를 의미한다. 공식 표준은 아니지만 브라우저 대부분이 자바스크립트와의 상호작용에 있어서 비슷한 메소드와 속성으로 동작하기에 이와 같은 메소드들을 통칭하여 BOM이라고 한다.
BOM을 사용하면 자바스크립트가 브라우저와 대화할 수 있고 BOM의 객체모델을 보면 아래와 같다.
최상위 객체는 window 객체이고 하위 객체로 6개의 객체를 가지고 있다.
그러면 각각의 객체에 대해 알아보자.
1) window 객체
window 객체는 모든 브라우저에서 지원되는 객체로 우리가 보고 있는 브라우저 창을 의미한다.
window 객체의 특징은 전역 객체를 만들 때 자동으로 생성되는 전역 객체이며 이들은 자동으로 window 객체의 멤버가 된다.
즉, 위 특징으로 아래의 코드가 같다는 것이다.
// window 객체를 생략가능 window.document.getElementById("div-1"); document.getElementById("div-1"); // window객체의 메소드를 사용 시에도 생략가능 window.alert("설명,,"); alert("설명,,");
window의 속성은 아래의 표와 같다.
window 객체의 속성과 메소드는 아래의 링크에 자세한 설명이 있어 참고하면 좋을 것 같다.
https://www.w3schools.com/jsref/obj_window.asp
2) screen 객체
screen 객체는 사용자 화면에 대한 정보를 가지고 있는 객체이다.
screen 객체는 메소드가 없고 속성만 존재하여 사용자 화면의 정보를 제공하는데 screen 객체의 메소드는 아래의 표와 같다.
속성 설명 width 윈도우가 아닌 스크린의 화면 너비를 픽셀 단위로 반환 height 윈도우가 아닌 스크린의 화면 높이를 픽셀 단위로 반환 availWidth 작업 표시줄과 같은 인터페이스 기능을 제외한 스크린의 너비를 픽셀 단위로 반환 availHeight 작업 표시줄과 같은 인터페이스 기능을 제외한 스크린의 높이를 픽셀 단위로 반환 colorDepth 한 색상을 표시하는 데 사용되는 비트 수를 반환 pixelDepth 스크린의 픽셀 깊이를 반환 3) location 객체
location 객체는 현재 페이지 주소(URL)에 대한 정보를 가지고 있는 객체로 location 객체는 적용되는 공개 표준은 없지만 모든 주요 브라우저에서 지원한다.
location 객체의 속성은 아래의 표와 같다.
속성 설명 host URL의 호스트 명과 포트 번호를 설정하거나 반환 href 현재 페이지의 URL을 반환 hostname 웹 호스트의 도메인 명을 반환 pathname 현재 페이지의 경로와 파일 이름을 반환 origin URL의 프로토콜, 호스트 명, 포트 번호를 반환 port URL의 포트 번호를 설정하거나 반환 protocol 페이지의 사용된 웹 프로토콜을 반환 assign 새 문서를 로드 4) history 객체
history 객체는 사용자가 방문한 URL을 포함하여 브라우저 기록을 가지고 있는 객체이다.
사용자의 개인 정보 보호를 위해 자바스크립트가 history 객체에 접근할 수 있는 방법에 제한을 두고 있다.
history 객체의 속성과 메소드는 아래의 표와 같다.
속성 설명 length 히스토리 목록의 URL 수를 반환 속성 설명 back() 브라우저에서 뒤로가기 버튼을 클릭하는 것과 같은 기능을 제공 forward() 브라우저에서 앞으로가기 버튼을 클릭하는 것과 같은 기능을 제공 5) navigator 객체
navigator 객체는 방문자의 브라우저에 대한 정보를 담고 있는 객체이다.
navigaotor 객체의 속성과 메소드는 아래의 표와 같다.
속성 설명 cookieEnabled 쿠키의 활성화 여부를 boolean 값으로 반환(활성화되어 있으면 true, 되어 있지 않으면 false) appName 브라우저의 응용 프로그램 이름을 반환 appCodeName 브라우저의 응용 프로그램 코드 이름을 반환 product 브라우저 엔진의 제품 이름을 반환 appVersion 브라우저에 대한 버전 정보를 반환 userAgent 브라우저에서 브라우저로 보낸 사용자 에이전트 헤더를 반환 platform 브라우저 플랫폼(운영체제)를 반환 language 브라우저의 언어를 반환 online 브라우저가 온라인 상태이면 true를 반환 메소드 설명 javaEnabled() 자바가 활성화되어 있으면 true를 반환 window객체의 하위 객체 중 하나인 document 객체는 DOM이라는 객체모델을 따로 가지고 있으므로 따로 정리해보려고 한다.
'웹 프로그래밍 > FE(Front-End)' 카테고리의 다른 글
flex box layout (display : flex ;) (0) 2021.07.08 JSON이란? (0) 2021.07.05 form 태그 파헤치기 (0) 2021.07.01 [에러 수정] Uncaught TypeError: $.ajax is not a function (0) 2021.06.29 JQuery 접해보기 (0) 2021.06.27