6. javascript 브라우저 객체(Browser Object) 정리

브라우저 객체란 브라우저에 내장된 객체를 뜻합니다.

앞에서 정리한 내장객체는 javascript 언어에 내장된 객체입니다.

 

2022.12.24 - [컴퓨터/javascript] - 5. javascript 내장 객체(Built-in object) 정리

브라우저 객체

브라우저 객체는 계층적 구조로 되어있으며 브라우저를 구성하는 것들을 객체로 만들어놨습니다.

이를 브라우저 객체 모델(BOM, Browser Object Model)이라고 부릅니다.

그 중 document 객체 같은 경우 활용성이 높아 문서 객체 모델(DOM, document Object Model)로 따로 정리됩니다.

객체1	객체2	객체3
window	document	body, div, img, ... 태그 요소
	console
	history
	location
	navigator
	screen

window

window 객체는 브라우저를 대표하는 객체로 많은 속성(property)을 갖고 있습니다.

그중엔 document, console 같은 객체와 브라우저와 관련된 속성 같은 것들이 있습니다.

그리고 다양한 메서드를 가지고 브라우저를 조작할 수 있습니다.

메서드	설명
open("url","새 창 이름", "새 창 옵션")	새탭 혹은 새 브라우저 window를 나타낸다.
close()	window를 닫습니다.
focus()	현재 window에 초점을 맞춥니다.
print()	현재 페이지 출력화면을 띄웁니다.
alert(message)	경고창을 나타낸다.
confirm(message)	확인창을 나타낸다.
prompt(message,기본값)	입력값을 받는 창을 나타낸다.
moveTo(x,y)	브라우저 위치를 옮깁니다.
resizeTo(width, height)	브라우저 크기를 변경합니다.
scrollTo(x,y)	스크롤 될 위치를 지정합니다.
setInterval(function, milliseconds)	함수를 일정한 간격으로 호출합니다.
clearInterval(setInterval)	반복을 종료 합니다.
setTimeout(function, milliseconds)	함수를 일정 시간 뒤 호출합니다.
clearTimeout(setTimeout)	호출을 취소 합니다.

console

디버깅 콘솔 객체입니다.

메서드	설명
log(message)	콘솔창에 메세지를 작성합니다.
info(message)	콘솔창에 메세지를 작성합니다.
error(message)	콘솔창에 에러 메세지를 작성합니다.
assert(expression, message)	식이 거짓이면 콘솔창에 메세지를 작성합니다.
clear()	콘솔창 모든 메세지를 없앱니다.
count("num")	호출될 때 마다 카운트를 셉니다.
time(), timeEnd()	타이머 시작을 잽니다.

history

방문한 url 갖고 있는 객체입니다.

메서드	설명
back()	이전 url 페이지 로드
forward()	다음 url 페이지 로드
go(number)	음수는 이전 페이지, 양수는 다음 페이지, 영은 현재 페이지

location

현재 url 관한 정보를 가진 객체입니다.

속성	설명
href	url
hash	url의 해시값(#)
search	url의 쿼리값(?)
host	url의 호스트 이름, 포트 번호
hostname	url의 호스트 이름
port	url의 포트 번호
protocol	url의 프로토콜
origin	url의 프로토콜, 호스트 네임, 포트 번호
pathname	url의 경로 네임

메서드	설명
assign(url)	새 문서를 로드합니다. 뒤로가기 가능
reload()	새로고침
replace(url)	새 문서로 현재 문서를 대체합니다. 뒤로가기 불가능

navigator

브라우저에 관한 정보를 가진 객체입니다.

속성	설명
appCodeName	브라우저 코드 네임
appName	브라우저 네임
appVersion	브라우저 버전
userAgent	브라우저 user-agent header
product	브라우저 엔진 네임
platform	브라우저 플렛폼
language	브라우저 언어
onLine	온라인 상태
cookieEnabled	쿠키 사용 여부
geolocation	유저의 위치 정보

screen

방문자 화면에 대한 정보를 가진 객체

속성	설명
width	화면 전체 너비
height	화면 전체 높이
availWidth	테스크바를 제외한 화면 전체 너비
availHeight	테스크바를 제외한 화면 전체 높이
colorDepth	screen's color palette in bits per pixel

끝으로

이것으로 브라우저 객체로 다양한 정보를 얻고 브라우저를 통제할 수 있습니다.

아직 document 객체가 남았는데, 이 객체는 문서 객체 모델(DOM)로 따로 공부합니다.

그리고 document는 jquery을 이용해서 더 편리하게 사용할 수 있습니다.