window
document html
screen 해상도
navigator 운영체제 (안드로이드,mac,ios etc)
history 방문기록
location 주소창
브라우저 객체 모델(browser Object Model : BOM)
자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있는데
이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다.
이 모델은 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해준다.
웹 브라우저가 창에 문서가 표시되는 순간 브라우저는 html소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어낸다.
웹 브라우저가 열리면 가장 먼저 window객체가 만들어지고 밑으로 하위요소에 해당하는 객체들이 생성된다. 이 하위객체는 웹 문서와 주소 표시줄 처럼 브라우저 요소에 해당하는 하위 객체를 가리킨다.
| 브라우저 객체 요소 | |
|---|---|
| window | 브라우저 창이 열릴때마다 하나씩 만들어진다. 브라우저 창 안의 요소중 최상위(부모)객체이다. |
| document | 웹 문서마다 하나씩 있고 태그를 만나면 만들어진다. html문서의 정보가 담겨있다. |
| navigator | 현재 사용하는 브라우저의 정보가 들어있다. |
| history | 현재 창에서 사용자의 방문기록을 저장한다. |
| location | 현재 페이지의 url정보가 담겨있다. |
| screen | 현재 사용하는 화면의 정보가 담겨있다. |
window객체
window객체는 웹 브라우저의 상태를 제어하고 자바스크립트의 최상위에 존재한다. 그래서 자바스크립트의 모든 객체는 window객체 안에 포함된다.
window객체의 프로퍼티는 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용한다.
프로퍼티를 사용하려면 아래 기본형을 사용한다.
[기본형]
window.프로퍼티(속성)명;
[프로퍼티의 종류]
1.document : 브라우저 창에 표시된 웹 문서에 접근할 수 있다.
2.frameElement : 현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 반대로 포함되어 있지 않다면 null을 반환한다.
3.innerHeight : 내용 영역의 높이를 나타낸다.★
4.innerWidth : 내용 영역의 넓이를 나타낸다.★
5.localStorage : 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환함.
6.location : window객체의 위치 또는 현재 url을 나타낸다.
-로컬스토리지는 개인 정보들을 넣거나 다크모드 만들때 변경해야 하는 정보들을 임시 저장할 때 많이 사용한다.
-세션스토리지는 최근 본 정보를 저장할때 사용한다.
7.name : 브라우저 창의 이름을 가져오거나 수정한다.
8.outerHeight : 브라우저 창의 바깥 높이를 나타낸다.
9.outerWidth: 브라우저 창의 바깥 넓이를 나타낸다.
10.pageXoffset : 스크롤했을 때 수평으로 이동하는 픽셀수를 나타낸다. scrollX와 같다.☆
11.pageYoffset : 스크롤했을 때 수직으로 이동하는 픽셀수를 나타낸다. scrollY와 같다.☆
12.parent : 현재 창이나 서브 프레임의 부모를 뜻한다.
13.screenX : 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냄.☆
14.screenY : 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타냄.☆
15.sessionStorage : 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환한다.
휘발성 저장 공간으로 브라우저를 종료하면 저장된 데이터가 모두 사라진다.
window객체의 메서드
window객체의 메서드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등 웹 브라우저 창 자체와 관련된다.
window객체의 메서드들은 window.alert(); 이런식으로 써야 하지만 window는 기본 객체라서 생략할 수 있다.
[종류]
1.alert() : 알림창을 표시한다. 확인 버튼을 누르면 다음줄의 코드를 실행한다.
2.blur() : 현재 창에서 포커스를 제거한다. focus의 반대
blur는 포커스를 잃은 순간을 이야기하는데 요소가 포커스를 잃게되면서 데이터를 체크해 요청을 보내는 활동을 하기 때문에 중요하다.
3.close() : 현재 창을 닫는다.
4.confirm() : 확인,취소 창으로 확인을 누르면 true를 반환하고 취소를 누르면 false를 반환한다.
5.focus() : 현재 창에 포커스를 부여한다.
6.moveBy() : 현재 창을 지정한 크기만큼 이동시킨다. 보통 팝업 작업에서 많이 쓴다.
7.moveTo(x,y) : 현재 창을 지정한 좌표로 이동시킨다.
function moveWinTo() {
myWindow.moveTo(150, 150);
}
function moveWinBy() {
myWindow.moveBy(75, 75);
}
8.open(경로, 창 이름, 창 옵션) : 새로운 창을 연다.
-창 이름 : 팝업창의 이름을 나타낸다. 이름을 지정하지 않으면 팝업창이 계속 새로 나타난다.
-옵션 : left, top속성을 이용해 위치를 지정하거나 width,height속성을 이용해 크기를 지정할 수 있다.
만약 위치를 지정하지 않으면 팝업창을 화면의 맨 왼쪽 위에 나타난다.
9.postMessage() : 메세지를 다른 창으로 전달한다.
10. print() : 현재 문서를 인쇄한다.
11. prompt() : 질의응답창.사용자로부터 입력받은 내용을 문자열로 반환한다.
12. resizeBy() : 지정한 크기 만큼 현재 창의 크기를 조절한다.
13. resizeTo() : 동적으로 브라우저 창의 크기를 조절한다.
14. sizeToContent() : 내용에 맞게 창의 크기를 맞춘다.
15. scroll() : 문서에서 특정 위치로 스크롤한다. (강제스크롤)★
좌표값을 입력하면 스크롤이 해당 위치로 이동한다. 대입연산으로 특정값만큼 이동시킬 수있다.
16. scrollBy() : 지정한 크기 만큼씩 스크롤한다.★
17. scrollTo() : 지정한 위치까지 스크롤한다.★
18. stop() : 로딩을 중지한다. 무한반복일때 어느 시점에 들어가면 stop메서드가 작동하며 오류메시지가 뜨게된다.
