[JavaScript] BOM(Browser Object Model)

BOM(Browser Object Model) : 브라우저 객체 모델
- 브라우저 내에 내장된 객체.
- BOM 객체의 최상위 내장 객체는 window 객체임.

* window 객체의 주요 메서드
  - open() : 새로운 창을 띄우고자 할 때 사용하는 메서드.
  - alert() : 경고 창을 띄울 때 사용하는 메서드.
  - prompt() : 질의/응답 창을 띄울 때 사용하는 메서드.
  - confirm() : 확인/취소 창을 띄울 때 사용하는 메서드.
  - moveTo() : 창의 위치를 이동시킬 때 사용하는 메서드.
  - resizeTo() : 창의 크기를 변경시킬 때 사용하는 메서드.
  - setInterval() : 일정 간격으로 지속적으로 실행문을 실행시킬 때 사용하는 메서드.
  - setTimeout() : 일정 간격으로 한번만 실행문을 실행시킬 때 사용하는 메서드.

* screen 객체 : 사용자의 모니터 정보(속성)를 제공해 주는 객체.
  screen 객체의 주요 속성
  - screen.width : 화면의 너비값을 반환하는 속성.
  - screen.height : 화면의 높이값을 반환하는 속성.
  - screen.availWidth : 작업표시줄을 제외한 화면의 너비값을 반환하는 속성.
  - screen.availHeight : 작업표시줄을 제외한 화면의 높이값을 반환하는 속성.
  - screen.colorDepth : 사용자 모니터가 표현 가능한 컬러 bit를 반환하는 속성.

* location 객체 : 자바스크립트가 실행되고 있는 현재 브라우저의 주소창에 표시된 주소 값에 관련된 내용을 다루는 객체.
- 사용자 브라우저의 주소 창의 url에 대한 정보(속성)와새로고침 기능을 제공하는 객체.
- location 객체의 주요 속성 및 메서드
- location.href : 브라우저 창의 url 값을 반환하는 속성.
- location.reload() : 브라우저 창의 새로고침이 일어나게 하는 메서드.

* history 객체
- 브라우저가 페이지를 변경한 이력이 저장되어 있는 객체.
- 사용자가 방문한 사이트 중 이전에 방문한 사이트와 다음 방문한
    사이트로 다시 돌아갈 수 있는 속성과 메서드를 제공하는 객체.
- history 객체의 속성과 메서드
  - length : 방문 기록에 저장된 목록의 갯수를 반환하는 속성.
  - history.back() : 이전에 방문한 웹 페이지로 이동하는 메서드.
  - history.forward() : 다음에 방문한 웹 페이지로 이동하는 메서드.
  - history.go(숫자) : 이동 숫자만큼 페이지로 이동하는 메서드.

screen 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	document.write("화면 너비 >>> " + screen.width + "<br>");
	document.write("화면 높이 >>> " + screen.height + "<br>");
	document.write("작업표시줄을 제외한 화면 너비 >>> " + screen.availWidth + "<br>");
	document.write("작업표시줄을 제외한 화면 높이 >>> " + screen.availHeight + "<br>");
	document.write("표현 가능한 컬러 >>> " + screen.colorDepth + "<br>");
	
</script>
</head>
<body>

</body>
</html>

location 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	document.write("url 정보 >>> " + location.href + "<br>");

</script>
</head>
<body>

</body>
</html>

history 객체

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h1>첫번째 페이지</h1>
	
	<a href="Exam_02.html">두번째 페이지</a>
	
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h1>두번째 페이지</h1>
	<a href="Exam_03.html">세번째 페이지</a>
	
	<hr>
	
	<button onclick="history.back()">이전 페이지</button>
	<button onclick="history.forward()">다음 페이지</button>
	

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h1>세번째 페이지</h1>
	
	<hr>
	
	<button onclick="history.go(-1)">바로 이전 페이지</button>
	<button onclick="history.go(-2)">맨 처음 페이지</button>

</body>
</html>

저작자표시

'Front > JavaScript' 카테고리의 다른 글

[JavaScript] DOM - 내장함수, 유효성 검사 (0)	2021.04.26
[JavaScript] DOM(Document Object Model) (0)	2021.04.26
[JavaScript] 객체(Object), 내장 객체(Date, Math) (0)	2021.04.26
[JavaScript] 함수(Function) (0)	2021.04.26
[JavaScript] 배열(Array) (0)	2021.04.23