◉ 브라우저 객체 모델
▪︎ 브라우저 객체 모델(BOM, Browser Object Model)
: 웹 브라우저에서 제공하는 객체로, 브라우저를 제어할 수 있는 여러 가지 기능이 포함되어 있음
▪︎ 브라우저 객체 모델의 계층도
▪︎ 브라우저 객체 모델의 종류
| 종류 | 설명 |
| window | 웹 브라우저가 열릴 때마다 생성되는 최상위 관리 객체 |
| document | 웹 브라우저에 표시되는 HTML 문서 정보가 포함된 객체 |
| location | 웹 브라우저에 현재 표시되는 페이지에 대한 URL 정보가 포함된 객체 |
| history | 웹 브라우저에 저장된 방문 기록이 포함된 객체 |
| navigator | 웹 브라우저 정보가 포함된 객체 |
| screen | 웹 브라우저의 화면 정보가 포함된 객체 |
1. window 객체의 속성과 메서드
▪︎ window 객체의 주요 속성 및 메서드
2. window 객체의 기본 속성 사용하기
▪︎ 주로 웹 브라우저의 창과 관련 있는 속성이 많음
각 속성이 의미하는 값은 아래 그림과 같음
▪︎ 버튼 클릭 시, printInfo() 함수 호출됨
<body>
<button onclick="printInfo()">window 객체 속성</button>
<script>
function printInfo(){
console.log(`웹 브라우저의 너비: ${window.innerWidth}`);
console.log(`웹 브라우저의 높이: ${window.innerHeight}`);
console.log(`웹 브라우저 창의 너비: ${window.outerWidth}`);
console.log(`웹 브라우저 창의 높이: ${window.outerHeight}`);
console.log(`웹 브라우저의 창 위쪽 면과 모니터 사이의 간격: ${window.screenTop}/${window.screenY}`);
console.log(`웹 브라우저의 창 왼쪽 면과 모니터 사이의 간격: ${window.screenLeft}/${window.screenX}`);
console.log(`웹 브라우저 창의 스크롤 가로 위치: ${window.scrollX}`);
console.log(`웹 브라우저 창의 스크롤 세로 위치: ${window.scrollY}`);
}
</script>
</body>
3. 웹 브라우저에서 새 창 제어하기
▪︎ window 객체의 open() 메서드
- 웹 브라우저에서 새로운 창을 여는 데 사요앟ㅁ
window.open(경로, 이름, 속성);
▪︎ button 태그 클릭 시, popup.html 파일이 새 창에서 열리게 하고 싶을 때
<body>
<button onclick="popup()">팝업</button>
<script>
function popup(){
window.open('popup.html', '팝업', 'width=200', 'height=100');
}
</script>
</body>
▪︎ 열린 창은 close() 메서드 이용
<body>
웹 브라우저에서 새 창 열기
<button onclick="window.close()">팝업 닫기</button>
</body>
'프론트엔드 > Javascript' 카테고리의 다른 글
| JS - DOM / 노드 선택 및 조작 / 이벤트 다루기 (0) | 2023.08.16 |
|---|---|
| JSON (1) (0) | 2023.08.16 |
| JS - 객체 / 표준 내장 객체 (0) | 2023.08.16 |
| JS - 함수 정의 / 매개변수와 인수 / return문 / 스코프 (0) | 2023.08.14 |
| JS - 조건문 / 반복문 / 인위적으로 반복문 종료시키는 방법 (0) | 2023.08.13 |