JavaScript - BOM(2)

1. BOM 개요

• 브라우저 제작사들이 브라우저 창이나 프레임워크를 제어하기 위해 제공하는 객체 모델

• window 객체를 최상위로 하며 하위에는 브라우저의 정보를 담은 다양한 객체들이 존재

객체명	설명
window	BOM의 최상위 객체이며 브라우저 창 그 자체를 나타냄
screen	사용자 디스플레이 화면 정보 제공
location	현재 페이지의 URL 정보 제공 및 주소 조작
history	브라우저의 방문 기록 관리
navigator	브라우저 제조사, 버전, OS 등 정보 제공
document	현재 로드된 페이지의 문서 객체

2. screen 객체

• 사용자의 모니터나 화면 해상도 정보를 제공

• screen.width / screen.height: 화면 전체 너비와 높이

• screen.availWidth / screen.availHeight: 가용 화면 크기

3. location 객체

• 현재 창의 페이지 주소를 참조하거나 조작

속성/메서드	설명
location.href	현재 페이지 전체 URL이며 값을 변경하여 페이지 이동
window.location.reload()	새로고침
window.location.assign(url)	페이지 이동

window.onkeydown = function() {
    if(event.keyCode == 70){
        window.location.href = 'https://naver.com'
    }
}

4. history 객체

• 브라우저 히스토리 영역에 방문했던 URL 기록을 참조

속성/메서드	설명
window.history.back()	이전 페이지로 이동
window.history.forward()	다음 페이지로 이동
window.history.go(n)	지정한 숫자만큼 이동하며 음수는 뒤로 양수는 앞으로 이동

5. 내장 배열 (컬렉션)

• 문서 내용을 기반으로 자동으로 생성되는 배열

컬렉션명	대상 요소
window.document.images	이미지 객체 배열
window.document.links	링크 객체 배열
window.document.anchors	앵커 객체 배열
window.document.forms	폼 객체 배열
window.document.all	문서 내 모든 요소

6. 대화 상자

함수	리턴 타입	설명
alert(message)	void	단순 메시지 출력 및 확인 버튼
confirm(message)	boolean	확인(true), 취소(false) 버튼 제공
prompt(message, default)	string	텍스트 입력창 제공

7. Form 유효성 검사

• form1.onsubmit 폼 전송 직전에 발생하며 return false 시 전송 취소

• txtName.select() 텍스트 필드 내용 범위 선택

JavaScript
form1.onsubmit = function() {
    var regex = /^[가-힣]{2,5}$/
    if(!regex.test(txtName.value.trim())){
        alert('이름 유효하지 않음')
        txtName.select()
        return false
    }
}

8. 이미지 및 링크 제어

• document.images['cat1'].src 이미지 경로 동적 변경

• onmouseover / onmouseout 마우스 커서 위치에 따른 이미지 전환

• document.links['link1'].href 링크 주소 수정

if(document.images['sw1'].src.endsWith('switch_off.png')){
    document.images['sw1'].src = 'images/switch_on.png'
}