BOM(browser Object Model)
자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다.
이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM)이며, 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공하며 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다.
Window 객체
window 객체는 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원하고 있다. (window 운영체제 X, window는 브라우저의 창을 뜻한다.)
자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 되며, window 객체의 메소드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수이다.
문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 된다.
window 객체는 자바스크립트의 최상위 객체이며, 모든 객체가 소속된 객체이다.
DOM 과 BOM 모두 window 객체의 프로퍼티이다.
window 객체의 메서드
window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window라는 접두사를 생략할 수 있다.
자바스크립트의 모든 전역 객체, 전역 함수, 전역 변수를 사용할 때는 window 접두사를 생략할 수 있습니다.
브라우저 새 창 열기
window 객체의 open() 메소드를 이용하면, 새로운 브라우저 창을 열 수 있다.
또한, 새로운 브라우저 창의 세부적인 옵션들도 설정할 수 있다.
window.open() == open()브라우저 창 닫기
window 객체의 close() 메소드를 이용하면, 현재 브라우저나 특정 브라우저 창을 닫을 수 있다.
window.close() == close()Location 객체
location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있다.
location 객체는 Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 같이 연결되어 있으며 프로퍼티와 메소드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있다.
현재 문서의 URL 주소
location 객체의 href 프로퍼티는 현재 문서의 전체 URL 주소를 문자열로 반환한다.
ex)https://www.naver.com/
console.log(location.href); //"https://www.naver.com/" 출력History 객체
history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체입니다.
자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한하고 있습니다.
히스토리 목록 접근하기
history 객체에는 브라우저의 뒤로 가기와 앞으로 가기 버튼과 같은 동작을 하는 back()과 forward() 메소드를 가지고 있다.
history.back()
window.history.back() == history.back()
// 브라우저의 이전 페이지로 가기 버튼과 같은 동작을 한다.
function goBack() {
history.back();
}history.forward()
window.history.forward() == history.forward()
// 브라우저의 이전 페이지로 가기 버튼과 같은 동작을 한다.
function goForward(){
history.forward();
}대화 상자(dialog box)
사용자에게 보여줄 수 있는 간단한 대화 상자를 만들기 위해 window 객체는 다음과 같은 메소드를 제공한다.
-
alert()
-
confirm()
-
prompt()
alert()
window 객체의 alert() 메소드는 사용자에게 간단한 메시지를 보여주고, 그에 대한 사용자의 확인을 기다린다.
function al() {
window.alert('alert는 사용자에게 메시지를 보여주는 역할만 한다.');
}confirm()
window 객체의 confirm() 메소드는 사용자에게 간단한 메시지를 보여주고, 사용자가 확인이나 취소를 누르면 그 결과를 boolean 값으로 반환한다.
function con(){
// 확인을 누를경우 true를 반환하고, 취소를 누를 경우 false를 반환한다.
if(window.confirm('확인 또는 취소를 선택할 수 있다.')){
alert('확인을 누르셨습니다.'); // true일 경우 실행
} else{
alert('취소를 누르셨습니다.'); // false일 경우 실행
}
}prompt()
window 객체의 prompt() 메소드는 사용자에게 간단한 메시지를 보여주고, 사용자가 입력한 문자열을 반환한다.
function pro(){
const result = window.prompt('성함을 입력해주세요.');
console.log(result);
//확인을 누를경우 입력한 문자열이 출력되고, 취소를 누를경우 null이 반환된다.
}타이머
타이머(timer)
window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 다음 메소드를 제공합니다.
- setTimeout()
- setInterval()
또한, 이렇게 설정된 함수의 호출을 취소할 수 있도록 다음 메소드를 제공합니다.
- clearTimeout()
- clearInterval()
setTimeout(), setInterval()에서 인수로 함수를 넘길경우 () 괄호 없이 함수명만 인수로 전달한다.
자바스크립트에서 함수 이름을 괄호 없이 전달함으로써 함수 참조를 다른 함수로 즉시 호출하지 않고 인수로 전달할 수 있다.
함수를 인수로 전달할 때는 함수를 즉시 호출하는 것이 아니라 함수 자체에 대한 참조를 전달하기 때문에 괄호를 포함할 필요가 없다.
괄호를 포함하면 함수가 즉시 실행되고 반환 값이 setTimeout() 인수로 전달되는데, 이 경우 원하는 값이 반환되지 않는다.
setTimeout()
setTimeout() 메소드는 명시된 시간이 지난 뒤에 지정된 함수를 호출한다.
메소드가 성공적으로 호출되면, 설정된 timeoutID를 반환한다.
function time(){
setTimeout(btn,5000); // milliseconds
}
function btn(){
document.querySelector('#btn4').innerHTML = '5초뒤 버튼 텍스트 변경';
}setInterval()
setInterval() 메소드는 지정된 시간 간격마다 지정된 함수를 반복적으로 호출한다.
메소드가 성공적으로 호출되면, 설정된 timeoutID를 반환한다.
function time(){
setInterval(plusText,2000); // milliseconds
}
function plusText(){
document.querySelector('#text').innerHTML += '2초마다 추가됩니다. <br>';
}clearTimeout() 메소드와 clearInterval() 메소드를 사용하기 위해서는 setTimeout()과 setInterval()의 반환값을 가지고 있어야한다. clearTimeout() 메소드와 clearInterval() 메소드의 파라미터로 넣어주어야 함수들을 초기화 시킬 수 있다.
clearTimeout()
setTimeout() 메소드의 반환값을 clearTimeout() 메소드의 인수로 전달하면, 계획된 함수의 호출을 취소할 수 있다.
let timeoutMethod;
function time(){
timeoutMethod = setTimeout(plusText,5000)
}
function plusText(){
document.querySelector('#text').innerHTML = '5초뒤 추가됩니다. <br>';
}
function cancel(){
document.querySelector('#text').innerHTML += 'setTimeout 제거';
clearTimeout(timeoutMethod);
}setTimeout() 메소드에 의해 함수가 호출되기 전에 실행되어야 호출을 취소할 수 있다.
clearInterval()
setInterval() 메소드의 반환값을 clearInterval() 메소드의 인수로 전달하면, 반복되는 함수의 호출을 취소할 수 있다.
let intervalMethod;
function time(){
intervalMethod = setInterval(plusText,1000);
}
function plusText(){
document.querySelector('#text').innerHTML += '1초마다 추가됩니다. <br>';
}
function cancel(){
document.querySelector('#text').innerHTML += 'interval 초기화';
clearInterval(intervalMethod);
}