window안에
-도큐먼트(html) -스크린(해상도) -운영체제(navigator) -방문기록(history) -주소창(location)
브라우저 객체 모델
웹 브라우저가 창에 문서가 표시되는 순간 브라우저는 html소스를 한줄씩 읽으면서
화면에 내용을 표시하고 관련된 객체를 만들어낸다.
웹 브라우저가 열리면 가장 먼저 window객체가 만들어지고 밑으로 하위요소에
해당하는 객체들이 생성된다. 이 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저 요소에
해당하는 하위 객체를 가르킨다.
[종류]
1. window : 브라우저 창이 열릴때마다 하나씩 만들어진다. 브라우저 창 안의 요소 중
최상의 요소(부모)객체이다.
2. document : 웹 문서마다 하나씩 있고 <body>태그를 만나면 만들어진다.
html 문서의 정보가 담겨있다.
3. navigator : 현재 사용하는 브라우저의 정보가 담겨있다.
4. history : 현재 창에서 사용자의 방문기록 저장
5. location : 현재 페이지에 url 정보가 담겨있다.
6. screen : 현재 사용하는 화면의 정보가 담겨있다.
window객체
window객체는 웹 브라우저의 상태를 제어하고, 자바스크립트의 최상위에 존재함.
그래서 자바스크립트의 모든 객체는 window객체 안에 포함된다.
window객체의 프로퍼티는 주로 웹 브라우저 창에 정보를 가져오거나 값을 바꿀떄
사용. 프로퍼티를 사용하려면 아래 기본형을 사용한다.
[기본형]
window.프로퍼티(속성)명;
[프로퍼티 종류]
1. document: 브라우저 창에 표시된 웹 문서에 접근할 수 있다.
2. frameElement: 현재 창이 다른 요소 안에 포함 되어있을 경우 요소를 반환
반대로 포함 되어있지 않다면 NULL을 반환한다.
3.★ innerHeight: 내용영역에 높이를 나타낸다.
4.★innerwidth: 내용영역에 넓이를 나타낸다. (ex. 스크롤을 내릴때의 ~좌표로 설정)
5.★LocalStorage: 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환함. 데이터가
반영구적으로 저장되어 브라우저를 종료해도 정보가 남아있다.
6. Location: window객체의 위피 또는 현재 url을 나타낸다.
7. name: 브라우저 창의 이름을 가져오거나 수정한다.
8. outerHeight: 브라우저 창에 바깥높이를 나타낸다.
9. outerWidth: 브라우저 창에 바깥넓이를 나타낸다.
10.★pageXoffset: 스크롤 했을때 수평으로 이동하는 피셀수를 나타낸다. scroolX와 같음.
11.★pageYoffset: 스크롤 했을때 수직으로 이동하는 픽셀수를 나타낸다. scoollY와 같음.
12. parent: 현재 창이나 서브 프레임의 부모를 뜻한다.
13.★screenX: 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져있는 거리를
나타낸다.
14.★screenY: 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져있는 거리를
나타낸다.
15. sessionStorage: 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환한다.
휘발성 저장공간으로 브라우저를 종료하면 저장된 데이터가 모두 사라진다. 
브라우저의 왼쪽 모서리가 기준ㄹ으로
스크롤을 포함한 것 아우터 outerWidt
전체 세로영역 아우터 outerHeight
나머지는 이너로 구분한ㄴ다.
innerHeight innerwidth
창을 줄였을때
screenX
screenY
바깥쪽으로 나오는 것은 스크린으로 말한다.
window객체의 매서드
window객체의 매서드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고
지정하는 등 웹 브아주어 창 자체와 관련된다.
window객체의 매서드들은 window.alert();이런식으로 써야 하지만 window는 기본
객체라서 생략할 수 있다.
[종류]
1. alert(): 알림창을 표시한다. 확인 버튼을 누르면 다음줄의 코드를 실행한다.
2. blur(): 현재 창에서 포커스를 제거할때 사용
3. close(): 현재 창을 닫는다.
4. confirm(): 확인,취소 창으로 확인을 누르면 true를 반환하고, 취소를 누르면 false를
반환
5. focus(): 현재 창에 포커스를 부여한다.
6. movBy(x,y): 현재 창을 지정한 크기만큼 이동시킨다. 보통 팝업에서 많이 쓴다.
7. movTo(x,y): 현재 창을 지정한 좌표로 이동시킨다.
8. open(경로, 창 이름, 창 옵션): 새로운 창을 연다.
-창이름: 팝업창의 이름을 나타낸다. 이름을 지정하지 않으면 팝업창이 계속 새로 나타난다.
-옵션: left, top속성을 이용해 위치를 지정하거나 width,height속성을
이용해 크기를 지정할 수 있다. 만약 위치를 지정하지 않으면 팝업창을 화면의
맨 왼쪽 위에 나타난다.
9. postMessage(): 메세지를 다른 창으로 전달한다.
10. print(): 현재 문서를 인쇄한다.
11. prompt(): 질의응답창,사용자로부터 입력받은 내용을 문자열로 반환시킨다.
12. resizeBy(x,y): 지정한 크기 만큼 현재 창의 크기를 조절한다.
13. resizeTo(x,y): 동적으로 브라우저 창의 크기를 조절한다. =유동적으로 움직일 수 있다.
14. sizeToContent(): 내용에 맞게 창의 크기를 맞춘다.
15.★scroll(): 문서에서 특정 위치로 스크롤한다.
16.★scrollBy(): 지정한 크기 만큼 스크롤 한다.
17.★scrollTo(): 지정한 위치까지 스크롤 한다.
18. stop(): 로딩을 중지한다.open이용해서 팝업창 만들기
이런식으로
경로, 이름지어주기, 넓이높이, 생성될 위치를 지정해줄 수 있다. 하지만
팝업창은 요즘 잘 쓰지 않는다.
안녕하세요 ! 발전을 위해 매일 도전하는 퍼블리셔 류영경입니다.