JavaScriptを実行する方法として、html上に記述したり、外部ファイルを読み込んだりする方法があるが、よく最初に実装するときに「あれー？なんでjavaScriptが実行されないのー？」となることが多い。(基礎的な話なのに、、、)

読み込まれない問題で時間を使いたくないので、備忘録として、JavaScriptの実行方法をまとめておく。

・2022/12/11更新
scriptタグのtype属性に関して、コメントにてご指摘にいただいたので修正しました。

@suoyuanduoqi10さんありがとうございます。

HTML上で実行する

sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプル</title>
  </head>
  <body>
    <script>
        window.alert("tests");
    </script>
  </body>
</html>

scriptタグを用いて実行する方法。

scriptタグの中に処理を書くことで実装できる。
~~type属性はスクリプトの種類を表している。一般的には"text/javascript"以外を指定することはないし、私も他の種類を知らない。~~

scriptタグの属性でtype属性が存在するが、HTML5ではtype属性は省略が推奨されているので基本的には省略して書く。

ブラウザでファイルを開くとちゃんと実行される。

HTML上で実行する際に記述する場所は以下のbodyの配下とheadの配下に分類される。

bodyの配下

body要素の中であれば、どの場所に記述しても実行される。

下記の①②③の例はいずれも正常にJavaScriptが実行される。

例①

sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプル</title>
  </head>
  <body>
    <script>
        window.alert("test");
    </script>
    <h1>header</h1>

    <p>contents</p>

    <h1>footer</h1>
  </body>
</html>

例②

sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプル</title>
  </head>
  <body>
    
    <h1>header</h1>
    <script>
        window.alert("test");
    </script>
    <p>contents</p>

    <h1>footer</h1>
  </body>
</html>

例③

sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプル</title>
  </head>
  <body>
    
    <h1>header</h1>
    
    <p>contents</p>

    <h1>footer</h1>
    <script>
        window.alert("test");
    </script>
  </body>
</html>

しかし、ほかのHTMLの要素とごっちゃになるのは可読性が損なわれるので良くない。

body内に記述する場合は基本的にbodyの閉じタグの直前に書くことが望ましい。

また、bodyの閉じタグの直前に記述することはページ読み込みの高速化にも繋がる。

一般的なブラウザではスクリプトの実行が終わるまで以降の描画は行われない。

したがって、実行に時間がかかるスクリプトをbodyの先頭や途中に記述しているとページ読み込みが遅くなる原因となる。

bodyの閉じタグの直前に記述するとページの描画が完了した後にスクリプトが実行されるので、結果としてページ読み込みの高速化につながる。

headの配下

下記のようにhead配下にスクリプトを記述することも可能

sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプル</title>
    <script>
        window.alert("test");
    </script>
  </head>
  <body>
    
    <h1>header</h1>
    
    <p>contents</p>

    <h1>footer</h1>
    
  </body>
</html>

どのようなときにこの方法が活用できるかというと、関数定義する部分と定義した関数を呼び出す部分を分けておきたいときである。

javaScriptでは関数定義を行っているscript要素は関数を呼び出すscript要素より先に記述しておかなければならないという決まりがある。

そのため、関数定義はheadで関数呼び出しはbodyに記述することで関数定義を読み込んで呼び出すことができるようになる。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプル</title>
    <!-- 関数定義部分-->
    <script>
        function testFunction(str) {
            alert(str);
        }
    </script>
  </head>
  <body>
    
    <h1>header</h1>
    
    <p>contents</p>

    <h1>footer</h1>
    <!-- 関数呼び出し部分-->
    <script >
        testFunction("hello");
    </script>
  </body>
</html>

↓ページ読み込み時の挙動

この順序が逆だとjavaScriptは動作しない。(もちろん1つのscript要素の中にまとめて記述もできるが)

外部ファイルとして読み込む

HTML上でjsファイルを外部ファイルとして読み込み実行する方法である。

下記のようなjsファイルがあったする。

sample.js

window.alert("Hello JavaScript");

HTMLでscriptタグのsrc属性でjsファイルのパスを設定すれば読み込むことができる。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプル</title>
    <script src="sample.js"></script>
  </head>
  <body>
    
    <h1>header</h1>
    
    <p>contents</p>

    <h1>footer</h1>
  </body>
</html>

↓ページ読み込み時の挙動

こちらの方法の方がHTMLとJavaScriptを分離できるので個人的には良い。

HTML上での記述と外部ファイル読み込みを併用する

HTML上での記述と外部ファイル読み込みを併用することは可能であるが、注意点がある。

src属性を指定しているscriptタグの中に処理を記述しても無視される。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプル</title>
    <script src="sample.js">
        // この処理は無視される
        window.alert("無視しないで！！");
    </script>
  </head>
  <body>
    
    <h1>header</h1>
    
    <p>contents</p>

    <h1>footer</h1>
  </body>
</html>

併用する場合は新たなscriptタグを用意してその中に処理を記述する。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプル</title>
    <script  src="sample.js"></script>
  </head>
  <body>
    
    <h1>header</h1>
    
    <p>contents</p>

    <h1>footer</h1>
    <script>
        window.alert("無視しないで！！");
    </script>
  </body>
</html>