728x90
웹 브라우저 객체 모델(Browser Object Model, BOM)이란?
: 웹 '브라우저' 전체를 객체로 관리하는 것.
주요 구성 요소
1. Window : 모든 구성 요소를 포함하는 최상위 객체. 현재 열린 창이나 탭을 나타낸다.
접근 방법 - 객체 이름 뒤에 마침표(.)와 속성 이름을 붙이면 된다.
- open() 함수 : 현재 창이나 새 탭, 새로운 알림 창 등 다양한 형태로 새 창을 열 수 있다.
window.open("https://www.induk.ac.kr") //웹브라우저 창에서 새 탭이 열리면서 연결딘 문서나 사이트가 표시된다.
window.open("https://www.induk.ac.kr", "_self") //"_self"로 지정하면 현재 창에 새 창이 표시된다.
window.open("https://www.induk.ac.kr","", "left=0, top=0, width=400, height=400") //알림 창으로 표시할 때의 너비나 높이, 위치 등을 지정한다.| height | px 값 | 높이를 지정한다. 최솟값은 100 |
| width | px 값 | 너비를 지정한다. 최솟값은 100 |
| left | px 값 | 화면 왼쪽 가장자리를 기준으로 x 좌표의 위치를 지정한다. |
| top | px 값 | 화면 위쪽 가장자리를 기준으로 y 좌표의 위치를 지정한다. |
- resizeBy(), resizeTo() 함수 : open()함수로 열린 알림창의 크기를 조절한다.
var firstWin = window.open(" ", " ", "width=200, height=300")
//resizeBy()는 기존 창의 너비 값과 높이 값에 입력한 값을 각각 더해 브라우저 창의 크기를 새로 지정한다. newFirstWin.risizeTo(200,300)
//resizeTo()함수는 최종 크기를 지정한다.
- moveBy(), moveTo() 함수 : 열려 있는 알림창의 위치를 조절
newFirstWin.moveBy(300,300)
//현재 위치에서 가로로 300, 세로로 300 만큼 이동한다.newFirstWin.moveTo(10,10)
//좌푯값 10,10으로 이동시킨다.2. Navigator : 브라우저 자체에 대한 정보를 제공한다.
- 렌더링 엔진 : 브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그와 스타일을 해석하는 프로그램
3. History : 브라우저 세션 내의 방문한 페이지 히스토리 목록을 관리한다.
- 속성과 함수
| 속성 | 설명 |
| length | 방문한 사이트 개수를 반환한다. |
| 함수 | 설명 |
| back() | 이전 페이지를 현재 화면에 불러온다. |
| forward() | 다음 페이지를 현재 화면에 불러온다. |
| go() | 현재 페이지를 기준으로 상대 위치에 있는 페이지를 현재 화면에 불러온다. |
4. Location : 현재 페이지의 URL 정보를 담고 있으며, 새로운 URL로 이동하거나 현재 페이지를 리로드하는 기능도 제공한다.
| 속성 | 설명 |
| href | 현재 페이지의 전체 URL을 가져오거나 설정한다. |
| protocol | 현재 URL의 프로토콜(scheme) 부분을 가져오거나 설정한다 (예: 'http:', 'https:') |
| host | 현재 URL의 호스트 이름과 포트 번호를 포함한 부분을 가져오거나 설정한다. (예: 'www.example.com', 'www.example.com:80'). |
| hostname | 현재 URL의 호스트 이름만을 가져오거나 설정한다 (예: 'www.example.com'). |
| port | 현재 URL의 포트 번호를 가져오거나 설정한다. |
| pathname | 현재 URL에서 도메인 부분 뒤에 오는 경로(path) 부분을 가져오거나 설정한다 (예: '/path/to/myfile.html'). |
| search | 현재 URL에서 '?' 뒤에 오는 쿼리 문자열(query string) 부분을 가져오거나 설정다 (예: '?key1=value1&key2=value2'). |
| hash | 현재 URL에서 '#' 뒤에 오는 해시(fragment identifier) 부분을 가져오거나 설정다 (예: '#section1'). |
| 함수 | 설명 |
| assign(url) | 주어진 url로 이동한다. |
| reload() | 페이지를 리로드한다. |
| replace(url) | history에 남기지 않고 주어진 url로 이동한다. |
5. screen : 사용자의 화면에 대한 정보를 제공한다
| 속성 | 설명 |
| availHeight | 작업 표시줄이나 독 등과 같은 인터페이스 요소를 제외한 사용 가능한 화면 높이를 픽셀 단위로 반환한다. |
| availWidth | 작업 표시줄이나 독 등과 같은 인터페이스 요소를 제외한 사용 가능한 화면 너비를 픽셀 단위로 반환한다. |
| height | 전체 스크린 높이를 픽셀 단위로 반환한다. |
| width | 전체 스크린 너비를 픽셀 단위로 반환한다. |
| colorDepth | 현재 디스플레이에서 사용 가능한 색상 비트 수를 반환한다. |
| pixelDepth | 현재 디스플레이에서 한 픽셀당 색상 비트 수를 반환한다. |
6. Document : 웹 문서에서 <body>태그를 만나면 만들어지는 객체이다. html 문서 정보를 가지고 있다.
728x90
'JavaScript' 카테고리의 다른 글
| 7-2 DOM 요소에 접근하기/웹 요소에서 가져와 수정하기/폼 요소에 접근하기 (0) | 2023.09.15 |
|---|---|
| 7-1 문서 객체 모델(DOM) (0) | 2023.09.15 |
| 6-1 Array 객체 (0) | 2023.09.14 |
| 5-1 객체 (0) | 2023.09.12 |
| 4-3 함수 매개변수, 인수 (0) | 2023.09.12 |
