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
'Web > HTML' 카테고리의 다른 글
| [HTML] form 태그 (0) | 2023.06.24 |
|---|---|
| [HTML] table 태그 (0) | 2023.06.23 |
| [HTML] img 태그 (0) | 2023.06.22 |
| [HTML] 시맨틱 태그 (0) | 2023.06.21 |
| [HTML] 용어 정리 (0) | 2023.06.20 |
