【JavaScript】ダイアログを表示する方法(アラート、コンファーム、入力プロンプト)

ダイアログとは?

ダイアログとはユーザー(閲覧者)に警告や通知、確認などをするときに表示される小さなウィンドウのことです。

言葉だけだとピンとこない方もいらっしゃると思うのでサンプルを用意しました!
下の「サンプル」というボタンを押してみてください。

「ボタンが押されました」と表示されたのではないでしょうか?
この表示がダイアログというものです。
※押したのに何も起きなかった場合は端末の設定でJavaScriptが無効になっている可能性があります。

このダイアログは閉じられるまでJavaScriptが実行中の状態になるので、ユーザーが[OK]や[キャンセル][閉じる]などを選択してダイアログを閉じるまで、次の処理やブラウザーを進めることができません 。

JavaScriptで使われるダイアログは大きく分けて3つあるので、それぞれ紹介していきたいと思います。

アラートとは?

アラートは[OK]ボタンのみのダイアログで、ユーザーに警告や通知を表示したいときに利用します。

アラートを表示する

メソッド意味戻り値
alert(メッセージ)警告ダイアログを表示なし

アラートを表示するにはalert()を使います。

実行結果

ボタンを押すと実行結果が表示されます。

サンプル

次のソースコードはボタンを押した時刻をアラートで表示するプログラムです。

実行結果

コンファームとは?

コンファームは[OK]と[キャンセル]ボタンがあるダイアログで、ユーザーに確認を促すときに利用します。
[OK]を押すと”true”、[キャンセル]を押すと”false”を返します。

コンファームを表示する

メソッド意味戻り値
confirm(メッセージ)確認ダイアログを表示真偽値

実行結果

サンプル

次のソースコードはユーザーに日付を表示するかの確認をして、[OK]を押したら日付を表示し[キャンセル]を押したら「キャンセルされました」と表示するプログラムです。

実行結果

new Date()などの日付オブジェクトやメソッドはこちらの記事で解説しています。

入力プロンプト

入力プロンプトは[OK]と[キャンセル]ボタンに加え入力欄があるダイアログで、ユーザーに文字入力を促したいときに利用します。
[OK]を押すと入力欄に入力した文字を返し、[キャンセル]を押すと”null”を返します。

入力プロンプトを表示する

メソッド意味戻り値
prompt(メッセージ[,入力欄に表示させる初期メッセージ])入力プロンプトを表示文字列

実行結果

サンプル

次のソースコードはユーザーに名前を入力してもらい、何か入力されていればその名前を表示し、何も入力されてなければ名無しさんと表示、キャンセルを押すと何もせず終了するプログラムです。

実行結果

タイトルとURLをコピーしました