자바스크립트-브라우저 객체 모델

브라우저 객체 모델

브라우저 객체란?

->브라우저에 내장된 객체를 ‘브라우저 객체’라고 한다. window는 브라우저 객체의 최상위 객체이며 window객체에는 하위 객체가 포함되어 있다. 계층적 구조이며 BOM이라 한다.

window하위 객체들: document, screen, location, history, navigator

 

-window 객체

메서드 종류

1.open(“URL”,“새창 이름”,“새창옵션”) : URL 새창으로 나타냄

2.alert(data) : 경고 창 데이터를 보여줌 사용후 다음 코드 수행

3.prompt(“질문”,“답변”) : 질의 응답 창

4.confirm(“질문 내용”) : 질문 내용으로 확인이나 취소 창을 나타냄 확인은 true 취소는 false 반환

5.moveTo(x,y) : 지정한 새 창의 위치를 이동

6.resizeTo(width,height) : 지정한 새 창의 크기 변경

7.setInterval(function() {자바스크립코드},일정시간 간격 } : 지속적으로 일정한 시간 간격으로 함수를 호출해 코드 실행

8.setTimeout(function() {자바스크립코드}, 일정 시간 간격} : 단 한번 일정한 시간 간격으로 함수를 호출 코드실행

 

(1)open()메서드 이용해 팝업 창 나타내기

광고에 자주 사용되는 팝업 창을 만들 수 있다.

 

기본형 | open(“URL“, “새창이름” , “새창옵션”)

ex)

window.open(“http://ww.naver.com/”,“네버”,“width=350,height=400,left=50,top=10,scrollbars=no“);

->새창 네이버URL, 이름네이버,옵션 값 지정

새창 옵션 종류

width,height

left,top

scrollbars(새창의 스크롤바의 숨김/노출 설정(숨김 =no 노출=yes)

 

%tip

코드를 작성할 때 너무 길어 다음 줄로 넘어가려고 하나의 문자형 데이터를 엔터를 눌러 줄 바꿈을 하면 오류가 발생하므로 방지하려면 역 슬래시를 붙여 주면 된다.!

 (2)alert ( )

경고 창을 나타낼 때 사용한다. window객체를 따로 작성하지 않아도 사용할 수 있다.

 

기본형 | alert(“경고 메시지”)

ex)alert(“잘못 입력했습니다.”) //경고 창을 나타낸다.

 

(3)prompt( )

질의응답 창을 나타낼 때 사용 window객체를 따로 작성하지 않아도 사용.

 

기본형 | prompt(“질의내용”,“기본 답변”);

ex)prompt(“당신의 연령은?”,“0”);

 

(4)confirm ( )

확인/취소 창을 나타낼 때 사용 window객체를 따로 작성하지 않아도 사용.

 

기본형 | confirm(“질의 내용 ”) ;

ex)confirm(“정말 삭제하시겠습니까?”); //확인or취소창

->확인= true 취소= false 반환

 

(5)일정한 시간을 간격으로 코드 실행하기

일정한 시간을 간격으로 코드를 실행하는 메서드는 setInterval()과 setTimeout()이 있다.

 

setInterval() -> 일정한 시간 간격으로 코드 반복 실행

setTimeout() -> 일정 시간 후 코드를 실행하고 종료

 

-setInterval() / clearInterval()

setInterval()메서드는 코드를 일정 시간 간격으로 반복 실행 clearInterval() 메서드는 setInterval() 메서드를 취소한다.

setInterval()의 기본형

1. var 참조 변수 =setInterval(function( ) {코드} , 시간 간격(ms));

2. var 참조 변수 =setInterval(“코드”,시간 간격(ms) );

->이때 시간 간격은 1/1,000초 단위로 작성해야 한다 즉 3초 간격으로 설정하려면 3000(3,000* 1/1,000 ) 으로 작성해야 합니다.

ex) 3초 간격으로 변수 i의 값을 1씩 증가

1. var intv =setInterval(function() {i++;} ,3000) ;

2. var intv =setInterval(“i++”,3000);

 

clearInterval()의 기본형

기본형 | clearInterval(참조 변수);

 

-setTimeout() / clearTimeout()

setTimeout() 메서드는 일정 시간이 지나면 코드를 실행하고 종료합니다. 조금만 응용하여 재귀 호출을 하면 setInterval() 메서드처럼 사용할 수 있습니다.

clearTimeout()메서드는 setTimeout()메서드를 제거합니다.

 

기본형      | var 참조 변수=setTimeout(function() {코드}, 시간 간격(msc));

                | var 참조 변수=setTimeout(“코드”,시간 간격(msc));

 ex)5초 간격으로 변수 I값을 1씩 증가

1. var tim=setTimeout(function() {i++}, 5000);

2. var tim=setTimeout(“i++”,5000);

 

clearTime() 메서드의 기본형

 

기본형 | clearTimeout(참조변수);

ex)clearTimeout(tim);

 

-screen객체

사용자의 모니터 정보(속성)를 제공하는 객체이다. 모니터의 너비나 높이 OR 컬러 표현 bit를 반환한다.

 

기본형 | screen 속성;

 

속성 종류

(1)screen.width ->화면의 너빗값을 반환

(2)screen.height ->화면의 높이값을 반환

(3)screen.availWidth-> 작업 표시줄을 제외한 화면의 너빗값 반환

(4)screen.availHeight-> 작업 표시줄을 제외한 화면의 높잇값 반환

(5)screen.colorDepth-> 사용자 모니터가 표한 가능한 컬러 bit반환

 

-location 객체

사용자 브라우저와 관련된 속성과 메서드를 제공하는 객체이다

현재 URL에 대한 정보와 새로고침 메서드 제공

 

기본형 | location. 속성;

location. 메서드();

 

속성 종류

(1)location.href ->주소 영역의 참조 주소를 설정 OR URL 반환

ex)http://www.naver.com:80/Main/pub#view

(2)location.hash ->URL의 해시값 (#에 명시된 값) 반환

(3)location.hostname->URL의 호스트 이름을 설정하거나 반환

(4)location.host -> URL의 호스트 이름과 포트 번호 반환

(5)location.protocol -> URL의 프로토콜을 반환

(6)location.search -> URL의 쿼리(요청값) 반환

(7)location.reload() ->새로고침 합니다.

 

-history 객체

사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 속성과 메서드를 제공한다.

기본형 | history.속성

history.메서드();

history.메서드(n);

속성 종류

(1)history.back() ->이전 방문 사이트로 이동

(2)history.forward() ->다음 방문 사이트로 이동

(3)history.go(이동 숫자) -> 이동숫자에 –2를 입력하면 2단계 이전의 방문 사이트로 이동

(4)history.length ->방문 기록에 저장된 목록의 개수를 반환

 

-navigator 객체

현재 방문자가 사용하는 브라우저 정보와 운영체제 정보를 제공하는 객체

기본형 | navigator.속성;

 

속성 종류

(1)navigator.appCodeName->현재 브라우저의 코드명 반환

(2)navigator.appName -> 현재 브라우저의 이름 반환

(3)navigator.appVersion -> 현재 브라우저의 버전 정보 반환

(4)navigator.language ->현재 브라우저가 사용하고 있는 언어 반환

(5)navigator.product -> 현재 브라우저의 엔진 이름 반환

(6)navigator.platform ->운영체제 정보 제공

(7)navigator.onLine ->온라인 상태 여부에 대한 정보 제공 정상=true

(8)navigator.userAgent -> 브라우저와 운영체제의 종합 정보 제공