프론트엔드3-6. javascript의 내장객체 BOM(브라우저객체모델)

BOM(Browser Object Model)

웹브라우저와 관련된 객체의 집합
객체 모델 종류: window(최상위), location, navigator, history, screen, document
DOM(Document Ojbect Model)으로 통합해서 말하기도 한다.
정확히는 자바스크립트가 아닌 웹브라우저가 제공하는 기능이다.
브라우저 창이 열리면 가장 먼저 Window 객체가 만들어지고 그 하위에 브라우저 각 요소에 해당하는 객체가 만들어진다.

자주 쓰이는 브라우저 내장 객체

window	브라우저 창이 열릴 때마다 하나씩 만들어지는 객체
window	브라우저 창 안에 존재하는 모든 요소의 최상위 객체
Document	웹 문서에서 <body>태그를 만나면 만들어지는 객체로 HTML 문서정보를 가지고 있다.
History	현재 창에서 사용자 방문 기록을 저장하고 있는 객체(뒤로 가기, 앞으로 가기)
Location	현재 페이지에 대한 URL 정보를 가지고 있는 객체(주소)
Navigator	현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체
Screen	현재 사용중인 화면 정보를 다루는 객체

1. window 객체

다른 BOM 객체의 상위 개념(=자바스크립트의 모든 객체는 window 객체에 포함된다)
window 객체는 기본 객체이기 때문에 window를 생략하고 함수 이름만 입력해서 사용할 수 있다.
var 키워드로 선언한 일반 변수도 window 객체의 속성이 된다.

자주 사용되는 window 객체의 속성

document	브라우저 창에 표시된 웹 문서에 접근할 수 있다.
innerHeight	(웹 사이트) 내용 영역의 높이
innerWidth	(웹 사이트) 내용 영역의 넓이
location	window 객체의 위치/현재 URL을 나타냄
outerHeight	브라우저 창의 바깥 높이(웹 브라우저의 메뉴나 도구 모음 등까지 포함된 넓이와 높이)
outerWidth	브라우저 창의 바깥 너비(웹 브라우저의 메뉴나 도구 모음 등까지 포함된 넓이와 높이)
pageXOffset	스크롤헀을 때 화면이 수평으로 이동하는 픽셀 수 scrollX와 같다.
pageYOffset	스크롤했을 때 화면이 수직으로 이동하는 픽셀 수 scrollY와 같다.
screenX	브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서부터 떨어져 있는 거리를 나타낸다.
screenY	브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서부터 떨어져 있는 거리를 나타낸다.
scrollX	스크롤했을 때 수평으로 이동하는 픽셀 수
scrollY	스크롤했을 때 수직으로 이동하는 픽셀 수

자주 사용되는 window 객체의 함수

window.alert("알릴내용")	알림창을 표시
blur( )	창에서 포커스 제거
window.open( "URL", "새 창 이름", "새 창 옵션" )	새로운 창(새 탭)을 연다
close( )	현재 열려있는 창을 닫음
window.confirm("질문","내용")	질문 내용으로 확인, 취소 창을 나타냄 [확인] 버튼 -> true 반환 [취소] 버튼 -> false 반환
focus( )	현재 창에 포커스를 부여
window.stop( )	로딩중지
moveBy(x,y)	현재 창을 지정한 크기만큼 이동
moveBy(x,y)	현재 위치를 기준으로 가로로 x픽셀, 세로로 y픽셀만큼 이동(상대좌표)
moveTo(x,y)	현재 창을 지정한 좌표로 이동( x : left, y : top )
moveTo(x,y)	화면의 왼쪽 위 모서리를 기준으로 가로로 x픽셀, 세로로 y픽셀만큼 이동(절대좌표)
resizeBy(x,y)	지정한 크기만큼 현재 창 크기 조절(상대적으로 지정)
resizeBy(x,y)	현재 브라우저 창의 크기를 기준으로 너비와 높이에 값을 더해줌
resizeTo(x,y)	브라우저 창의 크기를 조절 (지정한 새 창의 크기를 절대적으로 지정)
resizeTo(x,y)	resizeBy( )에서는 음수 사용 가능하지만 resizeTo( )함수에서는 음수 값 지정 xx
scroll( )	문서에서 특정 위치로 스크롤
scrollBy(x,y)	지정한 크기만큼씩 스크롤
scrollTo(x,y)	지정한 위치까지 스크롤
setInterval(func( ){자바스크립트 코드}, 일정 시간 간격)	지속적으로 일정한 시간 간격으로 함수를 호출해 코드를 실행 clearInterval( )메서드로 중지한다.
setTimeout(func(){자바스크립트 코드}, 일정 시간 간격)	단 한 번 일정한 시간 간격으로 함수를 호출해 코드를 실행 clearTimeout( )메서드로 중지한다.
postMessage( )	다른 창으로 메시지 전달
window.print( )	현재 문서를 인쇄
prompt("질문", "답변")	질문과 답변으로 질의응답 창을 나타낸다.

2. Screen 객체

주로 화면(PC 모니터나 모바일 기기의 화면 자체) 정보를 알아낼 때 많이 사용하는 객체

Screen 객체의 속성

screen.width	UI 영역을 포함한 화면의 너비
screen.height	UI 영역을 포함한 화면의 높이
screen.availWidth	UI 영역을 제외한 부분의 너비(작업 표시줄을 제외)
screen.availHeight	화면에서 윈도우의 작업 표시줄이나 메뉴/doc 같은 UI 영역을 제외한 부분의 높이
screen.availDepth	사용자 모니터가 표현 가능한 컬러 bit를 반환

screen 객체와 window 객체 속성의 차이점

window 객체의 innerWidth, innerHeight, outerWidth, outerHeight 속성은 웹 브라우저 창의 너비나 높이를 측정
screen 객체의 availWidth, availHeight, width, height 속성은 화면 자체의 너비나 높이를 측정한다.
웹 브라우저 창의 크기를 늘리거나 줄인 후 새로고침을 누르면 window 객체의 속성 값은 바뀌지만 screen 객체의 속성값은 바뀌지 않는다.

3. Location 객체

브라우저의 주소 표시줄과 관련된 객체이다. 현재 문서의 URL 주소 정보를 가지고 있다.
location.href = "이동할 서버 주소";

Location 객체의 속성

location.href	전체 URL로 값을 변경하면 해당 주소로 이동할 수 있다.
location.host	URL의 호스트 이름과 포트 번호
location.hostname	URL의 호스트 이름
location.port	URL의 포트 번호
location.protocol	http://나 ftp:// 같은 URL의 프로토콜

Location 객체의 함수

assgin( )	현재 문서에 새 문서 주소를 할당해 새 문서를 가져옴
reload( )	현재 문서를 다시 불러옴 브라우저의 새로고침과 같은 역할
reload( )	메타태그의 <meta http-equiv="refresh" content="10"/> (10초간격으로 새로고침)와 동일
replace( )	현재 문서의 URL을 지우고 다른 URL의 문서로 교체
replace( )	replace( )를 사용하면 이전버튼을 눌러도 이전 문서로 이동할 수 없다.
toString( )	현재 문서의 URL을 문자열로 반환

예제

<body>
	<script>
		document.write("protocol -> " + location.protocol + "<br/>");  
		document.write("port -> " + location.port , "<br/>");
		document.write("hostname -> " + location.hostname + "<br/>");
		document.write("host -> " + location.host);
	</script>
</body>

예제)

<body>
	<input type="button" value="calendar" onclick = "location.href = 'ex03_calendar.html'"/>
</body>

캘린더 버튼을 누르면 ex03_calendar.html 파일로 이동!!

4. history 객체

사용자가 방문한 사이트의 기록을 남기고, 이전 방문 사이트와 다음 방문 사이트로 돌아갈 수 있는 속성과 메서드를 제공한다.
브라우저에서 '뒤로', '앞으로' 또는 주소 표시줄에 입력해서 돌아다녔던 사이트 주소가 저장되어 있다.
보안문제 때문에 브라우저에 있는 브라우저 히스토리는 읽기 전용이다.

history 객체의 속성

length

현재 브라우저 창의 History목록(방문목록)에 있는 항목의 개수(방문한 사이트 개수)를 반환

history 객체의 함수

history.back( )	History 목록에서 이전 페이지를 현재 화면에 불러온다. (이전 방문 사이트로 이동)
history.forward( )	History 목록에서 다음 페이지를 현재 화면에 불러온다. (다음 방문 사이트로 이동
history.go(이동 숫자)	History 목록에서 현재 페이지를 기준으로 상대 위치에 있는 페이지를 현재 화면에 불러온다.
history.go(이동 숫자)	history.go(1)은 다음페이지를 가져오고 history.go(-1)은 이전페이지를 불러온다.

<참고>

https://pridiot.tistory.com/170

https://zangzangs.tistory.com/7

http://sunkyun.com/community/bbs/board.php?bo_table=script&wr_id=1

저작자표시

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

프론트엔드3-8. [javascript] setInterval과 setTimeout (0)	2022.02.10
프론트엔드3-7. [javascript] 팝업창띄우기 예제(window와 screen) (0)	2022.02.10
프론트엔드3-5. javascript의 내장객체 date와 달력만들기예제 (0)	2022.02.09
프론트엔드3-4. JavaScript의 내장객체 String, Math, Array (0)	2022.02.09
프론트엔트3-3. login form 만들기 / 이메일 분리하기 (0)	2022.02.09

소소하게 매일

프론트엔드3-6. javascript의 내장객체 BOM(브라우저객체모델)

BOM(Browser Object Model)

1. window 객체

2. Screen 객체

3. Location 객체

4. history 객체

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

티스토리툴바

프론트엔드3-6. javascript의 내장객체 BOM(브라우저객체모델)

BOM(Browser Object Model)

1. window 객체

2. Screen 객체

3. Location 객체

4. history 객체

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

관련글

티스토리툴바