【JavaScript】HTMLページにスクリプトを埋め込む（読み込む）方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、HTMLページにスクリプトを埋め込む（読み込む）方法をご紹介しています。

ブラウザでスクリプトを実行する場合はどうすればいいの？

上記のような疑問に対してお答えできればと思います。

では、解説していきます。

HTMLページにスクリプトを埋め込み（読み込み）には

HTMLにスクリプトを埋め込む（読み込む）ためには、<script>タグを使用します。

インラインスクリプト、外部スクリプトそれぞれの記述方法を見ていきましょう。

インラインスクリプト

HTMLページ内でスクリプトを埋め込む場合は、<script>タグで囲み、タグの中にスクリプトを記述します。HTML5では<script>タグのtype属性の初期値は「text/javascript」となっているので省略することができます。

<!doctype html>
<html>
    <head>
        <meta charset=”utf-8”>
        <title></title>
    </head>
    <body>
        <script>
            //ここにスクリプトを記述
        </script>
    </body>
</html>

外部スクリプト

外部に保存したスクリプトを読み込む場合は<script>タグのsrc属性に読み込みたいスクリプトのパスを指定します。注意点として、src属性を指定した場合は内部のスクリプトは無視されます。インラインのスクリプトと外部のスクリプトを使用する場合はそれぞれ異なる<script>で囲んで使用するように心がけましょう。

<!doctype html>
<html>
    <head>
        <meta charset=”utf-8”>
        <title></title>
    </head>
    <body>
        <script src=”hello-world.js”>
            //ここのスクリプトは無視される
        </script>
    </body>
</html>