BOM(Browser Object Model)
브라우저 객체 모델. DOM이 Document(웹 페이지 문서)에 관한 객체였다면,
BOM은 Browser에 관한 객체인 것이다.
(이 글을 쓰는 지금도 마침 봄이다ㅋ)
최상위 : window
나머진 그 아래 동등.
Window Methods
window.open() 창 열기
window.close() 창 닫기
window.moveTo() 창 옮기기
window.resizeTo() 창 크기 변경하기
window.onload() 로드가 되었을 때(head, body....)
window.unload() 페이지 벗어날 때
Example) 새로운 윈도우(창) 열기
<form>
<input type="button" value="구글창 열기" onclick="window.open("http://www.google.com", "_blank", "width=300, height=300", true)">
// 인자: url, 새창에 열지 새탭에 열지(기본값 새창), 창 크기, 상태
</form>Screen Object : 모니터 화면
모니터 화면에 대한 정보를 담은 객체.
window.screen 인데 window 생략 가능 ㅇㅇ
screen.availHeight : 화면 높이 반환(원랜 윈도우 테스크바 제외였는데 요즘은 포함임)
screen.availWidth : 너비 버젼 ㅇㅇ
screen.colorDepth : 컬러 팔레트 깊이(?) = 한가지 색 표현하기 위해 쓰인 비트수(24 or 32bit)
screen .height : 화면 전체 높이
screen.pixelDepth : 화면 컬러 해상도(bits per pixel)값 반환
screen.width : 화면 전체 너비
Exmaple) 새로운 창 전체 화면으로 열기
<script>
function maxopen(url, winattributes) {
var maxwindow = window.open(url, "", winattributes)
maxwindow.moveTo(0, 0); // 왼쪽 위 상단으로 옮기기
maxwindow.resizeTo(screen.availWidth, screen.availHeight) // 모니터 가로길이, 세로길이 = 최대 크기
}
</script>
<a href="#" onClick="maxopen('http://www.google.com', 'resize=1, scrollbars=1, status=1'); return false">전체 화면 보기</a>Location Object: 주소(URL)
페이지의 주소(URL)에 대한 정보를 담은 객체.
새로운 페이지로 이동시키는 메소드도 있음.
속성 여러개 있는데... 몇 개만 적으면
location.href : 전체 URL 반환
location.host : URL 중에서 hostname, port 반환
location.port : URL 중에서 port 반환
protocol : URL 중에서 protocol 부분(http, https) 반환
- 페이지 옮기는 메소드(like a tag)
location.assign() : history 유지 = 뒤로가기로 이전 페이지 돌아갈 수 있음
location.replace() : history 유지X = 뒤로가기로 이전 페이지 못돌아감
Navigator Objcet: 브라우저 정보
크롬, 엣지, 파폭... 등의 브라우저에 관한 정보를 담고있는 객체.
Exmaple) 브라우저 모든 정보 보기(feat. key값)
<html>
<body>
<script>
for (var key in navigator) {
value = navigator[key];
document.write(key + ": " + value + "<br>");
}
</script>
</body>
</html>'Computer Science > 웹 프로그래밍' 카테고리의 다른 글
| 이벤트 핸들러 부착(Attaching an Event Handler) (0) | 2024.07.14 |
|---|---|
| HTML, JS 이벤트 처리 (2) | 2024.07.13 |
| DOM의 요소 관계와 JS에서의 사용 (1) | 2024.07.09 |
| JS에서 Random 값 받기(Math.random()) (0) | 2024.07.09 |
| JS에서 시간 받기(Getting Date in Javascript) (0) | 2024.07.09 |