May 2nd,2015
要素について
| カテゴリー | メタデータ・コンテンツ、フロー・コンテンツ、フレージング・コンテンツ、スクリプト支援要素 |
| 利用場所 | メタデータ・コンテンツが置ける場所、フレージング・コンテンツが置ける場所、スクリプト支援要素が置ける場所 |
| 内容 | 本文参照 |
| タグの省略 | 不可 |
“script”要素は動的なスクリプトのコードやデータブロックを文書に埋め込むための要素です。
スクリプトのコードは“script”要素の中に直接記述するか、“src”属性“によって読み込む外部スクリプトファイルに記述します。
属性の指定の仕方は埋め込むスクリプトがJavascriptのモジュールスクリプトであるか、そうでない従来のJavascriptなのかによって変わります。
ユーザーの設定によりスクリプトが無効化されている場合や、スクリプトに対応していない場合に使用されるコンテンツを“noscript”要素で表すことができます。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="sample-script.js" async></script>
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
<script>
now = new Date()
document.write("今日は" + now.getFullYear() + "年"
+ (now.getMonth() + 1) + "月"
+ now.getDate() + "日です")
</script>
...
...
過去には“script”要素に対応していないブラウザからスクリプトを隠すために“script”要素の内容をコメントで囲う習慣がありましたが、これはかなり古いブラウザを対象としたものなので現代では基本的に不要です。
<script>
<!--
now = new Date()
document.write("今日は" + now.getFullYear() + "年"
+ (now.getMonth() + 1) + "月"
+ now.getDate() + "日です")
//-->
</script>
属性と値
現行の仕様で定義されている属性
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| なし | |||
| 任意属性 | |||
| グローバル属性 | |||
| src="" | 埋め込む外部スクリプト | URL | 埋め込む外部スクリプトのURL |
| type="" | 埋め込むスクリプトの種類 | text/javascript | モジュールスクリプトではないJavascript |
| module | モジュールスクリプトであるJavascript | ||
| その他のMIMEタイプ | 埋め込まれた内容はデータブロック | ||
| nomodule="" | モジュールスクリプトに対応する環境での無効化 | nomodule | モジュールスクリプトに対応する環境での無効化 |
async="" |
スクリプトをパースと並行して読み込み、使用可能になった時点で実行する | async | スクリプトをパースと並行して読み込み、使用可能になった時点で実行する |
| defer="" | スクリプトをパースと並行して読み込み、パースの完了後に実行する | defer | スクリプトをパースと並行して読み込み、パースの完了後に実行する |
| crossorigin="" |
スクリプトを読み込む時のCORSリクエストを設定 | anonymous | CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない |
| use-credentials | CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する | ||
integrity="" |
外部スクリプトの整合性を確認 | ハッシュ値 | BASE64でエンコードした外部スクリプトのハッシュ値 |
referrerpolicy="" |
リファラーポリシーを指定 | リファラーポリシー | リファラーポリシーを指定 |
| blocking="" |
スクリプトの読み込み時に妨げるべき処理を示す | render | レンダリングを妨げる |
| fetchpriority="" |
外部スクリプトの読み込み時の優先度を指定する | high | 同じ種類の外部リソースと比較して取得の優先度が高いことを示す |
| low | 同じ種類の外部リソースと比較して取得の優先度が低いことを示す | ||
| auto | 同じ種類の外部リソースと比較時の優先度を自動的に判断すべきであることを示す | ||
“script”要素の内容がデータブロックの場合は“src”属性、“async”属性、“nomodule”属性、“defer”属性、“crossorigin”属性、“integrity”属性、“referrerpolicy”属性、“fetchpriority”属性は指定できません。
埋め込まれるスクリプトがモジュールスクリプトである場合は“nomodule”属性、“defer”属性は指定できません。
過去に定義されていた属性
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
charset="" |
外部スクリプトの文字エンコーディング | 文字エンコーディング | 外部スクリプトの文字エンコーディング |
| language="" |
スクリプトの記述言語 | スクリプトの記述言語 | スクリプトの記述言語 |
nonce="" |
コンテンツセキュリティポリシーのためのワンタイムトークン | ワンタイムトークン | 自動生成したBASE64でエンコードされた暗号 |
要素の内容
- “src”属性が指定されている場合
- 空もしくはスクリプトに関する注釈
- “src”属性が指定されず、“type”属性の値が“text/javascript”か“module”、もしくは“type”属性を省略した場合
- スクリプトのコード
- “src”属性が指定されず、“type”属性の値が“text/javascript”か“module”ではない場合
- データブロック
ただし、いずれの場合もタグやコメントとして読み取られてしまう記述はできません。“<!--”は“<!\--”、“<script”は“<\script”、“</script”は“<\/script”にそれぞれ置き換える必要があります。
“script”要素を配置する場所
“script”要素は“head”要素の中にも“body”要素の中にも配置することができます。しかし、近年は“body”要素内の一番最後に“script”要素を配置するのが一般的です。
通常ブラウザがウェブページを読み込む時、パースの途中でスクリプトを見つけるとパースを中断し、スクリプトを読み込んで実行するまでパースが再開されません。これはスクリプトによってHTMLが書き足される可能性があるためなのですが、その分ウェブページが表示されるのが遅れてしまいます。
パースはHTML文書のソースに記述された順に行われるので、一番最後に“script”要素を配置すれば他の内容がほぼすべて読み込まれた後にスクリプトを読み込ませることができ、ウェブページの表示を早めることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
<!--コンテンツ-->
...
<script src="sample-script.js"></script>
</body>
</html>
スクリプトの読み込みによるパースの中断は“defer”属性や“async”属性の指定でも解消することができます。
仕様書
“script”要素はHTML4.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
定義されている仕様書
 |
 |
 |
 |
  |
|
|---|---|---|---|---|---|
| <script> |   |
|
|
|
|
DOMインターフェース
[Exposed=Window]
interface HTMLScriptElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute USVString src;
[CEReactions] attribute DOMString type;
[CEReactions] attribute boolean noModule;
[CEReactions] attribute boolean async;
[CEReactions] attribute boolean defer;
[CEReactions] attribute DOMString? crossOrigin;
[CEReactions] attribute DOMString text;
[CEReactions] attribute DOMString integrity;
[CEReactions] attribute DOMString referrerPolicy;
[SameObject, PutForwards=value] readonly attribute DOMTokenList blocking;
[CEReactions] attribute DOMString fetchPriority;
static boolean supports(DOMString type);
// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
script {
display: none;
}
