JavaScript BOM(Brower Object Model)_1

 

 

BOM는 브라우저 관련 객체로 자바스크립트을 활용하여 웹 브라우저를 객체로 관리하기 위해 등장한 개념이다. 브라우저에 관련한 여러가지 효과를 만들 수 있다.

 

 

window 객체

브라우저 창이 열릴때 마다 하나씩 만들어진다. 브라우저 창 안의 요소 중에서 최상위에 위치한다.

 

 

window 객체의 프로퍼티

종류	설명
console	브라우저의 콘솔에 정보를 기록하는 메소드를 제공하는 Console 객체에 대한 참조 반환
status	브라우저의 상태바에 문자열을 출력
defaultStatus	창의 상태표시줄에 있는 기본 텍스트를 설정하거나 반환
window	현재 창 자신, self와 같음
document	윈도우의 Document 객체 반환 (Document 객체 참조).
top	최상위 브라우저 창을 반환.
name	창이름 설정하거나 반환.
frames	창안의 모든 <iframe>에 대한 배열정보
frameElement	현재창이 삽입 된 <iframe> 요소 반환.
history	history 오브젝트 및 배열
location	창의 Location 객체 반환 (Location 객체 참조).
innerHeight	스크롤 바를 포함하여 창 내용 영역 (= viewport) 높이
innerWidth	스크롤 바를 포함하여 창 내용 영역 (= viewport) 너비
outerHeight	창 바깥쪽 둘레의 높이
outerWidth	창 바깥쪽 둘레의 너비
navigator	창 Navigator 객체 반환 (Navigator 객체 참조).
screen	창의 screen 객체 반환 (Screen 객체 참조).

 

 

window 객체의 메소드

종류	설명
alert()	경고용 대화상자
prompt()	입력창이 있는 대화상자
confirm()	확인, 취소를 선택할 수 있는 대화상자
open()	새로운 창
setTimeout()	일정 간격으로 함수를 호출하여 수행, millisecond 단위로 지정
setInterval()	일정시간마다 지정된 처리를 반복
clearInterval()	setInterval 메소드의 정지
clearTimeout()	setTimeout 메소드를 정지

 

 

• setTimeout()

function hello(){
	alert('안녕하세요 여러분!');
}
const st = window.setTimeout(hello, 2000);
// window.clearTimeout(st);  // 취소시키기

브라우저 실행 후 2초 뒤에 함수 hello()를 실행한다. 취소하고자하면 주석 처리된 window.clearTimeout(st);를 실행하면 된다.

 

• setInterval()

<script>

function hello(){
	console.log('안녕하세요 여러분!');
}

function stophello(){
    console.log('hello 함수가 중지되었어요!');
    clearInterval(si);
}

const si = window.setInterval(hello, 2000);

</script>
<button type="button" onclick="stophello()">중지</button>

브라우저 실행시 2초에 한번씩 함수 hello()를 실행하고 버튼을 누르면 stophello()를 실행하여 clearInterval(si);으로 setInterval()에 실행된 함수를 취소한다.