Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

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

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

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

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

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

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

表示させる文字列は、引用符(「"」または「'」)で囲みます。
onclick属性の中など、ダブルクォーテーションを使って囲まれている内側に記述する場合は、シングルクォーテーションを使う必要があります。

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

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

alert( navigator.userAgent );

この場合は、alertメソッドの引数(上記の場合は「navigator.userAgent」の部分)は、引用符で囲んではいけません。引用符で囲むと、「navigator.userAgent」という文字列をそのまま表示してしまいます。

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

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

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

任意の文字列や値をつなげるには、「+」演算子を使います。

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

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

こんな感じで、簡単にアラートボックス(警告ダイアログボックス)を表示することができます。

いきなりたくさん表示されると鬱陶しくてかなわないので、ページの読み込み完了と同時にいきなり表示するようなことは避けた方がいいと思います。(^_^;)

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど