브라우저 객체 모델 (window, history, location, navigator)

프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 22:02

브라우저 객체 모델 (Browser Object Model)

- 자바스크립트에서는 웹 페이지를 구성하는 HTML 태그의 모든 요소와 웹 브라우저를 구성하는 요소들을 객체로 정의하여 제공

- 객체들을 계층 구조로 분류

브라우저 객체

- 웹 브라우저를 대상으로 이루어지 객체

- window 객체 : 창

- document 객체 : 문서

- history 객체 : 웹 브라우저 기록 정보

- location 객체 : 주소 정보

- navigator 객체 : 웹 브라우저 정보 (종류 판별 등)

- new 연산자를 통해서 생성하지 않고 그냥 사용하면 됨

- 예 : document.write()

브라우저 객체의 계층 구조

window 객체

- 창에 대한 전반적인 상황을 제어하는 최상위 객체

- 자바스크립트에서 사용되는 모든 객체는 window 객체의 하위에 존재

- navigator 객체만 제외하고 모든 객체는 window 객체를 통해서 접근하여 사용

- window 객체는 생략 가능

- window.document.pic.src = “image.jpg”;

- 문서 내에서 name 속성이 pic인 객체의 src 속성 변경

- <img name=”pic” src=’a.jpg’>

window 객체의 주요 속성

window 객체의 주요 메소드

window 객체의 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”); // 새로운 창을 만들어서 열기

window 객체의 open() 메소드 예제

- 기존의 문서 열기

- bigImage.html

- windowOpen.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>자바스크립트 window.open()</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>

- 새로운 창 만들어서 열기

- windowOpen2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>자바스크립트 window.open() 새 창 만들기</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>");
			}
		
			function openWindow(){
				window.open("windowOpen.html", "bigWin", 
									  "width=200, height=400, left=400, top=50, status=yes, scrollbars=yes, resizable=yes");
			}

			// Big Image 열기
		</script>
	</head>
	<body>
		<button onClick="openWindow()">Big Image 열기</button> 
		<button onClick="openNewWindow()">새 창 열기</button>
	</body>
</html>

window 객체의 타이머 관련 함수

- setTimeout() / clearTimeout()

- setinterval() / clearInterval()

setTimeout()

- setTimeout(‘호출함수’, 지연시간)

- 시간 설정

- 일정 시간이 지난 후에 호출함수를 1번만 실행

- 예 : setTimeout(‘winClose()’, 1000);

- 1초 후에 winClose() 함수 호출

clearTimeout()

- clearTimeout(타이머ID)

- 시간 설정한 것을 해제

- setTimeout() 메소드가 반환하는 타이머ID를 받아서

- 타이머ID에 해당되는 타이머를 설정해제

- 타이머ID = setTimeout(‘호출함수’, 지연시간);

- 예 : timerID = setTimeout(winClose()’, 1000);

- clearTimeout(timerID)

setTimeout() 예제

- 시작 시 msgWindow 창이 열리고, 3초 후에 자동으로 닫힘

- setTimeout.html : msgWindow 열기

- msgWindow.html : 3초 타임아웃 설정

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>자바스크립트 msgWindow</title>
		<script type="text/javascript">
			function winClose(){
				window.close();
				opener.focus(); // 현재 창을 연 부모 창에 포커스 주기
			}
		</script>
	</head>
	<body onLoad="setTimeout('winClose()', 3000)">
		공지 사항 <br>
		이 창은 3초 후에 자동으로 닫힙니다.
	</body>
</html>

setInterval()

- setInterval(‘호출함수’, 지연시간);

- 일정 시간 간격 안에 반복 실행 : 지연시간으로 설정된 시간 간격으로 반복 호출

- 예 : setInterval(‘showTime()’, 1000);

clearInterval(타이머ID)

- setInterval()로 시간 설정한 것 해제

- 타이머ID = setInterval(‘호출함수’, 지연시간);

- clearInterval(타이머ID)

- 예 :

- timerID = setInterval(‘showTime()’, 1000);

- clearInterval(timerID)

setInterval() 연습문제1 : setInterval.html

- [시간 출력] 버튼 눌러서 1초 간격으로 시간 출력

- [시간 정지] 버튼 눌러서 정지

- 오전 11시 9분 42초

setInterval() 연습문제2 : setInterval2.html

- 1초 간격으로 이미지 1개씩 출력 (총 10개 출력) 프로그램 작성

- start() 함수 : “이미지 10개 출력” 알림창 출력

- showImage()

- 이미지 10개 출력 : apple bomb apple bomb …

- 10개 출력 후 정지

setInterval() 연습문제3 : setInterval3.html

- [카운트 다운 시작] 버튼 누르면 0.5초 간격으로 이미지 변경

- bomb1.jpg, …. bomb11.jpg

- 숫자도 10, 9, … 0 변경

- bomb11.jpg 출력되면 카운트 정지

- 다시 [카운트 다운 시작] 버튼 누르면 10부터 다시 카운트 시작

- 이미지 번호 : 1, 2, 3, ….

- 카운트 숫자 : 10, 9, 8, ….

history 객체

- 최근 방문한 주소에 관한 정보를 기억하고 있는 객체

- 메소드

- back() : 이전에 열었던 페이지로 이동

- forward() : 이전 페이지로 이동 후 다시 앞으로 이동

- go() : 몇 단계 뒤에 있는 페이지로 이동

- go(3) : 3단계 앞의 페이지로 이동

- go(-2) : 2단계 다음 페이지로 이동

location 객체

- 현재 브라우저의 주소창에 표시된 주소 값에 관련된 내용을 다루는 객체

location.href() 메소드 : 크롬 사용 시 지원 안 됨

-> 해결 : href 속성 사용

-> location.href = “http://www.google.com”;

location 객체 예제 : location.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function hrefMove(){
		location.href = "http://www.google.com"; // 크롬 사용 시
		
		// 크롬에서는 지원되지 않는 형식
		// window.location.href("http://www.goolge.com");
	}
	
	function assignMove(){
		location.assign("http://www.daum.net");	
	}
	
	function replaceMove(){
		// 뒤로 가기 버튼 적용 안됨 (사용할 수 없음)
		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 객체

- 브라우저에 관한 정보 제공

'프론트엔드 프로그래밍 > JavaScript' 카테고리의 다른 글

문서 객체 모델, 사용자 정의 객체, 이벤트 처리, JSON 변환 (0)	2022.01.27
자바스크립트 객체 (Object) > 내장 객체 (Date, Array, Math, String) (0)	2022.01.27
제어문 (if, switch, for, while...) (0)	2022.01.27
변수 (var, let, const) + 연산자 + 데이터 타입 (0)	2022.01.27
데이터 출력(alert, console.log, write), 입력 방법(confirm, prompt) (0)	2022.01.26

ABOUT ME

hyov_vely hyov_vely

'프론트엔드 프로그래밍 > JavaScript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프론트엔드 프로그래밍 > JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바