1일1끄적

자바스크립트 입문, 객체3- 브라우저 객체 모델 본문

개발/javascript

자바스크립트 입문, 객체3- 브라우저 객체 모델

inkor 2021. 12. 2. 20:56

※브라우저 객체란?

브라우저에 내장된 객체를 '브라우저 객체'라고 한다. 

window는 브라우저 객체의 최상위 객체이며, window 객체에는 하위 객체가 포함되어 있다.

즉, 계층적 구조로 이루어져 있으며, 이를 브라우저 객체 모델(BOM, Browser Object Model)이라고 한다.

 

○ window 객체

window는 브라우저 객체의 최상위 객체이머, 다음과 같은 메서드를 사용할 수 있다.

https://developer.mozilla.org/ko/docs/Web/API/Window

 

Window - Web API | MDN

Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다.

developer.mozilla.org

 

○ open( ) 

open( )메서드를 이용하면 지정한 URL 페이지를 새 브라우저 창에 나타낼 수 있다. 

이 기능을 사용하면 광고에 자주 사용되는 팝업 창을 만들 수 있지만, 최근에는

팝업 창을 사용자가 차단할 수 있어 팝업 창을 활용한 광고는 효과가 많이 떨어졌다.

 

Open("URL","새창이름","새창옵션")

<script>
    window.open("http://www.naver.com/", "naver", "width=250, height=400, left=50, top=10, scrollbars=no");
    // URL, 새창이름, 새창옵션(width, height, left, top, scrollbars)
</script>

 

○ alert( )

경고 창을 나타낼 때 사용.

window.alert( ) 메서드는 다음 기본형 처럼 window 객체를 따로 작성하지 않아도 사용할 수 있다.

 

alert("경고메세지")

<script>
    alert("이것은 경고창입니다");
</script>

○ prompt( )

질의응답 창을 나타낼 떄 사용.

window.prompt( ) 메서드 역시 다음 기본형처럼 앞에 window 객체를 따로 작성하지 않아도 사용할 수 있다.

prompt("질의 내용", "기본 답변)

<script>
    prompt("오늘은 무슨 요일?", "월요일");
</script>

○ confirm( )

확인/최소 창을 나타낼 때 사용. 

window.confirm( ) 메서드 역시 다음 기본형처럼 앞에 window 객체를 따로 작성하지 않아도 사용할 수 있다.

 

confirm("질의 내용"):

<script>
    confirm("정말로 삭제하시겠습니까?");
</script>

○ 일정한 시간 간격으로 코드 실행

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

setInterval( )은 일정한 시간 간격으로 코드를 반복 실행한다.

setTimeout( )은 일정한 시간 후에 코드를 실행하고 종료된다

 

setinterval( ) / clearinterval( )

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

<script>
    var intv = setinterval(function(){i++}, 3000);
    var intv = setInterval("i++", 3000);
</script>

clearInterval(참조 변수);


<script>
    var addNum = 0;
    var subNum = 1000;

    var auto_1 = setInterval(function(){
        addNum++;
        console.log("addNum:" + addNum);
    },3000);

    var auto_2 = setInterval(function(){
        subNum--;
        console.log("subNum:" + subNum);
    },3000);
</script>
<body>
    <button onclick="clearInterval(auto_1)">증가 정지</button>
    <button onclick="clearInterval(auto_2)">감소 정지</button>
</body>

 

setTimeout( )/ clearTimeout

var 참조 변수 = setTImeout(function(){자바스크립트 코드}, 시간 간격(msc));
var 참조 변수 = setTimeout("자바스크립트 코드", 시간간격(msc));

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

clearTimeout(참조 변수);

clearTimeout(tim);

<script>
    var addNum = 0;
    var auto = setTimeout(function(){
        addNum++;
        console.log(addNum);
    },5000); // 5초후에 코드를 한번 실행하고 메서드를 종료
</script>

 

○ screen 객체

사용자의 모니터 정보(속성)을 제공하는 객체.

예를 들어 모니터의 너비나 높이 또는 컬러 표현 bit를 반환

screen.속성;

screen.width; // 모니터의 너빗값을 반환

<script>
    screen.width; // 화면의 너빗값을 반환
    screen.height; // 화면의 높잇값을 반환
    screen.availWidth // 작업 표시줄을 제외한 화면의 너빗값을 반환
    screen.availHeight // 작업 표시줄을 제외한 화면의 높잇값을 반환
    screen.colorDepth // 사용자 모니터가 표현 가능한 컬러 bit를 반환
</script>

 

○ location 객체

location 객체는 사용자 브라우저와 관련된 속성과 메서드를 제공하는 객체.현재 URL에 대한 정보(속성)와 새로 고침(reload) 메서드를 제공한다. 

location.속성
location.메서드();

사용자 브라우저의 URL 경로 값을 가져오기
locaiton.href;

사용자 브라우저의 URL 경로를 지정한 URL 주소로 변경
location.href = "http://www.naver.com";

사용자 브라우저를 새로 고침
location.reload();

○ history 객체

histroy 객체는 사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문 사이트로

다시 돌아갈 수 있는 속성과 메서도를 제공한다.

 

history.속성;
history.메서드 ( );
history.메서드(n) ;

사용자가 방문한 사이트의 기록을 남긴 총 수량
history.length

사용자가 방문한 사이트 중 바로 이전에 방문한 사이트로 이동
history.back();

사용자가 방문한 사이트 중 두 단계 이전에 방문한 사이트로 이동
history.back(2);

○ navigator 객체

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

navigator.속성;

https://developer.mozilla.org/ko/docs/Web/API/Navigator

 

Navigator - Web API | MDN

Navigator 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타냅내며, 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용합니다.

developer.mozilla.org

-출처: 자바스크립트+제이쿼리입문 책 중

http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791163030034&orderClick=LAG&Kc=

'개발 > javascript' 카테고리의 다른 글

자바스크립트 입문, 함수-2 return문의 역할  (0) 2021.12.07
자바스크립트 입문, 함수-1  (0) 2021.12.04
자바스크립트 입문, 객체2- 내장객체(2)  (0) 2021.11.29
자바스크립트 입문, 객체2- 내장객체(1)  (0) 2021.11.22
자바스크립트 입문, 객체-1  (0) 2021.11.20
'개발/javascript' Related Articles more
Comments