본문 바로가기
프로그래밍 언어/Modern JavaScript

[JavaScript] BOM

by cogito21_cpp 2024. 8. 9.
반응형

BOM이란?

- BOM(Browser Object Model)은 DOM과 달리 W3C 표준 객체 모델은 아니지만 JavaScript가 브라우저의 기능적 요소들을 직접 제어하고 관리하는 방법을 제공

- JavaScript에서는 BOM 모델의 객체들을 전역 객체로 사용

Window 객체

- Window 객체는 브라우저의 창을 나타내는 객체

- JavaScript의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됨

- Window 객체의 메소드는 전역 함수이고 프로퍼티는 전역 변수가 됨. DOM의 요소들도 프로퍼티에 포함

- Window 객체의 모든 메서드나 프로퍼티를 사용할 때 window 접두사 생략 가능

프로퍼티/메서드 설명
window.outerWidth 현재 브라우저 창의 너비
window.outerHeight 현재 브라우저 창의 높이
window.innerHeight 브라우저 창(웹 브라우저의 뷰포트)의 높이
window.innerWidth 브라우저 창(웹 브라우저의 뷰포트)의 너비
window.screenX 브라우저 창의 왼쪽 모서리와 사용자 스크린의 왼쪽 모서리 사이의 거리 반환
window.screenY 브라우저 창의 위쪽 모서리와 사용자 스크린의 위쪽 모서리 사이의 거리
window.open(url, target, windowFeatures) 새로운 브라우저 창 열기
window.close() 브라우저 창 닫기
window.alert(msg) 사용자에게 메시지를 보여주고 사용자의 확인을 기다림
window.confirm(msg) 사용자에게 메시지를 보여주고 확인 또는 취소 답변을 Boolean으로 반환
window.prompt("메시지"+"입력 기본값") 사용자에게 메시지를 보여주고 사용자가 입력한 문자열을 반환
window.setTimeout(func, time) 명시된 시간(us)이 지난 뒤에 지정된 함수 호출. 성공적 호출시 timeoutID 반환
window.clearTimeout(timeoutID) 계획된 함수의 호출을 취소
window.setInterval(func, time) 지정된 시간(us) 간격마다 지정된 함수를 반복적으로 호출. 성공적 호출시 timeoutID 반환
window.clearInterval(timeoutID) 반복되는 함수의 호출을 취소

Location 객체

- Location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나 브라우저에 새 문서를 불러올 때 사용

- Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 같이 연결되어 있음

프로퍼티/메서드 설명
location.href 현재 문서의 전체 URL 주소
location.hostname 현재 문서의 인터넷 호스트 이름
location.pathname 현재 문서의 파일 경로명
location.assign(url) 새로운 문서 열기
location.replace(url) 이전 문제 삭제 후 새로운 문서 열기. 현재 문서를 히스토리에서 제거
location.reload(url) 브라우저 창에 현재 문서르 다시 불러옴

History 객체

- History 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체

- JavaScript는 사용자의 개인 정보 보호를 위해 접근 방법 일부 제한

프로퍼티/메서드 설명
history.length 히스토리 목록의 개수
history.forward() 히스토리 목록에서 바로 다음 URL로 이동. 다음 페이지로 가기
history.back() 히스토리 목록에서 바로 이전 URL로 이동. 이전 페이지로 가기
history.go(num) 인수로 받은 정수만큼 히스토리 목록 사이를 이동

Screen 객체

- Screen 객체는 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체

프로퍼티/메서드 설명
screen.width 현재 사용자의 모니터 화면 크기(픽셀 단위)의 너비
screen.height 현재 사용자 모니터 화면 크기(픽셀 단위)의 높이
screen.availWidth 실제 사용할 수 있는 화면의 크기(픽셀)의 너비. 작업 표시줄과 같은 공간을 모두 제외한 크기
screen.availHeight 실제 사용할 수 있는 화면의 크기(픽셀)의 높이. 작업 표시줄과 같은 공간을 모두 제외한 크기
screen.colorDepth 사용자 화면에서 한 색상당 사용할 수 있는 비트수. 24비트의 트루 컬러나 30/36/48의 딮 컬러
screen.pixelDepth 화면에서 픽셀당 표시할 수 있는 비트 수

Navigator 객체

- Navigator 객체는 브라우저에 대한 다양한 정보를 저장하는 객체

- 브라우저 스니핑은 웹 브라우저의 종류를 미리 파악하여 조치함으로써 브라우저 간의 호환성을 유지

프로퍼티/메서드 설명
navigator.appName(웹 표준에서 제외) 현재 사용하고 있는 브라우저의 전체 이름("Netscape")
navigator.appCodeName(웹 표준에서 제외) 현재 사용하고 있는 브라우저 코드명("Mozilla")
navigator.appVersion(웹 표준에서 제외) 현재 사용하고 있는 브라우저의 버전 정보
navigator.userAgent(웹 표준에서 제외) 현재 사용하고 있는 브라우저의 상세 정보
navigator.platform 현재 브라우저가 실행되고 있는 운영체제
navigator.language 현재 브라우저의 기번 언어 설정
navigator.javaEnabled()(비표준) 현재 사용중인 브라우저가 자바 애플릿을 실행할 수 있는지 검사
navigator.cookieEnabled(비표준) 현재 사용 중인 브라우저가 쿠키를 사용할 수 있는지 검사

 

 

 

 

 

반응형

'프로그래밍 언어 > Modern JavaScript' 카테고리의 다른 글

[JavaScript] 정규표현식  (0) 2024.08.09
[JavaScript] 이벤트  (0) 2024.08.09
[Javascript] 예외처리  (0) 2024.08.09