column

ITコラム

Exclamation Warning Caution Popup Concept

プログラミングノウハウ

2017.11.27

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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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

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

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ