JavaScriptのHTML文書内への記述方法

投稿日：2019年4月2日更新日：2019年5月12日

JavaScriptをWebページに組み込むには次の方法があります。
・HTML文書内に記述する方法
・外部ファイルに記述して読み込む方法
・HTML要素内に直接記述する方法

今回は、「HTML文書内に記述する方法」について、記載します。

JavaScriptのHTML文書内への記述方法

HTML文書のscript要素内（<script>～</script>タグ内）にスクリプトを書く方法です。type属性ではスクリプト言語のMIMEタイプ（text/javascript）を指定します。

<script type=”text/javascript”>★</script>

★：スクリプトの内容

従来はtype属性ではなく、language属性を利用してスクリプト言語の指定を行っていましたが、language属性はHTML 4.01/XHTML 1.0では非推奨に指定されている為、使用しません。Transitional DTDとFrameset DTDであれば、利用できます。また、その際に後方互換性の為にtype属性とlanguage属性の両方を書くことも可能です。

古いブラウザ（例えば、昔の携帯電話（ガラケー）の標準ブラウザなど）のスクリプトが実行できない環境では、タグが理解できず、スクリプトを含んだページを見たときに、タグ間の文字列（スクリプトのソース部分）がそのまま表示されてしまうことがありました。
このようにソース部分がそのまま表示されるのを防ぐために、script要素内のスクリプト全体を「<!–」と「// –>」で囲むのが一般的でした。

また、製作者が後で見返したり、誰かがソースを見たときのために、注意書きや記録を残す際には、「//」で1行だけコメントを残したり、「/* ～ */」で複数行のコメントを残したりします。

<html>
    <head>
        <title>JavaScript Sample</title>
        <script type=”text/javascript”>
            <!–
                ここにスクリプトを記述します。
            //–>
        </script>
    </head>
    <body>
        <script type=”text/javascript”> // JavaScriptは複数記述できる
            <!–
                ここにスクリプトを記述します。
                /*
                    特定の場所に書き出すには<body>タグの中の
                    書き出したい場所に記述する
                */
            //–>
        </script>
        <noscript>
            <p>このページはJavaScript対応ブラウザで見てください。</p>
        </noscript>
    </body>
</html>