script要素 - スクリプトの読み込み・記述

当ページのリンクには広告が含まれています。

HTML5入門 » 要素 » script要素 - スクリプトの読み込み・記述

ここでは HTML5 の script要素についてみていきます。

script要素の概要

script要素は、javascript などのスクリプトを定義する要素です。外部のスクリプトファイルを読み込んだり、タグ内に直接スクリプトを記述することができます。

カテゴリー	メタデータ・コンテンツフロー・コンテンツフレージング・コンテンツ
コンテンツ・モデル	src属性がある場合：空 src属性がある場合：type属性によって異なる
利用場所	メタデータ・コンテンツが置ける場所フレージング・コンテンツが置ける場所

属性	概要
src	外部のスクリプトファイルの URL を指定
async	src属性で指定した外部のスクリプトファイルを非同期で読み込む
defer	ページ読み込みが完了したときにスクリプトを実行するように
type	スクリプトのタイプを指定
charset	src属性で指定した外部のスクリプトファイルの文字エンコーディングを指定

外部スクリプトファイルの URL を指定します。

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

相対URLの場合は次のように記述します。

<script src="script.js"></script>

script要素で指定した外部ファイルは、それが読み込まれて実行するまで待つ必要があるので、ページの読み込みに時間がかかってしまいます。asyncコンテンツ属性を指定すると外部ファイルの読み込みと実行が非同期に行われるようになります。

<script src="script.js" async="async"></script>

deferコンテンツ属性を指定するとページの読み込みが完了してから、外部ファイルの実行が行われます。

<script src="script.js" defer="defer"></script>

typeコンテンツ属性のデフォルト値は "text/javascript" です。そのため、スクリプトが JavaScript とあれば、type属性を省略することができます。

<script src="script.js"></script>

src属性で指定した外部のスクリプトファイルの文字エンコーディングを指定します。

<script src="script.js" charset="UTF-8"></script>