JavaScript:ダイアログボックスの表示


JavaScriptで利用できるダイアログボックスとして、prompt、confirm、alertの3種類がある。

promptは、ユーザに文字列を入力してもらうための「入力ボックス」を表示するためのものであり、次のように記述する。

    x=prompt("名前を入力してください。","");

この命令を実施したとき、次のようなダイアログボックスが表示される。

prompt()コマンドで、()内の最初の文字列はボックスに記される説明となり、2つ目の文字列は入力欄に当初表示する文字列となる。この場合のように2つ目の文字列を "" とすれば、入力欄に何も表示されない。入力欄に文字列を入力し、OKボタンをクリックすれば、変数xに入力した文字列が代入される。

confirmは、ユーザに確認を求めるための「確認ボックス」を表示するためのものであり、次のように記述する。

    confirm("入力された名前は "+x+" です。\nよろしいですか?");

この例での \n は、ボックスに記される説明を改行するためのものである。この命令を実施したとき、次のようなダイアログボックスが表示される。

confirm()は、上のダイアログボックスでOKボタンがクリックされたときtrueとなり、キャンセルボタンがクリックされたときはfalseとなる。したがって、confirm()の結果は、if文などで使用することになる。

alertは、ユーザに注意を促すための「メッセージボックス」を表示するためのものであり、次のように記述する。

    alert("あなたは "+x+" です。");  または  alert("再入力してください。");

これらの命令を実施したとき、次のようなダイアログボックスが表示される。

    

alertは、メッセージを記したボックスを表示するのみで、OKがクリックされるまで待ち、りっくされたとき次の命令へと進む。

プログラムの例は、次のようになる。


  <html>
  <head><title>dialog</title></head>
  <body>
  <script language="JavaScript">
    x=prompt("名前を入力してください。","");
    f=confirm("入力された名前は "+x+" です。\nよろしいですか?");
    if(f){alert("あなたは "+x+" です。");}
    else{alert("再入力してください。");}
  </script>
  </body>
  </html>

ここで、変数xには入力ボックスに入力された文字列が代入され、変数fには、確認ボックスのOKボタンがクリックされたかキャンセルボタンがクリックされたかに応じてtrueないしfalseが代入される。