BOM(브라우저 객체 모델)

JAVA스크립트

BOM(브라우저 객체 모델)

별메아리 2023. 1. 19. 11:21

728x90

브라우저 객체 모델

브라우저 객체 모델 (BOM: Browser Object Model)은 웹 브라우저가 가지고 있는 모든 객체를 의미한다. 최상위 객체는 window 이고 그 아래로 navigator,location,history,screen,document,frames객체가 있다.

window - 메인 브라우저 윈도우

window.navigator - 브라우저에 대한 정보(버전 번호와 같은 정보들)

window.screen - 사용자 화면

window.history - 사용자가 방문한 URL 저장

window.location - 현재 URL

window.frames - 브라우저 윈도우를 차지하고 있는 프레임들

window.document - 메인 브라우저에 표시된 HTML 문서

window 객체

window 객체는 BOM에서 최상위 객체로서 웹 브라우저 윈도우를 나타내고 있다. 모든 전역 자바스크립트 객체,함수,변수는 자동적으로 window 객체의 맴버가 된다. 예를 들어 우리가 자주 사용하였던, alert(), Prompt() 등이 window 객체의 메서드이다. 모든 전역 변수는 윈도우 객체의 속성이다. 모든 전역 함수는 윈도우 객체의 메서드이다.

다음 두개의 문장은 동일하다.

alert("Hello World!"); == window.alert("Hello World")

open()과 close()

open() 메서드는 새로운 브라우저 윈도우를 오픈한다. 다음과 같은 매개 변수를 가진다.

window.open(URL,name, specs, repalce);

괄호 안 순서대로 url은 오픈할 페이지의 주소

name은 타켓을 지정하거나 윈도우의 이름

specs는 여러가지의 속성

replace는 히스토리 리스트에서 새로운 엔트리인지 아니면 현재 엔트리를 대체하는지 여부

버튼을 누르면 새로운 윈도우를 오픈하는 예제

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<form>

<input type="button" value="구글창 열기"

onclick = "window.open('http://www.google.com','_blank', 'width=300, height=300', true )">

</form>

</body>

</html>

setTimeout(),setlnterval()

아주 중요한 함수들이다.setTimeout() 메서드는 일정한 시간이 지난 후에, 인수로 전달된 함수를 딱 한번만 호출한다.

시간의 단위는 밀리초이다.

setTimeout(code, millisec)

괄호순서대로 호출되는 함수 이름,함수를 호출하기전에 흘러야 하는 시간

버튼을 누르면 3초 후에 경고 윈도우를 오픈하는 예제를 작성하여 보자

<!DOCTYPE html>

<head>

<title>Document</title>

function showAlert() {

setTimeout(function() { alert("setTime()을 사용하여 표시됩니다.")}, 3000);

}

</script>

</head>

<body>

<p>버튼을 누르면 3초 후에 경고 박스가 화면에 표시됩니다.</p>

<button onclick="showAlert()">눌러보세요</button>

</body>

</html>

setINterval() 메서드는 일정한 주기적으로 함수를 호출한다. setINterval()은 반드시 개발자가 종료시켜야 한다.

시간의 단위는 밀리초이다.

사용자가 '중지'버튼을누를 때까지 글자가 깜박이는 프로그램을 작성하여 보자

<!DOCTYPE html>

<head>

<title>Document</title>

var id;

function changeColor() {

id = setInterval(flashText, 500);

}

function flashText() {

var elem = document.getElementById("target");

elem.style.color = (elem.style.color == "red") ? "blue" : "red"

elem.style.backgroundColor =

(elem.style.backgroundColor == "green") ? "yellow" : "green"

}

function stopTextColor(){

clearInterval(id);

}

</script>

</head>

</div>

</body>

</html>

moverTo(),moveBy()

자바스크립트를 이용하면 윈도우를 이동하는 것도 가능하다. 절대적인 위치로 이동하는 것은moveTo()를 사용하고 상대적으로 이동하려면 moverBy를 사용한다.

<!DOCTYPE html>

<head>

<title>Document</title>

var w;

function openWindow(){

w = window.open ('','', 'width=200, height=100');

w.document.write("<p>오늘 다음과 같은 상품을 싸게 팝니다.</p>");

w.moveTo(0,0);

}

function moveWindow() {

w.moveBy(10,10);

w.focus();

}

</script>

</head>

<body>

</body>

</html>

윈도우의 크기를 변경하려면 resizeTo(), resizeBy()를 사용한다. 또 focus()는 특정 윈도우로 키보드 포커스를 이동시킨다. 윈도우 스크롤 위치를 이동시킬 때는 scrollTo()와 scrollBy()를 사용한다.

screen 객체

속성	설명
availHeight	화면의 높이를 반환(윈도우에서 태스크 바를 제외한 영역)
availWidth	화면의 너비를 반환(윈도우에서 태스크 바를 제외한 영역)
colorDepth	컬러 팔레트의 비트 깊이를 반환
height	화면의 전체 높이를 반환
pixelDepth	화면의 컬러 해상도(bits per pixel)를반환
width	화면의 전체 너비를 반환

availHeight, availWidth속성은 자바스클비트를 이용해 윈도우의 태스크 바를 가리지 않으면서 최대 크기로 윈도우를 오픈할 때 사용된다.

<!DOCTYPE html>

<head>

<title>Document</title>

function maxopen(url,winattributes) {

var maxwindow = window.open(url, "", winattributes)

maxwindow.moveTo(0,0);

maxwindow.resizeTo(screen.availWidth,screen.availHeight)

}

</script>

</head>

<body>

</body>

</html>

체

loction 객체는 현재 URL에 대한 정보를 가지고 있다. location 객체는 window 객체의 일부로서 window.location을 통하여 접근한다.

속성	설명
hash	URL 중에서 앵커 부분을 반환한다.( #section1과 같은 부분)
host	URL 중에서 hostname과 port를 반환
hostname	URL 중에서 hostname을 반환
href	전체 URL을 반환
pathname	URL 중에서 경로(path)반환
potr	URL 중에서 port를 반환
protocol	URL 중에서 protocol 부분을 반환
search	URL 중에서 쿼리(query) 부분을 반환

메서드	설명
assign()	새로운 문서를 로드한다.
reload()	현재 문서를 다시 로드한다.
replace()	현재 문서를 새로운 문서로 대체한다.

<!DOCTYPE html>

<head>

<title>Document</title>

function replace() {

location.replace("http://www.google.com")

}

</script>

</head>

<body>

</body>

</html>

navigator 객체

navigator 객체는 브라우저에 대한 정보를 가지고 있다.

속성	설명
appCodeName	브라우저의 코드 네임
appName	브라우저의 이름
appversion	브라우저의 버전 정보
cookieEnabled	브라우저에서 쿠키가 활성화되어 있는지 여부
onLine	브라우저가 인터넷에 연결되어 있으면 true
platform	브라우저가 컴파일된 플랫폼
userAgent	브라우저에서 서버로 가는 user-agent 헤더

메서드	설명
JavaEnabled()	자바가 사용 가능한지 여부
taintEnabled()	브라우저에서 data tainting이 가능한지 여부

navigator객체의 전체 속성을 출력

for( var key in navigator){

value = navigator[key];

document.write(key+": "+value+"<br>");

}

</script>

728x90

저작자표시 비영리 변경금지