メインコンテンツへスキップ

script要素

1.仕様

SCRIPT要素は、
実行できるコードを
埋め込んだり
参照したりできます。

SCRIPT - - %Script; -- script statements. (Raw text elements.) [Metadata|Flow|Phrasing|Script] --

script

スクリプト (Script statements)

種類
生テキスト要素

テキストを持つことができる要素です。

カテゴリ

使用できるコンテキスト
  • メタデータコンテンツを受け入れる要素
  • フレージングコンテンツを受け入れる要素
  • スクリプトをサポートする要素を受け入れる要素

メタデータコンテンツを受け入れる要素のコンテンツとして、使用できます。
フレージングコンテンツを受け入れる要素のコンテンツとして、使用できます。
スクリプトをサポートする要素を受け入れる要素のコンテンツとして、使用できます。

メタデータコンテンツを受け入れる要素は、<head>要素 です。

フレージングコンテンツを受け入れる要素は、<h1>要素, <h2>要素, <h3>要素, <h4>要素, <h5>要素, <h6>要素, <p>要素, <pre>要素, <output>要素, <progress>要素, <meter>要素, <label>要素, <datalist>要素, <body>要素, <section>要素, <nav>要素, <aside>要素, <article>要素, <header>要素, <footer>要素, <main>要素, <address>要素, <li>要素, <dt>要素, <dd>要素, <caption>要素, <th>要素, <td>要素, <form>要素, <fieldset>要素, <search>要素, <blockquote>要素, <figure>要素, <figcaption>要素, <div>要素, <dialog>要素, <abbr>要素, <b>要素, <bdi>要素, <bdo>要素, <cite>要素, <code>要素, <data>要素, <dfn>要素, <em>要素, <i>要素, <kbd>要素, <mark>要素, <q>要素, <s>要素, <samp>要素, <small>要素, <span>要素, <strong>要素, <sub>要素, <sup>要素, <u>要素, <var>要素 です。

スクリプトをサポートする要素を受け入れる要素は、<hgroup>要素, <ol>要素, <ul>要素, <menu>要素, <dl>要素, <div>要素, <picture>要素, <table>要素, <tbody>要素, <thead>要素, <tfoot>要素, <tr>要素, <select>要素, <datalist>要素, <optgroup>要素 です。

コンテンツモデル
スクリプトのコンテンツ制限に一致するテキスト。

スクリプトのコンテンツ制限に一致するテキスト。

src属性がない場合は、type属性の値に依存しますが、スクリプトのコンテンツ制限に一致する必要があります。

src属性がある場合は、その要素は空であるか、スクリプトのコンテンツ制限にも一致するスクリプトドキュメントのみを含む必要があります。

タグの省略

どちらのタグも省略できません。

コンテンツ属性
グローバル属性 他
src属性
リソースのアドレス
type属性
スクリプトの種類
nomodule属性
モジュールスクリプトをサポートするユーザーエージェントでの実行を防止します
async属性
フェッチ中にブロックせずに、可能な場合はスクリプトを実行します
defer属性
スクリプトの実行を延期する
crossorigin属性
要素がクロスオリジンリクエストを処理する方法
integrity属性
サブリソース整合性チェックで使用される整合性メタデータ[SRI]
referrerpolicy属性
要素によって開始されたフェッチのリファラーポリシー
blocking属性
要素が潜在的にレンダリングをブロックしているかどうか
fetchpriority属性
要素によって開始されるフェッチの優先順位を設定します。

charset属性がありましたが、廃止されました。作成者はscript要素にcharset属性を指定すべきではありません。属性が存在する場合、その値は 'utf-8' の大文字小文字を区別しないASCIIマッチでなければなりません。(これは、UTF-8としてエンコードされるという要件に準拠している文書では効果がありません)。属性を省略します。ドキュメントもスクリプトもUTF-8を使うことが要求されており、スクリプト要素はドキュメントを継承しているので、スクリプト要素で指定するのは冗長です。

language属性がありましたが、廃止されました。作成者はscript要素にlanguage属性を指定すべきではありません。属性が存在する場合、その値は文字列 'JavaScript' のASCII大文字小文字の区別のないマッチでなければならず、type属性は省略されるか、その値は文字列 'text/javascript' のASCII大文字小文字の区別のないマッチでなければなりません。この属性は、完全に省略されるか ('JavaScript' という値では、何の効果もありません)、type属性で置き換えられるべきです。JavaScriptの場合はこの属性を省略します。データ・ブロックの場合は、代わりにtype属性を使用します。

event属性, for属性がありましたが、廃止されました。DOM イベントメカニズムを使用してイベントリスナーを登録します。

DOM インターフェイス
HTMLScriptElement
  1. [Exposed=Window]
  2. interface HTMLScriptElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute USVString src;
  6. [CEReactions] attribute DOMString type;
  7. [CEReactions] attribute boolean noModule;
  8. [CEReactions] attribute boolean async;
  9. [CEReactions] attribute boolean defer;
  10. [CEReactions] attribute DOMString? crossOrigin;
  11. [CEReactions] attribute DOMString text;
  12. [CEReactions] attribute DOMString integrity;
  13. [CEReactions] attribute DOMString referrerpolicy;
  14. [SameObject, PutForwards=value] readonly attribute DOMTokenList blocking;
  15. [CEReactions] attribute DOMString fetchPriority;
  16.  
  17. static boolean supports(DOMString type);
  18.  
  19. // also has obsolete members
  20. };
HTMLElement
  1. [Exposed=Window]
  2. interface HTMLElement : Element {
  3. [HTMLConstructor] constructor();
  4.  
  5. // metadata attributes
  6. [CEReactions] attribute DOMString title;
  7. [CEReactions] attribute DOMString lang;
  8. [CEReactions] attribute boolean translate;
  9. [CEReactions] attribute DOMString dir;
  10.  
  11. // user interaction
  12. [CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
  13. [CEReactions] attribute DOMString inert;
  14. undefined click();
  15. [CEReactions] attribute DOMString accessKey;
  16. readonly attribute DOMString accessKeyLabel;
  17. [CEReactions] attribute boolean draggable;
  18. [CEReactions] attribute boolean spellcheck;
  19. [CEReactions] attribute DOMString writingSuggestions;
  20. [CEReactions] attribute DOMString autocapitalize;
  21.  
  22. [CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
  23. [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
  24.  
  25. ElementInternals attachInternals();
  26.  
  27. // The popover API
  28. undefined showPopover();
  29. undefined hidePopover();
  30. boolean togglePopover(optional boolean force);
  31. [CEReactions] attribute DOMString? popover;
  32. };
  33.  
  34. HTMLElement includes GlobalEventHandlers;
  35. HTMLElement includes ElementContentEditable;
  36. HTMLElement includes HTMLOrSVGElement;
Element
  1. [Exposed=Window]
  2. interface Element : Node {
  3. readonly attribute DOMString? namespaceURI;
  4. readonly attribute DOMString? prefix;
  5. readonly attribute DOMString localName;
  6. readonly attribute DOMString tagName;
  7.  
  8. [CEReactions] attribute DOMString id;
  9. [CEReactions] attribute DOMString className;
  10. [SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
  11. [CEReactions, Unscopable] attribute DOMString slot;
  12.  
  13. boolean hasAttributes();
  14. [SameObject] readonly attribute NamedNodeMap attributes;
  15. sequence<DOMString> getAttributeNames();
  16. DOMString? getAttribute(DOMString qualifiedName);
  17. DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
  18. [CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
  19. [CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
  20. [CEReactions] undefined removeAttribute(DOMString qualifiedName);
  21. [CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
  22. [CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
  23. boolean hasAttribute(DOMString qualifiedName);
  24. boolean hasAttributeNS(DOMString? namespace, DOMString localName);
  25.  
  26. Attr? getAttributeNode(DOMString qualifiedName);
  27. Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
  28. [CEReactions] Attr? setAttributeNode(Attr attr);
  29. [CEReactions] Attr? setAttributeNodeNS(Attr attr);
  30. [CEReactions] Attr removeAttributeNode(Attr attr);
  31.  
  32. ShadowRoot attachShadow(ShadowRootInit init);
  33. readonly attribute ShadowRoot? shadowRoot;
  34.  
  35. Element? closest(DOMString selectors);
  36. boolean matches(DOMString selectors);
  37. boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
  38.  
  39. HTMLCollection getElementsByTagName(DOMString qualifiedName);
  40. HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
  41. HTMLCollection getElementsByClassName(DOMString classNames);
  42.  
  43. [CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
  44. undefined insertAdjacentText(DOMString where, DOMString data); // legacy
  45. };
GlobalEventHandlers
  1. interface mixin GlobalEventHandlers {
  2. attribute EventHandler onabort;
  3. attribute EventHandler onauxclick;
  4. attribute EventHandler onbeforeinput;
  5. attribute EventHandler onbeforematch;
  6. attribute EventHandler onbeforetoggle;
  7. attribute EventHandler onblur;
  8. attribute EventHandler oncancel;
  9. attribute EventHandler oncanplay;
  10. attribute EventHandler oncanplaythrough;
  11. attribute EventHandler onchange;
  12. attribute EventHandler onclick;
  13. attribute EventHandler onclose;
  14. attribute EventHandler oncontextlost;
  15. attribute EventHandler oncontextmenu;
  16. attribute EventHandler oncontextrestored;
  17. attribute EventHandler oncopy;
  18. attribute EventHandler oncuechange;
  19. attribute EventHandler oncut;
  20. attribute EventHandler ondblclick;
  21. attribute EventHandler ondrag;
  22. attribute EventHandler ondragend;
  23. attribute EventHandler ondragenter;
  24. attribute EventHandler ondragleave;
  25. attribute EventHandler ondragover;
  26. attribute EventHandler ondragstart;
  27. attribute EventHandler ondrop;
  28. attribute EventHandler ondurationchange;
  29. attribute EventHandler onemptied;
  30. attribute EventHandler onended;
  31. attribute OnErrorEventHandler onerror;
  32. attribute EventHandler onfocus;
  33. attribute EventHandler onformdata;
  34. attribute EventHandler oninput;
  35. attribute EventHandler oninvalid;
  36. attribute EventHandler onkeydown;
  37. attribute EventHandler onkeypress;
  38. attribute EventHandler onkeyup;
  39. attribute EventHandler onload;
  40. attribute EventHandler onloadeddata;
  41. attribute EventHandler onloadedmetadata;
  42. attribute EventHandler onloadstart;
  43. attribute EventHandler onmousedown;
  44. [LegacyLenientThis] attribute EventHandler onmouseenter;
  45. [LegacyLenientThis] attribute EventHandler onmouseleave;
  46. attribute EventHandler onmousemove;
  47. attribute EventHandler onmouseout;
  48. attribute EventHandler onmouseover;
  49. attribute EventHandler onmouseup;
  50. attribute EventHandler onpaste;
  51. attribute EventHandler onpause;
  52. attribute EventHandler onplay;
  53. attribute EventHandler onplaying;
  54. attribute EventHandler onprogress;
  55. attribute EventHandler onratechange;
  56. attribute EventHandler onreset;
  57. attribute EventHandler onresize;
  58. attribute EventHandler onscroll;
  59. attribute EventHandler onscrollend;
  60. attribute EventHandler onsecuritypolicyviolation;
  61. attribute EventHandler onseeked;
  62. attribute EventHandler onseeking;
  63. attribute EventHandler onselect;
  64. attribute EventHandler onslotchange;
  65. attribute EventHandler onstalled;
  66. attribute EventHandler onsubmit;
  67. attribute EventHandler onsuspend;
  68. attribute EventHandler ontimeupdate;
  69. attribute EventHandler ontoggle;
  70. attribute EventHandler onvolumechange;
  71. attribute EventHandler onwaiting;
  72. attribute EventHandler onwebkitanimationend;
  73. attribute EventHandler onwebkitanimationiteration;
  74. attribute EventHandler onwebkitanimationstart;
  75. attribute EventHandler onwebkittransitionend;
  76. attribute EventHandler onwheel;
  77. };
ElementContentEditable
  1. interface mixin ElementContentEditable {
  2. [CEReactions] attribute DOMString contentEditable;
  3. [CEReactions] attribute DOMString enterKeyHint;
  4. readonly attribute boolean isContentEditable;
  5. [CEReactions] attribute DOMString inputMode;
  6. };
HTMLOrSVGElement
  1. interface mixin HTMLOrSVGElement {
  2. [SameObject] readonly attribute DOMStringMap dataset;
  3. attribute DOMString nonce; // intentionally no [CEReactions]
  4.  
  5. [CEReactions] attribute boolean autofocus;
  6. [CEReactions] attribute long tabIndex;
  7. undefined focus(optional FocusOptions options = {});
  8. undefined blur();
  9. };
ARIA in HTML
暗黙的="No" ARIAロール="No" aria-* 属性="No"

暗黙的な ARIAセマンティクスがありませんが、意味はあり、この意味は、ARIA によって提供されず、ARIA のユーザーに公開されていないロール、状態、プロパティで表現される可能性があります。

作成者は、暗黙的な ARIAセマンティクス, または HTML要素のネイティブセマンティクスを上書きしてはいけません。

記述できる aria-* 属性はありません。

レンダリング
ボックスを生成しない
非表示の要素
  1. script {
  2. display: none;
  3. }

CSS を大雑把に読むと、 要素とその子孫はボックスやテキストシーケンスを生成しません。 などになります。

説明
script要素は、実行できるコードを表します。

script要素は、使用すると、作成者はドキュメントに動的スクリプトとデータブロックを含める事ができます。 この要素は、ユーザーのコンテンツを表すものではありません。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>script要素の例 - (Example of script element) | 離珠のHTMLでしぃ！</title>
  6. <script src="./exscript01.js"></script>
  7. <link rel="icon" href="../favicon.ico" type="image/vnd.microsoft.icon">
  8. </head>
  9. <body>
  10. <h1>script要素の例</h1>
  11. <p>この例の script要素は、./exscript01.js というスクリプトをインポートすると指定しています。</p>
  12. </body>
  13. </html>

このサンプルへのリンクです。
(./exscript.htm)

参照元
参照元
JSONデータ
JSON形式での、データのイメージです。
  1. {
  2. "script": {
  3. "check": "2024-09-01",
  4. "group": "Scripting",
  5. "element": "- - %Script; -- script statements. (Raw text elements.) [Metadata|Flow|Phrasing|Script] --",
  6. "attlist": {
  7. "%Global;": "",
  8. "type": "%ContentType; #REQUIRED -- content type of script language --",
  9. "src": "%URI; #IMPLIED -- URI for an external script --",
  10. "defer": "(defer) #IMPLIED -- UA may defer execution of script --",
  11. "nomodule": "(nomodule) #IMPLIED -- Prevents execution in user agents that support module scripts --",
  12. "async": "(async) #IMPLIED -- Execute script when available, without blocking while fetching --",
  13. "crossorigin": "CDATA #IMPLIED -- How the element handles crossorigin requests --",
  14. "integrity": "CDATA #IMPLIED -- Integrity metadata used in Subresource Integrity checks [SRI] --",
  15. "referrerpolicy": "CDATA #IMPLIED -- Referrer policy for fetches initiated by the element --",
  16. "blocking": "%Blocking; #IMPLIED -- Whether the element is potentially render-blocking --",
  17. "fetchpriority": "CDATA #IMPLIED -- Sets the priority for fetches initiated by the element --",
  18. },
  19. "comment": "スクリプト (Script statements)",
  20. "point": "実行できるコードを表します。",
  21. "description": "使用すると、作成者はドキュメントに動的スクリプトとデータブロックを含める事ができます。 この要素は、ユーザーのコンテンツを表すものではありません。",
  22. "kind": "Raw",
  23. "categories": [
  24. "Metadata",
  25. "Flow",
  26. "Phrasing",
  27. "Scriptsupporting",
  28. ],
  29. "used": [
  30. "parent (%Metadata)*",
  31. "parent (%Phrasing)*",
  32. "parent (%Scriptsupporting)*",
  33. ],
  34. "contentmodel": "スクリプトのコンテンツ制限に一致するテキスト。",
  35. "contentmodelsupplement": [
  36. "src属性がない場合は、type属性の値に依存しますが、スクリプトのコンテンツ制限に一致する必要があります。",
  37. "src属性がある場合は、その要素は空であるか、スクリプトのコンテンツ制限にも一致するスクリプトドキュメントのみを含む必要があります。",
  38. ],
  39. "tag": [
  40. "-",
  41. "-",
  42. ],
  43. "attributes": {
  44. "src": "リソースのアドレス",
  45. "type": "スクリプトの種類",
  46. "nomodule": "モジュールスクリプトをサポートするユーザーエージェントでの実行を防止します",
  47. "async": "フェッチ中にブロックせずに、可能な場合はスクリプトを実行します",
  48. "defer": "スクリプトの実行を延期する",
  49. "crossorigin": "要素がクロスオリジンリクエストを処理する方法",
  50. "integrity": "サブリソース整合性チェックで使用される整合性メタデータ[SRI]",
  51. "referrerpolicy": "要素によって開始されたフェッチのリファラーポリシー",
  52. "blocking": "要素が潜在的にレンダリングをブロックしているかどうか",
  53. "fetchpriority": "要素によって開始されるフェッチの優先順位を設定します。",
  54. },
  55. "attributessupplement": [
  56. "charset属性がありましたが、廃止されました。作成者はscript要素にcharset属性を指定すべきではありません。属性が存在する場合、その値は 'utf-8' の大文字小文字を区別しないASCIIマッチでなければなりません。(これは、UTF-8としてエンコードされるという要件に準拠している文書では効果がありません)。属性を省略します。ドキュメントもスクリプトもUTF-8を使うことが要求されており、スクリプト要素はドキュメントを継承しているので、スクリプト要素で指定するのは冗長です。",
  57. "language属性がありましたが、廃止されました。作成者はscript要素にlanguage属性を指定すべきではありません。属性が存在する場合、その値は文字列 'JavaScript' のASCII大文字小文字の区別のないマッチでなければならず、type属性は省略されるか、その値は文字列 'text/javascript' のASCII大文字小文字の区別のないマッチでなければなりません。この属性は、完全に省略されるか ('JavaScript' という値では、何の効果もありません)、type属性で置き換えられるべきです。JavaScriptの場合はこの属性を省略します。データ・ブロックの場合は、代わりにtype属性を使用します。",
  58. "event属性, for属性がありましたが、廃止されました。DOM イベントメカニズムを使用してイベントリスナーを登録します。",
  59. ],
  60. "dominterface": "HTMLScriptElement",
  61. "rendering": "Hidden",
  62. "reference": [
  63. {
  64. "title": "HTML Living Standard. 4.12.1 The script element.",
  65. "href": "https://html.spec.whatwg.org/multipage/scripting.html#the-script-element",
  66. "heading": "HTML Living Standard. 4.12.1 The script element",
  67. "sub": "Last Updated 27 August 2024",
  68. },
  69. {
  70. "title": "HTML Living Standard. 15 Rendering 15.3.1 Hidden elements.",
  71. "href": "https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements",
  72. "heading": "HTML Living Standard. 15 Rendering 15.3.1 Hidden elements",
  73. "sub": "Last Updated 27 August 2024",
  74. },
  75. {
  76. "title": "HTML 5.2 W3C Recommendation. 4.12.1 The script element. W3C Recommendation, 14 December 2017.",
  77. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/semantics-scripting.html#the-script-element",
  78. "heading": "HTML 5.2 W3C 勧告. 4.12.1 The script element",
  79. "sub": "W3C勧告、2017年12月14日",
  80. },
  81. {
  82. "title": "HTML 5.2 W3C Recommendation. 10.3.1. Hidden elements.",
  83. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#hidden-elements",
  84. "heading": "HTML 5.2 W3C 勧告. 10.3.1. Hidden elements",
  85. "sub": "W3C勧告、2017年12月14日",
  86. },
  87. {
  88. "title": "HTML 5.1 W3C Recommendation. 4.12.1 The script element. W3C Recommendation, 1 November 2016.",
  89. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/semantics-scripting.html#the-script-element",
  90. "heading": "HTML 5.1 W3C 勧告. 4.12.1 The script element",
  91. "sub": "W3C勧告、2016年11月1日",
  92. },
  93. {
  94. "title": "HTML 5.1 W3C Recommendation. 10.3.1. Hidden elements. W3C Recommendation, 1 November 2016.",
  95. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#hidden-elements",
  96. "heading": "HTML 5.1 W3C 勧告. 10.3.1. Hidden elements",
  97. "sub": "W3C勧告、2016年11月1日",
  98. },
  99. {
  100. "title": "HTML 5 W3C Recommendation. 4.12.1 The script element. W3C Recommendation, 28 October 2014.",
  101. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/semantics-scripting.html#the-script-element",
  102. "heading": "HTML 5 W3C 勧告. 4.12.1 The script element",
  103. "sub": "W3C勧告、2014年10月28日",
  104. },
  105. {
  106. "title": "HTML 5 W3C Recommendation. 10.3.1. Hidden elements. W3C Recommendation, 28 October 2014.",
  107. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/scripting-1.html#the-script-element",
  108. "heading": "HTML 5 W3C 勧告. 10.3.1. Hidden elements",
  109. "sub": "W3C勧告、2014年10月28日",
  110. },
  111. {
  112. "title": "HTML 4.01 Specification W3C Recommendation. 18.2.1 Scripts: The SCRIPT element. W3C Recommendation 24 December 1999.",
  113. "href": "https://www.w3.org/TR/html401/interact/scripts.html#h-18.2.1",
  114. "heading": "HTML 4.01 Specification W3C 勧告. 18.2.1 Scripts: The SCRIPT element",
  115. "sub": "W3C勧告1999年12月24日",
  116. },
  117. {
  118. "title": "HTML 3.2 Reference Specification. W3C Recommendation 14-Jan-1997.",
  119. "href": "https://www.w3.org/TR/2018/SPSD-html32-20180315/#style",
  120. "heading": "HTML 3.2 Reference Specification STYLE and SCRIPT",
  121. "sub": "W3C勧告1997年1月14日",
  122. },
  123. {
  124. "title": "MDN Web Docs. HTML <script>: The Script element.",
  125. "href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/script",
  126. "heading": "<script>: スクリプト要素 - HTML: ハイパーテキストマークアップ言語 | MDN",
  127. },
  128. {
  129. "title": "ECMAScriptR 2021 Language Specification.",
  130. "href": "https://tc39.es/ecma262/",
  131. "heading": "ECMAScriptR 2021 Language Specification",
  132. },
  133. ],
  134. "version": {
  135. "first": "HTML3",
  136. "latest": "HTML Living Standard",
  137. },
  138. }
  139. }

注意: 簡易に描画する為に、各項目の後ろに , を付与しています。JSON の形式では、末尾の項目の後には , は付けません。

最終確認日

2024-09-01

2.使用できるコンテキスト

script要素は、
メタデータコンテンツ,
フレージングコンテンツ,
スクリプトをサポートする要素を
受け入れる要素に
配置できます。

<script>要素が使用できるコンテキスト(Context・文脈)は、メタデータコンテンツ, フレージングコンテンツ, スクリプトをサポートする要素を受け入れる要素のコンテンツとしてです。

メタデータコンテンツをコンテンツの一部として配置できる要素は、以下の各要素です。

フレージングコンテンツをコンテンツの一部として配置できる要素は、以下の各要素です。

スクリプトをサポートする要素をコンテンツの一部として配置できる要素は、以下の各要素です。

document
html
head
body
script
p
hgroup
script
script

<script>要素は、<head>要素に配置できます。

<script>要素は、フレージングコンテンツをコンテンツの一部として配置できる要素である<p>要素に配置できます。

<script>要素は、スクリプトをサポートする要素をコンテンツの一部として配置できる要素である<hgroup>要素に配置できます。

3.コンテンツモデル

script要素は、
動的スクリプトと
データブロックを
与えるテキストを
配置できます。

<script>要素の子や子孫としてどのようなコンテンツ(Content・内容) が含まれなければならないかというと、「スクリプトのコンテンツ制限に一致」するテキストです。

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

とりあえず

  • type属性に適合したスクリプトを与えるテキスト。
  • HTML文書の中としてHTMLとして扱われない文字列
  • type属性の指定がスクリプト以外の時にデータブロック
の以上の条件にそったテキストが配置できるという事です。

スクリプトの処理内容も、規則としてはどの要素にどの要素を配置できるという制約はあるので、 どの様な記述のスクリプトをどこにでも記述できる訳ではないので、注意が必要です。 特に忘れやすいのが、そのスクリプトが実行されるタイミングでは、HTML文書がどこまで読み込まれているかという点ですのでご注意を。

  1. <script src="./risyu.js">
  2. /* comment */;
  3. </script>

src属性がある場合の例示です。スクリプトコンテンツの制限にも一致するスクリプトドキュメントのみを含めています。 別の言い方で言うと、/*で始まり*/で終わるブロックコメントとか、//で始まり改行まで続く行コメントとか、 最後に改行が必要などという構文です。

スクリプトドキュメント (script documentation) とは、HTML仕様に於いて、外部スクリプトファイルの先頭に記述されるコメント部分の事を指します。 その先頭部分が JavaScript として実行されないようにしながら、HTML仕様との整合性を保つ為の構文が決められています。

  1. <script>
  2. document.addEventListener("DOMContentLoaded", function() {
  3. document.body.appendChild(document.createTextNode("スクリプトのさんぷる"));
  4. });
  5. </script>

src属性がなくtype属性もない場合の例示です。スクリプトコンテンツの制限に一致する必要があり、スクリプトがクラシックスクリプトであり、JavaScriptスクリプトのトップレベルのプロダクションに従って解釈される事を意味します。 別の言い方で言うと、</script>や-->など、HTMLの解釈の途中で誤った(意図しない)解釈をしない為の構文に従う必要があるという事です。

type属性は、属性を省略するか、空の文字列に設定するか、JavaScript MIME タイプの本質一致に設定することは、スクリプトがクラシックスクリプトであり、JavaScriptスクリプトのトップレベルのプロダクションに従って解釈されることを意味します。

  1. <script type="application/ld+json">
  2. [
  3. {
  4. "@context": "https://schema.org/",
  5. "@type": "BreadcrumbList",
  6. "itemListElement":
  7. [
  8. {
  9. "@type": "ListItem",
  10. "position": "1",
  11. "name": "コータンのおもちゃ箱",
  12. "item": "http://risyu.in.coocan.jp"
  13. },
  14. {
  15. "@type": "ListItem",
  16. "position": "2",
  17. "name": "離珠のHTMLでしぃ！",
  18. "item": "http://risyu.in.coocan.jp/Html/"
  19. },
  20. {
  21. "@type": "ListItem",
  22. "position": "3",
  23. "name": "スクリプティング",
  24. "item": "http://risyu.in.coocan.jp/Html/scripting.htm"
  25. },
  26. {
  27. "@type": "ListItem",
  28. "position": "4",
  29. "name": "template要素"
  30. }
  31. ]
  32. }
  33. ]
  34. </script>

src属性がなくtype属性の指定がデータブロック相当の場合の例示です。 スクリプトコンテンツの制限に一致したデータを記述しています。 別の言い方で言うと、</script>や-->など、HTMLの解釈の途中で誤った(意図しない)解釈をしない為の構文に従う必要があるという事です。

4.コンテンツ属性

script要素は、
グローバル属性と、
src, type,
nomodule,
async,
defer,
crossorigin,
integrity,
referrerpolicy,
blocking,
fetchpriority を
設定できます。

<script>要素に指定することができる属性は、グローバル属性とsrc属性, type属性, nomodule属性, async属性, defer属性, crossorigin属性, integrity属性, referrerpolicy属性, blocking属性, fetchpriority属性を設定できます。

インポートマップスクリプト要素の場合、src属性, async属性, nomodule属性, defer属性, crossorigin属性, integrity属性, referrerpolicy属性 を指定してはなりません。

データブロックを含める為に使用する場合は、データをインラインで埋め込む必要があり、データの形式は type属性を使用して指定する必要があり、<script>要素の内容は使用する形式に定義された要件に準拠する必要があります。src属性, async属性, nomodule属性, defer属性, crossorigin属性, integrity属性, referrerpolicy属性, fetchpriority属性 は指定しないでください。

charset属性がありましたが、廃止されました。作成者は<script>要素にcharset属性を指定すべきではありません。属性が存在する場合、その値はutf-8の大文字小文字を区別しないASCIIマッチでなければなりません。(これは、UTF-8としてエンコードされるという要件に準拠している文書では効果がありません)。属性を省略します。ドキュメントもスクリプトもUTF-8を使うことが要求されており、スクリプト要素はドキュメントを継承しているので、スクリプト要素で指定するのは冗長です。

language属性がありましたが、廃止されました。作成者は<script>要素にlanguage属性を指定すべきではありません。属性が存在する場合、その値は文字列JavaScriptのASCII大文字小文字の区別のないマッチでなければならず、type属性は省略されるか、その値は文字列text/javascriptのASCII大文字小文字の区別のないマッチでなければなりません。この属性は、完全に省略されるか ('JavaScript' という値では、何の効果もありません)、type属性で置き換えられるべきです。JavaScriptの場合はこの属性を省略します。データブロックの場合は、代わりにtype属性を使用します。

event属性, for属性がありましたが、廃止されました。DOM イベントメカニズムを使用してイベントリスナーを登録します。

src属性

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

src属性 は、外部スクリプトの URLを指定します。

インポートマップスクリプト要素の場合, データブロックを含めるために使用する場合は、src属性は指定できません。つまりそれらを外部リソースとして読み込む事は出来ません。

この例ですが、type属性がないので、スクリプトがクラシックスクリプトである事を示します。async属性もdefer属性も存在しないので、スクリプトがフェッチされてすぐに評価され、両方が完了するまで解析がブロックされます。

type属性

  1. <script type="text/javascript">
  2. alert("ここにスクリプトが書けます。");
  3. </script>

type属性 は、 スクリプトの種類を指定します。

属性を省略するか、空の文字列に設定するか、JavaScript MIME タイプの本質一致に設定することは、スクリプトがクラシックスクリプトであり、JavaScriptスクリプトのトップレベルのプロダクションに従って解釈されることを意味します。 クラシックスクリプトは、src属性が設定されている場合に限り、async属性とdefer属性の影響を受けます。 作成者は、type属性を重複して設定するのではなく、省略する必要があります。

属性を ASCII 大文字と小文字を区別しない「module」の一致に設定すると、スクリプトが JavaScriptモジュールスクリプトであり、JavaScriptモジュールのトップレベルのプロダクションに従って解釈されることを意味します。 モジュールスクリプトは defer属性の影響を受けませんが、async属性の影響を受けます (src属性の状態に関係なく)。

この属性を「importmap」の ASCII 大文字と小文字を区別しない一致に設定すると、スクリプトがモジュール指定子の解決の動作を制御するために使用される JSON を含むインポートマップであることを意味します。 インポートマップはインラインでのみ使用できます。つまり、src属性およびその他のほとんどの属性は無意味であり、それらと一緒に使用することはできません。

属性を他の値に設定すると、スクリプトはデータブロックとなり、処理されません。スクリプトの属性は (タイプ自体を除く) どれもデータブロックに影響を与えません。作成者は、データブロックを示すために、JavaScript MIME タイプの本質に一致しない有効な MIME タイプ文字列を使用する必要があります。

nomodule属性

  1. <script nomodule>
  2. alert("ここにスクリプトが書けます。");
  3. </script>
  4. <script type="module" src="./module.js"></script>

nomodule属性 は、モジュールスクリプトをサポートするユーザーエージェントでの実行を防止するブール属性です。これにより、最新のユーザーエージェントではモジュールスクリプトを、古いユーザーエージェントではクラシックスクリプトを選択的に実行できます。nomodule属性はモジュールスクリプトで指定してはなりません (指定しても無視されます)。

async属性

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

async属性とdefer属性は、スクリプトをどのように評価するかを示すブール属性です。

クラシックスクリプトの場合、async属性が存在する場合、クラシックスクリプトは解析と並行してフェッチされ、利用可能になるとすぐに (場合によっては解析が完了する前に) 評価されます。async属性が存在せず、defer属性が存在する場合、クラシックスクリプトは並行してフェッチされ、ページの解析が終了したときに評価されます。どちらの属性も存在しない場合は、スクリプトがフェッチされてすぐに評価され、両方が完了するまで解析がブロックされます。

モジュールスクリプトの場合、async属性が存在する場合、モジュールスクリプトとそのすべての依存関係は解析と並行してフェッチされ、モジュールスクリプトは利用可能になるとすぐに (解析が完了する前に) 評価されます。それ以外の場合、モジュールスクリプトとその依存関係は解析と並行してフェッチされ、ページの解析が完了したときに評価されます。 (defer属性はモジュール スクリプトには影響しません。)

この例の場合は、type属性がないので、スクリプトがクラシックスクリプトである事を示します。async属性が存在するので、解析と並行してフェッチされ、利用可能になるとすぐに (場合によっては解析が完了する前に) 評価されます。

defer属性

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

async属性とdefer属性は、スクリプトをどのように評価するかを示すブール属性です。

クラシックスクリプトの場合、async属性が存在する場合、クラシックスクリプトは解析と並行してフェッチされ、利用可能になるとすぐに (場合によっては解析が完了する前に) 評価されます。async属性が存在せず、defer属性が存在する場合、クラシックスクリプトは並行してフェッチされ、ページの解析が終了したときに評価されます。どちらの属性も存在しない場合は、スクリプトがフェッチされてすぐに評価され、両方が完了するまで解析がブロックされます。

モジュールスクリプトの場合、async属性が存在する場合、モジュールスクリプトとそのすべての依存関係は解析と並行してフェッチされ、モジュールスクリプトは利用可能になるとすぐに (解析が完了する前に) 評価されます。それ以外の場合、モジュールスクリプトとその依存関係は解析と並行してフェッチされ、ページの解析が完了したときに評価されます。 (defer属性はモジュール スクリプトには影響しません。)

この例の場合は、type属性がないので、スクリプトがクラシックスクリプトである事を示します。async属性が存在せず、defer属性が存在するので、並行してフェッチされ、ページの解析が終了したときに評価されます。

crossorigin属性

  1. <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

crossorigin属性 は、CORS設定属性です。クラシックスクリプトの場合、スクリプトが他のオリジンから取得されたときにエラー情報を公開するかどうかを制御します。モジュールスクリプトの場合、クロスオリジンリクエストに使用される認証情報モードを制御します。

クラシックスクリプトとは異なり、モジュールスクリプトではクロスオリジンフェッチに CORSプロトコルを使用する必要があります。

この例示は、CDN(content delivery network) を使用した jQuery の読み込みの指定です。 筆者(わたし)は使っていないので実績はありませんが、この様に記述したものをコピペすると使えるそうです。 この様なものがあるという提示であり、これをそのままコピペするのはお勧めしません。また最新でもありません。

integrity属性

  1. <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

integrity属性 は、この要素が担当するリクエストの整合性メタデータを表します。値はテキストです。src属性が指定されていない場合は、integrity属性を指定しないでください。

この例示は、CDN(content delivery network) を使用した jQuery の読み込みの指定です。 筆者(わたし)は使っていないので実績はありませんが、この様に記述したものをコピペすると使えるそうです。 この様なものがあるという提示であり、これをそのままコピペするのはお勧めしません。また最新でもありません。

referrerpolicy属性

  1. <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous" referrerpolicy="no-referrer-when-downgrade"></script>

referrerpolicy属性 は、リファラーポリシーを設定します。スクリプトを読み込んだり、スクリプトがリソースを読み込む際にどのリファラーを使用するかを示す文字列を記述します。

no-referrer-when-downgradeは既定値です。この例は、とりあえず既定値だけど記述してみたというものです。 やたらなリファラーポリシーの記述は良くないので、とりあえず程度なら使わない事をお勧めします。よく調べてよく理解して設定しましょう。

blocking属性

  1. <script src="./risyu.js" blocking="render"></script>

blocking属性 は、render キーワードを指定した場合、要素は潜在的にレンダリングブロックになります。これは個々の要素で定義されます。
デフォルトでは、要素は暗黙的にレンダリングをブロックする可能性はありません。

fetchpriority 属性

  1. <script src="./main.js" fetchpriority="high"></script>
  2. <script src="./sub.js" fetchpriority="low"></script>

fetchpriority属性 は、フェッチ優先度属性です。その目的は、スクリプトを取得するときに使用される優先順位を設定することです。high, low, auto のキーワードがあり、それぞれ「同じ宛先を持つ他のリソースに対して優先度の高いフェッチを通知します。」「同じ宛先を持つ他のリソースに対して優先度の低いフェッチを通知します。」「同じ宛先を持つ他のリソースに対するフェッチ優先度の自動決定を通知します。」という意味です。

属性の欠損値のデフォルトと無効な値のデフォルトは両方ともautoです。

5.DOM インターフェイス

script要素を、
直接表す
プロパティは
ありません。

<script>要素を JavaScript などで操作するには、documentのquerySelectorAll()メソッドを用いる方法があります。要素セレクタでscriptと指定して、<script>要素のリストを取得します。このメソッドの戻り値は、静的なNodeListオブジェクトであり、lengthプロパティで該当件数を知る事が出来ます。

NodeListオブジェクトは、配列の様に扱う事が出来ますが、for...in を使うとlengthプロパティなども対象となります。for...of を用いる事を推奨します。NodeListオブジェクトは、一致する要素ごとに Element を一つずつ含みます。上記の提示の時に取得できる値の形式はHTMLScriptElement インターフェイスのリストです。その様になる様に取得しているのであり、どのメソッドを用いるか, 指定する条件はどうするかにより異なります。属性セレクタと組み合わせる方法もあります。

他には、documentのquerySelector()メソッドを用いて、条件に一致する文書内で最初の一件を取得するとか、id属性があればdocumentのgetElementById()メソッドを用いるとか、name属性があればdocumentのgetElementsByName()メソッドを用いるとか、状況, 目的によりいろいろあります。

この下の script要素を、。
  1. <form event="[object Object]">
  2. この下の script要素を、<select id="iseJs501">
  3. <option value="none">表示しない</option>
  4. <option value="block">表示する</option>
  5. </select>。
  6. </form>
  7. <script id="iscJs501">
  8. /* すくりぷと */;
  9. </script>

<script>要素に id属性を指定して、その id属性で要素を取得する例です。例示では、cssのdisplayプロパティのプロパティ値を選択して設定する処理としています。例示で動的に表示する為に、フォームの内容が変更された時に処理するコードとしています。

この例は、<script>要素を扱う例なので、スクリプトをスクリプトで扱うという視点ではありません。まぁ<script>要素の属性値を何かの変数として取得したい場合の参考程度と考えて下さい。

6.アクセシビリティ

script要素は、
暗黙的な
ARIAセマンティクスは
ありません。

<script>要素の暗黙的なARIAセマンティクスは、ありません。 ただ、意味は持っており、この意味はARIAによって提供されていないロール, ステート, プロパティで表現され、アクセシビリティAPIを介して支援技術のユーザーに公開されるかもしれません。

作成者が要素に指定できる<script>要素のARIA の役割、状態、およびプロパティの許容範囲は、No role (役割なし) と記されており、作成者は暗黙的なARIAセマンティクスまたはHTML要素のネイティブセマンティクスを上書きしてはならないことを表していす。
また、No aria-* attributes (aria-* 属性はありません) とも記されています。(実際は、No role or aria-* attributesと纏めて記されています。)

つまり、<script>要素の役割はなく、作成者は、ARIA ロール値と aria-* 属性を<script>要素に指定出来ないという事です。

7.レンダリング

  1. script {
  2. display: none;
  3. }

script要素のユーザーエージェントレベルのスタイルシートデフォルトでは、displayプロパティの値は none であり、この要素とその子孫はボックスやテキストシーケンスを生成しません。

動的スクリプトあるいはデータブロックを表すメタデータを記述する為の要素なので、ビジュアルメディアでボックスを生成する様な指定は行わないのが良いでしょう。

  1. <script style="display: block;">
  2. var vsSample = "";
  3. /* <h1>見出し</h1> */
  4. /*
  5. alert("さんぷる");
  6. */
  7. </script>

スクリプトの記述を見えるようにした例です。ビジュアルメディアでボックスを生成するだけで、スクリプトの機能は変わりません。スクリプトのコメントは、スクリプトとしてはコメントとして扱われています。ただ、スクリプトのコメントはHTMLでは関係ないので、そのまま見えます。また、これはテキストとして扱われているので、そこに書かれているHTMLタグはテキスト文字列として扱われ、タグとは扱われません。

とはいえ、script要素終了タグを記述すれば、script要素はそこまでと認識されるので、注意は必要です。デバッグでコメントアウトしようとした時にスクリプトの記述内に-->があった場合も同じです。

8.気を付ける点

記述順

script要素の処理内容によっては、記述の順序に意味がある場合もあります。
たとえば、とあるグローバル変数の更新を扱う場合のタイミングの問題とか。
記述によって、いつ処理するか, 何が対象か, どこまで影響するか などが異なる為、内容を意識しないと配置できません。

出来れば、スクリプト自体をscript要素の配置に影響されない記述にしたいものです。(目的によっては、困難な場合もあるので、やはり内容を意識して配置する必要はあります。)

簡単な転用

script要素は、外部のリソースと関われる訳で、内容に理解, 納得の上で使いましょう。 何より、書き間違えて意図と異なる結果になるとしても、その記述が作成者の意図として扱われる訳ですから。

文字結合

script要素のコンテンツの文字列として --> を扱いたい場合は、-- と > とを別々の文字列として記述して、結合して扱うべきです。通常は文字列として扱われていても <!-- からコメントの終わりを探されている途中に文字列の --> があると文字列として扱われずにコメントの終わりの記述として扱われてしまいます。 あくまで、HTML上で <!-- でコメントが始まり、script要素開始タグもコメント扱いされてスタイル情報もコメント内として扱われる可能性を考慮しての注意点です。状況としては、コメントアウトしたい途中に script要素があるという可能性です。

文字列として </script> を扱いたい場合は、< と /script> とを別々の文字列として記述して、結合して扱うべきです。script要素内の記述は、HTML文書内の記述という事で、タグの解釈が先という事です。

  1. <script>
  2. var lfbEvSample701 = function(){
  3. alert("--" + ">" + " " + "<" + "/script>");
  4. }
  5. </script>
  6. <div onclick="lfbEvSample701();">click</div>

HTML文書でのコメントの終わりを示す --> と、script要素の終わりを示すscript要素終了タグを示す </script> の文字列をスクリプト内で用いる例です。

click