最終更新日 2021年4月7日

script要素

script要素は、ドキュメントに動的なスクリプトやデータブロックを含められるようにします。script要素はMetadataコンテンツまたはPhrasingコンテンツの記述箇所で使用できます。

動的なスクリプトを含める場合、スクリプトはscript要素内に記述するか、またはsrc属性を使って外部ファイルから読み込みます。スクリプトではなくデータブロックを含める場合、データはscript要素内に記述しなければなりません。データ形式は、type属性を使って指定できます。この場合、src属性の指定は不可です。

type属性は、スクリプトの記述言語またはデータ形式を、MIMEタイプで指定します。type属性の指定を省略した場合の既定値は「text/javascript」で、それ以外の場合には、type属性の指定が必須です。

src属性では、使用する外部スクリプトファイルのURLを指定します。src属性を指定した場合は、charset属性、async属性、defer属性も指定できます。

charset属性は、外部スクリプトファイルの文字コードを指定します。

async属性とdefer属性では、スクリプトの実行タイミングについて指定できます。async属性を指定すると、スクリプトは利用可能になった時点で非同期に実行されます。defer属性だけを指定すると、スクリプトはページの表示が完了したあとで実行されます。どちらの属性も指定していない場合、スクリプトは即座に取り込まれ実行されて、ページの表示がそれに続きます。async属性とdefer属性の両方を指定すると、async属性をサポートしていないブラウザではdefer属性のタイミングで実行されます。

なお、charset属性、async属性、defer属性は、src属性を指定した場合のみ使用できます。

HTML5での変更点

・language属性は廃止されました。スクリプトの記述言語を指定するにはtype属性を使います。
・async属性を指定できます。

カテゴリ	タグの省略	親要素	子要素
Metadataコンテンツ Flowコンテンツ Phrasingコンテンツ	省略不可	head、Phrasingコンテンツを子にできる要素	src属性なし：type属性の値による src属性あり：スクリプトの説明

属性	値	説明
src	URL	外部スクリプトファイルのURLを、相対または絶対パスで指定します。
async	async	論理属性。指定した場合、スクリプトは利用可能になった時点で非同期に実行されます。
defer	defer	論理属性。指定した場合、スクリプトはページの表示が完了したあとで実行されます。
type	MIMEタイプ	スクリプトのメディアタイプを指定。JavaScriptの場合は「text/javascript」です。
charset	文字コード	外部スクリプトファイルの文字コードを指定します。
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>マクドエイド</title>
    <script type="text/javascript" src="sample.js" charset="utf-8"></script>
  </head>
  <body>
    <p>バーガーショップ「マクドエイド」にようこそ！</p>
    <script type="text/javascript">
      document.write("マクドエイド表参道店がオープンしました！");
    </script>
  </body>
</html>

参考文献：W3C HTML5「4.3.1 The script element」

ザマワンにエントリーしました！

『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。