Frontend/Javascript
브라우저 객체 모델 (Browser Object Model)
olli2
2021. 12. 10. 11:52
브라우저 객체 모델 (Browser Object Model)
- 자바스크립트에서는 웹 페이지를 구성하는 HTML 태그의 모든 요소와 웹 브라우저를 구성하는 요소들을 객체로 정의하여 제공
- 객체들을 계층 구조로 분류
브라우저 객체
- 웹 브라우저를 대상으로 이루어지 객체
- window 객체 : 창
- document 객체 : 문서
- history 객체 : 웹 브라우저 기록 정보
- location 객체 : 주소 정보
- navigator 객체 : 웹 브라우저 정보 (종류 판별 등)
브라우저 객체의 계층 구조
window 객체
- 창에 대한 전반적인 상황을 제어하는 최상위 객체
- 자바스크립트에서 사용되는 모든 객체는 window 객체의 하위에 존재
- navigator 객체를 제외한 모든 객체는 window 객체를 통해 접근하여 사용
- window 객체는 생략 가능
- window.document.pic.src = “image.jpg”;
- 문서 내에서 name 속성이 pic인 객체의 src 속성 변경
- <img name=”pic” src=’a.jpg’>
window 객체의 주요 속성
| 창 속성 | 속성 지정 방법 | 설명 |
| toolbar | yes/no | 도구 모음 표시 여부 설정 |
| location | URL 주소 표시줄 표시 여부 설정 | |
| status | 상태 바 표시 여부 설정 | |
| menubar | 메뉴 표시줄 표시 여부 설정 | |
| scrollbars | 스크롤 바 표시 여부 설정 | |
| directories | 디렉터리 바 표시 설정 | |
| resizable | 창의 크기 조정 가능 여부 설정 | |
| height | 픽셀 수 | 창의 세로 길이를 픽셀 단위로 설정 |
| width | 창의 가로 길이를 픽셀 단위로 설정 |
window 객체의 주요 메소드
| 메소드 | 설명 |
| open() | 새로운 창을 만들어 화면에 출력하는 기능 |
| close() | 열린 창을 닫는 기능 |
| setTimeout() | 일정 시간이 지난 후에 함수 한 번 호출 기능 |
| clearTimeout() | setTimeout()로 설정된 내용 정지 기능 |
| setInterval() | 일정 시간 간격 후에 명령 수행 기능 (함수 여러 번 호출 가능 - 애니메이션 효과에 사용) |
| clearInterval() | setInterval()로 설정된 내용 정지 기능 |
open() 메소드
- window.open(“URL”, “창이름”, “창 속성”);
- URL : 웹페이지 주소나 HTML 파일명. 빈 값이면 새로운 창을 만들어서 오픈
- 창 이름 : 새로 만들어지는 창 이름 (임의로 작성)
- 창 속성 : 창의 모양이나 특징
window.open(“test.html”, “test”, “width=200, height=200, status=yes, scrollbars=yes, resizable=yes”); // 기존의 test.html 문서 열기
window.open(“”, “newWin”, “width=400, height=150”); // 새로운 창을 만들어서 열기
open() / close() 메소드 예제 : 기존의 문서 열기
<!-- bigImage.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
</script>
</head>
<body>
<center>
<img src="image/고흐.jpg"><br><br>
<button onClick="window.close()">닫기</button>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
function showBigImage() {
window.open("bigImage.html", "bigWin", "width=600, height=800, left=200, top=50");
}
</script>
</head>
<body>
<center>
그림에 마우스를 올리면 <br>
그림을 크게 볼 수 있습니다<br><br>
<img src="image/고흐.jpg" width="118" height="146" onMouseOver="showBigImage()">
</center>
</body>
</html>
open() / close() 메소드 예제 : 새로운 창 만들어서 열기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
// 새로운 창을 만들어서 열기
// 새로운 창에 문자열과 버튼 출력
// 버튼 클릭 시 창 닫는 기능 포함
function openNewWindow() {
// 작업에 사용하기 위해 변수로 만들어 줌
var createWin = window.open("", "newWin", "width=400, height=150");
createWin.document.write("새로 만든 윈도우 창입니다.<br>");
createWin.document.write("<button onClick='window.close()'>닫기</button>");
}
</script>
</head>
<body>
<button onClick="openNewWindow()">새 창 열기</button>
</body>
</html>
window 객체의 타이머 관련 함수
- setTimeout() / clearTimeout()
- setinterval() / clearInterval()
setTimeout()
- setTimeout(‘호출함수’, 지연시간)
- 시간 설정
- 일정 시간이 지난 후에 호출함수를 1번만 실행
setTimeout(‘winClose()’, 1000); // 1초 후에 winClose() 함수 호출clearTimeout()
- clearTimeout(타이머ID)
- setTimeout()으로 시간 설정한 것을 해제
- setTimeout() 메소드가 반환하는 타이머ID를 받아, 타이머ID에 해당되는 타이머를 설정해제
timerID = setTimeout('winClose()', 1000);
clearTimeout(timerID)
setTimeout() / clearTimeout() 메소드 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
function openInfo() {
window.open("msgWindow.html", "setTimeout", "width=300, height=200");
}
// msgWindow 창이 닫히고 부모창인 setTime.html 창이 포커스를 받을 때 호출되는 함수
function showMsg() {
document.write("로드하자마자 열린 공지사항 창이<br> 3초 후에 자동으로 닫혔습니다.");
}
</script>
</head>
<body onLoad="openInfo()" onFocus="showMsg()">
부모창입니다. (opener에 해당)
</body>
</html>
<!-- msgWindow.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
function winClose() {
window.close();
opener.focus(); // 현재 창을 연 부모 창에 포커스 줌
}
</script>
</head>
<body onLoad="setTimeout('winClose()', 3000);">
공지 사항<br>
이 창은 3초 후에 닫힙니다.
</body>
</html>
setInterval()
- 일정 시간 간격 안에 반복 실행 : 지연시간으로 설정된 시간 간격으로 반복 호출
- setInterval(‘호출함수’, 지연시간);
clearInterval()
- setInterval()로 시간 설정한 것 해제
- clearInterval(타이머ID);
setInterval() / clearInterval() 메소드 예제 - 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
function showTime() {
var today = new Date();
var hour = today.getHours();
var minute = today.getMinutes(); // getMonth()가 0부터 반환
var second = today.getSeconds();
var ampm = "오전";
if (hour==24) {
hour-=24;
} else if (hour >= 12) {
ampm = "오후";
if (hour>12) {
hour-=12;
}
}
var time = ampm + hour +"시" + minute +"분" + second + "초";
timeShow.innerHTML = time;
}
</script>
</head>
<body>
<button onClick="timerID = setInterval('showTime()', 1000)">시간 출력</button>
<button onClick="clearInterval(timerID)">시간 정지</button>
<h2 id="timeShow">시간 여기에 출력</h2>
</body>
</html>
setInterval() / clearInterval() 메소드 예제 - 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
function start() {
alert("이미지 10개 출력");
timerID = setInterval('showImage()', 1000);
}
var count = 0;
var num = 1;
var idx = 0;
function showImage() {
count++;
let img = ['<img src="image/cherry.png">', '<img src="image/bomb.png">', '<img src="image/apple.png">'];
if (count >= 10) {
clearInterval(timerID);
alert("이미지 출력 완료")
}
if (idx>=3) idx=0;
document.write(img[idx]);
idx++;
num++;
}
</script>
</head>
<body onLoad="start()">
</body>
</html>
setInterval() / clearInterval() 메소드 예제 - 3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<style>
div {margin:0 auto; width:100%; text-align:center;}
</style>
<script type="text/javascript">
var countTime = 10;
var idx = 1;
function start() {
timerID = setInterval('bombCount()', 500);
}
function bombCount() {
countH1.innerHTML = countTime;
bombImg.src = `image/bomb${idx}.jpg`;
countTime--;
idx++;
if (idx == 12) {
clearInterval(timerID);
idx = 1;
countTime = 10;
}
}
</script>
</head>
<body>
<div>
<h1 id="countH1">10</h1>
<img id="bombImg" src="image/bomb1.jpg"><br><br>
<button id="btn" onClick="start()">카운트 다운 시작</button>
</div>
</body>
</html>history 객체
- 최근 방문한 주소에 관한 정보를 기억하고 있는 객체
- 메소드
- back() : 이전에 열었던 페이지로 이동
- forward() : 이전 페이지로 이동 후 다시 앞으로 이동
- go() : 몇 단계 뒤에 있는 페이지로 이동
- go(3) : 3단계 앞의 페이지로 이동
- go(-2) : 2단계 다음 페이지로 이동
location 객체
- 현재 브라우저의 주소창에 표시된 주소 값에 관련된 내용을 다루는 객체
| 멤버 | 설명 |
| href = URL | 지정된 URL로 페이지 이동 |
| pathname | 도메인을 제외한 실제 파일 경로 |
| assign(URL) | 지정된 URL로 페이지 이동 |
| replace(URL) | 현재 페이지를 URL로 대체 history 기록 남지 않아 back 버튼 적용 안 됨 (최신 IE 됨) |
| reload() | 문서 내용 새로고침 |
크롬 사용 시 location.href() 메소드 지원 안 됨
-> href 속성값 부여를 통해 사용
-> (O) -> location.href = “http://www.google.com”;
-> (X) -> window.location.href(“http://www.google.com”);
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
function hrefMove() {
location.href="http://www.google.com"; // 크롬 사용 시
// 크롬에서는 지원되지 않는 형식-> 위 코드처럼 메소드가 아닌 속성값 부여를 통해 사용 가능
// window.location.href("http://www.google.com");
}
function assignMove() {
// window 생략 가능
window.location.assign("http://www.daum.net");
}
function replaceMove() {
// window 생략 가능
// 뒤로 가기 버튼 적용 안 됨
window.location.replace("http://www.youtube.com");
}
</script>
</head>
<body>
<a href="http://www.naver.com">네이버</a><br><br>
<button onClick="hrefMove()">구글</button>
<button onClick="assignMove()">다음</button>
<button onClick="replaceMove()">유튜브</button>
</body>
</html>navigator 객체
- 브라우저에 관한 정보 제공
| 속성 | 설명 |
| appCodeName | 브라우저의 코드명 |
| appName | 브라우저 종류 |
| appVersion | 브라우저 버전 |
| cookieEnabled | 쿠키 사용 가능 |
| platform | 시스템 환경 |
| userAgent | 브라우저 기본 정보 (종류/버전) |
| systemLanguage | 시스템 언어 |