JavaScript入門 | 概要 | JavaScriptの適用

Tags:

JavaScriptを適用する方法

HTML文書にJavaScriptコードを適用する方法には、次のような方法がある。

  1. 内部JavaScriptコードとして適用
  2. 外部JavaScriptファイルとして適用

JavaScriptコード

JavaScriptコードは、<script>タグを使用してHTML文書内に挿入できる。

構文

<script>
    document.getElementById("text").innerHTML = "皆さんを歓迎します。";
</script>

このように挿入されたJavaScriptコードは、HTML文書の<head>タグや<body>タグ、またはその両方に配置できる。

次の例は、HTML文書の<head>タグにJavaScriptコードを挿入した例である。

<head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script>
        function printDate() {
            document.getElementById("date").innerHTML = Date();
        }
    </script>
</head>

次の例は、HTML文書の<body>タグにJavaScriptコードを挿入した例である。

<body>
    <p>JavaScriptを利用すると、現在の日付と時刻情報にも簡単にアクセスできます。</p>
    <button onclick="printDate()">現在の日付と時刻を表示する。</button>
    <p id="date"></p>
    <script>
        function printDate() {
            document.getElementById("date").innerHTML = Date();
        }
    </script>
</body>

上の2つの例で確認できるように、JavaScriptコードを<head>タグに挿入しても、<body>タグに挿入しても、動作上の違いはない。

外部JavaScriptファイル

JavaScriptコードはHTML文書の内部だけでなく、外部ファイルとして作成して挿入することもできる。

外部に作成されたJavaScriptファイルは、.js拡張子を使用して保存する。そのJavaScriptファイルを適用したいすべてのWebページに、<script>タグを使って外部JavaScriptファイルを含めればよい。

example.js

function printDate() {
    document.getElementById("date").innerHTML = Date();
}

<head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script src="/examples/media/example.js"></script>
</head>

外部JavaScriptファイルを使用すると、Webの内容を担当するHTMLコードから、Webの動作を実装するJavaScriptコードを分離できる。こうするとHTMLコードとJavaScriptコードをそれぞれ読みやすくなり、保守もしやすくなる。また、外部JavaScriptファイルはWebブラウザーが事前に読み込めるため、Webページの読み込み速度も速くなる。