브라우저 객체 모델(BOM: Browser Object Model)이란 웹 브라우저와 관련된 객체의 집합을 말한다.
대표적인 BOM으로는 window, location, navigator, history, screen, document 가 있다.
1-1. window 객체
1-1-1. window.open(URI, name, features, replace)
- open() 메서드는 네 개의 매개 변수를 가진다.
- 매개 변수는 입력해도 되고 입력하지 않아도 되는데 이러한 매개 변수를 옵션이라고 한다.
<script>
//새로운 윈도우 창
window.open;
//네이버 팝업창 열기
window.open("https://naver.com", "naver", "width=600, height=300", true);
</script>
- 첫 번째 매개 변수: 열고자 하는 HTML 페이지 URL
- 두 번째 매개 변수: 윈도우 간 통신을 하는데 사용하는 윈도우 이름
세 번째 매개변수는 윈도우를 어떠한 모양으로 출력할지 지정하는 옵션으로, 사용할 수 있는 옵션은 다음과 같다.
1-1-2. 타이머 메서드
특정한 시간에 특정한 함수를 실행할 수 있게 하는 메서드이다.
| window 객체의 타이머 메서드 | |
| 메서드 이름 | 설명 |
| setTimeout(funtion, millisecond) | 일정 시간 후에 함수를 한 번 실행 |
| setInterval(funtion, millisecond) | 일정 시간마다 함수를 반복해서 실행 |
| clearTimeout(id) | 일정 시간 후에 함수를 한 번 실행하는 것을 중지 |
| clearInterval(id) | 일정 시간마다 함수를 반복하는 것을 중단 |
예제1
<script>
//경고창 출력하고 3초 후에 자동으로 윈도우 종료
window.onload = function(){
alert("3초 후 종료됩니다.");
window.setTimeout(function(){
window.close();
}, 3000); //3000 ms = 3초
};
</script>
예제2
<script>
//10초 동안 현재 날짜 출력 후 실행 중지
window.onload = function() {
var intervalID = setInterval(function() {
document.body.innerHTML += '<p>'+ new Date() +'</p>';
}, 1000); //1초마다 함수 실행
//10초 후 함수 실행
setTimeout(() => {
clearInterval(intervalID); //타이머 종료
}, 10000);
}
</script>
1-2. location 객체
브라우저의 주소 표시줄과 관련된 객체이다.
location 객체는 프로토콜의 종류, 호스트 이름, 문서 위치 등의 정보를 갖는다.
location 객체는 페이지 이동에 많이 쓰인다.
- replace() 메서드는 뒤로 가기 버튼을 사용할 수 없다.
- location = 'http://naver.com';
- location.href = 'http://naver.com';
- location.assign('http://naver.com');
- location.replace('http://naver.com');
- location = location;
- location.href = location.href;
- location.assign(location);
- location.replace(location);
- location.reload();
1-3. window 객체의 onload 속성
문서 객체의 속성 중 on으로 시작하는 속성을 이벤트 속성이라고 부르며 함수를 할당해야 한다.
<script>
window.onload = function(){
};
</script>위 코드는 window 객체의 로드 완료 후 자동으로 할당한 함수를 실행한다.
👀 window 객체의 로드가 완료되는 때? : HTML 페이지에 존재하는 모든 태그가 화면에 올라가는 순간
1-3-1. HTML의 실행 순서
웹 브라우저는 위에서 아래로 태그를 차례대로 실행 후 화면에 출력한다.
예시1) 스크립트 태그가 head 안에 있을 때
<!DOCTYPE html>
<html>
<head>
<script>
alert("Hello window!");
</script>
</head>
<body>
<h1>vellalog</h1>
<h1>vellalog</h1>
</body>
</html>
body 태그의 내용 출력 전 스크립트가 실행된다.
예시2) onload 이벤트 속성 사용
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
alert("Hello !");
};
</script>
</head>
<body>
<h1>vellalog</h1>
<h1>vellalog</h1>
</body>
</html>
윈도우 객체가 로드 되었을 때 실행 되므로 body 태그의 모든 태그가 화면에 나온 후 실행됨
'Dev > JavaScript' 카테고리의 다른 글
| 자바스크립트 기초 5 - 이벤트 처리 (0) | 2022.12.06 |
|---|---|
| 자바스크립트 기초 - 4 (0) | 2022.12.05 |
| 자바스크립트 기초 3 - '객체' (1) | 2022.12.05 |
| 자바스크립트 기초 2 (0) | 2022.11.29 |
| 자바스크립트 기초 (0) | 2022.11.29 |
댓글