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

HTMLのscriptタグをご紹介します。

scriptタグ

scriiptタグはスクリプト（プログラム）のソースコードをマークアップします。
一般的にブラウザで動作するJavaScriptで記述します。

基本構文

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

属性

主な属性をご紹介します。

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

サンプルコード

スクリプト

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

ソースコード

<h1 id="title">HTMLとは</h1>
<p>HTMLの正式名称はHyperText Markup Languageです。</p>
<button id="action">実行</button>
<script type="text/javascript">
    var button = document.getElementById("action");
    button.addEventListener('click', function() {
        var title = document.getElementById("title");
        title.style.color = "red";
    });
</script>

プレビュー

外部スクリプト

ボタンをクリックするとh1要素のテキストカラーを赤に変更する外部スクリプトをscript要素で読み込みます。

ソースコード

<h1 id="title">HTMLとは</h1>
<p>HTMLの正式名称はHyperText Markup Languageです。</p>
<button id="action">実行</button>
<script type="text/javascript" src="/article/js/script-tag.js"></script>

プレビュー