[Javascript] 브라우저 객체 모델 (BOM, Browser Object Model) 함수들

[Javascript] 브라우저 객체 모델
(BOM, Browser Object Model) 함수들

 이번 글에서는 자바스크립트의 브라우저 객체 모델에 대해서 알아보도록 하겠습니다.

 브라우저 객체는 말 그대로 브라우저에 내장되어있는 객체라는 말입니다. 위 그림처럼 계층구조가 나타나게 되어있으며, Window가 최상위 객체로 존재하고 밑에는 여러가지 객체들이 있습니다. 그 중에는 우리가 익숙한 document객체도 존재합니다.

이 코드는 윈도우 객체의 매서드 중에서 open이라는 매서드를 사용하는 코드예시입니다. Window.open매서드는 팝업창을 띄워주는 매서드입니다. 첫 번째 인자로는  html경로, 두 번째는 해당 팝업창의 이름, 그 다음인자들은 크기가 되겠습니다. 요즘에는 팝업창을 기본적으로 차단시키기 때문에 이렇게 사용한다만 알면 되겠습니다.

 그 다음은 window.alert() 매서드를 사용해보는 코드입니다. 바로 경고 알림을 띄우는 매서드입니다.

실행결과 위와같이 경고창이 뜨는 것을 볼 수 있었습니다. 

 SetInterval, clearInterval 사용하기

 위 함수를 사용할 경우에 일정한 시간간격으로 코드를 반복적으로 실행할 수 있습니다. 위 코드에서 오토1번은 수를 1씩 증가시키며 2는 수를 1씩 감소시키는데 3초마다 한번씩 감소시키게됩니다. (1000이 1초)

 결과는 위와 같이 인터넷 개발자옵션인 콘솔에서 확인이 가능합니다. 3초마다 1씩 증감되는 것을 직접확인할 수 있었습니다. 비슷한 매서드로 setTimeout()과 clearTimeout()이 있습니다. 이 타임아웃함수는 일정시간이 지나면 단 한 번만 실행하고 종료합니다.

 글을 읽어주셔서 아주 감사합니다.

자바스크립트 변수와 연산자 기본

prompt, confirm 그리고 객체 기본