Web/HTML

[Javascript] 브라우저 객체 모델 (BOM)

웹코린이 2023. 6. 25. 10:01
728x90

 

 

BOM

웹 브라우저 자체와 상호 작용하기 위한 객체 모델
웹 페이지의 브라우저 창과 관련된 객체와 메소드를 제공하며, 웹 페이지가 브라우저와 상호 작용하는 데 사용됨
자바 스크립트를 통해 조작할 수 있으며, 웹 페이지의 상태 및 브라우저 창에 대한 정보를 얻고 조작할 수 있음

 

 

BOM 객체 종류

window : 브라우저 창을 나타내며, 전역 객체로서 브라우저 창과 관련된 정보와 동작을 제어

document : 현재 웹 페이지의 DOM에 접근하여 웹 페이지의 구조와 내용을 조작

navigator : 브라우저와 관련된 정보를 제공하며, 사용자 에이전트 정보와 브라우저 기능을 확인함

screen : 사용자의 화면 크기와 해상도 정보를 제공하며, 웹 페이지의 디스플레이 환경을 확인함

location : 현재 웹 페이지의 URL 정보를 제공하며, 웹 페이지의 디스플레이 환경을 확인함

history: 브라우저의 탐색 히스토리 정보를 관리하며, 앞으로 가기와 뒤로 가기 같은 탐색 동작을 제어함

localStorage: 클라이언트 측 웹 스토리지를 사용하여 데이터를 로컬에 저장하고, 세션 간에 유지함

sessionStorage: 브라우저 세션 동안만 유지되는 클라이언트 측 웹 스토리지로, 임시 데이터 저장에 사용됨

event: 이벤트 처리와 관련된 메서드와 프로퍼티를 포함하며, 이벤트 객체를 생성하여 이벤트 핸들링을 지원함

XMLHttpRequest: AJAX 요청을 보내고 비동기적으로 데이터를 받아오는 객체로, 웹 페이지와 서버 간의 데이터 통신을 수행함

console: 디버깅과 로깅을 위한 메서드를 제공하며, 개발자 도구 콘솔에서 메시지를 출력함

document.cookie: 쿠키를 읽고 쓰는 데 사용되며, 클라이언트와 서버 간의 데이터 저장 및 교환에 활용됨

 

 

 

실습 1 : history 객체

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹에서 기본제공해주는 다양한 객체 == BOM</title>
</head>
<body>
 
<h1>BOM : history 객체</h1>
 
<hr>
 
<a href="test11.html">다음 페이지로 이동하는 링크</a>
 
</body>
</html>

 

 

 

실습 2 : history 객체

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>결과 페이지</title>
</head>
<body>
	<input type="button" value="뒤로가기 버튼">
	
	<script type="text/javascript">
		var obj = document.querySelector('input');
		obj.onclick = function() {
			history.go(-1);
			// history.back();
		}
	</script>
</body>
</html>

 

 

 

실습 3 : window 객체

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹에서 기본제공해주는 다양한 객체 == BOM</title>
</head>
<body>
 
<h1>BOM : window 객체</h1>
 
<hr>
 
<button type="button">새 창 열기</button>
<button type="button">창 닫기</button>
<button type="button">팝업 창</button>
 
<script type="text/javascript">
	var newWindow;
	
	var btnArr = document.querySelectorAll('button');
	
	btnArr[0].addEventListener('click', openWindow);
	
	function openWindow() {
		newWindow = window.open();
		newWindow.document.write('<h1>새로운 창의 페이지</h1>');
	}
	
	btnArr[1].addEventListener('click', closeWindow);
	
	function closeWindow() {
		if (newWindow != undefined) {
			newWindow.close();		
		}
	}
	
	btnArr[2].addEventListener('click', openPop);
 
	function openPop() {
		newWindow = window.open('', '팝업창', 'width=400, height=300');
		newWindow.document.write('<h1>새로운 창의 페이지</h1>')
	}
	
	
</script>
</body>
</html>

 

 

 

실습 4 : form 요소 활용

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form 요소</title>
</head>
<body>
	<form action="#" name="loginForm">
		<table border="1">
			<tr>
				<td>아이디</td>
				<td><input type="text" name="mId" class="login" placeholder="5자이상" required></td>
			</tr>
			<tr>
				<td>비밀번호</td>
				<td><input type="password" name="mPw" class="login" placeholder="10자이상" required></td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="데이터 전송"></td>
			</tr>
		</table>
	</form>
	<script type="text/javascript">
		// var elem = document.forms.loginForm;
		var elem = document.forms['loginForm'];
		elem.onsubmit = function() {
			if (this.mId.value.length < 5) {
				alert('아이디는 5자이상이어야합니다!');
				this.mId.focus();
				return false;
			}
			if (this.mPw.value.length < 10) {
				alert('비밀번호는 10자이상이어야합니다!')
				this.mPw.focus();
				return false;
			}
		}		
		
		var arr = document.querySelectorAll('.login');
		for (var i = 0; i < arr.length; i++) {
			arr[i].onfocus = function() {
				this.style.backgroundColor = 'lightblue';
			}
			arr[i].onblur = function() {
				this.style.backgroundColor = 'white';
			}
		}
	</script>
	
</body>
</html>
728x90