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

JavaScriptでのalertの基本的な使い方6つ|類似のメソッドとは?

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

JavaScriptのalertとは?


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

alertのメリット

手軽に利用できることです。
JavaScriptというフロントエンドの言語なので、phpやc#に関係なく記述することができます。

JavaScriptはブラウザ標準で装備されているものなので、スマホ(ios、android)にも対応しています。
そのため、アラートを使っての簡易な内容検証の確認や、画面サンプルとしてメッセージの内容を確認させたいときに使うとよいでしょう。

また、最近は見た目もjQueryのSweetAlertというjQueryプラグインがあるので、それを使って外見をカスタマイズすることができます。

JavaScriptにおけるalertの基本的な使い方6つ

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

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

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

1:アラートを表示させる方法

JavaScriptのalertを表示させる場合の方法は以下をscriptタグ内に記述します。

正確には上記のように[window.alert]なのですが、JavaScriptでのwindowは省略可能ですので、
こちらでも同様に動作します。

2:自動的に計算された結果を表示する方法

JavaScriptのalertでは引数に計算式を入れておくことで、自動的に計算された結果を表示する機能があります。

このように、これを使うことでJavaScriptでの計算式を使った場合の結果確認をすることができます。

3:文字列を連結して表示する方法

JavaScriptのalertでは引数に文字列を連結した式を入れておくことで、自動的に文字連結された結果を表示する機能があります。

このように、これを使うことでJavaScriptでの文字列結合を使った場合の結果確認をすることができます。

4:複数行を含む文字列を出力する方法

JavaScriptのalertでは引数に改行文字を入れることで複数行にわたって内容を表示する機能があります。
改行文字は「\n」です。

このように、改行文字\nを使うことでJavaScriptでのalertで複数行にわたる文字列を表示することができます。

5:配列やオブジェクトの値をalertで出力する方法

JavaScriptのalertでは文字列や変数を表示することができるのですが、配列やオブジェクトは特定の構造の中に1つずつデータを格納していることもあるため工夫が必要です。

このように、配列の添字(0から開始するので注意!)で箇所を指定することで、JavaScriptの配列の中の情報を表示することができます。

オブジェクトの場合も同様に

添字にキーを指定することで、JavaScriptのオブジェクトの中の情報を表示することができます。

6:alertを使ったデバッグのやり方

JavaScriptのalertはそれを使ってデバッグを行うこともできます。

このように、functionのパラメータにどのような値が受け渡されたのかをalertで確認することができます。
他にもJavaScriptのプログラムの途中で想定していない動きになっているときに、alert()を差し込んで想定通りに動いているかどうかの確認をしながらプログラミングをすることが可能です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6:マウスオーバーした時にダイアログを表示する方法

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

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

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

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

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

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

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

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

alertメソッドと似たメソッド

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

confirmメソッド

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

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

confirmメソッドの使用方法

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

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

promptメソッド

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

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

promptメソッドの使用方法

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

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

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

JavaScriptのalertの使い方を覚えよう

以上、JavaScriptのalertを紹介しました。

特にデバッグのときや、簡易なメッセージ表示などに役立ちます。ただし説明したとおりモーダルウィンドウであるがゆえに、利用者の操作感を損なう可能性もありますので、そのことを念頭に入れて使う箇所を考えながら設計をしたり、プログラミングしていきましょう。

注意することはありますが、手軽にJavaScriptで情報を表示したりすることができる方法ですので、どんどんalertを使っていき有効活用しましょう。


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

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

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

Search

Popular

reccomended

Categories

Tags