JavaScript入門 | ブラウザオブジェクトモデル | ダイアログボックス

ダイアログボックス

ユーザーに表示できる簡単なダイアログボックスを作成するために、windowオブジェクトは次のようなメソッドを提供する。

alert()
confirm()
prompt()

alert()メソッド

windowオブジェクトのalert()メソッドは、ユーザーに簡単なメッセージを表示し、それに対するユーザーの確認を待つ。

構文

window.alert("簡単なメッセージ");

ユーザーはダイアログボックスのOKボタンを押すまで、他の作業を進められない。

function alertDialogBox() {
    alert("OKを押すまで他の作業はできません！");
}

windowオブジェクトのすべてのメソッドやプロパティを使用するときは、windowという接頭辞を省略できる。

confirm()メソッド

windowオブジェクトのconfirm()メソッドは、ユーザーに簡単なメッセージを表示し、ユーザーがOKまたはキャンセルを押すと、その結果を真偽値として返す。

構文

window.confirm("簡単なメッセージ");

ユーザーがOKを押すとtrueを返し、キャンセルを押すとfalseを返す。

function confirmDialogBox() {
    var str;
    if (confirm("OKまたはキャンセルを押してください！") == true) {
        str = "あなたはOKを押しました！";
    } 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 + " です。";
    }
}

上で見たダイアログボックス以外にも、showModalDialog()メソッドを利用すると、より複雑なダイアログボックスを作成できる。

しかし、このようなダイアログボックスはいずれも、ユーザーの応答があるまでブラウザの実行を強制的に停止させる。そのためユーザー側から見ると不便な場合があるので、ダイアログボックスはできるだけ頻繁に使用しない方がよい。