JavaScriptでアラートボックスを表示する

JavaScriptでは、「OK」ボタンが1つだけあるダイアログボックス(アラートボックス)を表示させることができます。
方法は簡単で、以下のようにalertメソッドを記述するだけです。

alert("こんにちは！");

「こんにちは！」の部分を書き換えることで、任意の文字列を表示できます。
ボタンクリックでアラートボックスを出したい場合は、以下のようにHTMLとJavaScriptを書けばよいでしょう。

<input type="button" value="挨拶" onclick="alert('こんにちは！');">

これを表示させると、以下のようになります。

アラートボックス内に表示したい文字列は、引用符で囲んで記述します。使う引用符は半角ダブルクォーテーション記号「"」でも半角シングルクォーテーション記号「'」でもどちらでも構いませんが、開始と終了の引用符は同じ種類にする必要があります。
なお、HTMLのonclick属性の中に記述する場合など、ダブルクォーテーション記号を使って囲まれている内側に記述する場合は、シングルクォーテーションを使う必要があります。

アラートボックスの表示は抑制される可能性もある

このアラートボックスは、モーダルダイアログとして表示されるため、昔のブラウザでは閲覧者が[OK]ボタンを押すまで(ブラウザの終了操作も含めて)他の操作が一切できなくなっていました。そのため、最近のブラウザでは以下のような対策が取られています。

• 頻繁にアラートボックスが表示される場合には、「このページで二度とダイアログを表示しない」というようなチェックボックスが表示され、ユーザがチェックを入れるとアラートボックスの表示が抑制される。
• アラートボックスが表示されている状態でも、表示中のタブを閉じたり、他のタブへ移動したり、ブラウザのメニューを操作したりはできる。(ウェブページ内部の他の要素が触れなくなるだけで、他の作業は抑制されない。)

なので、無限ループの中で延々とアラートボックスを表示するような悪戯(というか嫌がらせ)を作ったとしても、今のブラウザなら容易に脱出ができます。
そういう悪戯ではなかったとしても、頻繁にアラートボックスを表示すると、ユーザ側の操作によって表示が抑制されてしまう可能性があるので、アラートボックスだけを使って重要な情報を出そうとするのは避けた方が良いかも知れません。^^;

記述した文字列以外にも様々な情報を表示できる

文字列だけでなく、様々な値を表示させることもできます。
例えば、以下のように記述すると、閲覧者のユーザエージェント名(ブラウザ名など)を表示できます。

alert( navigator.userAgent );

この場合は、alertメソッドの引数（上記の場合は「navigator.userAgent」の部分）は、引用符で囲んではいけません。引用符で囲むと、「navigator.userAgent」という文字列をそのまま表示してしまいます。
上記のソースで先ほどと同様にボタンを作ると、以下のようになります。

任意の文字列と何らかの値を組み合わせて表示させる

先ほどの例だと、アラートボックスの中にいきなりユーザエージェント名が表示されるだけです。もうちょっと分かりやすく、「ユーザエージェントは、XXXです。」のように任意の文字列を組み合わせて表示させることもできます。
任意の文字列や値をつなげるには、「+」演算子を使います。

alert("ユーザエージェント名は、" + navigator.userAgent + "です。");

上記のソースで先ほどと同様にボタンを作ると、以下のようになります。

こんな感じで、簡単にアラートボックス(警告ダイアログボックス)を表示することができます。
いきなりたくさん表示されると鬱陶しくてかなわないので、ページの読み込み完了と同時にいきなり表示するようなことは避けた方がいいと思いますが。(^_^;)

なお、[OK]ボタンと[キャンセル]ボタンの2つを表示して、YES/NOで分岐できるダイアログを作る方法は、『「OK/キャンセル」ダイアログを表示して確認する方法』をご参照下さい。

(更新日：2017年06月05日)