Rainbow
브라우저 객체 모델(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 객체의 속성을 사용 한다.
'web > javascript' 카테고리의 다른 글
브라우저 로딩 과정 (0) | 2021.02.07 |
---|---|
for문 if문 (0) | 2021.01.16 |
폼과 자바스크립트 (0) | 2021.01.01 |
문서 객체 모델 (BOM) (0) | 2020.12.31 |
Arry 객체 (0) | 2020.12.30 |