JavaScriptの実行 | CoDeS（コーデス）

今回の記事ではJavaScriptの実行方法についてまとめます。
前回準備したLive Serverの使い方についても今回の記事で説明しますので、利用方法を覚えましょう。

JavaScriptの実行方法

JavaScriptを実行するにはHTMLからコードを読み込む必要があります。
読み込み方には2つの方法があります。

HTML内に直接JavaScriptのコードを記述する
JavaScriptのコードを書いたファイルを指定して読み込む

HTML内に直接記述

HTML内に直接記述する場合は、scriptタグの中にJavaScriptコードを書きます。

<!-- HTMLファイル内に直接JavaScriptを記述する方法 -->

<!DOCTYPE html>
<html>
<body>
  <script>
    window.alert('Hello World!');
  </script>
</body>
</html>

ブラウザがこのHTMLを読み込むと、JavaScriptコードが読み込まれて実行されます。

別ファイルを読み込み

別ファイルに記述されたJavaScriptコードを読み込むには、scriptタグのsrc属性でファイルを指定して読み込みます。

以下は、HTMLファイルと同じフォルダ内にあるscript.jsというJavaScriptコードファイルを読み込む例です。

<!DOCTYPE html>
<html>
<body>
  <script src="./script.js"></script>
</body>
</html>

script.jsには実行したいJavaScriptコードを記述します。

window.alert('Hello World!');

パスの指定について

ファイルパスの指定方法には３つあります。

絶対パスでの指定
相対パスでの指定
URLでの指定

以下のようなフォルダ構成の場合を例に説明します。

<!-- 1. 絶対パスでの指定方法 -->
<script src="/root/js/script.js"></script>

<!-- 2. 相対パスでの指定方法 -->
<script src="./js/script.js"></script>

<!-- 3. URLでの指定方法 -->
<script src="http://{サーバーのホスト名}/root/js/script.js"></script>

絶対パスでの指定は、一番上のフォルダから始まるパスを記述します。パスの先頭に「/」をつけると絶対パスでの指定になります。
上記のフォルダ構成の場合、「/root/js/script.js」が絶対パスになります。

相対パスでの指定は、HTMLファイルからの相対パスを指定します。パスの先頭に「/」をつけないか「./」をつけると相対パスでの指定になります。
上記のフォルダ構成の場合、「./js/script.js」もしくは「js/script.js」が相対パスになります。

URLでの指定は、JavaScriptファイルのURLを指定します。
「sample.com」というホスト名のサーバーに上記のフォルダ構成でファイルが配置されている場合、「http://sample.com/root/js/script.js」がURLになります。

実行確認（Live Serverの使い方）

HTMLファイル、JavaScriptコードファイルをサーバー上においてブラウザでアクセスするとJavaScriptが実行されます。
しかし、プログラミング学習をするために実際にサーバーを用意するのはコスパが悪いため、PC上で動かせる簡易サーバーであるLive Serverを利用します（Live Serverは前回の記事で準備しています）。

試しに、JavaScriptファイルを読み込む方法でJavaScriptコードを実行してみましょう。
以下の手順でLiver Serverを起動できます。

HTMLファイルを選択して右クリック
「Open with Live Server」を選択

上記手順を実行すると、ブラウザが開いてメッセージが表示されます。

上記のような表示が出ればLive Serverでの実行成功です。

まとめ

JavaScriptの実行方法についての説明は以上です。

今後もJavaScriptコードの実行確認で頻繁に利用するため、Live Serverの起動手順は覚えておいてください。

次回はJavaScriptコードの記述ルールについて解説します。