[js] js Learn_BOM
20210306
BOM(Browser Object Model)
Window 객체
#####브라우저 객체 모델(BOM)이란?
- 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있습니다.
이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)입니다.
브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아닙니다.
하지만 이 모델은 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해 줍니다.
자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있습니다.
Window 객체
window 객체는 웹 브라우저의 창(window)을 나타내는 객체
자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됩니다. window 객체의 메소드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수가 됩니다. 문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 됩니다.
브라우저 새 창 열기
- window 객체의 open() 메소드를 이용하면, 새로운 브라우저 창을 열 수 있습니다.
브라우저 창 크기 조절
- window 객체의 innerHeight와 innerWidth 프로퍼티를 이용하면, 브라우저의 창 크기를 설정할 수 있습니다.
브라우저 창 닫기
window 객체의 close() 메소드를 이용하면, 현재 브라우저나 특정 브라우저 창을 닫을 수 있습니다.
Document 객체
window 객체의 가장 중요한 프로퍼티 중 하나가 바로 document 객체입니다.
document 객체는 브라우저 창에 표시되는 내용에 해당하는 문서(document)를 나타내는 객체입니다.
Location 객체
location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있습니다.
이 객체는 Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 같이 연결되어 있습니다.
location 객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있습니다.
현재 문서의 URL 주소
location 객체의 href 프로퍼티는 현재 문서의 전체 URL 주소를 문자열로 반환합니다.
현재 문서의 호스트 이름
location 객체의 hostname 프로퍼티는 현재 문서의 인터넷 호스트 이름을 반환합니다.
현재 문서의 파일 경로명
location 객체의 pathname 프로퍼티는 현재 문서의 파일 경로명을 반환합니다.
현재 창에 문서 불러오기
location 객체의 assign() 메소드는 브라우저 창에 지정된 URL 주소에 존재하는 문서를 불러옵니다.
반면에 replace() 메소드는 새 문서를 불러오기 전에, 현재 문서를 브라우저의 히스토리에서 제거한다는 점이 assign() 메소드와 다릅니다.
location 객체의 reload() 메소드는 브라우저 창에 현재 문서를 다시 불러옵니다.
Navigator 객체
navigator 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체입니다.
대화 상자(dialog box)
사용자에게 보여줄 수 있는 간단한 대화 상자를 만들기 위해 window 객체는 다음과 같은 메소드를 제공합니다.
alert() window 객체의 alert() 메소드는 사용자에게 간단한 메시지를 보여주고, 그에 대한 사용자의 확인을 기다립니다.
confirm() window 객체의 confirm() 메소드는 사용자에게 간단한 메시지를 보여주고, 사용자가 확인이나 취소를 누르면 그 결과를 불리언 값으로 반환합니다.
사용자가 확인을 누르면 true를 반환하고, 취소를 누르면 false를 반환합니다.
- prompt()
window 객체의 prompt() 메소드는 사용자에게 간단한 메시지를 보여주고, 사용자가 입력한 문자열을 반환합니다.
사용자가 대화 상자에 입력한 텍스트를 문자열 타입으로 반환합니다.
하지만 이러한 대화 상자는 모두 사용자의 응답이 있을 때까지 브라우저의 실행을 강제로 중단시킵니다. 사용자 측면에서 보면 불편할 수도 있으므로, 대화 상자는 될 수 있으면 자주 사용하지 않는 것이 좋습니다.
타이머(timer)
window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 다음 메소드를 제공합니다.
- setTimeout() setTimeout() 메소드는 명시된 시간이 지난 뒤에 지정된 함수를 호출합니다. 이 메소드가 성공적으로 호출되면, 설정된 timeoutID를 반환합니다.
이 메소드는 밀리초(milliseconds) 단위로 지연 시간을 설정할 수 있습니다.
setInterval() setInterval() 메소드는 지정된 시간 간격마다 지정된 함수를 반복적으로 호출합니다. window.setInterval(호출할함수, 지연시간); 이 메소드가 성공적으로 호출되면, 설정된 timeoutID를 반환합니다. 이 메소드는 밀리초(milliseconds) 단위로 시간 간격을 설정할 수 있습니다.
clearTimeout() setTimeout() 메소드의 반환값을 clearTimeout() 메소드의 인수로 전달하면, 계획된 함수의 호출을 취소할 수 있습니다.
clearInterval() setInterval() 메소드의 반환값을 clearInterval() 메소드의 인수로 전달하면, 반복되는 함수의 호출을 취소할 수 있습니다.
42
