<script>~</script>
script（スクリプト）要素はクライアントサイドスクリプトのコードを埋め込み、実行します。外部ファイルとして用意したJavaScriptをsrc属性で読み込んで実行できるほか、script要素内に直接ソースコードを記述することもできます。
| script要素 | 説明 |
|---|---|
| カテゴリー | ・スクリプト支援要素 ・フレージングコンテンツ ・フローコンテンツ ・メタデータコンテンツ |
| コンテンツモデル | ・src 属性が指定されていない場合、type 属性の値と一致するスクリプト。 ・src 属性が指定されている場合は空、もしくは JavaScript におけるコメントテキスト。 |
| 使用できる場所 | ・メタデータ・コンテンツが期待される場所 ・フレージング・コンテンツが期待される場所 ・スクリプトサポート要素が期待される場所 |
script要素で使用できる属性
| 属性名 | 属性値 |
|---|---|
| グローバル | すべての要素で使用できる属性 |
| src | 文章内にJavaScript外部リソースURIを指定する。 |
| type | 埋め込まれる外部リースのMIMEタイプを指定する。 |
| nomodule | ＊nomodule属性は論理属性 nomodule属性は、ES Modules（ES2015 仕様において策定された、JavaScriptファイルから別の JavaScriptファイルをインポートする仕組み）に対応するブラウザでは該当スクリプトを実行するべきではないことを伝えるための論理属性になる。この属性を付与することで、古いブラウザ向けのフォールバックスクリプトを提供することが可能になる。 |
| async | ＊async属性は論理属性 埋め込まれたスクリプトの実行タイミングを指定する。 src属性が指定されている場合のみ指定が可能。文章を読み込むとき、この属性が指定されたスクリプト実行可能になった時点で実行する。 |
| defer | ＊defer属性は論理属性 defer属性は script 要素に指定することで埋め込まれたスクリプトの実行タイミングを指定する。 src属性が指定されている場合のみ指定可能です。文書を読み込むとき、文書の読み込みが完了した時点で、この属性が指定されたスクリプトを実行する。 |
| crossorigin | crossorigin属性はCORS （Cross-Origin Resource Sharing / クロスドメイン通信） 設定属性になる。 別オリジンから読み込んだ画像などのリソースを文書内で利用する際のルールを指定する。 オリジンとは、スキーム名とポート番号（指定されている場合のみ）、およびホスト名からなる組み合わせを指す。 |
| integrity | integrity属性は、サブリソース完全性（SRI）機能を用いて、取得したリソースが予期せず改竄されていないかをユーザエージェントが検証するためのメタデータになる。 値はテキストで、ユーザエージェントに取得させたリソースのハッシュをbase64エンコードしたもの。 |
| referrerpolicy | referrerpolicy属性は、リンク先にアクセスする際、あるいは画像など外部リソースをリクエストする際にリファラ（アクセス元の URL 情報）を送信するか否か（リファラポリシー）を指定します。 |
async属性とdefer属性
async属性とdefer属性は同時に指定することも可能です。併記された場合、async属性に対応する環境では async属性が有効になり、async属性に対応しない環境ではdefer属性がフォールバック（使用可能な状態を維持する）となる。
crossorigin属性に指定できる値
| 属性値 | 状態 |
|---|---|
| anonymous | Cookie やクライアントサイドの SSL 証明書、HTTP 認証などのユーザ認証情報は不要 |
| use-credentials | ユーザ認証情報を求めます |
referrerpolicy 属性に指定できる値
| 属性値 | 説明 |
|---|---|
| 空文字列 | デフォルト値 特にリファラに対して条件指定をせず、ブラウザの挙動による。 |
| no-referrer | リファラを一切送信しない。 a要素 area 要素にrel=”noreferrer” を付与した場合と同様の扱いとなる。 |
| no-referrer-when-downgrade | ンク元が SSL/TLS を用いており、リンク先が SSL/TLS を用いていない場合（HTTPS→HTTP）にはリファラを送信しない。 それ以外の場合（HTTPS→HTTPS / HTTP→HTTPS）は、リンク元の完全な URL をリファラとして送信する。 |
| same-origin | リンク元とリンク先が同一オリジンの場合は。リファラを送信する。 |
| origin | リンク元のオリジンのみが送信される。 |
| strict-origin | リンク元、リンク先がそれぞれ SSL/TLS を用いている場合、あるいはリンク元が SSL/TLS を用いていない場合にリンク元のオリジンのみを送信される。 |
| origin-when-cross-origin | リンク元とリンク先が異なるオリジンの場合、リンク元のオリジンのみを送信する。 リンク元とリンク先が同一オリジンの場合、リンク元の完全なURLをリファラとして送信する。 |
| strict-origin-when-cross-origin | リンク元、リンク先がそれぞれ SSL/TLS を用いている場合、あるいはリンク元が SSL/TLS を用いていない場合に下記の条件でリファラを送信する。 ・リンク元とリンク先が異なるオリジンの場合、リンク元のオリジンのみを送信する。 ・リンク元とリンク先が同一オリジンの場合、リンク元の完全な URL をリファラとして送信する。 |
| unsafe-url | リンク元の完全なURLをリファラとして送信する。 |
使用例
<script async defer>
window.onload = function() {
var canvas = document.getElementById('canvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ct = canvas.getContext('2d');
ct.strokeStyle = '#009900';
ct.strokeRect(50, 50, 200, 200);
}
</script>使用例
<script src="./js/script.js" charset="utf-8">/* 文字エンコーディング */</script>使用例
<script src="./js/jquery.js">/* jQuery の読み込み */</script>