JavaScript【 ダイアログ 】 ~ alert、confirm、prompt

Exclamation Warning Caution Popup Concept

ダイアログボックスは、メッセージを表示したり確認を促したりするために 一時的に開かれる小さな画面です。
JavaScriptで表示できる ダイアログボックスには、メッセージを表示させるアラートダイアログ、確認を促す確認ダイアログ、文字入力が可能な入力ダイアログがあります。
今回は、このようなダイアログの作り方について紹介します。

目次

 
1.alert メソッドでアラートダイアログ
2.confirm メソッドで確認ダイアログ
3.prompt メソッドで入力ダイアログ

1.alert メソッドでアラートダイアログ

 
使用頻度が最も高い ダイアログボックスは、メッセージを表示させるダイアログで、アラートダイアログやアラートといいます。

アラートを表示する際には、alert メソッドを使用します。

alert メソッドは、次のように記述して使用します。

alert( 表示内容 );

 
alert メソッドを使用して、アラートを表示します。
表示ボタンをクリックしてみて下さい。
(アラート表示後、OKボタンをクリックするとダイアログを閉じることができます。)

  

 
「 アラートメッセージです! 」という内容のアラート表示が確認できたと思います。

ソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {
    alert("アラートメッセージです!");
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
    <input type="button" value="表示" onClick="disp()">  
</div>

 
入力内容を表示することもできます。
文字や数字を入力して、表示ボタンをクリックしてみて下さい。
(アラート表示後、OKボタンをクリックするとダイアログを閉じることができます。)

 
  

 
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {
    var str = document.getElementById("dat").value;
    alert("入力内容は 「 " + str + " 」 です!");
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
    <div style="display:inline-flex; align-items: center;">
        <input type="text" id="dat"> 
        <nobr><input type="button" value="表示" onClick="disp()"></nobr>  
    </div><br>
</div>

 
 
入力内容を 変数str に代入して、アラートの表示内容に反映させています。

alert メソッドの引数には、文字列や数値の他、変数を指定することや、複数の要素を連結して指定することもできます。

▲目次へ戻る

 

2.confirm メソッドで確認ダイアログ

 
アラートは、メッセージを表示して OKボタンで表示画面を閉じる という内容のダイアログでしたが、表示画面を閉じる際に、OKボタンに加えてキャンセルボタンも表示されるダイアログがあります。
これが 確認ダイアログで、confirm メソッドを使用して表示します。

confirm メソッドは、次のように記述して使用します。

if( confirm( 表示内容 )){

  // OKボタンがクリックされた場合の処理

} else {

  // キャンセルボタンがクリックされた場合の処理

}

 
confirm メソッドを使用して、確認ダイアログを表示します。
表示ボタンをクリックしてみて下さい。
(確認ダイアログ表示後、OKボタン または キャンセルボタンをクリックするとダイアログを閉じることができます。)

  

 
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {
    if(confirm("こちらの内容でよろしいでしょうか?")){

        // OKボタンがクリックされた場合の処理

    } else {

        // キャンセルボタンがクリックされた場合の処理

    }
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
    <input type="button" value="表示" onClick="disp()">  
</div>

 
実際には、「 OKボタンがクリックされた場合の処理 」及び「 キャンセルボタンがクリックされた場合の処理 」を記述して完成します。

▲目次へ戻る

 

3.prompt メソッドで入力ダイアログ

 
ダイアログの中には、文字列や値の入力を求められるものもあります。
これを 入力ダイアログ といい、prompt メソッドを使用して表示します。

prompt メソッドは、次のように記述して使用します。

prompt( 表示内容 );

 
prompt メソッドを使用して、入力ダイアログを表示します。
表示ボタンをクリックした後、入力ダイアログで自由に入力してみて下さい。
(入力ダイアログ表示後、OKボタン または キャンセルボタンをクリックするとダイアログを閉じることができます。)

 

入力内容:
 

 
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {
    var str = prompt("ご自由に入力して下さい!");
    document.getElementById("dat").value = str;
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
    <input type="button" value="表示" onClick="disp()"> 
    <div style="display:inline-flex; align-items: center;">
        <nobr>入力内容:</nobr>
        <input type="text" id="dat" placeholder="入力内容をここに表示します"> 
    </div>
</div>

 
 
prompt メソッドは、入力ダイアログの入力値を返すので、「 var str = prompt(“ご自由に入力して下さい!”); 」と記述すると、入力ダイアログで入力された内容が、変数str に代入されます。

prompt メソッドを使用すると、自動的に入力欄が作成されて、入力値も返るので、大変便利です。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です