アラート表示JavaScript入門

更新日:2018.06.22
  1. HOME
  2. JavaScript入門
  3. アラート表示

このページでは、警告やメッセージを伝えるためのアラートダイアログを出す方法について見ていきます。

アラートは他人にメッセージを伝えるだけに用いるのではありません。 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()で詰めていくと言う方法が良いかも知れません。

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers