Notice

[공지] 프로그래밍 블로그

Recent Posts

Recent Comments

Link

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

프로그래밍

[Web] day35 : BOM (Browser Object Model) 본문

Web/Web

[Web] day35 : BOM (Browser Object Model)

시케 2023. 7. 4. 21:26

728x90

2023.06.23.금

BOM (Browser Object Model)

웹에서 기본 제공해주는 다양한 객체이다

대부분의 브라우저에서 구현은 되어있지만, 정의된 표준이 없어 브라우저 제작사 마다 세부사항이 다르고 다소 한정적이라는 특징이 있다

BOM 객체를 통해 웹 브라우저의 버튼, URL 주소 입력 창, 타이틀 바 등 웹브라우저 윈도우 및 웹페이지의 일부분을 보다 쉽게 제어할수 있게 된다

history 객체

현재의 브라우저가 접근했던 URL history에 대한 객체이다

웹에서 기본 제공해주는 다양한 객체 == BOM

BOM : history 객체

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹에서 기본 제공해주는 다양한 객체 == BOM</title>
</head>
<body>

<h1>BOM : history 객체</h1>
<hr>

<a href ="test08.html">다음</a>

</body>
</html>

<!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.back();
			history.go(-1);
		}
	</script>
</body>
</html>

window 객체

Global Context, 브라우저 창 객체이다

웹에서 기본 제공해주는 다양한 객체 == BOM

BOM : 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>

	<script type="text/javascript">
		var btnArr = document.querySelectorAll('button');

		btnArr[0].addEventListener('click', openWindow);

		btnArr[1].addEventListener('click', closeWindow);

		function openWindow() {
			var newWindow = window.open('', '팝업창', 'width=400, height=300');
			newWindow.document.write('<h1>새 창 열기</h1>');
		}

		function closeWindow() {
			if (newWindow != undefined)
				newWindow.close();
		}
	</script>

</body>
</html>

활용 예제

Insert title here

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="#" name="loginForm">
		<table border="1">
			<tr>
				<td>아이디</td>
				<td><input type="text" class="login" name = "memberId" placeholder="5자 이상"
					required></td>
			</tr>
			<tr>
				<td>비밀번호</td>
				<td><input type="password" class="login" name = "passwd" 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.memberId.value.length < 5) {
				alert('아이디는 5자 이상이어야 합니다');
				this.memberId.focus();
				return false;
			}
			if(this.passwd.value.length < 10) {
				alert('비밀번호는 10자 이상이어야 합니다');
				this.passwd.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>