- HOME
- JavaScript入門
- アラート表示
このページでは、警告やメッセージを伝えるためのアラートダイアログを出す方法について見ていきます。
アラートは他人にメッセージを伝えるだけに用いるのではありません。 JavaScirptのプログラムを組んでいてエラーが出る場合に、 どこで間違っているのかチェックしていくのにも使えます。
アラートダイアログを出す
まず最初に、アラートダイアログを出す方法を見ておきましょう。
- alert(表示する内容)
- カッコ内の文字などをアラートダイアログで表示します。文字列の場合はクォーテーションで括る必要があります。
- 数値を表示したり、計算結果を表示させたり、数値と文字を繋いだりもできます。
文字列の場合は、ダブルクォーテーション「"」 若しくはシングルクォーテーション「'」で囲みます。 数字の場合はクォーテーションで囲みません。
他のプログラムの場合、数値と文字を繋げるとエラーになりますが、 JavaScriptでは繋げることが可能です。 文字列を繋げる時は「+」で結びます。 数値の場合は足し算になります。
表示する文字列を途中で改行したい場合は、「\n」を記述します。
アラートダイアログのサンプル
では、HTMLのbody内に以下のように記述してみてください (コメント部分は書かなくても構いません)。
<script> alert("こんにちは"); //文字列の表示 alert(2+3); //数値や計算式の表示 alert( 6 + "月" ); //数値と文字の結合 alert( "円周率は¥n" + 3.14159 ); //文字列を改行させる </script>
サンプルページ(別窓)
上記のサンプルでは、4回アラートダイアログが出ます。 文字の場合、計算結果の場合、文字と数値を繋げた場合などがあります。
命令文が複数出てくる場合、セミコロン「;」を付けて区切ります。 1行だけの命令では必要ありませんが、付けても問題ありません。 セミコロンを書く癖を付ける為、毎回命令文の最後にセミコロンを付けるよう心がけましょう。
アラートによるデバッグ
前のページで見た、エラーの出るスクリプトをもう一度見てみましょう。
var dom = document.getElementById("id");
var str = "ジャバスクリプト":
dom.innerHTML = str;
2行目の最後がセミコロン「;」ではなくコロン「:」になっているのでエラーになります。 でも、そのことに気づかない時は、alert()で捜していくことができます。
alert("OH");
var dom = document.getElementById("id");
var str = "ジャバスクリプト":
dom.innerHTML = str;
上記の場合、「OH」と言うアラートが表示されます(別に表示される文字は何でも構いません)。 この後、alert()を一行ずつずらしていきます。
var dom = document.getElementById("id");
alert("OH");
var str = "ジャバスクリプト":
dom.innerHTML = str;
↑まだ「OH」と表示されます。
var dom = document.getElementById("id");
var str = "ジャバスクリプト":
alert("OH");
dom.innerHTML = str;
↑ここで、アラート表示が出なくなります。つまり、そのすぐ上の行に問題がある訳です。
このようにして問題箇所を捜し出すことが出来ます。 他に、問題のありそうな変数などalert()で表示させることによって、 バグを捜していくという使い方もあります。
長いスクリプトの場合は、どこにミスがあるか見つけるのが大変です。 まずはコメントで大雑把に問題箇所を把握し、 alert()で詰めていくと言う方法が良いかも知れません。