HTML Living Standard/script

script 要素

<script> 要素は、HTMLドキュメントにおけるスクリプトの埋め込みまたは外部スクリプトファイルのリンクを定義するために使用されます。通常、JavaScriptや他のプログラムコードを埋め込むために用いられますが、モジュールや他の形式のスクリプトもサポートしています。

カテゴリ

メタデータコンテンツ
フローコンテンツ
フレージングコンテンツ
スクリプトサポート要素

使用される文脈

メタデータコンテンツが期待される場所
フレージングコンテンツが期待される場所
スクリプトサポート要素が期待される場所

コンテンツモデル

src 属性がない場合、type 属性の値に依存しますが、スクリプトコンテンツの制限に一致しなければなりません。
src 属性がある場合、要素は空であるか、スクリプトドキュメントのみを含む必要があり、その内容はスクリプトコンテンツ制限に一致しなければなりません。

タグの省略

<script> 要素では、開始タグおよび終了タグは省略できません。

コンテンツ属性

以下は <script> 要素で使用できる属性です。

global attributes: すべてのHTML要素に共通の属性
src: スクリプトリソースのアドレス。外部ファイルを読み込む際に使用します。
type: スクリプトの種類。通常は text/javascript が使用されますが、他のメディアタイプもサポートされています。
nomodule: モジュールスクリプトをサポートするユーザーエージェントで実行を防ぐための属性。
async: スクリプトが利用可能になったときに即座に実行し、スクリプトの取得中は他の作業をブロックしません。
defer: ページの読み込みが完了した後でスクリプトを実行します。
crossorigin: クロスオリジンリクエストの取り扱い方法。例えば、CORSポリシーを適用します。
integrity: サブリソース整合性（SRI）チェックに使用される整合性メタデータ。
referrerpolicy: 要素によって開始されたフェッチのリファラーポリシー。
blocking: この要素がレンダーブロック可能かどうかを示します。
fetchpriority: この要素によって開始されたフェッチの優先度を設定します。

アクセシビリティの考慮事項

作者の視点:
- <script> 要素は、視覚的なコンテンツやアクセシビリティに直接関与しませんが、スクリプトの影響でページのインタラクションや機能に変化が生じる可能性があります。特に、JavaScriptによる動的な操作がアクセシビリティに影響を与える場合があるため、注意深く設計する必要があります。
実装者の視点:
- スクリプトの読み込みと実行順序がユーザーエージェントのパフォーマンスやレンダリングに影響を与えるため、async や defer 属性を適切に使用することが重要です。

DOMインターフェース

<script> 要素は、HTMLScriptElement インターフェースを通じてJavaScriptからアクセスすることができます。このインターフェースには、以下のプロパティとメソッドがあります。

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);
};

属性

src: スクリプトのURL。外部スクリプトファイルを指定するために使用します。
type: スクリプトのメディアタイプ。通常は text/javascript が使用されます。
noModule: モジュールスクリプトがサポートされるユーザーエージェントでスクリプトを実行しないようにします。
async: スクリプトを非同期に実行するための属性。
defer: ページ読み込み後にスクリプトを実行するための属性。
crossOrigin: クロスオリジンリクエストの取り扱い方法。
text: インラインスクリプトのコード内容。
integrity: サブリソース整合性（SRI）メタデータ。
referrerPolicy: フェッチのリファラーポリシー。
blocking: スクリプトの実行がレンダリングをブロックするかどうかを示します。
fetchPriority: フェッチの優先度を設定します。

サポートするメソッド

supports(type): 指定した type がサポートされているかを確認します。