コンソールを使って JavaScript の動作確認を行う
JavaScript で書かれたコードの動作確認を行う方法は色々ありますが、最も簡単で手軽なものは Google Chrome に搭載されている JavaScript コンソールを使う方法です。お使いの PC に Chrome がインストールされていない場合には、お手数ですがダウンロードの上でインストールしてください。コンソールは便利ですので、Chrome をインストールしても損はしません。
コンソールを起動する手順は以下の通りです。
- Chrome を起動する。
- Chrome の画面上で
右クリックし、出てきたメニューから検証を選択（キーボードのF12キーを押してもよい）。 - 表示された画面で
Consoleタブを選択。
コンソールを起動したら以下のコードを入力し、キーボードのEnterキーを押してください。
alert('こんにちは')
上の例のように、
alert('表示したい文字列')
と記述すると、指定した文字列がアラートメッセージ（ポップアップ）として表示されます。非常に短い命令ですが、これも立派な JavaScript のコードです。
メッセージの内容を色々と入れ替えて試してみてください。例えば、Web ブラウジングしていると以下のようなメッセージによく遭遇します。
alert('お気に入り登録しますか？')
JavaScript を HTML ファイルに記述する
今度はコンソールを使うのではなく、HTML ファイルに JavaScript のコードを記述する方法を解説します。
以下のコードをテキストエディタなどに入力し、ファイルにindex.htmlと名前を付けて、適当な場所に保存してください。続いて、そのファイルをブラウザで開きます。先ほどと同じアラートメッセージが画面上にポップアップするはずです。
HTML ファイルの中に JavaScript のコードを直接記述する際には、上の例のように、コード全体をscript要素で囲みます。このscript要素ですが、上の例のようにbody要素の中に記述する必要があります。
JavaScript を JS ファイルに記述する
今度は JavaScript コードを HTML ファイルの中に直接記述するのではなく、JavaScript 専用のファイルである JS ファイル（拡張子は.js）の中に記述する方法を解説します。
以下のコードをテキストエディタなどに入力し、ファイルにalert.jsと名前を付けた上で、先ほど作成したindex.htmlと同じ場所に保存してください。
alert('こんにちは')
今度は、先ほど作成したindex.htmlの内容を以下のように変更し（script要素の中身を削除する）、上書き保存してください。
この新たなindex.htmlの中にはアラートメッセージを表示させる JavaScript コードが書かれていないため、このファイルをブラウザで開いても、先ほどのようなアラートメッセージは表示されません。確認してください。
アラートメッセージを表示させるためには、HTML ファイルであるindex.htmlと JS ファイルであるalert.jsを関連付けて、index.htmlをブラウザで表示したときにalert.jsも同時に実行するように設定する必要があります。
そこで、index.htmlの内容を以下のように変更し、上書き保存してください。さらに、そのファイルをブラウザで開きます。先ほどと同じアラートメッセージが画面上に表示されるはずです。
HTML ファイル中で外部の JS ファイルを読み込むためには、上の例のように、script要素の開始タグにおいて、
という形で、読み込もうとする JS ファイルの場所を指定する必要があります。
