과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch09. 브라우저객체모델 2014년 1학기 Professor Seung-Hoon Choi
9 브라우저객체모델 브라우저객체모델 (Browser Object Model, BOM) 웹브라우저와관련된객체들의집합 window, location, navigator, history, screen 객체 문서객체모델 (Document Object Model, DOM) document 객체와관련된객체들의집합
9 브라우저객체모델 브라우저객체모델 (Browser Object Model, BOM) window: 웹브라우저자체를나타내는객체 location: 웹브라우저의주소표시줄과관련된객체 navigator: 웹브라우저에대한정보를갖고있는객체 history: 방문했던웹페이지에대한이력과관련된객체 screen: 컴퓨터화면과관련된객체
9.1 window 객체 window 객체 웹브라우저 ( 윈도 ) 를대표하는객체로서브라우저기반자바스크립트의최상위객체임 alert( ), prompt( ) 등의함수도사실은 window 객체의메소드임 window.alert( ), window.prompt( ) var 키워드로선언한일반변수도 window 객체의속성이됨 var test = 52273; test변수는 window.test 와동일함
9.2 새로운 window 객체생성 open(url, name, features, replace): 새로운브라우저윈도를여는메소드 매개변수설명 URL: 열고자하는 HTML 페이지의 URL name: 새윈도의이름 ( 다른윈도우와통신할때사용 ) 또는다음값 _blank: 새윈도에페이지를로드해라 ( 디폴트값임 ) _parent: 부모프레임에로드해라 _self: 현재윈도에기존페이지를없애고페이지를로드해라 _top: 기존페이지를포함하는 frameset을대체하여페이지를로드해라.
9.2 새로운 window 객체생성 open(url, name, features, replace): 새로운브라우저윈도를여는메소드 매개변수설명 features: 윈도의형태를결정하는여러가지옵션을지정 ( 표 9-2) height: 새윈도의높이 ( 단위 : 픽셀 ) width: 새윈도의폭 ( 단위 : 픽셀 ) top: 윈도의 top 위치 ( 단위 : 픽셀 ) location: 주소입력란표시여부결정 menubar: 메뉴바의표시여부결정 resizable: 화면크기조절가능여부결정 status: 상태표시줄표시여부결정 toolbar: 툴바표시여부결정
9.2 새로운 window 객체생성 open(url, name, features, replace): 새로운브라우저윈도우를여는메소드 매개변수설명 replace: 히스토리에새윈도의 URL을어떻게추가할지결정 true: 히스토리리스트에서현재도큐먼트 URL을새윈도우의 URL로대체해라. false: 히스토리리스트에새윈도우 URL을추가해라. 코드 9-2, 코드 9-3 리턴값은, 새윈도의 window 객체 코드 9-4 child.document.write( ): 새윈도에웹문서내용출력
9.3 window 객체의기본메소드 표 9-3 moveby(x, y): 윈도를특정픽셀만큼이동함 moveto(x, y): 윈도를특정좌표로이동함 resizeby(x, y): 윈도크기를특정픽셀만큼조절함 resizeto(x, y): 윈도의크기를특정폭과높이로조정함 scrollby(x, y): 윈도의내용을특정픽셀만큼상하, 좌우로스크롤함 scrollto(x, y): 윈도의내용을특정위치로스크롤함 focus( ): 윈도로포커스를이동함 blur( ): 현재윈도로부터포커스를제거함 close( ): 현재윈도를닫음
9.3 window 객체의기본메소드 코드 9-6 setinterval( ) 함수를사용하여윈도를 1 초에한번씩왼쪽으로 10 픽셀, 오른쪽으로 10 픽셀씩이동시킴
9.4 screen 객체 screen 객체 웹브라우저가실행되는컴퓨터화면에관한정보를갖고있는객체 코드 9-7 표 9-4 screen 객체의속성 width: 컴퓨터화면의너비 height: 컴퓨터화면의높이 availwidth: task bar를제외한컴퓨터화면의너비 availheight: task bar를제외한컴퓨터화면의높이 colordepth: 이미지표현에사용되는컬러팔레트의비트수 ( 한픽셀이표현할수있는색상수를나타냄 ) (pixeldepth와동일함 ) pixeldepth: 픽셀한개당컬러비트수 ( 컬러해상도를나타냄 ) 코드 9-8
9.5 location 객체 location 객체 브라우저의주소표시줄과관련된객체 프로토콜의종류, 호스트이름, 문서위치등의정보를가짐 표 9-5 location 객체의속성 href: 문서의 URL 주소 location.href= duksung.ac.kr 문장을수행하면그웹페이지로이동함 코드 9-9 host: 호스트이름과포트번호 ( 예 : localhost:30736) hostname: 호스트이름 ( 예 : localhost) port: 포트번호 ( 예 : 30736) pathname: 디렉토리경로 ( 예 : /Projects/Location.htm) hash: URL에서앵커부분 (#~) ( 예 : #beta) search: 요청매개변수 ( 예 :?param=10) protocol: 프로토콜의종류 ( 예 : http:)
9.5 location 객체 location 객체 표 9-6 location 객체의메소드 assign(link): 새로운웹페이지를로드합니다. reload( ): 새로고침합니다. replace(link): 현재웹페이지를새로운웹페이지로대체합니다. assign(link) 와다른점 history 객체에서원래페이지의 URL을삭제하고새로운웹페이지의 URL을추가합니다. 따라서, 뒤로가기 버튼으로원래페이지로돌아갈수없다.
9.6 navigator 객체 navigator 객체 현재웹브라우저에대한정보를갖는객체 표 9-7 navigator 객체의속성 appcodename: 브라우저의코드명 appname: 브라우저의이름 appversion: 브라우저의버전 platform: 사용중인운영체제에대한정보 useragen: 브라우저의전체적인정보 코드 9-10
9.7 window 객체의 onload 이벤트속성 window.onload 이벤트속성 웹페이지의모든객체가로드되었을때실행할함수를여기에할당함 코드 9-11 코드 9-12 <head> 부분의 <script> 가먼저실행된후, <body> 부분이실행됨 코드 9-13 window.onload 함수할당부분은 <head> 부분에있지만, 웹페이지끝까지처리 ( 로드 ) 된후에실행됨