728x90
BOM (Browser Object Model)
BOM이란 웹 브라우저에서 기본 제공해주는 다양한 객체입니다. 웹 브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공합니다. 대부분의 브라우저에서 구현은 되어있지만, 정의된 표준이 없어 브라우저 제작사 마다 세부사항이 다르고 다소 한정적이라는 특징이 있습니다.
대표적인 BOM 객체 종류
- window : Global Context. 브라우저 창 객체
- screen : 사용자 환경의 디스플레이 정보 객체
- location : 현재 페이지의 url을 다루는 객체
- navigator : 웹 브라우저 및 브라우저 환경 정보 객체
- history : 현재의 브라우저가 접근했던 URL history
실습
실습 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>GitHub
https://github.com/Qkrwnsgus0522/Web
GitHub - Qkrwnsgus0522/Web
Contribute to Qkrwnsgus0522/Web development by creating an account on GitHub.
github.com
728x90
