Javascriptでダイアログを表示する

こんばんは。きわさです。

今回はJavascriptでダイアログを表示する方法です。
ダイアログにもいくつか種類があります。
Alert、Confirm、Promptです。

それぞれ見ていきましょう。

Alert

まずは Alert です。これはOKボタンのみのダイアログです。
サンプルを用意しました。
下のボタンを押すとAlertのダイアログを表示します。

使い方を見てみます。

function testFunc1() {
    var msg = "Alertを表示しました";
    alert(msg);
    return;
}

Alertに表示したい文字列を alert() に渡してやるだけです。

Confirm

次は、Confirm です。これは、OKとキャンセルボタン付きのダイアログで、確認ダイアログなどに使用されます。
サンプルを用意しました。
押すとConfirmのダイアログを表示します。

使い方を見てみます。

function testFunc2() {
    var msg = "Confirmを表示しました";
    var result = confirm(msg);
    if(result) {
        alert("OKを選択しました");
    } else {
        alert("キャンセルを選択しました");
    }
    return;
}

Confirm も Alert と同様に表示したい文字列を confirm() に渡してやります。
また、OKとキャンセルのどちらを選択したかは、戻り値で確認できます。
OKを選んだ場合は true、キャンセルを選んだ場合は falseを返します。

Prompt

最後に Prompt です。これは、入力を受け付けるダイアログです。
サンプルを用意しました。
ボタンを押すとPromptのダイアログを表示します。

使い方を見てみます。

function testFunc3() {
    var msg = "Promptを表示しました";
    var default = "初期値";
    var result = prompt(msg, default);
    if(result) {
        alert("入力した内容は " + result + " です");
    } else {
        alert("キャンセルを選択しました");
    }
    return;
}

Prompt の場合は、表示したい文字列と始めに表示する初期値を prompt() に渡してやります。
また、入力した内容は戻り値に格納されます。
キャンセルを選んだ場合は null が返却されます。