BOM(Browser Object Model) 브라우저 객체 모델

<브라우저 객체>    

 

• 브라우저에 내장된 객체
• document, location 등 하위 객체가 포함되어 있음
• 브라우저의 정보에 접근 또는 기능 제어

 

<window 객체>       

                                                        

• 브라우저 객체의 최상위 객체
• 생성없이 이름 그대로 사용가능

ex) window.parseInt -> parseInt 

 

 

<window 객체 주요 메서드>

 

• window.open(결과화면,창의 이름,창의 옵션(크기, 메뉴표시..))

window.open("http://www.naver.com","naver","width=350, height=400, \
       left=50, top=50, scrollbars=no")

- 옵션 : width, height, left, top, scorllbars (스크롤바의 숨김/노출 설정), location, status, toolbars(도구상자 숨김/노출)

- 2개의 웹페이지 필요 (오프너 페이지, 팝업창 페이지)       

 

• window.close()

    - 창닫기                                                                                        

 

 

• alert()

- 경고 창

- 확인 버튼 클릭해야 alert() 다음 코드를 실행

alert("메세지전달\n주의 하세요")

 

• prompt()

- 질의응답 창

- prompt("질의내용","기본값")

- 기본 타입은 문자형. parseInt를 통해 숫자로 형변환

 

let num1 = parseInt(prompt("숫자입력",""));
let num2 = parseInt(prompt("숫자입력","0"));

 

 

• confirm()

- 확인/취소 창

- 확인 클릭 시 true, 취소 클릭 시 false 반환

confirm("선택하세요");

 

• setInterval()

- 일정한 시간 간격으로 코드를 무한 반복

- clearInterval(참조변수); 로 setInterval() 메소드를 취소 할 수 있다

 

let count= 0;
let auto = setInterval(function() {
        count++;
        console.log(count);
       }, 1000);

 

 

• setTimeout()

- 일정한 시간 후에 코드를 한 번만 실행하고 종료

 

let count=0;
let auto2=setTimeout(function(){
        count++;
        console.log(count)
    },3000)

 

 

<location 객체>  

- 현재 URL에 대한 정보(속성) 제공

- location.속성;

- location.메서드();

 

 

<location 객체 주요메서드>

 

• location.href

- 주소 영역의 참조 주소 설정 또는 URL반환

location.href="http://www.kakao.co.kr"

 

• location.reload();

- 새로고침 

 

<history객체>  

- 브라우저의 페이지 이동 정보를 저장 관리

 

 

<history 객체 주요 메서드>

• history.back();

- 이전 페이지 이동

 

• history.forward()

- 다음페이지 이동