突然注意書き画面が飛び出してくるようなWebページを見たことはありませんか？
このようなユーザーの注意を引くための表示機能をダイアログボックス（ポップアップウィンドウ）と言います。
JavaScriptには、ダイアログを表示させるための既存の機能が用意されています。
実際は、モダンなWebページやWebアプリでは、動きやデザインのカスタマイズができない既存の機能を使用することはあまりありません。
しかし、凡庸性の高いプログラムを書いていくためには、JavaScriptの基本の知識としてダイアログ機能について知っておくことは重要です。
この記事では、ダイアログボックスを表示させるための「alert」「prompt」「confirm」について紹介します。
ダイアログ
ダイアログとは、ユーザーが見ている既存のページから追加のコンテンツを見せるための方法の一つです。
古くから使われている手法でもありますが、TwitterやFacebookでも採用しているように、多くのWebページに幅広く使われています。
ここからは、JavaScriptではどのようなダイアログ機能があるのか見ていきます。今回はChromeのデベロッパーツールで検証してきます。
デベロッパーツールの使い方を知りたい方は、以下の記事で紹介しているので参考にしてください。
JavaScriptは、数あるプログラミング言語の中の一つです。 一般的に、動的なWebページやアプリを開発する際に使われてるというイメージがありますが、時代と共に進化していき、今ではJavaScript一つとってもできることは多様です。 今回は第一回目として、そもそもJavaScriptと...
alert
alertの後ろに文字列や数値などの表示させたい値を記述します。
alert(表示させたい値);サンプルコード
alert('alertポップアップウィンドウを表示しています');
記述した文字列がポップアップで表示されます。
alertは、ユーザーに確認や同意を求めるためにOKボタンが用意されているのが特徴です。
prompt
promptの後ろに表示させたい値を記述します。第2引数に初期値を設定することができます。
prompt(表示させたい値, 初期値);サンプルコード
prompt('promptポップアップウィンドウを表示しています', '入力してください');
alertとは少し変わり、テキストを記入できる入力欄が表示されます。ここでは第2引数として用意している「入力してください」という文字列が入力欄の初期値として表示されます。
初期値の設定は任意です。
入力欄にテキストを打ち、OKボタンを押すとどうなるか見てみましょう。
ては、「入力しました」と打ち込んでみます。
すると、「入力しました」という文字列が返ってくるのが分かります。
promptの特徴は、ユーザーにテキストを入力させ、入力値を返す機能があることです。返ってきた値を利用して条件分岐などの処理に活用することができます。
confirm
上記２つと同様、confirmの後ろに表示させたい値を記述します。
confirm(表示させたい値);サンプルコード
confirm('confirmポップアップウィンドウを表示しています');
confirmはユーザーからの確認を表示させるために使われますが、alertとの違いはOKボタンのほかにキャンセルボタンが用意されていることです。
それぞれのボタンを押すと以下のような出力結果になります。
OKボタンを押すとtrueが返り、キャンセルボタンを押すとfalseが返ります。
ユーザーがクリックしたものを判断するため、論理値の結果を利用し、if文などの条件分岐に活用することができます。
まとめ
今回は、JavaScriptのダイアログ機能について解説しました。
「alert」「prompt」「confirm」は、短いコードで実装できるため、簡単な動作確認をする上で役に立ちます。
ユーザーに確認してほしい内容や入力してほしい内容などがあれば、目的に応じてダイアログ機能を使い分けましょう。
コメント