The Study of JavaScript 11 – alert、confirm、prompt


cach

11 alert、confirm、prompt


今回はメッセージをポップアップさせたり確認を求めたりする命令を見て行きましょう。
こういったUIに関わるところはJavaScriptでは重要なところです。

今回のポイントは下のとおりです。

  • alert:ポップアップ通知
  • confirm:OK or キャンセル
  • prompt: 入力要求
  • promptでキャンセルを押すとnullが返る

まずはユーザに情報を提示する「alert」から使ってみましょう。

  • index.html

  • 出力結果

    console

    このようにポップアップを表示することができます。「OK」を押すと閉じます。

つぎは、confirm ですが、こちらはalertと違い、「OK」 と 「キャンセル」を出してくれます。
実際に書いてみましょう。

  • index.html

  • 出力結果

    console01

    このように「OK」と「キャンセル」を表示してくれます。ソースコードを見ればわかるとおり、「OK」または「キャンセル」をクリックすることにより、「true」や「false」を返してくれます。

OKを押してコンソールを確認してみましょう。

console01

trueが返されています。キャンセルを押してみると「false」が表示されます。

console01

具体的にどういうときに使われるのかを見てみたいと思います。
たとえば何か削除処理をしたい場合に、ユーザに本当に削除してもいいのか確認したりするように使います。
下のような感じでifと組み合わせて「true」が返ってきたら削除処理をします。

最後はpromptです。こちらはユーザから情報を受け取ることができます。
実際に動かしてみましょう。

  • index.html

  • 出力結果

console01

これに太郎といれて「OK」を押すとname に太郎が入ります。

console01

ちなみに何も書かずに、そのままキャンセルを押すと、「null」が返ります。

console01

またpromptは第二引数を指定することができます。第二引数を指定するとデフォルト値としてあらかじめテキストボックスの中に入れることができます。

console01

以上、またみてね。


コメントを残す

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