브라우저 객체 모델(BOM)

브라우저 객체 모델 이란?

- 웹 브라우저 전체를 객체로 관리 하는 것입니다.

- window객체 창이 만들어지고

- 하위 객체는 웹 문서와 주소 표시줄 처럼 각각 또 다른 하위 객체를 가지고 있습니다.

 

브라우저 내장 객체

 

- window : 브라우저 창안에 존재 하는 최상위 객체

- document : 웹 문서의 정보를 가지고 있습니다.

- History : 사용자가 창에서 방문 기록을 저장 하고 있는 객체

- Location : 페이지에 대한 URL정보를 가지고 있는 객체

- Navigator : 웹 브라우저 정보를 가지고 있는 객체

- Screen : 화면 정보를 다루는 객체

 

window객체의 속성

 

inner Width/inner height :  웹 사이트 내용 부분의 너비와 높이를 나타낸다.

outer width/outer height : 웹 브라우저 메뉴나 도구 모음 까지 포함된 너비와 높이를 나탄내다.

 

window 객체의 함수

 

-alert( ) : 알림창을 표시 한다.

-blur( ) :  창의 포커를 제거 한다.

-close( ) : 현재 열려 있는 창을 닫습니다.

 

새창을 여는 open( )함수

 

웹 브라우저 창에서 새 창이 열리면서 연결된 웹 문서나 사이트가 표시 된다

-window.open( "https://www.daum.net")

 

두 번째 매개변수에 아무 값도 없이 빈 따옴표만 넣었을 경우 사이트에 표시된다.

-window.open( "https://www.daum.net", "" )

 

매개 변수 값을 "_self"로 지정하면 현재 창에 새 창이 표시 된다.

-window.open( "https://www.daum.net", "_self" )

 

매개 변수 알림창으로 표시 할때 너비나 높이 위치 등을 지정하는 옵션 입니다.

-window.open( "https://www.daum.net", "", "left, top, width, height" )

 

크기를 조절하는 resize By( ), resizeTo( )

 

resize By( )

- 기존 창에 너비와 높이에 입력한 값을 각각 더해 브라우저 창에 크기를 새로 지정한다.

- 음수를 사용하면 가로와 세로 길이를 줄일 수 있습니다.

  var newp =widnow.open("","", "width=300 ",height=300 ")

resize To( )

-음수를 사용할 수 없다.

newin.resizeTo(200, 200)

 

위치를 조절하는 moveBy( ), moveTo( )함수

 

moveBy( )

- 현재 위치를 기준으로 가로 x픽셀 만큼 이동한다.

  현재 위치를 기준으로 가로 y픽셀 만큼 이동한다.

 

moveTo( )

- 화면에 왼쪽 위 모서리를 기준으로 가로x 세로y 픽셀 만큼 이동한다.

 

가로,세로 500픽셀 만큼 이동한다.

 newin.moveBy(500,  500)

 

History객체 속성과 함수

 

length : history목록에 있는 항목 개수 (방문한 사이트 개수를 반환)

 

함수

back( ) 이전 페이지를 화면에 불러온다.

forward( ) history 목록에서 다음 페이지를 불러온다.

go( ) 현재 페이지를 기준으로 상대 위치에 있는 페이지를 현재 화면에 불러온다.

 

※알고 넘어가기※

 

userAgent: 사용자가 접속한 브라우저 정보를 확인할 때는 Navigator객체의 속성 값을 살펴 본다.

렌더링 엔진 : 웹 문서의 태그와 스타일을 해석해서 브라우저 화면에 표시 하는 프로그램

 

Navigator.userAgent : 사이트를 제작할때 악스플로러 구별 한다면 Navigator 객체의 속성을 사용 한다.