10. BOM객체 / window객체 / confirm / setInterval / open / close / alert

<퀴즈>

1. ___ 는 웹 페이지를 객체로 인식하는 방법이다.

2. DOM객체는 ___ 와 ___ 로 구성된다.

3. ___ 프로퍼티로 HTML 엘리먼트를 동적으로 조작할 수 있다.

 

<정답>

1. DOM객체

2. Method property

3. innerHTML

 

BOM객체란?

Browser Object Model 객체

웹 브라우저 자체를 객체로 인식

 

 

index.html

BOM객체에선 script태그가 body태그 내부에 있어야 한다.

 

하단은 각 메서드의 기능을 실행하기 위해 main.js에 입력한 코드이다.

open, close 메서드를 통해 브라우저를 실행(새탭)시키거나 창을 닫을 수 있다.

현재는 window.document.getElementById()라고 입력했으나 window객체를 생략하여 사용해도 된다.

조건문 같은 응답을 팝업으로 받는 메서드 confirm

window.confirm 때문에 확인 / 취소 창이 뜬다

확인을 누르면 true가 취소를 누르면 false가 뜬다

고로, 삭제하겠습니까? 와같은 응답을 받아야 하는 경우 confirm을 사용

이처럼 if else와 같은 조건문 기능을 confirm이라는 내장객체의 메서드를 통해 해당 기능을 사용할 수 있다.

 

브라우저 크기가져오는 메서드

윈도우 객체의 속성 중에서 브라우저의 크기를 가져오는 것이있다.

바로 innerWidth innerHeight 이다

test.innerHTML = "width : " + window.innerWidth + " height : " + window.innerHeight;

타이머 사용위한 메서드 setInterval()

JS로 주기적인 작업을 위해 setInterval, setTimeout 메소드 사용

setInterval 함수 : 

일정한 시간 간격으로 작업을 수행.

clearInterval() 함수를 사용하여 중지. 

주의할 점 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생

setTimeout 함수 : 

일정한 시간 후에 작업을 한 번 실행. 

보통 재귀적 호출을 사용하여 작업 반복. 

기본적으로 setInterval 과는 달리 지정된 시간을 기다린 후 작업을 수행.

다시 일정한 시간을 기다린후 작업 수행. 

지정된 시간 사이 작업 시간 추가 되는 것. 

clearTimeout() 로 작업 중지.

 

단, clearInterval(), clearTimeout()메서드는 실행중인 작업을 중지시키진 않음. 다음 작업 스케줄을 중지시킴.

 

<퀴즈>

1. ___ 은 웹 브라우저를 객체로 인식하는 방법이다.

2. ___ 객체는 최상위 객체이며 코드 작성시 생략 가능하다.

3. ___ 메서드로 브라우저를 실행시킬 수 있다.

 

setInterval, setTimeout 메소드 내용 설명 출처 :  http://https://offbyone.tistory.com/241 

 

도움되셨다면 ♡ 눌러주세요 :)