【HTML】scriptタグ - スクリプト（プログラム）

HTMLのscriptタグについて解説します。

検証環境

HTML

macOS

14.1

scriptタグ

scriptタグは“スクリプト（プログラム）のソースコード”を意味するタグです。

通常、Webブラウザで動作するJavaScriptで記述します。

基本構文

<script>ソースコード</script>

属性

主な属性は次の通りです。

属性名	必須	内容
type	-	スクリプトの種類
src	-	外部スクリプト
async	-	非同期ダウンロード
defer	-	非同期ダウンロードとHTMLパース後の実行

サンプル

内部スクリプト

script要素に直接、ソースコードを記述する方法です。

次のサンプルはボタンをクリックするとh1要素のテキストカラーを赤色に変更します。

sample.html

<h1 id="title">HTML</h1>
<p>HTMLの正式名称はHyperText Markup Languageです。</p>
<button id="action">実行</button>

___ih_hl_start
<script type="text/javascript">
    var button = document.getElementById("action");
    button.addEventListener('click', function() {
        var title = document.getElementById("title");
        title.style.color = "red";
    });
</script>
___ih_hl_end

プレビュー

外部スクリプト

外部スクリプトファイルを読み込む方法です。

次のサンプルはボタンをクリックするとh1要素のテキストカラーを赤色に変更する外部スクリプトファイルを読み込みます。

sample.html

<h1 id="title">HTMLとは</h1>
<p>HTMLの正式名称はHyperText Markup Languageです。</p>
<button id="action">実行</button>

___ih_hl_start
<script type="text/javascript" src="/article/js/script-tag.js"></script>
___ih_hl_end

プレビュー