BOM : 웹 브라우저가 가지고 있는 모든 객체를 의미
최상위 객체는 window 객체이다. window 하위 객체는 document,history,location, navigator, screen 5개의 객체이다.
특히 document 객체는 지금까지 많이 사용해왔는데 window 객체의 하위 객체라는 것을 알 수 있다.
Window 객체
window 객체는 모든 브라우저에서 지원되고, 브라우저 창을 의미한다.
JavaScript에서 window 객체는 전역 객체로, 모든 전역 변수와 함수는 window 객체의 속성으로 저장된다.
예를 들어, var a = 10;이라고 할 경우, window.a로 접근할 수 있다.
특징 정리
1. 전역 변수는 window 객체의 속성이다
2. 전역 함수는 window 객체의 메서드이다
3. 문서 객체는 window 객체의 하위 객체이다
위의 특징에 따라, 다음 두 문장은 동일하다 .
window.document.querySelector("header");
document.querySelector("header");
일반적으로 window 객체는 최상위 객체이므로 위 문장과 같이 생략하여 사용한다. 그동안 사용해왔던 alert(), prompt(), confirm() 등은 모두 window 객체의 메서드이다.
window 속성
| 속성 | 설명 |
| closed | 윈도우가 닫혀있는지 여부 (boolean값) 반환 |
| innerHeight | 윈도우의 내용 영역의 안쪽 높이를 반환 (픽셀단위) |
| innerWidth | 윈도우의 내용 영역의 안쪽 너비를 반환 (픽셀단위) |
| length | 현재 창의 <iframe> 요소 수를 반환 |
| name | 창 이름을 설정하거나 반환 |
| outerHeight | 도구 막대 / 스크롤 막대를 포함하여 창 외부 높이를 반환 |
| outerWidth | 도구 막대 / 스크롤 막대를 포함하여 창 외부 너비를 반환 |
| parent | 현재 윈도우 부모 창을 반환 |
| screenLeft | 화면을 기준으로 윈도우의 수평 좌표를 반환 |
| screenTop | 화면을 기준으로 윈도우의 수직 좌표를 반환 |
| screenX | 화면을 기준으로 윈도우의 가로 거리를 반환 |
| screenY | 화면을 기준으로 윈도우의 세로 거리를 반환 |
| top | 맨 위의 브라우저 창을 반환 |
window 메서드
| 메서드 | 설명 |
| alert() | 경고 상자 표시 |
| blur() | 현재 window에서 포커스 제거 |
| clearInterval() | setInterval()의 타이머세트 제거 |
| clearTimeout() | setTimeout()의 타이머세트 제거 |
| colse() | 현재 window 닫기 |
| confirm() | 메시지와 확인 및 취소 버튼 대화상자 표서 |
| focus() | 현재 window에 포커스 설정 |
| moveBy() | 현재 위치를 기준으로 window를 이동 |
| moveTo() | window를 지정된 위치로 이동 |
| open() | 새 브라우저 window 열기 |
| prompt() | 입력 요구하는 대화상자 표시 |
| resizeBy() | 지정된 픽셀을 기준으로 윈도우 크기 조절 |
| resizeTo() | 지정된 폭과 높이로 window 크기 조절 |
| setInterval() | 지정한 시간(밀리초) 간격으로 특정 함수를 반복 실행 |
| setTimeout() | 지정한 시간(밀리초) 후에 한 번 특정 함수를 실행 |
| stop() | window 로드 중지 |
| 메서드 | 설명 |
| open() | 새로운 브라우저 window를 연다 |
| close() | 열린 window를 닫는다. window.close(); |
| winName 매개변수값 | 설명 |
| name | 새 창이나 탭의 이름을 지정 |
| _blank | URL이 새 window에 로드된다(기본값) |
| _parent | URL이 부모 프레임으로 로드된다 |
| _self | 현재 페이지를 URL로 대체한다 |
| _top | 로드될 수 있는 모든 프레임 세트를 URL로 대체한다 |
| winFeatures 매개변수값 | 설명 |
| height = pixels, width = pixels |
window 높이와 너비이며, 최소값은 '100px'이다. |
| left = pixels, top = pixels |
window의 왼쪽, 위쪽 위치다 Navigation값은 허용하지 않는다 |
| titlebar = yes|no|1|0, toolbal = yes|no|1|0 |
window의 제목 표시줄과 툴바의 표시 여부 |
| resezable= yes|no|1|0 | window의 사이즈 변경 가능 여부 (IE전용) |
| scrollbars = yes|no|1|0 | window의 스크롤 막대 표시 여부 |
| fullscreen = yes|no|1|0 | 브라우저 전체 화면 모드로 표시할지 여부 (기본값은 no, IE전용) |
| menubar = yes|no|1|0 | window의 메뉴바 표시 여부 |
| status = yes|no|1|0 | window의 상태줄 표시 여부 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="openWin()">Open</button>
<script>
function openWin() {
window.open("http://www.naver.com","_blank","width=500px,height=400px");
}
</script>
</body>
</html>
'웹 프로그래밍 기초 > BOM 브라우저 객체' 카테고리의 다른 글
| location 객체 (0) | 2025.04.10 |
|---|---|
| screen 객체 (0) | 2025.04.10 |
| setTimeout(), setInterval() (0) | 2025.04.10 |
| resizeTo(), resizeBy() (0) | 2025.04.10 |
| moveTo(), moveBy() (0) | 2025.04.10 |