[Javascript] 자바스크립트 브라우저 객체 모델 - 대화상자

브라우저 객체 모델(BOM)이란?

• 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 제어할 수 있는데, 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다.
• 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니지만, 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다.

 

대화 상자(dialog box)

• 사용자에게 보여줄 수 있는 간단한 대화 상자를 만들기 위해 window 객체는 아래과 같은 메소드를 제공한다.

alert() 메소드

• window 객체의 alert() 메소드는 사용자에게 간단한 메시지를 보여주고 그에 대한 사용자의 확인을 기다리는데, 사용자는 대화 상자의 확인 버튼을 눌러야만 다른 작업을 진행할 수 있다.
• window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window라는 접두사를 생략할 수 있다.

window.alert("간단한 메시지");

function alertDialogBox() {
    alert("확인을 누를 때까지 다른 작업을 할 수 없어요!");
}

confirm() 메소드

• window 객체의 confirm() 메소드는 사용자에게 간단한 메시지를 보여주고 사용자가 확인이나 취소를 누르면 그 결과를 불리언 값으로 반환한다.
• 사용자가 확인을 누르면 true를 반환하고, 취소를 누르면 false를 반환한다.

window.confirm("간단한 메시지");

function confirmDialogBox() {
    var str;
    
    if (confirm("확인이나 취소를 눌러주세요!") == true) {
        str = "당신은 확인을 눌렀습니다!";
    } else {
        str = "당신은 취소을 눌렀습니다!";
    }
    document.getElementById("text").innerHTML = str;
}

prompt() 메소드

• window 객체의 prompt() 메소드는 사용자에게 간단한 메시지를 보여주고 사용자가 입력한 문자열을 반환하며, 사용자가 대화 상자에 입력한 텍스트를 문자열 타입으로 반환한다.
• 대화 상자는 모두 사용자의 응답이 있을 때까지 브라우저의 실행을 강제로 중단시키므로 사용자 측면에서 불편할 수도 있으므로 자주 사용하지 않는 것이 좋다.

window.prompt("간단한 메시지" + "입력란의 기본 메시지");

function promptDialogBox() {
    var inputStr = prompt("당신의 이름을 입력해 주세요 : ", "홍길동");
    
    if (inputStr != null) {
        document.getElementById("text").innerHTML = "당신의 이름은 " + inputStr;
    }
}

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/