p576
BOM(Browse Object Model)
브라우저 객체 모델 window를 기반으로 함
브라우저 프로그램에서 제공하는 기능을 자바스크립트로 제어할 때 사용하는 객체 묶음
동일하게 제공하는 기능들이 있다, 이런 객체를 모아서 만든 모델, 브라우저 window
command 입력 방식 CUI - 직접 명령어를 입력해서 사용사용자 인터페이스 GUI - 그림을 띄워서 명령어를 사용하게 하는
스크린 - 화면 효과로케이션 - a link와 같음히스토리 - 경로 이동, 방문기록내비게이터 - 브라우저의 정보, 브라우저에 따라서 제어하는 기능이 다르다.다큐멘트 body
1. window
alert 등의 대화창, 화면의 크기, 스크롤 등을 처리
화면의 크기는 3가지로 모니터 크기, 유효영역(실제 프로그램 크기), 브라우처 창의 크기에 따른 화면크기로 나뉠 수 있다.
1) open() - 새로운 브라우저 창을 띄움
새창 설정
크기 - width, height
위치 - left, top
스크롤바 - scrollbars(no로 설정하면 스크롤바 출력 안됨)
크기변경 - resizable(no로 설정하면 크기변경 불가)
툴바 - toolbars(no로 설정하면 툴바 출력 안됨)
메뉴바 - menuvar(no로 설정하면 메뉴바 출력 안됨)
예) open("", "", "scrollbars=no, resizable=no")
팝업 설정 시 사이즈를 정해놓고 만들어 놓기 때문에 스크롤바의 경우 선택이다.
2) close() - 현재 브라우저 창을 닫음(종료)
3) moveBy() - 창의 위치를 변경(현재 위치 기준)
4) moveTo() - 창의 위치를 변경(절대 위치 기준)
5) resizeBy() - 창의 크기를 변경(현재 크기 기준)
6) resizeTo() - 창의 크기를 변경(절대 크기 기준)
7) focus() - 창에 포커스를 부여(맨 위에 띄움)
8) blur() - 창에 부여된 포커슬 제어(거의 사용할 일이 없다)
9) scrollBy() - 지정한 위치로 문서를 스크롤(현재 위치 기준)
10) scrollTo() - 지정한 위치로 문서를 스크롤(절대 위치 기준)
현재 위치 기준은 현재 위치로부터 계속 지정한 값으로 인해서 변하게 되고,
절대 위치 기준은 브라우저의 창의 고정된 값을 기준으로 이동하기 때문에 지정된 값을 바꾸지 않은 이상 같은 위치로 유지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window 객체</title>
</head>
<body>
<button>창열기</button>
<button>창닫기</button>
<button>By이동</button>
<button>To이동</button>
<button>resizeBy</button>
<button>resizeTo</button>
</body>
<script>
const btns = document.querySelectorAll("button");
let popup; //팝업창 저장 변수 만들기
// 새창 열기 버튼 처리
btns[0].onclick = () => {
popup = window.open("5.popup.html", "", "width=400, height=250, left=500"); // open(url, name, spec(size)) 가로, 세로, 위치(top, left), 공지사항 사용 시
}
// 새창 닫기 버튼 처리
btns[1].onclick = () => {
popup.close();
}
// moveBy 버튼 처리
btns[2].onclick = () => {
popup.moveBy(100, 100);
popup.focus(); // 자동으로 위로 올라온다.
}
//moveTo 버튼 처리
btns[3].onclick = () => {
popup.moveTo(200, 100);
popup.focus();
}
btns[4].onclick = () => {
popup.resizeBy(50, 50);
}
btns[5].onclick= () => {
popup.resizeTo(500, 500);
}
</script>
</html>scroll 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스크롤</title>
<style>
body{
width: 2000px;
}
button {
position: fixed;
}
</style>
</head>
<body>
<h1>스크롤 조작</h1>
<h2>버튼으로 화면 스크롤하기</h2>
<img src="https://cdn.pixabay.com/photo/2022/10/04/14/27/cat-7498364_960_720.jpg" width="400">
<br>
<button><</button>
<button>></button>
</body>
<script>
const btns = document.querySelectorAll("button");
btns[0].onclick = () => { // x축 스크롤 너비값이 body에 있어야 함, y축 스크롤 높이값이 있어야 함
window.scrollTo(-200, 0); //To, by 변경해서 사용가능
}
btns[1].onclick = () => {
window.scrollTo(200, 0);
}
</script>
</html>스크롤과 함께 사용하는 값 : offset - 요소의 위치정보
요소.offsetWidth : 요소의 너비
요소.offsetHeight : 요소의 높이
요소.offsetLeft : 요소가 창의 왼쪽에서 얼마나 떨어져 있는지
요소.offsetTop : 요소가 창의 위에서 얼마나 떨어져 있는지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offset</title>
<style>
* {
margin: 0;
}
div {
width: 300px;
height: 200px;
border: 1px solid darkgoldenrod;
margin: 10px;
box-sizing: border-box; /*사이즈를 일정하게 하기 위해서 300px로 고정*/
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
<script>
const divs = document.getElementsByTagName("div"); // 배열 div 전체
console.log(divs[0].offsetWidth); // 320px, box-sizing을 주어서 300px로 맞춤, 너비를 확인할 수 있다.
console.log(divs[0].offsetHeight); // 200px
console.log(divs[1].offsetTop); // 220인 이유는 위 아래 겹쳐서 20px 마진을 주기 때문이다.
console.log(divs[1].offsetLeft);
</script>
</html>'공부기록 > JavaScript' 카테고리의 다른 글
| 3월 17일 (2) JavaScript - locatoin, history (0) | 2023.03.17 |
|---|---|
| 3월 17일 (1) JavaScript - Screen (0) | 2023.03.17 |
| 3월 16일 (1) JavaScript - node 활용 제어 (0) | 2023.03.16 |
| 3월 15일 JavaScript - 객체(Object) (0) | 2023.03.15 |
| 3월 14일 (2) JavaScript - 객체 date, DOM (2) | 2023.03.14 |
