.net column
.NET開発者のためのブログメディア

JavaScriptのalertとは?confirm・promptメソッド

2021年03月11日
SE
JavaScriptのalertとはそのようなものなのでしょうか。
PM
JavaScriptのalertとは、「OK」ボタン付きのダイアログを表示するためのメソッドです。

JavaScriptのalertとは?

JavaScriptのalertとは、「OK」ボタン付きのダイアログを表示するためのメソッドです。alertメソッドを使用すると、Webブラウザ上で、ユーザーに対するメッセージを表示することができます。

alertメソッドを使ってダイアログを出す方法

JavaScriptのalertメソッドを使ってダイアログを出すには、以下のように記述します。

alert(ここに表示したいメッセージを入れる);

このように記述すれば、JavaScriptが実行されたタイミングで、表示したいメッセージのダイアログを出すことができます。

文字列をダイアログに表示する方法

例として、「Hello World!」という文字列をダイアログに出力して表示してみます。この例では、HTML上のscriptタグ内にJavaScriptのコードを記載しています。





test




上記の例では、HTMLページを開いたときに「Hello World!」というメッセージがダイアログに表示されます。文字列を表示したい場合は、対象文字列をシングルクォーテーションかダブルクォーテーションで囲むのを忘れないようにしてください。

数値をダイアログに表示する方法

alertメソッドのダイアログには、文字列以外にも数値や計算結果など様々な情報を表示することが可能です。例として、1+1の計算結果を表示したい場合は以下のようになります。





test




上記のように記述すると、ダイアログには1+1の計算結果である「2」が表示されます。

変数を使ってダイアログに表示する方法

変数に代入した値をダイアログに出力することも可能です。以下の例では、「message」という変数に「Hello」という文字列を代入し、alertメソッドでダイアログに表示させています。





test




現在時刻をダイアログに表示する方法

現在時刻をalertメソッドでダイアログに表示する場合、まず以下のようにして現在の日時を取得する必要があります。

var currentDate = new Date();

上記で取得した現在の日時から、時、分の情報をそれぞれgetHoursメソッド、getMinutesメソッドにより抜き出してダイアログに表示します。実際に現在時刻が表示できるコードの例は以下のようになります。





test




ボタンクリックでダイアログを表示する方法

ボタンをクリックした際にダイアログを表示するには、buttonタグのonclick属性に指定した関数内で、alertメソッドを実行させます。





test





上記の例のように記述すると、「ここをクリック」というボタンをクリックした際にalertメソッドが実行され、「クリックされました」というダイアログを表示することができます。

alertメソッド使用時の注意点

ダイアログを表示することができるJavaScriptのalertメソッドですが、このメソッドを使用する際には注意すべき点もあります。alertメソッドを正しく動作させるために、以下に記載の注意点についても理解しておく必要があります。

選択肢は「OK」の1つのみ

alertメソッドを使用して表示されるダイアログ上で、ユーザーが選択できるのは「OK」というボタンのみです。そのため、ユーザー側での応答に「OK」「キャンセル」のような選択肢が必要な場合や、ユーザーによる文字入力を促したい場合は、alertメソッドを使うことはできません。

そういった場合には、alertの代わりにconfirmやpromptを使用します。各メソッドの詳細については後述します。

ダイアログを消すまで他の操作ができなくなる

alertメソッドで表示されるダイアログは、モーダルウィンドウです。つまり、ユーザーはダイアログ上での操作を完了するまで、Webサイトの他の部分を操作することができなくなります。

ユーザーに対して優先的に通知したい内容を、alertメソッドによってダイアログに表示することは効果的な手段です。しかしながら、ユーザーの操作を制限することにもなるため、ダイアログ表示を多用するべきではありません。

「OK」「キャンセル」の2択があるダイアログを出すには

alertメソッドで表示できるダイアログにおいて、ユーザーが選択できるのは「OK」のみでした。ここでは、「OK」と「キャンセル」の2択をユーザーに選ばせることのできる、alertに類似するメソッドを紹介します。

confirmメソッド

ユーザーの応答として、「OK」と「キャンセル」の2択があるダイアログを出すには、JavaScriptのconfirmメソッドを使用します。confirmの場合も、alertの時と同様に任意のメッセージを表示することができます。

また、confirmを使用した場合は、応答として「OK」(true)と「キャンセル」(false)のどちらが選択されたかを示す真偽値を取得することが可能です。

confirmメソッドの使用方法

confirmメソッドも、基本的な使い方はalertメソッドと同じです。以下のように記述すると、「よろしいですか?」というメッセージ付きのダイアログが表示され、ユーザーは「OK」もしくは「キャンセル」ボタンを選択することができます。





test




上記の場合、ユーザーが「OK」と「キャンセル」のどちらを選択したかどうかは、変数resultに格納される真偽値によって判断します。

ユーザーがテキストを入力できるダイアログを出すには

「OK」や「キャンセル」のようなボタンによる選択肢ではなく、ユーザーがテキストを入力できるダイアログもJavaScriptで表示することが可能です。テキスト入力ができるダイアログを出すには、promptというメソッドを使用します。

promptメソッド

JavaScriptのpromptメソッドを使用すると、ユーザーにテキスト入力を促すダイアログを表示できます。promptメソッドで表示されるダイアログには、confirmメソッドの時と同様に、「OK」ボタンと「キャンセル」ボタンが付いています。

promptメソッドの場合、ダイアログに表示するメッセージの他に、必要に応じてテキスト入力フィールドに表示されるデフォルト値も指定することが可能です。

promptメソッドの使用方法

promptメソッドの場合、以下のように、メソッドの引数に表示したいメッセージと入力フィールドのデフォルト値を指定します。ただし、デフォルト値の指定は任意のため、不要な場合は記述しなくても構いません。





test




上記のように記述すると、ユーザーが入力した文字列をresult変数で取得することができます。ユーザーがキャンセルボタンをクリックした場合は、結果としてnullが返却されます。

SE
JavaScriptのalertメソッドについてよく理解できました。
PM
alertの類似メソッドであるconfirmやpromptとの使い分けに注意して実践してみましょう。

まとめ

本記事では、「OK」ボタン付きのダイアログを表示できる、JavaScriptのalertメソッドの使用方法について解説しました。注意点として、ダイアログを表示する際は、ユーザーの操作の妨げにならないよう気を付ける必要があります。

また、選択肢やテキスト入力機能付きダイアログを表示したい場合は、alertの類似メソッドであるconfirmやpromptを使用します。必要に応じてメソッドを選択するようにしましょう。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags