4.12. ~scriptの利用

~scriptにより、作者は,文書に対話性を追加できるようになる。 ◎ Scripts allow authors to add interactivity to their documents.

作者には、可能な所では,~scriptingを代替する宣言的な仕組みを利用することが奨励される — そうした方が保守し易くなることが多く、また,~scriptingを不能化している利用者も多くいる。 ◎ Authors are encouraged to use declarative alternatives to scripting where possible, as declarative mechanisms are often more maintainable, and many users disable scripting.

例えば、~scriptを利用して,ある一節の詳細表示を切り替える代わりに、 `details$e 要素を利用することもできる。 ◎ For example, instead of using script to show or hide a section to show more details, the details element could be used.

作者にはまた、~scripting~supportが不在の下では,自身の~appを上品に退行させることも奨励される。 ◎ Authors are also encouraged to make their applications degrade gracefully in the absence of scripting support.

例えば作者は、~tableの~header内に,~tableを動的に~sortし直すような~linkを提供している場合、~serverに~sort済みの~tableを要請することで,~scriptなしに~linkを機能させることもできる。 ◎ For example, if an author provides a link in a table header to dynamically resort the table, the link could also be made to function without scripts by requesting the sorted table from the server.

【この訳に固有の表記規約】

この訳の,~algoや定義の記述に利用されている各種記号( ~LET, ε, ~IF, ~THROW, 等々)の意味や定義の詳細は、~SYMBOL_DEF_REFを~~参照されたし。

`文書片@ は、 `DocumentFragment$I ~objの略記である。

4.12.1. `script^e 要素

`分類$:
`~metadata内容$ / `~flow内容$ / `句内容$ / `~scriptを~supportする要素$ ◎ Metadata content. ◎ Flow content. ◎ Phrasing content. ◎ Script-supporting element.
`この要素を利用できる文脈$:
`~metadata内容$ / `句内容$ / `~scriptを~supportする要素$ が期待される所。 ◎ Where metadata content is expected. ◎ Where phrasing content is expected. ◎ Where script-supporting elements are expected.
`内容~model$:
`src$a 属性を有さない場合、 `type$a 属性の値にも依存するが,`~script内容~制約$に合致し~MUST。 ◎ If there is no src attribute, depends on the value of the type attribute, but must match script content restrictions.
`src$a 属性を有する場合、要素は空にされているか, または `~script内容~制約$にも合致するような`~script文書化$のみを包含してい~MUST。 ◎ If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.
`text/html における~tag省略$:
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$:
`大域~属性$ ◎ Global attributes
`src$a — 資源の~address ◎ src — Address of the resource
`type$a — ~scriptの種別 ◎ type — Type of script
`nomodule$a — `~module~script$を~supportする~UAにおける実行を防止する ◎ nomodule — Prevents execution in user agents that support module scripts
`async$a — 可用なときは他を阻むことなく,~scriptを実行する ◎ async — Execute script when available, without blocking
`defer$a — ~script実行を先送りする ◎ defer — Defer script execution
`crossorigin$a — 要素が非同一生成元 要請をどう取扱うか ◎ crossorigin — How the element handles crossorigin requests
`nonce$a — Content Security Policy (内容保安施策)検査に利用される暗号用~nonce `CSP$r ◎ nonce — Cryptographic nonce used in Content Security Policy checks [CSP]
`integrity$a — Subresource Integrity(下位資源の完全性)検査に利用される完全性~metadata `SRI$r ◎ integrity — Integrity metadata used in Subresource Integrity checks [SRI]
`~DOM~interface$:
[Exposed=Window,
`HTMLConstructor$]
interface `HTMLScriptElement@I : `HTMLElement$I {
  [`CEReactions$] attribute USVString `src$m;
  [`CEReactions$] attribute DOMString `type$m;
  [`CEReactions$] attribute boolean `noModule$m;
  [`CEReactions$] attribute boolean `async$m;
  [`CEReactions$] attribute boolean `defer$m;
  [`CEReactions$] attribute DOMString? `crossOrigin$m;
  [`CEReactions$] attribute DOMString `text$m;
  [`CEReactions$] attribute DOMString `nonce$m;
  [`CEReactions$] attribute DOMString `integrity$m;
};

`script$e 要素により、作者は,文書~内に[ 動的~script / ~data~block ]を含ませることが可能になる。 この要素は、利用者~向けの内容は`表現-$しない。 ◎ The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user.

`type@a 属性は、表現される~script種別を~custom化できるようにする: ◎ The type attribute allows customization of the type of script represented:

  • この属性を省略した場合, あるいは `~ASCII大小無視$で[ 空~文字列 / `~JS~MIME型$ ]に合致するものに設定した場合、当の~scriptは`~classic~script$であるとされ,~JSの `Script$P ~top-level生成規則に則って解釈されることになる。 ~classic~scriptは、[ `async$a, `defer$a ]属性に影響される。 この属性を設定するのは冗長であり、作者は,代わりに省略するべきである。 ◎ Omitting the attribute, setting it to the empty string, or setting it to an ASCII case-insensitive match for a JavaScript MIME type, means that the script is a classic script, to be interpreted according to the JavaScript Script top-level production. Classic scripts are affected by the async and defer attributes. Authors should omit the attribute instead of redundantly setting it.
  • この属性~値を[ `~ASCII大小無視$で `module^l に合致する文字列 ]に設定した場合、当の~scriptは`~module~script$であるとされ,~JSの `Module$P ~top-level生成規則に則って解釈されることになる。 ~module~scriptには、 `defer$a 属性は影響しない。 ◎ Setting the attribute to an ASCII case-insensitive match for the string "module" means that the script is a module script, to be interpreted according to the JavaScript Module top-level production. Module scripts are not affected by the defer attribute.
  • この属性~値を他の値に設定した場合、~scriptは `~data~block@ であるとされ,処理されなくなる。 どの `script$e 属性も,~data~blockに効果を及ぼすことはない( `type$a 自身は除いて)。 作者は、~data~blockを~~指示するときは,`~JS~MIME型$でない`妥当な~MIME型$を利用し~MUST。 ◎ Setting the attribute to any other value means that the script is a data block, which is not processed. None of the script attributes (except type itself) have any effect on data blocks. Authors must use a valid MIME type that is not a JavaScript MIME type to denote data blocks.

注記: `~data~block$に,`妥当な~MIME型$を利用し~MUSTとする要件は、将来に起こり得る衝突を避けるためにある。 さもなければ、この仕様が,いつか `script$e に対する追加の種別を追加した場合に、それらが — 値 `module^l が`~module~script$を~~指示するのと同様に — 何かを誘発し得ることになる。 今,妥当な~MIME型を利用しておけば、~data~blockは,将来の~UAからも何か別の~script種別に解釈し直されないことを確保できる。 ◎ The requirement that data blocks must be denoted using a valid MIME type is in place to avoid potential future collisions. If this specification ever adds additional types of script, they will be triggered by setting the type attribute to something which is not a MIME type, like how the "module" value denotes module scripts. By using a valid MIME type now, you ensure that your data block will not ever be reinterpreted as a different script type, even in future user agents.

[ `~classic~script$, `~module~script$ ]のいずれも、~inlineに埋込める。 あるいは、 `src@a 属性を指定して,外部~fileから取込める。 この `src$a 属性~値は、利用する外部~script資源の`~URL$を与える — その値は、`前後~空白~可の妥当かつ空でない~URL$で~MUST。 [ ~inline `script$e 要素 / 外部~script資源 ]の内容は、~JS仕様 `JAVASCRIPT$r の[ `Script$P ( `~classic~script$の場合)/ `Module$P ( `~module~script$の場合) ]生成規則による要件に適合し~MUST。 ◎ Classic scripts and module scripts may either be embedded inline or may be imported from an external file using the src attribute, which if specified gives the URL of the external script resource to use. If src is specified, it must be a valid non-empty URL potentially surrounded by spaces. The contents of inline script elements, or the external script resource, must conform with the requirements of the JavaScript specification's Script or Module productions, for classic scripts and module scripts respectively. [JAVASCRIPT]

`script$e 要素を,`~data~block$を含ませるために利用する場合: ◎ When used to include data blocks,\

  • ~dataは、~inlineに埋込まれてい~MUST。 ◎ the data must be embedded inline,\
  • `type$a 属性を利用して,~dataの形式も与えられ~MUST。 ◎ the format of the data must be given using the type attribute, and\
  • 要素の内容は、利用される形式に定義される要件に適合してい~MUST。 ◎ the contents of the script element must conform to the requirements defined for the format used.\
  • 次に挙げる属性は、要素に指定されては~MUST_NOT ⇒ `src$a, `async$a, `nomodule$a, `defer$a, `crossorigin$a, `nonce$a, `integrity$a ◎ The src, async, nomodule, defer, crossorigin, nonce and integrity attributes must not be specified.

`nomodule@a 属性は,`真偽~属性$であり、`~module~script$を~supportする~UAにおいて~scriptが実行されるのを防止する。 これにより、 下の例に示すように,[ 現今の~UAには`~module~script$, 旧-~UAには`~classic~script$ ]を選択的に実行させれるようになる。 `nomodule$a 属性は、`~module~script$上に指定されては~MUST_NOT(また,指定されても無視される)。 ◎ The nomodule attribute is a boolean attribute that prevents a script from being executed in user agents that support module scripts. This allows selective execution of module scripts in modern user agents and classic scripts in older user agents, as shown below. The nomodule attribute must not be specified on module scripts (and will be ignored if it is).

`async@a / `defer@a 属性は,`真偽~属性$であり、当の~scriptがどう評価されるべきかを指示する。 `~classic~script$に対しては,[ `defer$a / `async$a ]属性を指定できる。 `~module~script$に対しては, `async$a 属性を指定できる。 [ `async$a / `defer$a ]属性は、要素が `src$a 属性を有さない場合には,指定されては~MUST_NOT。 ◎ The async and defer attributes are boolean attributes that indicate how the script should be evaluated. Classic scripts may specify defer or async; module scripts may specify async. The defer and async attributes must not be specified if the src attribute is not present.

これらの属性を利用して,選択され得る/できる~modeには、~script種別に依存して,いくつかのものがある: ◎ There are several possible modes that can be selected using these attributes, and depending on the script's type.

  • `~classic~script$に対しては: ◎ For classic scripts,\

    • 要素は `async$a 属性を有する場合: ~scriptは,頁の構文解析と`並列的$に~fetchされ、可用になり次第,評価されることになる(構文解析が完了する前にもなり得る)。 ◎ if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes).\
    • 要素は `async$a 属性を有さないが, `defer$a 属性は有する場合: ~scriptは`並列的$に~fetchされ,頁が構文解析を終えた時点で評価される。 ◎ If the async attribute is not present but the defer attribute is present, then the classic script will be fetched in parallel and evaluated when the page has finished parsing.\
    • 要素は両~属性とも有さない場合: ~scriptは,即時に~fetchされた上で評価され、両者とも完了するまで頁の構文解析を阻むことになる。 ◎ If neither attribute is present, then the script is fetched and evaluated immediately, blocking parsing until these are both complete.
  • `~module~script$に対しては: ◎ For module scripts,\

    • 要素は `async$a 属性を有する場合: ~scriptとそのすべての依存物 【~scriptが取込む他の~script】 は,頁の構文解析と`並列的$に~fetchされ、可用になり次第,評価されることになる(構文解析が完了する前にもなり得る)。 ◎ if the async attribute is present, then the module script and all its dependencies will be fetched in parallel to parsing, and the module script will be evaluated as soon as it is available (potentially before parsing completes).\
    • 他の場合: ~scriptとその依存物は,構文解析と`並列的$に~fetchされ、頁が構文解析を終えた時点で評価されることになる。 ◎ Otherwise, the module script and its dependencies will be fetched in parallel to parsing and evaluated when the page has finished parsing.\
    • ( `defer$a 属性の効果は、~module~scriptには及ばない。) ◎ (The defer attribute has no effect on module scripts.)

これらすべては、次の図式に要約される: ◎ This is all summarized in the following schematic diagram:

単に `<script>^s と記した場合、構文解析は~fetchingと実行により中断される。 `<script defer>^s とした場合、構文解析と並列的に~fetchされ,すべての構文解析を終えた後に実行されることになる。 `<script async>^s とした場合、~fetchingは構文解析と並列的になるが,構文解析は~scriptの実行により中断される。 `<script type="module">^s とした場合、 `<script defer>^s とした場合と同様になるが,依存物も~fetchされる。 `<script type="module" async>^s とした場合、依存物の~fetchingを伴うことを除いて, `<script async>^s とした場合と同様になる。 ◎ With <script>, parsing is interrupted by fetching and execution. With <script defer>, fetching is parallel to parsing and execution takes place after all parsing has finished. And with <script async>, fetching is parallel to parsing but once it finishes parsing is interrupted to execute the script. The story for <script type=&quot;module&quot;> is similar to <script defer>, but the dependencies will be fetched as well, and the story for <script type=&quot;module&quot; async> is similar to <script async> with the extra dependency fetching.

注記: これらの属性に対する正確な処理の詳細のほとんどは、歴史的~理由によるものであり、自明でない部分もある,~HTMLのいくつもの側面が孕まれている。 したがって,実装の要件は、この仕様~全体に散らばらざるを得なくなっている。 (この節の)下に示す各種~algoは,この処理の中核を述べるが、それらの~algoと, 次に挙げるもの等々とは,相互に参照し合う:

◎ The exact processing details for these attributes are, for mostly historical reasons, somewhat non-trivial, involving a number of aspects of HTML. The implementation requirements are therefore by necessity scattered throughout the specification. The algorithms below (in this section) describe the core of this processing, but these algorithms reference and are referenced by the parsing rules for script start and end tags in HTML, in foreign content, and in XML, the rules for the document.write() method, the handling of scripting, etc.

`async$a 属性が指定されている下でも, `defer$a 属性が指定されて~MAY — そうすることで、[ `defer$a は~supportするが `async$a は~supportしないような,旧来の~Web~browser ]においても、既定の他を阻む挙動に代わって, `defer$a による挙動に~fall-backするようになる。 ◎ The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the blocking behavior that is the default.

`crossorigin@a 属性は、`~CORS設定群~属性$である。 この属性は、`~classic~script$に対しては,[ 他の`生成元$から得られた~scriptによる~error情報が公開されるかどうか ]を制御し、`~module~script$に対しては,[ 非同一生成元 要請に利用される`資格証~mode$ ]を制御する。 ◎ The crossorigin attribute is a CORS settings attribute. For classic scripts, it controls whether error information will be exposed, when the script is obtained from other origins. For module scripts, it controls the credentials mode used for cross-origin requests.

注記: `~classic~script$と違って,`~module~script$では、非同一生成元への~fetchingに際し,`~CORS~protocol$の利用が要求される。 ◎ Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching.

`nonce@a 属性は、暗号用~nonce( “nonce = number used once” 【使い捨ての番号】 )を表現する — それは、要素により指定される~scriptを 実行するかどうかを決定するために, Content Security Policy から利用され得る。 値は~textである。 `CSP$r ◎ The nonce attribute represents a cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or not the script specified by an element will be executed. The value is text. [CSP]

`integrity@a 属性は、[ この要素が担当する要請 ]の`完全性~metadata$rqを表現する。 値は~textである。 この属性は、[ `~module~script$を埋込むとき / `src$a 属性も指定されていない場合 ]には,指定されては~MUST_NOT。 `SRI$r ◎ The integrity attribute represents the integrity metadata for requests which this element is responsible for. The value is text. The integrity attribute must not be specified when embedding a module script or when the src attribute is not specified. [SRI]

[ `src$a/`type$a/`nomodule$a/`async$a/`defer$a/`crossorigin$a/`nonce$a/`integrity$a ]内容~属性を動的に変更しても,直接的な効果はない。 これらの属性は、下に述べる特定の時点にのみ利用される。 ◎ Changing the src, type, nomodule, async, defer, crossorigin, nonce, and integrity attributes dynamically has no direct effect; these attributes are only used at specific times described below.

`src@m
`type@m
`defer@m
`integrity@m
`nonce@m
これらは それぞれ、対応する同じ名前の内容~属性を`反映-$し~MUST。 ◎ The IDL attributes src, type, defer, integrity, and nonce, must each reflect the respective content attributes of the same name.
`crossOrigin@m
`既知の値のみに制限され$る下で, `crossorigin$a 内容~属性を`反映-$し~MUST。 ◎ The crossOrigin IDL attribute must reflect the crossorigin content attribute, limited to only known values.
`noModule@m
`nomodule$a 内容~属性を`反映-$し~MUST。 ◎ The noModule IDL attribute must reflect the nomodule content attribute.
`async@m
この~IDL属性は、要素が非同期に実行されるかどうかを制御する。 ◎ The async IDL attribute controls whether the element will execute asynchronously or not.\

[ 此れの`阻まず~flag$ ~EQ ~ON ]の下では: ◎ If the element's "non-blocking" flag is set, then,\

  • 取得子は、 ~T を返さ~MUST。 ◎ on getting, the async IDL attribute must return true, and\
  • 設定子は、次を走らせ~MUST:

    1. 此れの`阻まず~flag$ ~SET ~OFF
    2. ~IF[ 所与の値 ~EQ ~F ] ⇒ 此れの `async$a 内容~属性を除去する
    3. ~ELSE ⇒ 此れの `async$a 内容~属性 ~SET 空~文字列
    ◎ on setting, the "non-blocking" flag must first be unset, and then the content attribute must be removed if the IDL attribute's new value is false, and must be set to the empty string if the IDL attribute's new value is true.\
[ 此れの`阻まず~flag$ ~EQ ~OFF ]の下では、 `async$a 内容~属性を`反映-$し~MUST。 ◎ If the element's "non-blocking" flag is not set, the IDL attribute must reflect the async content attribute.
%script . `text$m [ = %value ]
要素の`子~text内容$を返す。 ◎ Returns the child text content of the element.
設定して,要素の子たちを所与の値に置換できる。 ◎ Can be set, to replace the element's children with the given value.
`text@m
取得子は、此れの`子~text内容$を返さ~MUST。 ◎ The IDL attribute text must return the child text content of the script element.\
設定子は、此れの `textContent$m ~IDL属性と同じ仕方で動作し~MUST。 ◎ On setting, it must act the same way as the textContent IDL attribute.

注記: `document.write()$m ~methodを利用して挿入された `script$e 要素は、 通例的には 実行される(概して,その間は、更なる~script実行や~HTML構文解析は,阻まれる)。[ `innerHTML$m / `outerHTML$m ]属性を利用して挿入されたものは、全く実行されない。 ◎ When inserted using the document.write() method, script elements usually execute (typically blocking further script execution or HTML parsing). When inserted using the innerHTML and outerHTML attributes, they do not execute at all.

次の例には、 2 個の `script$e 要素 — 外部`~classic~script$を埋込むもの, および `~data~block$として何らかの~dataを含むもの — が利用されている。 ◎ In this example, two script elements are used. One embeds an external classic script, and the other includes some data as a data block.

<script src="game-engine.js"></script>
<script type="text/x-game-map">
........U.........e
o............A....e
.....A.....AAA....e
.A..AAA...AAAAA...e
</script>

この事例における~dataは、その~scriptにより,~video~gameの~mapを生成するために利用されているであろう — が、この仕方で利用する必要があるわけではない: 実際の~map~dataは頁の他所に埋込まれていて、この~data~blockは,単に利用者が ~game~mapの特定0の特色機能を探し易くするためとして,~siteの検索engine向けに~~用意されたものかもしれない。 ◎ The data in this case might be used by the script to generate the map of a video game. The data doesn't have to be used that way, though; maybe the map data is actually embedded in other parts of the page's markup, and the data block here is just used by the site's search engine to help users who are looking for particular features in their game maps.

次の見本に、 `script$e 要素を利用して、文書の他所から利用される関数を `~classic~script$の一部として定義する方法を示す。 同時に,別の `script$e 要素を利用して、文書が構文解析されている間に~scriptを呼出す方法も示す — この事例では、~formの出力を初期化する。 ◎ The following sample shows how a script element can be used to define a function that is then used by other parts of the document, as part of a classic script. It also shows how a script element can be used to invoke script while the document is being parsed, in this case to initialize the form's output.

<script>
 function calculate(%form) {
   var %price = 832000;
   if (%form.elements.brakes.checked)
     %price += 160000;
   if (%form.elements.radio.checked)
     %price += 400000;
   if (%form.elements.turbo.checked)
     %price += 800000;
   if (%form.elements.sticker.checked)
     %price += 40000;
   %form.elements.result.value = %price;
 }
</script>
<form
   name="pricecalc"
   onsubmit="return false"
   onchange="calculate(this)"
>
 <fieldset>
  <legend>車体価格を再計算する</legend>
  <p>基本価格:83 万 2000 円</p>
  <p>~~追加オプション:</p>
  <ul>
   <li><label><input type=checkbox name=brakes>
      セラミックブレーキ( 16 万円)</label></li>
   <li><label><input type=checkbox name=radio>
      衛星ラジオ( 40 万円)</label></li>
   <li><label><input type=checkbox name=turbo>
      ターボチャージャー( 80 万円)</label></li>
   <li><label><input type=checkbox name=sticker>
      "XZ" ステッカー( 4 万円)</label></li>
  </ul>
  <p>合計価格: <output name=result></output> 円</p>
 </fieldset>
 <script>
  calculate(document.forms.pricecalc);
 </script>
</form>

次の見本では、 `script$e 要素を利用して,外部`~module~script$を含ませる方法を示す。 ◎ The following sample shows how a script element can be used to include an external module script.

<script type="module" src="app.js"></script>

この~module, およびそのすべての依存物(~source~file内の ~JS `import^c 文を通して表される)は、~fetchされることになる。 結果の~module~graph全体が取込まれ,文書が構文解析を終えたなら、 `app.js^s の内容は評価されることになる。 ◎ This module, and all its dependencies (expressed through JavaScript import statements in the source file), will be fetched. Once the entire resulting module graph has been imported, and the document has finished parsing, the contents of app.js will be evaluated.

加えて,同じ `Window$I 内の別の `script$e 要素からの~codeが `app.js^s からの~moduleを取込む場合(例: `import "./app.js";^s を介して)、前者の `script$e 要素により作成された同じ`~module~script$が取込まれることになる。 ◎ Additionally, if code from another script element in the same Window imports the module from app.js (e.g. via import "./app.js";), then the same module script created by the former script element will be imported.

現今の~UA用には`~module~script$, 旧-~UA用には`~classic~script$を含ませる例を示す: ◎ This example shows how to include a module script for modern user agents, and a classic script for older user agents:

<script type="module" src="app.js"></script>
<script nomodule src="classic-app-bundle.js"></script>

`~module~script$を~supportする現今の~UAでは、前者の `script$e 要素( `type$a 属性は `module^l )は,~fetchされた上で (`~module~script$として)評価される一方で、後者の `script$e 要素( `nomodule$a 属性を有する)は無視されることになる。 逆に,旧-~UAにとっては、前者は,未知の~script型なので無視することになる — が、 `nomodule$a 属性は実装していないので,後者を(`~classic~script$として)~fetchして評価することには問題はない。 ◎ In modern user agents that support module scripts, the script element with the nomodule attribute will be ignored, and the script element with a type of "module" will be fetched and evaluated (as a module script). Conversely, older user agents will ignore the script element with a type of "module", as that is an unknown script type for them — but they will have no problem fetching and evaluating the other script element (as a classic script), since they do not implement the nomodule attribute.

次の見本に、`script$e 要素を利用して、(例えば,ニュースサイト上の)文書~内の~textを曖昧な読み物に置換えてしまうような,~inline `~module~script$を書く方法を示す: ◎ The following sample shows how a script element can be used to write an inline module script that performs a number of substitutions on the document's text, in order to make for a more interesting reading experience (e.g. on a news site): [XKCD1288]

<script type="module">
 import { walkAllTextNodeDescendants } from "./dom-utils.js";

 function substitute(%textNode) {
   %textNode.data = %textNode.data.replace( /。/g, "っぽい。" );
 }

 walkAllTextNodeDescendants(document.body, %substitute);
</script>

~module~scriptを利用して得られる特色機能のうち,注目すべきものには、次が挙げられる:

  • 他の~JS~moduleから関数を取込む能。
  • 既定で~strict~modeになる。
  • ~top-level宣言であっても,`大域~obj$上に新たな~propを導入しない。
◎ Some notable features gained by using a module script include the ability to import functions from other JavaScript modules, strict mode by default, and how top-level declarations do not introduce new properties onto the global object.\

また,この `script$e 要素が文書~内のどこに現れようが、[ 文書~構文解析が完了して,なおかつ その依存物(この例では `dom-utils.js^s )が~fetchされ, 評価される ]までは,評価されないことに注意。 ◎ Also note that no matter where this script element appears in the document, it will not be evaluated until both document parsing has complete and its dependency (dom-utils.js) has been fetched and evaluated.

4.12.1.1. 処理~model

`script$e 要素には、その各種 状態を~~保持するものとして,次に挙げるものが結付けられる — 初期~時には、それぞれ,括弧内に示される値にされ~MUST: ◎ A script element has several associated pieces of state.

`開始済み~flag@ ( ~OFF )
この~flagは、~script~blockの実行は,すでに開始されたかどうかを指示する。 (~script~blockの作成-時には “開始済み” でない)。 [ `script$e 要素に対する`~clone時の手続き$から得られる複製 ]の`開始済み~flag$は、~clone元の要素のそれを引き継が~MUST。 ◎ The first is a flag indicating whether or not the script block has been "already started". Initially, script elements must have this flag unset (script blocks, when created, are not "already started"). The cloning steps for script elements must set the "already started" flag on the copy if it is set on the element being cloned.
`解析器挿入~flag@ ( ~OFF )
この~flagは、[ 要素は,構文解析器により挿入されたものである ]かどうかを指示する。 この~flagは、[ `~HTML構文解析器$ / `~XML構文解析器$ ]が挿入する `script$e 要素に対しては ~ON にされ,そのような要素の処理に影響する。 ◎ The second is a flag indicating whether the element was "parser-inserted". Initially, script elements must have this flag unset. It is set by the HTML parser and the XML parser on script elements they insert and affects the processing of those elements.
`阻まず~flag@ ( ~ON )
この~flagは、要素が, “互いに他を阻まない” ようになるかどうかを指示する。 [ `~HTML構文解析器$ / `~XML構文解析器$ ]は、自身が挿入する `script$e 要素に対し,この~flagを ~OFF にする。 加えて、この~flagが ~ON にされた `script$e 要素に `async$a 内容~属性が追加されたときは、その要素の`阻まず~flag$も~OFFにされ~MUST。 ◎ The third is a flag indicating whether the element will be "non-blocking". Initially, script elements must have this flag set. It is unset by the HTML parser and the XML parser on script elements they insert. In addition, whenever a script element whose "non-blocking" flag is set has an async content attribute added, the element's "non-blocking" flag must be unset.
【 “阻まず( non-blocking )” 何が何を阻まないかが,多義的で、曖昧な用語でもある。 { 当の~scriptの~fetching, 当の~scriptの実行ing } と { 頁の構文解析, 他の資源の~fetching, 他の~scriptの実行ing } との間で種々の組み合わせが考えられる。 】
`解析器実行準備済み~flag@ ( ~OFF )
この~flagは、[ 構文解析器により,~script~blockを実行する用意が整った ]かどうかを指示する。 (~script~blockの作成-時には、 “実行する用意は整って” いない)。 この~flagは,構文解析器が当の~scriptをいつ実行するか知れるようにするためにあり、[ `解析器挿入~flag$ ~EQ ~ON ]でもあるような要素に対してのみ,利用される。 ◎ The fourth is a flag indicating whether or not the script block is "ready to be parser-executed". Initially, script elements must have this flag unset (script blocks, when created, are not "ready to be parser-executed"). This flag is used only for elements that are also "parser-inserted", to let the parser know when to execute the script.
`~script種別@
`classic^l / `module^l のいずれか。 これは、`~scriptを準備する$ときに,要素の `type$a 属性に基づいて決定される。 ◎ The fifth is the script's type, which is either "classic" or "module". It is determined when the script is prepared, based on the type attribute of the element at that time.
`外部~file~flag@
この~flagは、~scriptが外部~fileからのものかどうかを指示する。 この~flagは、`~scriptを準備する$ときに,要素の `src$a 属性に基づいて決定される。 ◎ The sixth is a flag indicating whether or not the script is from an external file. It is determined when the script is prepared, based on the src attribute of the element at that time.
`~script@
`script$e 要素を`準備-$した結果の`~script$x。 これは、[ `~classic~script$/~module~graph ]が非同期に~fetchされた後に,それが[ 成功した場合は `~script$x / 失敗した場合は ~NULL ]に設定される。 その時点で、 `script^e は,~fetching~algoにより `準備済み@ にされ、他の動作を誘発し得ることになる。 ~UAは、 `script^e 要素が`準備済み$になるまで,その`~node文書$の`~load~eventを遅延-$し~MUST。 ◎ Finally, a script element has the script's script, which is a script resulting from preparing the element. This is set asynchronously after the classic script or module graph is fetched. Once it is set, either to a script in the case of success or to null in the case of failure, the fetching algorithms will note that the script is ready, which can trigger other actions. The user agent must delay the load event of the element's node document until the script is ready.
【 原文では “script's script” ( ~scriptの~script (おそらく, “`script$e 要素の`~script$x” の意)として定義されているが、表記~上の都合により,ここでは単に “〜の~script” と表記する( “〜” には常に,ある `script^e 要素が記される)。 】

[ `解析器挿入~flag$ ~EQ ~OFF ]なる `script$e 要素 %S に対しては、次に挙げるいずれかが生じたときは,~UAは `即時$に %S を`準備-$し~MUST: ◎ When a script element that is not marked as being "parser-inserted" experiences one of the events listed in the following list, the user agent must immediately prepare the script element:

  • %S が`接続され$た時点。 ◎ The script element becomes connected.
  • %S は`接続されて$いる下で、 %S の中に,何らかの~nodeか`文書片$が`挿入され$nodeた時点。 ただし,他の `script$e 要素が同時に`挿入され$nodeた場合は、それらより後の時点とする。 ◎ The script element is connected and a node or document fragment is inserted into the script element, after any script elements inserted at that time.
  • %S は`接続されて$いる, かつ %S は `src$a 属性を有していない下で、その属性が %S 上に設定された時点。 ◎ The script element is connected and has a src attribute set where previously the element had no such attribute.

`~scriptを準備する@ ときは、~UAは次に従って動作し~MUST: ◎ To prepare a script, the user agent must act as follows:

  1. 各種 変数:

    1. %S ~LET 当の `script$e 要素
    2. %文書 ~LET %S の`~node文書$
    3. `async@V ~LET [ %S は `async$a 属性を有するならば ~T / ~ELSE_ ~F ]
    4. `src@V ~LET [ %S は `src$a 属性を有するならば その値 / ~ELSE_ ε ]
    ◎ ↓
  2. ~IF[ %S の`開始済み~flag$ ~EQ ~ON ] ⇒ ~RET — ~scriptは実行されない ◎ If the script element is marked as having "already started", then return. The script is not executed.
  3. %構文解析器により挿入された ~LET ~F ◎ ↓
  4. ~IF[ %S の`解析器挿入~flag$ ~EQ ~ON ]:

    1. %構文解析器により挿入された ~SET ~T
    2. %S の`解析器挿入~flag$ ~SET ~OFF
    ◎ If the element has its "parser-inserted" flag set, then set was-parser-inserted to true and unset the element's "parser-inserted" flag. Otherwise, set was-parser-inserted to false.

    注記: この段は、[ 構文解析器が[ `解析器挿入~flag$が ~ON にされている `script$e 要素 ]を走らせようと試行して失敗した場合(例: 空あるいは, 未~supportの~scripting言語を指定していた) ]に,後で[ 別の~scriptがそれを変異させて再度~走らす ]ことを可能にするために行われる。 ◎ This is done so that if parser-inserted script elements fail to run when the parser tries to run them, e.g. because they are empty or specify an unsupported scripting language, another script can later mutate them and cause them to run again.

  5. ~IF[ %構文解析器により挿入された ~EQ ~T ]~AND[ `async$V ~EQ ~F ] ⇒ %S の`阻まず~flag$ ~SET ~ON ◎ If was-parser-inserted is true and the element does not have an async attribute, then set the element's "non-blocking" flag to true.

    注記: この段は、[ 構文解析器が[ `解析器挿入~flag$が ~ON にされている `script$e 要素 ]を走らせようと試行して失敗したが、他の~scriptが動的にそれを更新した後に,後で実行された場合 ]に、[ `async$a 属性が設定されていなくとも, “互いに他を阻まない” ように実行されるようにする ]ために行われる。 ◎ This is done so that if a parser-inserted script element fails to run when the parser tries to run it, but it is later executed after a script dynamically updates it, it will execute in a non-blocking fashion even if the async attribute isn't set.

  6. ~IF[ `src$V ~EQ ε ]~AND[ %S の どの子~nodeも[ ~comment~nodeか 空 `Text$I ~node ]である ] ⇒ ~RET — ~scriptは実行されない。 ◎ If the element has no src attribute, and its child nodes, if any, consist only of comment nodes and empty Text nodes, then abort these steps at this point. The script is not executed.
  7. ~IF[ %S は `接続されて$いない ] ⇒ ~RET — ~scriptは実行されない。 ◎ If the element is not connected, then return. The script is not executed.
  8. %~script~block種別~文字列 ~LET 次に与える[ %種別, %言語 ]が満たす条件に応じて、下の表の右端列に与えられる値:

    • %種別 ~LET[ %S は `type$a 属性を有するならば その値 / ~ELSE_ ε ]
    • %言語 ~LET[ %S は `language$a 属性を有するならば その値 / ~ELSE_ ε ]
    %種別 %言語 %~script~block種別~文字列
    ε ε または 空~文字列 `text/javascript^l
    ε 空でない文字列 [ `text/^l, %言語 ]を連結した結果
    空~文字列 任意 `text/javascript^l
    空でない文字列 任意 `前後の~ASCII空白~列を剥ぐ$( %種別 )
    ◎ If either: • the script element has a type attribute and its value is the empty string, or • the script element has no type attribute but it has a language attribute and that attribute's value is the empty string, or • the script element has neither a type attribute nor a language attribute, then ...let the script block's type string for this script element be "text/javascript". Otherwise, if the script element has a type attribute, let the script block's type string for this script element be the value of that attribute with leading and trailing ASCII whitespace stripped. Otherwise, the element has a non-empty language attribute; let the script block's type string for this script element be the concatenation of the string "text/" followed by the value of the language attribute.

    注記: `language$a 属性は、決して適合せず, `type$a 属性が在るときは常に無視される。 ◎ The language attribute is never conforming, and is always ignored if there is a type attribute present.

  9. %~script~block種別~文字列 を`~ASCII小文字~化$した結果に応じて: ◎ Determine the script's type as follows:

    `~JS~MIME型$
    %S の`~script種別$ ~SET `classic^l ◎ If the script block's type string is an ASCII case-insensitive match for any JavaScript MIME type, the script's type is "classic".
    `module^l
    %S の`~script種別$ ~SET `module^l ◎ If the script block's type string is an ASCII case-insensitive match for the string "module", the script's type is "module".
    その他
    ~RET — 実行される~scriptはない。 ◎ If neither of the above conditions are true, then return. No script is executed.
  10. ~IF[ `構文解析器により挿入された^V ~EQ ~T ] ⇒# %S の`解析器挿入~flag$ ~SET ~ON, %S の`阻まず~flag$ ~SET ~OFF ◎ If was-parser-inserted is true, then flag the element as "parser-inserted" again, and set the element's "non-blocking" flag to false.

  11. %S の`開始済み~flag$ ~SET ~ON ◎ Set the element's "already started" flag.
  12. %構文解析器 ~LET %S を作成した構文解析器 ◎ ↓
  13. %解析器~文書 ~LET %構文解析器 の`文書$ ◎ ↓
  14. ~IF[ %S の`解析器挿入~flag$ ~EQ ~ON ]~AND[ %文書 ~NEQ %解析器~文書 ] ⇒ ~RET ◎ If the element is flagged as "parser-inserted", but the element's node document is not the Document of the parser that created the element, then return.

  15. ~IF[ %S に対する`~scriptingは不能化されて$いる ] ⇒ ~RET — ~scriptは実行されない。 ◎ If scripting is disabled for the script element, then return. The script is not executed.

    注記: `~scriptingは不能化されて$いる,の定義により、次に該当する~scriptは,実行されない:

    • `XMLHttpRequest$I の `responseXML$m 文書~内の~script。 `XHR$r
    • `DOMParser$I が作成した文書~内の~script。 `DOMPARSING$r
    • `XSLTProcessor$I の `transformToDocument()$m 特色機能により作成された文書~内の~script。 `XSLTP$r
    • [ `createDocument()$m ~APIを利用して作成された`文書$ ]の中に,ある~scriptにより先ず挿入された~script。 `DOM$r
    ◎ The definition of scripting is disabled means that, amongst others, the following scripts will not execute: scripts in XMLHttpRequest's responseXML documents, scripts in DOMParser-created documents, scripts in documents created by XSLTProcessor's transformToDocument feature, and scripts that are first inserted by a script into a Document that was created using the createDocument() API. [XHR] [DOMPARSING] [XSLTP] [DOM]
  16. ~IF[ %S は `nomodule$a 内容~属性を有する ]~AND[ %S の`~script種別$ ~EQ `classic^l ] ⇒ ~RET — ~scriptは実行されない。 ◎ If the script element has a nomodule content attribute and the script's type is "classic", then return. The script is not executed.

    これは、`~module~script$に対し `nomodule$a を指定しても効果はなく,~algoはそのまま継続されることを意味する。 ◎ This means specifying nomodule on a module script has no effect; the algorithm continues onward.

  17. ~IF[ `src$V ~EQ ε ] ⇒ ~IF[ ( %S , `script^l , %S の`子~text内容$ ) を与える下で, `要素における~inline型の挙動は~CSPにより阻止されるべきか?$ `CSP$r を実行した結果 ~EQ `阻止ed^i ] ⇒ ~RET — ~scriptは実行されない。 ◎ If the script element does not have a src content attribute, and the Should element's inline behavior be blocked by Content Security Policy? algorithm returns "Blocked" when executed upon the script element, "script", and the script element's child text content, then return. The script is not executed. [CSP]
  18. ~IF[ %S は `event$a 属性を有する ]~AND[ %S は `for$a 属性を有する ]~AND[ %S の`~script種別$ ~EQ `classic^l ]: ◎ If the script element has an event attribute and a for attribute, and the script's type is "classic", then:

    1. ( %for, %event ) ~LET ( %S の `for$a 属性の値に次を順に適用した結果, %S の `event$a 属性の値に次を順に適用した結果 ) ⇒# `前後の~ASCII空白~列を剥ぐ$; その結果を`~ASCII小文字~化$する ◎ Let for be the value of the for attribute. ◎ Let event be the value of the event attribute. ◎ Strip leading and trailing ASCII whitespace from event and for.
    2. ~IF[ %for ~NEQ `window^l ] ⇒ ~RET — ~scriptは実行されない。 ◎ If for is not an ASCII case-insensitive match for the string "window", then return. The script is not executed.
    3. ~IF[ %event ~NIN { `onload^l, `onload()^l } ] ⇒ ~RET — ~scriptは実行されない。 ◎ If event is not an ASCII case-insensitive match for either the string "onload" or the string "onload()", then return. The script is not executed.
  19. %符号化方式 ~LET [[ %S は `charset$a 属性を有していて[ `~labelから符号化方式を取得する$( その属性~値 ) の結果 ~NEQ `失敗^i ]]ならば その結果 / ~ELSE_ %文書 の`符号化方式$doc ] ◎ If the script element has a charset attribute, then let encoding be the result of getting an encoding from the value of the charset attribute. ◎ If the script element does not have a charset attribute, or if getting an encoding failed, let encoding be the same as the encoding of the script element's node document.

    注記: [ %S の`~script種別$ ~EQ `module^l ]の場合、この符号化方式は無視されることになる。 ◎ If the script's type is "module", this encoding will be ignored.

  20. %~CORS設定 ~LET %S の `crossorigin$a 内容~属性の現在の状態 ◎ Let CORS setting be the current state of the element's crossorigin content attribute.
  21. %~module~script資格証~mode ~LET %~CORS設定 に応じて ⇒# `No CORS$st ならば `omit^l / `Anonymous$st ならば `same-origin^l / `Use Credentials$st ならば `include^l ◎ Let module script credentials mode be determined by switching on CORS setting: ◎ No CORS ◎ • "omit" ◎ Anonymous ◎ • "same-origin" ◎ Use Credentials ◎ • "include"
  22. %暗号用~nonce ~LET [ %S は `nonce$a 属性を有するならば その値 / ~ELSE_ 空~文字列 ] ◎ If the script element has a nonce attribute, then let cryptographic nonce be that attribute's value. ◎ Otherwise, let cryptographic nonce be the empty string.
  23. %完全性~metadata ~LET [ %S は `integrity$a 属性を有するならば その値 / ~ELSE_ 空~文字列 ] ◎ If the script element has an integrity attribute, then let integrity metadata be that attribute's value. ◎ Otherwise, let integrity metadata be the empty string.
  24. %構文解析器~metadata ~LET %S の`解析器挿入~flag$に応じて ⇒# ~ON ならば `parser-inserted^l / ~OFF ならば `not-parser-inserted^l ◎ Let parser metadata be "parser-inserted" if the script element has been flagged as "parser-inserted", and "not-parser-inserted" otherwise.
  25. %~options ~LET 次のようにされた`~script~fetch~options$ ⇒# `暗号用~nonce$sfO ~SET %暗号用~nonce, `完全性~metadata$sfO ~SET %完全性~metadata, `構文解析器~metadata$sfO ~SET %構文解析器~metadata, `資格証~mode$sfO ~SET %~module~script資格証~mode ◎ Let options be a script fetch options whose cryptographic nonce is cryptographic nonce, integrity metadata is integrity metadata, parser metadata is parser metadata, and credentials mode is module script credentials mode.
  26. %設定群~obj ~LET %文書 の `Window$I ~objの`環境~設定群~obj$ ◎ Let settings object be the element's node document's Window object's environment settings object.
  27. ~IF[ `src$V ~NEQ ε ]: ◎ If the element has a src content attribute, then:

    1. ~IF[ `src$V ~EQ 空~文字列 ]:

      1. 次を走らす`~taskを~queueする$ ⇒ %S に向けて,名前 `error$et の`~eventを発火-$する
      2. ~RET
      ◎ Let src be the value of the element's src attribute. ◎ If src is the empty string, queue a task to fire an event named error at the element, and return.
    2. %S の`外部~file~flag$ ~SET ~ON ◎ Set the element's from an external file flag.
    3. %~url ~LET `src$V を %文書 に`相対的に構文解析-$した`結果の~URL~record$ ◎ Parse src relative to the element's node document.
    4. ~IF[ %~url ~EQ ~error ]:
      1. 次を走らす`~taskを~queueする$ ⇒ %S に向けて,名前 `error$et の`~eventを発火-$する
      2. ~RET
      ◎ If the previous step failed, queue a task to fire an event named error at the element, and return. Otherwise, let url be the resulting URL record.
    5. %S の`~script種別$に応じて: ◎ Switch on the script's type:

      `classic^l
      `~classic~scriptを~fetchする$( %~url, %設定群~obj, %暗号用~nonce, %~options, %~CORS設定, %符号化方式 ) ◎ Fetch a classic script given url, settings object, options, CORS setting, and encoding.
      `module^l
      `~module~script~graphを~fetchする$( %~url, %設定群~obj, `script^l, %~options ) ◎ Fetch a module script graph given url, settings object, "script", and options.

      ~fetchする~algoが`非同期に完了した$ときは:

      1. %S の`~script$ ~SET その結果
      2. %S を`準備済み$にする
      ◎ When the chosen algorithm asynchronously completes, set the script's script to the result. At that time, the script is ready.

      処理能~上の理由から、~UAは: ◎ For performance reasons, user agents\

      • %S の `src$a 属性が設定され次第,すぐに(上に定義されるように)[ ~classic~script/~module~graph ]の~fetchingを開始して~MAY — ~~実際に %S が文書の中に挿入される(かつ,それまでは %S の `crossorigin$a 属性の値は変更されない)のを待つことなく。 いずれにせよ, %S が`文書の中に挿入され$たなら、この段に述べたように,読込みは開始され~MUST。 ◎ may start fetching the classic script or module graph (as defined above) as soon as the src attribute is set, instead, in the hope that the element will be inserted into the document (and that the crossorigin attribute won't change value in the meantime). Either way, once the element is inserted into the document, the load must have started as described in this step.\
      • 前項のような事前~fetchingを遂行する下で,次のいずれかに該当する場合…:

        • %S は、~~実際には,文書~内に挿入されなかった
        • %S は,文書~内に挿入されたが,それまでに %S の[ `src$a / `crossorigin$a ]属性が動的に変更された

        …場合、そのように得られた~scriptは実行しないとする — ~fetchingは、実質的に浪費されることになる。

        ◎ If the UA performs such prefetching, but the element is never inserted in the document, or the src attribute is dynamically changed, or the crossorigin attribute is dynamically changed, then the user agent will not execute the script so obtained, and the fetching process will have been effectively wasted.
  28. ~ELSE ( `src$V ~EQ ε ): ◎ If the element does not have a src content attribute, run these substeps:

    1. %~source~text ~LET %S の `text$m ~IDL属性~値 ◎ Let source text be the value of the text IDL attribute.
    2. %基底~URL ~LET %文書 の`文書~基底~URL$ ◎ Let base URL be the script element's node document's document base URL.
    3. %S の`~script種別$に応じて: ◎ Switch on the script's type:

      `classic^l
      1. %S の`~script$ ~SET `~classic~scriptを作成する$( %~source~text, %設定群~obj, %基底~URL, %~options ) ◎ Let script be the result of creating a classic script using source text, settings object, base URL, and options. ◎ Set the script's script to script.
      2. %S を`準備済み$にする ◎ The script is ready.
      `module^l
      1. %~script ~LET `~module~scriptを作成する$( %~source~text, %設定群~obj, %基底~URL, %~options ) ◎ Let script be the result of creating a module script using source text, settings object, base URL, and options.
      2. ~IF[ %~script ~EQ ~NULL ]:

        1. %S の`~script$ ~SET ~NULL
        2. %S を`準備済み$にする
        3. ~RET
        ◎ If this returns null, set the script's script to null and abort these substeps; the script is ready.
      3. %~script の`子孫を~fetchして~instance化する$( `script^l ) — これが %結果 を結果として`非同期に完了した$ときは:

        1. %S の`~script$ ~SET %結果
        2. %S を`準備済み$にする
        ◎ Fetch the descendants of and instantiate script, given the destination "script". When this asynchronously completes, set the script's script to the result. At that time, the script is ready.
  29. %defer ~LET [ %S は `defer$a 属性を有するならば ~T / ~ELSE_ ~F ] ◎ ↓
  30. 次の表において, %S が満たす各種条件に応じて、下において[ 表の右端 “ふるまい” 列に与えられる~label ]が付与された段に従う: ◎ Then, follow the first of the following options that describes the situation:

    空欄は無条件を表す。
    `~script種別$ `src$V `async$V `解析器挿入~flag$ `阻まず~flag$ %defer ふるまい
    `classic^l 非 ε ~F ~ON ~T `構文解析-後^i
    `classic^l 非 ε ~F ~ON ~F `構文解析器を阻む^i
    `classic^l 非 ε ~F ~OFF ~OFF `すぐに順に^i
    `classic^l 非 ε ~F ~OFF ~ON `すぐに^i
    `classic^l 非 ε ~T
    `classic^l ε ~ON `~stylesheetの後^i
    `classic^l ε ~OFF `即時に^i
    `module^l ~F ~ON `構文解析-後^i
    `module^l ~F ~OFF ~OFF `すぐに順に^i
    `module^l ~F ~OFF ~ON `すぐに^i
    `module^l ~T

    【 原文の条件記述が煩雑なので、この訳では,表の形に, 各行が排他的になるよう整理している。 】

    `構文解析-後^i ◎ If the script's type is "classic", and the element has a src attribute, and the element has a defer attribute, and the element has been flagged as "parser-inserted", and the element does not have an async attribute ◎ If the script's type is "module", and the element has been flagged as "parser-inserted", and the element does not have an async attribute
    %解析器~文書 に結付けられている `文書を構文解析し終えたときに実行される~scriptの~list@ の末尾に %S を追加する ◎ Add the element to the end of the list of scripts that will execute when the document has finished parsing associated with the Document of the parser that created the element.

    %S が`準備済み$になったときは ⇒ %S の`解析器実行準備済み~flag$ ~SET ~ON — %構文解析器 が,この~scriptの実行ingを取扱うことになる。 ◎ When the script is ready, set the element's "ready to be parser-executed" flag. The parser will handle executing the script.

    `構文解析器を阻む^i ◎ If the script's type is "classic", and the element has a src attribute, and the element has been flagged as "parser-inserted", and the element does not have an async attribute
    %解析器~文書 の`構文解析器を阻んでいる~script$ ~SET %S ◎ The element is the pending parsing-blocking script of the Document of the parser that created the element. (There can only be one such script per Document at a time.)
    %S が`準備済み$になったときは ⇒ %S の`解析器実行準備済み~flag$ ~SET ~ON — %構文解析器 が,この~scriptの実行ingを取扱うことになる。 ◎ When the script is ready, set the element's "ready to be parser-executed" flag. The parser will handle executing the script.
    `すぐに順に^i ◎ If the script's type is "classic", and the element has a src attribute, and the element does not have an async attribute, and the element does not have the "non-blocking" flag set ◎ If the script's type is "module", and the element does not have an async attribute, and the element does not have the "non-blocking" flag set
    %文書 に結付けられている `可能な限りすぐに順に実行される~scriptの~list@ — 以下,単に %~list と記す — 内の[ この~algoの開始-時における末尾位置 ]に %S を挿入する ◎ Add the element to the end of the list of scripts that will execute in order as soon as possible associated with the node document of the script element at the time the prepare a script algorithm started.

    %S が`準備済み$になったときは,次の手続きを走らす: ◎ When the script is ready, run the following steps:

    1. ~WHILE %~list は空でない

      1. %~script要素 ~LET %~list 内の最初の `script^e 要素
      2. ~IF[ %~script要素 は`準備済み$でない ] ⇒ ~BREAK
      3. %~script要素 に対応する`~script~blockを実行する$
      4. %~list から %~script要素 を除去する
      ◎ If the element is not now the first element in the list of scripts that will execute in order as soon as possible to which it was added above, then mark the element as ready but return without executing the script yet. ◎ Execution: Execute the script block corresponding to the first script element in this list of scripts that will execute in order as soon as possible. ◎ Remove the first element from this list of scripts that will execute in order as soon as possible. ◎ If this list of scripts that will execute in order as soon as possible is still not empty and the first entry has already been marked as ready, then jump back to the step labeled execution.
    `すぐに^i ◎ If the script's type is "classic", and the element has a src attribute ◎ If the script's type is "module"
    %文書 に結付けられている `可能な限りすぐに実行される~scriptの集合@ — 以下,単に %集合 と記す — に %S を追加する ◎ The element must be added to the set of scripts that will execute as soon as possible of the node document of the script element at the time the prepare a script algorithm started.

    %S が`準備済み$になったときは:

    1. %S に対応する`~script~blockを実行する$
    2. %集合 から %S を除去する
    ◎ When the script is ready, execute the script block and then remove the element from the set of scripts that will execute as soon as possible.
    `~stylesheetの後^i ◎ If the element does not have a src attribute, and the element has been flagged as "parser-inserted",\
    1. ~IF[ 次のいずれも満たされる ]…: ◎ and\

      • [ %構文解析器 は`~XML構文解析器$である ]~OR[ %構文解析器 は`~HTML構文解析器$であって,その `~script入子ing~level$ ~LTE 1 ] ◎ either the parser that created the script is an XML parser or it's an HTML parser whose script nesting level is not greater than one, and\
      • %解析器~文書 には`~scriptを阻んでいる~stylesheetがある$ ◎ the Document of the HTML parser or XML parser that created the script element has a style sheet that is blocking scripts

      …ならば:

      1. %解析器~文書 の`構文解析器を阻んでいる~script$ ~SET %S ◎ The element is the pending parsing-blocking script of the Document of the parser that created the element. (There can only be one such script per Document at a time.)
      2. %S の`解析器実行準備済み~flag$ ~SET ~ON — %構文解析器 が,この~scriptの実行ingを取扱うことになる。 ◎ Set the element's "ready to be parser-executed" flag. The parser will handle executing the script.
    2. ~ELSE ⇒ ~GOTO `即時に^i
    `即時に^i
    `即時$に`~script~blockを実行する$ — 他の~scriptがすでに実行-中にあっても 【他の~scriptの実行に割り込む?】 ◎ Otherwise ◎ Immediately execute the script block, even if other scripts are already executing.

各 `文書$には, `構文解析器を阻んでいる~script@ が結付けられ、初期~時は ε (なし)とする(同じ文書に対し,そのような~scriptが同時に複数~生じることはない)。 それは、`文書$の構文解析器(たち)により利用される。 ◎ The pending parsing-blocking script of a Document is used by the Document's parser(s).

注記: 構文解析器を阻んでいる `script$e 要素が — 通常のようにその構文解析器を阻まなくなる前に — 別の`文書$へ移動された場合でも、[ 構文解析器を阻んでいる条件が,それ以上~適用されなくなる ]まで,その構文解析器を阻み続ける(例: `~scriptを阻んでいる~stylesheet$があるために,~scriptが構文解析-時に`構文解析器を阻んでいる~script$であった場合,[ ~stylesheetが読込まれる前に ~scriptが別の`文書$へ移動された ]としても、~scriptは,それらの~stylesheetがすべて読込まれるまで,依然として構文解析器を阻む — その時点で、~scriptは実行され,構文解析器を阻まなくなる)。 ◎ If a script element that blocks a parser gets moved to another Document before it would normally have stopped blocking that parser, it nonetheless continues blocking that parser until the condition that causes it to be blocking the parser no longer applies (e.g. if the script is a pending parsing-blocking script because there was a style sheet that is blocking scripts when it was parsed, but then the script is moved to another Document before the style sheet loads, the script still blocks the parser until the style sheets are all loaded, at which time the script executes and the parser is unblocked).

~UAは、 `script$e 要素 %S に対応する `~script~blockを実行する@ よう要求されたときは,次の手続きを走らせ~MUST: ◎ When the user agent is required to execute a script block, it must run the following steps.

  1. %文書 ~LET %S の`~node文書$ ◎ ↓
  2. ~IF[ %S の`解析器挿入~flag$ ~EQ ~ON ]~AND[ %文書 ~NEQ %S を作成した構文解析器の`文書$ ] ⇒ ~RET ◎ If the element is flagged as "parser-inserted", but the element's node document is not the Document of the parser that created the element, then return.
  3. ~IF[ %S の`~script$ ~EQ ~NULL ]:

    1. %S に向けて,名前 `error$et の`~eventを発火-$する
    2. ~RET
    ◎ If the script's script is null, fire an event named error at the element, and return.
  4. %~counter増減 ~LET [[ %S の`外部~file~flag$ ~EQ ~ON ]~OR[ %S の`~script種別$ ~EQ `module^l ]ならば ~T / ~ELSE_ ~F ] ◎ If the script is from an external file, or the script's type is "module", then increment the ignore-destructive-writes counter of the script element's node document. Let neutralized doc be that Document.
  5. ~IF[ %~counter増減 ~EQ ~T ] ⇒ %文書 の`破壊的書込は無視する~counter$ ~INCBY 1 ◎ ↑
  6. %旧-~script要素 ~LET %文書 の `currentScript$m 属性~値 ◎ Let old script element be the value to which the script element's node document's currentScript object was most recently set.
  7. %S の`~script種別$に応じて: ◎ Switch on the script's type:

    `classic^l
    1. %文書 の`currentScript$m 属性 ~SET [ %S の`根$は`~shadow根$でないならば %S / ~ELSE_ ~NULL ] ◎ If the script element's root is not a shadow root, then set the script element's node document's currentScript attribute to the script element. Otherwise, set it to null.

      ここでは、 %S が`文書~木~内$にあるかどうかは検査しない — `script$e 要素は、実行に先立って文書から除去されていることもあり、その局面でも依然として, `currentScript$m は それを指す必要があるので。 ◎ This does not use the in a document tree check, as the script element could have been removed from the document prior to execution, and in that scenario currentScript still needs to point to it.

    2. `~classic~scriptを走らす$( %S の`~script$ ) ◎ Run the classic script given by the script's script.
    `module^l
    1. %文書 の`currentScript$m 属性 ~SET ~NULL ◎ Set the script element's node document's currentScript attribute to null.
    2. `~module~scriptを走らす$( %S の`~script$ ) ◎ Run the module script given by the script's script.
  8. %文書 の`currentScript$m 属性 ~SET %旧-~script要素 ◎ Set the script element's node document's currentScript attribute to old script element.

  9. ~IF[ %~counter増減 ~EQ ~T ] ⇒ %文書 の`破壊的書込は無視する~counter$ ~DECBY 1 ◎ Decrement the ignore-destructive-writes counter of neutralized doc, if it was incremented in the earlier step.
  10. ~IF[ %S の`外部~file~flag$ ~EQ ~ON ] ⇒ %S に向けて,名前 `load$et の`~eventを発火-$する ◎ If the script is from an external file, then fire an event named load at the script element.

4.12.1.2. ~scripting言語

次に挙げる`~MIME型$文字列は, `~JS~MIME型@ とされ、~JSを指す: `JAVASCRIPT$r ◎ A JavaScript MIME type is a MIME type string that is one of the following and refers to JavaScript: [JAVASCRIPT]

  • `application/ecmascript$mt
  • `application/javascript$mt
  • `application/x-ecmascript$mt
  • `application/x-javascript$mt
  • `text/ecmascript$mt
  • `text/javascript$mt
  • `text/javascript1.0$mt
  • `text/javascript1.1$mt
  • `text/javascript1.2$mt
  • `text/javascript1.3$mt
  • `text/javascript1.4$mt
  • `text/javascript1.5$mt
  • `text/jscript$mt
  • `text/livescript$mt
  • `text/x-ecmascript$mt
  • `text/x-javascript$mt

~serverは、~JS資源に対しては:

  • `text/javascript$mt を利用するべきである — 他の`~JS~MIME型$は利用するべきでない。
  • 非`~JS~MIME型$を利用しては~MUST_NOT。
◎ Servers should use text/javascript for JavaScript resources. Servers should not use other JavaScript MIME types for JavaScript resources, and must not use non-JavaScript MIME types.

~UAには、~JSを~supportすることは要求されない。 この標準は、~JS以外の言語が~JS同様に~web~browserに広く採用されたならば,更新される必要がある。 そのときが来ない限り、他の言語を実装するのは,この標準に定義されている `script$e 要素~用の処理~modelに競合することになる。 ◎ User agents are not required to support JavaScript. This standard needs to be updated if a language other than JavaScript comes along and gets similar wide adoption by web browsers. Until such a time, implementing other languages is in conflict with this standard, given the processing model defined for the script element.

外部~JS資源に対しては、その `~Content-Type~header$内の~MIME型~parameterは,一般に無視される(`charset^c ~parameterについては、効果がある事例もある)。 一方で, `script$e 要素の `type$a 属性においては、それは有意になる。 ◎ For external JavaScript resources, MIME type parameters in `Content-Type` headers are generally ignored. (In some cases the `charset` parameter has an effect.) However, for the script element's type attribute they are significant.

注記: 例えば、 `type$a 属性が `text/javascript; charset=utf-8^l に設定されている~scriptは,評価されないことになる。 ◎ For example, scripts with their type attribute set to "text/javascript; charset=utf-8" will not be evaluated.

外部~JS資源に対しては、また,その`~Content-Type~header$の処理~周りで特別な考慮点が適用される — 詳細は、`~scriptを準備する$~algo, および Fetch 標準 `FETCH$r を見よ。 ◎ Furthermore, again for external JavaScript resources, special considerations apply around `Content-Type` header processing as detailed in the prepare a script algorithm and the WHATWG Fetch standard. [FETCH]

4.12.1.3. `script^e 要素の内容に課される制約

注記: この節に述べる奇妙な制約を避ける最も容易かつ安全な仕方は、~script内に(例えば 文字列, 正規表現, ~comment として)~literalで現れる[ `<!--^l / `<script^l / `</script^l ]は,常に[ `<\!--^l / `<\script^l / `<\/script^l ]に~escapeし、式の中でそのような構成子を利用するような~codeを書くのは,避けることである。 この節における制約は,ちょっとしたことで抵触し易く、そうすることで,陥穽を避けれる。 すなわち、歴史的~理由から,~HTML内の `script$e ~blockの構文解析では、これらの文字~並びに面した際のふるまいが直感に反するような,奇妙で風変わりな実施になっている。 ◎ The easiest and safest way to avoid the rather strange restrictions described in this section is to always escape "<!--" as "<\!--", "<script" as "<\script", and "</script" as "<\/script" when these sequences appear in literals in scripts (e.g. in strings, regular expressions, or comments), and to avoid writing code that uses such constructs in expressions. Doing so avoids the pitfalls that the restrictions in this section are prone to triggering: namely, that, for historical reasons, parsing of script blocks in HTML is a strange and exotic practice that acts unintuitively in the face of these sequences.

`script$e 要素の `textContent$m は、次の~ABNFで与えられる `script^P 生成規則に合致し~MUST — この ABNF の文字~集合は~Unicodeとする `ABNF$r: ◎ The textContent of a script element must match the script production in the following ABNF, the character set for which is Unicode. [ABNF]

script        = outer *( comment-open inner comment-close outer )

outer         = < not-in-outer に合致する文字列は含まないような任意の文字列 >
not-in-outer  = comment-open
inner         = < not-in-inner に合致する文字列は含まないような任意の文字列 >
not-in-inner  = comment-close / script-open

comment-open  = "<!--"
comment-close = "-->"
script-open   = "<" s c r i p t tag-end

s             =  `0053^0x ; U+0053 LATIN CAPITAL LETTER S
s             =/ `0073^0x ; U+0073 LATIN SMALL LETTER S
c             =  `0043^0x ; U+0043 LATIN CAPITAL LETTER C
c             =/ `0063^0x ; U+0063 LATIN SMALL LETTER C
r             =  `0052^0x ; U+0052 LATIN CAPITAL LETTER R
r             =/ `0072^0x ; U+0072 LATIN SMALL LETTER R
i             =  `0049^0x ; U+0049 LATIN CAPITAL LETTER I
i             =/ `0069^0x ; U+0069 LATIN SMALL LETTER I
p             =  `0050^0x ; U+0050 LATIN CAPITAL LETTER P
p             =/ `0070^0x ; U+0070 LATIN SMALL LETTER P
t             =  `0054^0x ; U+0054 LATIN CAPITAL LETTER T
t             =/ `0074^0x ; U+0074 LATIN SMALL LETTER T

tag-end       =  `0009^0x ; U+0009 CHARACTER TABULATION (tab)
tag-end       =/ `000A^0x ; U+000A LINE FEED (LF)
tag-end       =/ `000C^0x ; U+000C FORM FEED (FF)
tag-end       =/ `0020^0x ; U+0020 SPACE
tag-end       =/ `002F^0x ; U+002F SOLIDUS (/)
tag-end       =/ `003E^0x ; U+003E GREATER-THAN SIGN (>)

`script$e 要素が`~script文書化$を包含する場合、要素の内容にも,下の節で述べる制約が更に課される。 ◎ When a script element contains script documentation, there are further restrictions on the contents of the element, as described in the section below.

この~~問題を,次のような文字列を包含している~scriptで~~説明する: ◎ The following script illustrates this issue. Suppose you have a script that contains a string, as in:

var example = 'Consider this string: <!-- <script>';
console.log(example);

仮に,この文字列が `script$e ~block内に直接的に記された場合、上の制約に違反することになる: ◎ If one were to put this string directly in a script block, it would violate the restrictions above:

<script>
  var example = 'Consider this string: <!-- <script>';
  console.log(example);
</script>

より大きな問題であり,なぜそれが制約に違反することになるかの理由は、上の~script~blockが,実際には終端していない点にある。 この~scriptに対する構文解析され方は~~理解しがたいものであり,終了tagの様に見える `</script>^l は、実際には,依然として `script$e ~blockの一部になる。 ~scriptは(終端していないので)実行されないが、どうにかして実行されるようになっていた場合 — 例えば~markupが次のようになっていた場合 — ~script(強調表示されている部分)は、妥当な~JSでないので,失敗することになる: ◎ The bigger problem, though, and the reason why it would violate those restrictions, is that actually the script would get parsed weirdly: the script block above is not terminated. That is, what looks like a "</script>" end tag in this snippet is actually still part of the script block. The script doesn't execute (since it's not terminated); if it somehow were to execute, as it might if the markup looked as follows, it would fail because the script (highlighted here) is not valid JavaScript:

<script>
  var example = 'Consider this string: <!-- <script>';
  console.log(example);
</script>
<!-- 見かけに反し、実際には,ここも~scriptの一部になる。 -->
<script>
 ... // ここもまだ同じ~script~block内にある...
</script>

ここで起きていることは、旧来の理由から, `script$e 要素~内の文字列[ `<!--^l / `<script^l ]を対にしなければ、~HTMLの構文解析器からは,~blockが閉じたものと見なされなくなることである。 ◎ What is going on here is that for legacy reasons, "<!--" and "<script" strings in script elements in HTML need to be balanced in order for the parser to consider closing the block.

この節の冒頭で言及したように、問題になる文字列を~escapeすれば,この問題をまるごと避けれる: ◎ By escaping the problematic strings as mentioned at the top of this section, the problem is avoided entirely:

<script>
  var example = 'Consider this string: <\!-- <\script>';
  console.log(example);
</script>
<!-- ここは単に 2 つの~script~blockの合間にある~commentになる -->
<script>
 ... // 新たな~script~block
</script>

これらの文字~並びが~scriptの式の中に自然に生じることもある — 次の例のように: ◎ It is possible for these sequences to naturally occur in script expressions, as in the following examples:

if (x<!--y) { ... }
if ( player<script ) { ... }

このような事例では、文字たちは~escapeできないが、この式は,そのような文字~並びが生じないように書き直せる: ◎ In such cases the characters cannot be escaped, but the expressions can be rewritten so that the sequences don't occur, as in:

if (x < !--y) { ... }
if (!--y > x) { ... }
if (!(--y) > x) { ... }
if (player < script) { ... }
if (script > player) { ... }

こうすることで,別の陥穽 — 歴史的~理由から、`~classic~script$内の文字列 `<!--^l は,実際には `//^l と同じく,行~commentの開始として扱われること — も避けれる。 ◎ Doing this also avoids a different pitfall as well: for related historical reasons, the string "<!--" in classic scripts is actually treated as a line comment start, just like "//".

4.12.1.4. 外部~scriptに対する~inline文書化

`src$a 属性を有する `script$e 要素に対しては、要素の内容から導出される `text$m ~IDL属性の値が,次の~ABNFによる `documentation^P 生成規則に合致してい~MUST — この ABNF の文字~集合は~Unicodeとする: `ABNF$r ◎ If a script element's src attribute is specified, then the contents of the script element, if any, must be such that the value of the text IDL attribute, which is derived from the element's contents, matches the documentation production in the following ABNF, the character set for which is Unicode. [ABNF]

documentation = *( *( space / tab / comment ) [ line-comment ] newline )
comment       = slash star *( not-star / star not-slash ) 1*star slash
line-comment  = slash slash *not-newline

; characters
tab           = `0009^0x ; U+0009 CHARACTER TABULATION (tab)
newline       = `000A^0x ; U+000A LINE FEED (LF)
space         = `0020^0x ; U+0020 SPACE
star          = `002A^0x ; U+002A ASTERISK (*)
slash         = `002F^0x ; U+002F SOLIDUS (/)
not-newline   = `0000-0009^0x / `000B-10FFFF^0x
                ; U+000A LINE FEED (LF) 以外の `~scalar値$
not-star      = `0000-0029^0x / `002B-10FFFF^0x
                ; U+002A ASTERISK (*) 以外の `~scalar値$
not-slash     = `0000-002E^0x / `0030-10FFFF^0x
                ; U+002F SOLIDUS (/) 以外の `~scalar値$

注記: これは、要素の内容を ~JS~comment内に置くことに対応する。 ◎ This corresponds to putting the contents of the element in JavaScript comments.

注記: この要件は、前節に述べた `script$e 要素の内容の構文に課される制約に対する追加である。 ◎ This requirement is in addition to the earlier restrictions on the syntax of contents of script elements.

これにより,作者は、依然として外部~script~fileを指しつつ,文書の内側にも~license情報や~API情報などの文書化を含ませることも可能になる。 この構文では、 `src$a 属性も提供している作者が,不用意に妥当な~scriptの様に見える~dataを含めることがないように,拘束される。 ◎ This allows authors to include documentation, such as license information or API information, inside their documents while still referring to external script files. The syntax is constrained so that authors don't accidentally include what looks like valid script while also providing a src attribute.

<script src="cool-effects.js">
 // 新たな~instanceを作成するときは、次を利用すること:
 //    var e = new Effect();
 // 効果を開始/停止するときは、 .play() / .stop() を利用すること:
 //    e.play();
 //    e.stop();
</script>

4.12.1.5. `script$e 要素と XSLT との相互作用

~INFORMATIVE

この仕様は、~XSLTと `script$e 要素とが,どう相互作用するかは定義しない。 しかしながら、これを実際に定義している別の仕様が不在の下での、既存の実装に基づく実装者~向けの指針を,いくつかここに述べる: ◎ This specification does not define how XSLT interacts with the script element. However, in the absence of another specification actually defining this, here are some guidelines for implementers, based on existing implementations:

  • ~browserが~DOMへの直接的な変形を実装する下で, `<?xml-stylesheet?>^c 処理命令により ~XSLT変形~programが誘発された場合、~XSLT処理器により作成される各 `script$e 要素は、その`解析器挿入~flag$は ~ON にした上で,変形が生じるに伴って,`即時$に, 文書~順序で(ただし, `defer$a / `async$a による順序は除く),走らす必要がある。 ◎ When an XSLT transformation program is triggered by an <?xml-stylesheet?> processing instruction and the browser implements a direct-to-DOM transformation, script elements created by the XSLT processor need to be marked "parser-inserted" and run in document order (modulo scripts marked defer or async), immediately, as the transformation is occurring.
  • `XSLTProcessor$I の `transformToDocument()$m ~methodは、`閲覧文脈に属さ$ない`文書$に要素を追加する。 それに則り、作成されるどの `script$e 要素も,次のようにされる必要がある:

    • `~scriptを準備する$~algoの中で,その`開始済み~flag$を ~ON にして、決して実行されないようにする(`~scriptingは不能化-$される)。
    • `解析器挿入~flag$は、依然として ~ON にする。
    • その `async$m ~IDL属性は、要素が `async$a 内容~属性を有さない下では ~F を返すようにする。
    ◎ The XSLTProcessor.transformToDocument() method adds elements to a Document that does not have a browsing context, and, accordingly, any script elements they create need to have their "already started" flag set in the prepare a script algorithm and never get executed (scripting is disabled). Such script elements still need to be marked "parser-inserted", though, such that their async IDL attribute will return false in the absence of an async content attribute.
  • `XSLTProcessor$I の `transformToFragment()$m ~methodは、[ `document.createElementNS()$m を利用して要素を作成することにより,手動で築かれた`文書片$ ]と等価なものを作成する必要がある。 具体的には、 `script$e 要素を作成する際には,[ `解析器挿入~flag$, `開始済み~flag$ ]はともに ~OFF にして,その`文書片$が文書~内に挿入された時点で実行されるようにする必要がある。 ◎ The XSLTProcessor.transformToFragment() method needs to create a fragment that is equivalent to one built manually by creating the elements using document.createElementNS(). For instance, it needs to create script elements that aren't "parser-inserted" and that don't have their "already started" flag set, so that they will execute when the fragment is inserted into a document.

上の 1, 2 番目の事例と, 3 番目の事例との間の主な違いは、前者は`文書$に対し演算する一方で,後者は`文書片$に対し演算する点にある。 ◎ The main distinction between the first two cases and the last case is that the first two operate on Documents and the last operates on a fragment.

4.12.2. `noscript^e 要素

`分類$:
`~metadata内容$ / `~flow内容$ / `句内容$ ◎ Metadata content. ◎ Flow content. ◎ Phrasing content.
`この要素を利用できる文脈$:
`~HTML文書$の `head$e 要素~内, または `~HTML文書$内の `句内容$が期待される所 — ただし、いずれにせよ,先祖に `noscript$e 要素がある所は除く。 ◎ In a head element of an HTML document, if there are no ancestor noscript elements. ◎ Where phrasing content is expected in HTML documents, if there are no ancestor noscript elements.
`内容~model$:

要素に対する`~scriptingは不能化されて$いる場合:

  • 要素が `head$e 要素~内にある場合、順序は問わず,それぞれが[ `link$e, `style$e, `meta$e ]のいずれかであるような, 0 個以上の要素。
  • 要素が `head$e 要素~外にある場合、`透過的$になる — ただし、子孫に `noscript$e 要素があっては~MUST_NOT。
◎ When scripting is disabled, in a head element: in any order, zero or more link elements, zero or more style elements, and zero or more meta elements. ◎ When scripting is disabled, not in a head element: transparent, but there must be no noscript element descendants.
他の場合、下の注釈文に与える要件に適合するような~text。 ◎ Otherwise: text that conforms to the requirements given in the prose.
`text/html における~tag省略$:
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$:
`大域~属性$ ◎ Global attributes
`~DOM~interface$:
`HTMLElement$I を利用する ◎ Uses HTMLElement.

`noscript$e 要素は、`~scriptingは可能化されて$いる場合は,何も`表現-$せず、`~scriptingは不能化されて$いる場合は,その子たちを`表現-$する。 それは、~UAが~scriptingを~supportするかどうかに応じて,文書がどう構文解析されるかを違えることにより、~UAに異なる~markupを提示するために利用される。 ◎ The noscript element represents nothing if scripting is enabled, and represents its children if scripting is disabled. It is used to present different markup to user agents that support scripting and those that don't support scripting, by affecting how the document is parsed.

`noscript$e 要素 %noscript が `~HTML文書$に利用される場合に許容される内容~modelは、次に従う: ◎ When used in HTML documents, the allowed content model is as follows:

%noscript は `head$e 要素~内にある場合: ◎ ↓
`~scriptingは不能化されて$いる場合: ◎ In a head element, if scripting is disabled for the noscript element
%noscript は[ `link$e, `style$e, `meta$e ]要素のみを包含してい~MUST。 ◎ The noscript element must contain only link, style, and meta elements.
`~scriptingは可能化されて$いる場合: ◎ In a head element, if scripting is enabled for the noscript element

%noscript は、~textのみを包含するか, または次を満たさ~MUST:

  • ( `文脈~要素$V, %入力 ) として ( %noscript, %noscript の~text内容 ) を与える下で,`~HTML素片~構文解析~algo$を呼出したときに,次をすべて満たす:

    • `構文解析-~error$は生じない
    • ~algoの結果は[ `link$e, `style$e, `meta$e ]要素のみからなる~nodeの~listである
    • 前項の~listが %noscript の子たちであったとするとき,適合する
◎ The noscript element must contain only text, except that invoking the HTML fragment parsing algorithm with the noscript element as the context element and the text contents as the input must result in a list of nodes that consists only of link, style, and meta elements that would be conforming if they were children of the noscript element, and no parse errors.
%noscript は `head$e 要素~外にある場合: ◎ ↓
`~scriptingは不能化されて$いる場合: ◎ Outside of head elements, if scripting is disabled for the noscript element
%noscript の内容~modelは`透過的$になる — ただし, %noscript の先祖に `noscript$e 要素があっては~MUST_NOT(すなわち, `noscript$e は入子にできない)。 ◎ The noscript element's content model is transparent, with the additional restriction that a noscript element must not have a noscript element as an ancestor (that is, noscript can't be nested).
`~scriptingは可能化されて$いる場合: ◎ Outside of head elements, if scripting is enabled for the noscript element

%noscript は、~textのみを包含するか, または次を満たさ~MUST:

  • 下の~algoを走らせたときに,次をすべて満たす:

    • 例外は投出されない
    • 結果の文書は、[ `noscript$e, `script$e ]要素を含まない,適合~文書になる
    • `~HTML構文解析器$において,`構文解析-~error$は生じない
◎ The noscript element must contain only text, except that the text must be such that running the following algorithm results in a conforming document with no noscript elements and no script elements, and such that no step in the algorithm throws an exception or causes an HTML parser to flag a parse error:

~algoは、次で与えられる: ◎ ↑

  1. 当の文書からすべての `script$e 要素を除去する ◎ Remove every script element from the document.
  2. 当の文書~内の~EACH ( `noscript$e 要素 %E ) に対し: ◎ Make a list of every noscript element in the document. For every noscript element in that list, perform the following steps:

    1. %E の `outerHTML$m 属性 ~SET %E の`子~text内容$ (これによる副作用として, %E は当の文書から除去される。) `DOMPARSING$r ◎ Let s be the child text content of the noscript element. ◎ Set the outerHTML attribute of the noscript element to the value of s. (This, as a side-effect, causes the noscript element to be removed from the document.) [DOMPARSING]

注記: 上述の ひねくれた取扱いすべてが要求される — 歴史的~理由から,`~HTML構文解析器$による `noscript$e 要素に対する取扱いは、[ 構文解析器が呼出されたときに,その要素の`~scriptingは可能化されていたかどうか$ ]に応じて,異なるので。 ◎ All these contortions are required because, for historical reasons, the noscript element is handled differently by the HTML parser based on whether scripting was enabled or not when the parser was invoked.

`~XML文書$には、 `noscript$e 要素は利用されては~MUST_NOT。 ◎ The noscript element must not be used in XML documents.

注記: `noscript$e 要素が効果を及ぼすのは,`~HTML構文$に限られ、`~XML構文$には効果は及ばない。 それは,~scriptが可能化されている下では、本質的に[ 要素の内容を本当の要素としてではなく,純粋な~textとして扱う ]ように,構文解析器を “切る” ように働くが、~XMLには,これを行う仕組みは定義されていないので。 ◎ The noscript element is only effective in the HTML syntax, it has no effect in the XML syntax. This is because the way it works is by essentially "turning off" the parser when scripts are enabled, so that the contents of the element are treated as pure text and not as real elements. XML does not define a mechanism by which to do this.

`noscript$e 要素には、他の要件はない。 特に,要素に対し`~scriptingは可能化されて$いるときでも、 `noscript$e 要素の子たちが `~form提出$, ~scripting, 等々, から免れることはない。 ◎ The noscript element has no other requirements. In particular, children of the noscript element are not exempt from form submission, scripting, and so forth, even when scripting is enabled for the element.

次の例では、~scriptに対する~fallbackを提供するために `noscript$e 要素が利用されている: ◎ In the following example, a noscript element is used to provide fallback for a script.

<form action="calcSquare.php">
 <p>
  <label for=x>数値</label>:
  <input id="x" name="x" type="number">
 </p>
 <script>
  var %x = document.getElementById('x');
  var %output = document.createElement('p');
  %output.textContent = '数値を入れてください。二乗した結果が返されます。';
  %x.form.appendChild(%output);
  %x.form.onsubmit = function () { return false; }
  %x.oninput = function () {
    var %v = %x.valueAsNumber;
    %output.textContent = %v + ' の二乗は ' + %v * %v ' です。';
  };
 </script>
 <noscript>
  <input type=submit value="二乗を計算する">
 </noscript>
</form>

~scriptが不能化されている下では、~server側で計算を行わせるような~buttonが現れる。 一方で,~scriptが可能化されている下では、その場で値が算出される。 ◎ When script is disabled, a button appears to do the calculation on the server side. When script is enabled, the value is computed on-the-fly instead.

`noscript$e 要素は、 “なまくら” である。 頁の~scriptが可能化されていても,何らかの理由で失敗することはある。 よって,一般に、 `noscript$e の利用は避ける方が良い — 次の例のように、まず,~scriptなしが~~前提の頁にした上で、[ ~scriptが成功したなら,その場で その結果を利用するように頁を変更する ]ように,設計することにより: ◎ The noscript element is a blunt instrument. Sometimes, scripts might be enabled, but for some reason the page's script might fail. For this reason, it's generally better to avoid using noscript, and to instead design the script to change the page from being a scriptless page to a scripted page on the fly, as in the next example:

<form action="calcSquare.php">
 <p>
  <label for=x>数値</label>:
  <input id="x" name="x" type="number">
 </p>
 <input id="submit" type=submit value="二乗を計算する">
 <script>
  var %x = document.getElementById('x');
  var %output = document.createElement('p');
  %output.textContent = '数値を入れてください。二乗した結果が返されます。';
  %x.form.appendChild(%output);
  %x.form.onsubmit = function () { return false; }
  %x.oninput = function () {
    var %v = %x.valueAsNumber;
    %output.textContent = %v + ' の二乗は ' + %v * %v ' です。';
  };
  var %submit = document.getElementById('submit');
  %submit.parentNode.removeChild(%submit);
 </script>
</form>

この技法は、 `noscript$e が許容されない`~XML文書$においても有用になる。 ◎ The above technique is also useful in XML documents, since noscript is not allowed there.

4.12.3. `template^e 要素

`分類$:
`~metadata内容$ / `~flow内容$ / `句内容$ / `~scriptを~supportする要素$ ◎ Metadata content. ◎ Flow content. ◎ Phrasing content. ◎ Script-supporting element.
`この要素を利用できる文脈$:
`~metadata内容$が期待される所。 ◎ Where metadata content is expected.
`句内容$が期待される所。 ◎ Where phrasing content is expected.
`~scriptを~supportする要素$が期待される所。 ◎ Where script-supporting elements are expected.
`span$a 属性を有さない `colgroup$e 要素の子として。 ◎ As a child of a colgroup element that doesn't have a span attribute.
`内容~model$:
`なし$(より明確には, 例を見よ。 ) ◎ Nothing (for clarification, see example).
`text/html における~tag省略$:
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$:
`大域~属性$ ◎ Global attributes
`~DOM~interface$:
[Exposed=Window,
`HTMLConstructor$]
interface `HTMLTemplateElement@I : `HTMLElement$I {
  readonly attribute `DocumentFragment$I `content$m;
};

`template$e 要素は、~scriptにより,~cloneしたり文書~内に挿入できるような,~HTML素片を宣言するために利用される。 ◎ The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.

具現化においては、 `template$e 要素は何も`表現-$しない。 ◎ In a rendering, the template element represents nothing.

`template$e 要素の`~template内容$は、要素~自身の子ではない。 ◎ The template contents of a template element are not children of the element itself.

注記: ~DOM操作の結果として, `template$e 要素が `Text$I ~nodeや要素~nodeを包含することも可能であるが、 `template$e 要素の内容~modelは`なし$と定義されているので,それは違反になる。 ◎ It is also possible, as a result of DOM manipulation, for a template element to contain Text nodes and element nodes; however, having any is a violation of the template element's content model, since its content model is defined as nothing.

例えば、次の文書を考える: ◎ For example, consider the following document:

<!doctype html>
<html lang="ja">
 <head>
  <title>宿題</title>
 <body>
  <template id="template"><p>😀</p></template>
  <script>
   let %num = 3;
   const %fragment =
      document.getElementById('template').content.cloneNode(true);
   while (%num -- > 1) {
     %fragment.firstChild.before(%fragment.firstChild.cloneNode(true));
     %fragment.firstChild.textContent += %fragment.lastChild.textContent;
   }
   document.body.appendChild(%fragment);
  </script>
</html>

`template$e 内の `p$e 要素は、 ~DOM内では `template$e の子ではない — それは、 `template$e 要素の `content$m ~IDL属性から返される`文書片$の子である。 ◎ The p element in the template is not a child of the template in the DOM; it is a child of the DocumentFragment returned by the template element's content IDL attribute.

~scriptが `template$e 要素~上の `appendChild()$m を~callした場合、 (他の要素に対するときと同様に) `template$e 要素に子を追加することになる — しかしながら,そうすると、 `template$e 要素の内容~modelに違反することになる。 ◎ If the script were to call appendChild() on the template element, that would add a child to the template element (as for any other element); however, doing so is a violation of the template element's content model.

%~template . `content$m
`~template内容$( `文書片$ )を返す。 ◎ Returns the template contents (a DocumentFragment).

各 `template$e 要素には,`文書片$が結付けられ、それが 要素の `~template内容@ になる。 `~template内容$には、 適合性~要件はない 。 ~UAは、 `template$e 要素 %要素 を作成するときは,次の手続きを走らせて, %要素 の`~template内容$を確立し~MUST: ◎ Each template element has an associated DocumentFragment object that is its template contents. The template contents have no conformance requirements. When a template element is created, the user agent must run the following steps to establish the template contents:

  1. %文書 ~LET %要素 の`~node文書$の`~template内容を所有する適切な文書$ ◎ Let doc be the template element's node document's appropriate template contents owner document.
  2. %文書片 ~LET 次のようにされた,新たな`文書片$ ⇒# `~node文書$ ~SET %文書, `~host$ ~SET %要素 ◎ Create a DocumentFragment object whose node document is doc and host is the template element.
  3. %要素 の`~template内容$ ~SET %文書片 ◎ Set the template element's template contents to the newly created DocumentFragment object.

`文書$ %文書 の `~template内容を所有する適切な文書@ は、次の~algoから返される`文書$として定義される: ◎ A Document doc's appropriate template contents owner document is the Document returned by the following algorithm:

  1. ~IF[ %文書 は、ある`文書$の`不活~template文書$である ] ⇒ ~RET %文書 ◎ If doc is not a Document created by this algorithm, then:
  2. %不活~文書 ~LET %文書 の`不活~template文書$ ◎
  3. ~IF[ %不活~文書 ~NEQ ε ] ⇒ ~RET %不活~文書 ◎ If doc does not yet have an associated inert template document, then:
  4. %不活~文書 ~LET (`閲覧文脈に属さ$ない)新たな`文書$ ◎ Let new doc be a new Document (that does not have a browsing context). This is "a Document created by this algorithm" for the purposes of the step above.
  5. ~IF[ %文書 は`~HTML文書$である ] ⇒ %不活~文書 も`~HTML文書$にする ◎ If doc is an HTML document, mark new doc as an HTML document also.
  6. %文書 の`不活~template文書$ ~SET %不活~文書 ◎ Let doc's associated inert template document be new doc.
  7. ~RET %不活~文書 ◎ Set doc to doc's associated inert template document.

この~algoの目的においては、各 `文書$には,自身の`~template内容$を保持するための `不活~template文書@ が結付けられる — それは、`文書$か,または ε (存在しない)であり、必要に応じて作成される。 ◎ ↑

注記: したがって,この~algoにより作成されたものでない各 `文書$は、[ 自身の `template$e 要素すべての`~template内容$ ]を,[ それらが どの`閲覧文脈$にも属さず,不活であり続ける(例: ~scriptは走らせない)ようにする ]ために所有するための、代理として動作するような単独の`文書$ — `不活~template文書$ — を取得する。 `不活~template文書$の内側にある `template$e 要素は、当面の間は 【不活でなくなるまでは】 単に同じ`文書$を,その内容の所有者として再利用する。 ◎ Each Document not created by this algorithm thus gets a single Document to act as its proxy for owning the template contents of all its template elements, so that they aren't in a browsing context and thus remain inert (e.g. scripts do not run). Meanwhile, template elements inside Document objects that are created by this algorithm just reuse the same Document owner for their contents. ◎ Return doc.

`template$e 要素に対する`受入-時の手続き$は、所与の ( %~node, %旧-文書 ) に対し,次を走らす: ◎ The adopting steps (with node and oldDocument as parameters) for template elements are the following:

  1. %文書 ~LET %~node の`~node文書$の`~template内容を所有する適切な文書$ ◎ Let doc be node's node document's appropriate template contents owner document.

    注記: %~node の`~node文書$は、直前に %~node を受入した`文書$である。 【 %旧-文書 ではなく( %旧-文書 はこの手続きの中では利用されていない)。】 ◎ node's node document is the Document object that node was just adopted into.

  2. %文書 に`~nodeを受入する$( %~node の(`文書片$である)`~template内容$ ) ◎ Adopt node's template contents (a DocumentFragment object) into doc.
`content@m
取得子は、此れの`~template内容$を返さ~MUST。 ◎ The content IDL attribute must return the template element's template contents.

`template$e 要素 %~node に対する`~clone時の手続き$は、所与の ( %複製, %~node, %文書, %~clone子孫~flag ) に対し,次の手続きを走らせ~MUST: ◎ The cloning steps for a template element node being cloned to a copy copy must run the following steps:

  1. ~IF[ %~clone子孫~flag ~NEQ ~ON ] ⇒ ~RET ◎ If the clone children flag is not set in the calling clone algorithm, return.
  2. %~node の`~template内容$の ~EACH ( 子 %子 ) に対し:

    1. %~clone ~LET `~nodeを~cloneする$( %子, %複製 の`~template内容$の`~node文書$, ~ON )
    2. %複製 の`~template内容$に %~clone を付加する
    ◎ Let copied contents be the result of cloning all the children of node's template contents, with document set to copy's template contents's node document, and with the clone children flag set. ◎ Append copied contents to copy's template contents.

次の例の~scriptは、要素~構造を提供する `template$e を利用して, 4 ~columnからなる~tableを ある~data構造からの~dataで拡充する — 手動で~markupして構造を生成する代わりに: ◎ In this example, a script populates a table four-column with data from a data structure, using a template to provide the element structure instead of manually generating the structure from markup.

<!DOCTYPE html>
<html lang='en'>
<title>Cat data</title>
<script>
 // 
ここでは~dataを直に記しているが、~serverから得るようにすることもできる。
◎
Data is hard-coded here, but could come from the server

 var %data = [
   {
      name: 'Pillar',
      color: 'Ticked Tabby',
      sex: 'Female (neutered)',
      legs: 3
   },
   {
      name: 'Hedral',
      color: 'Tuxedo',
      sex: 'Male (neutered)',
      legs: 4
   },
 ];
</script>
<table>
 <thead>
  <tr>
   <th>Name <th>Colour <th>Sex <th>Legs
 <tbody>
  <template id="row">
   <tr><td><td><td><td>
  </template>
</table>
<script>
 var %template = document.querySelector('#row');
 for (var %i = 0; %i < %data.length; %i += 1) {
   var %cat = %data[i];
   var %clone = %template.content.cloneNode(true);
   var %cells = %clone.querySelectorAll('td');
   %cells[0].textContent = %cat.name;
   %cells[1].textContent = %cat.color;
   %cells[2].textContent = %cat.sex;
   %cells[3].textContent = %cat.legs;
   %template.parentNode.appendChild(%clone);
 }
</script>

この例では、 `template$e の内容~上で `cloneNode()$m を利用しているが,同じことを行う `document.importNode()$m を利用しても等価になる。 これらの~APIの唯一の相違は、いつ`~node文書$が更新されるかになる: `cloneNode()$m では, `appendChild()$m で~nodeが付加されるとき / `document.importNode()$m では,~nodeが~cloneされるときに更新される。 ◎ This example uses cloneNode() on the template's contents; it could equivalently have used document.importNode(), which does the same thing. The only difference between these two APIs is when the node document is updated: with cloneNode() it is updated when the nodes are appended with appendChild(), with document.importNode() it is updated when the nodes are cloned.

4.12.3.1. `template$e 要素と~XSLT, ~XPathとの相互作用

~INFORMATIVE

この仕様は、~XSLTと `template$e 要素とが,どう相互作用するかは定義しない。 しかしながら、これを実際に定義している別の仕様が不在の下での、既存の実装に基づく,実装者に対するいくつかの指針をここに述べる。 これらの指針は、この仕様に述べる他の処理と整合するように意図されている: ◎ This specification does not define how XSLT and XPath interact with the template element. However, in the absence of another specification actually defining this, here are some guidelines for implementers, which are intended to be consistent with other processing described in this specification:

  • [ この仕様に述べるように動作する`~XML構文解析器$ ]に基づく~XSLT処理器は、変形-の目的においては,[ `template$e 要素が その`~template内容$の子孫を包含していた ]かのように動作する必要がある。 ◎ An XSLT processor based on an XML parser that acts as described in this specification needs to act as if template elements contain as descendants their template contents for the purposes of the transform.
  • ~DOMを出力する~XSLT処理器は、[ `template$e 要素の中へ行く~nodeが,要素の`~template内容$の中に置かれる ]ことを確保する必要がある。 ◎ An XSLT processor that outputs a DOM needs to ensure that nodes that would go into a template element are instead placed into the element's template contents.
  • ~XPath~DOM~APIを利用する~XPath式を評価する際には、この仕様に述べる[ `~HTML構文解析器$ / `~XML構文解析器$ ]を利用して構文解析された`文書$に適用されるときは,`~template内容$を無視する必要がある。 ◎ XPath evaluation using the XPath DOM API when applied to a Document parsed using the HTML parser or the XML parser described in this specification needs to ignore template contents.

4.12.4. `slot^e 要素

`分類$:
`~flow内容$ / `句内容$ ◎ Flow content. ◎ Phrasing content.
`この要素を利用できる文脈$:
`句内容$が期待される所。 ◎ Where phrasing content is expected.
`内容~model$:
`透過的$ ◎ Transparent
`text/html における~tag省略$:
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$:
`大域~属性$ ◎ Global attributes
`name$a — `~shadow木$の`~slot$の`~slot名$ ◎ name — Name of shadow tree slot
`~DOM~interface$:
[Exposed=Window,
`HTMLConstructor$]
interface `HTMLSlotElement@I : `HTMLElement$I {
  [`CEReactions$] attribute DOMString `name$m;
  sequence<Node> `assignedNodes$m(optional `AssignedNodesOptions$I %options);
};

dictionary `AssignedNodesOptions@I {
  boolean flatten = false;
};

`slot$e 要素は、`~slot$を定義する。 それは概して,`~shadow木$に利用される。 `slot$e 要素は、それに`割当されている~nodeたち$が[ あれば それら / なければ自身の内容 ]を`表現-$する。 ◎ The slot element defines a slot. It is typically used in a shadow tree. A slot element represents its assigned nodes, if any, and its contents otherwise.

`name@a 内容~属性が包含する値は、どのような文字列でも~MAY。 それは、`~slot$の`~slot名$を表現する。 ◎ The name content attribute may contain any string value. It represents a slot's name.

注記: `name$a 属性は、他の要素を,この要素が定義する`~slotに割当する$ために利用される: `name$a 属性を有する `slot$e 要素 %slot は、その属性~値を`~slot名$とする`~slot$を作成し,次を満たすような他の要素を その`~slotに割当する$ことが可能になる ⇒ [ 要素の `slot$a 属性の値は~slot名に合致する ]~AND[ %slot を子とする`~shadow木$の`根$の`~host$が,対応する `slot$a 属性~値を持つ【?】 ] ◎ The name attribute is used to assign slots to other elements: a slot element with a name attribute creates a named slot to which any element is assigned if that element has a slot attribute whose value matches that name attribute's value, and the slot element is a child of the shadow tree whose root's host has that corresponding slot attribute value.

%~slot . `name$m
%~slot の`~slot名$を取得したり設定するために利用できる。 ◎ Can be used to get and set slot's name.
%~slot . `assignedNodes(options)$m

%options の `flatten^m ~member値に応じて:

  • ~F ならば、 %~slot に`割当されている~nodeたち$を返す。
  • ~T ならば、 %~slot に`割当されている~nodeたち$が[ あれば それら / なければ %~slot の子たち ]に加えて、それらに含まれる各 `slot$e 要素に対しても, `slot$e 要素が尽きるまで,再帰的に同じことをして得られる~nodeたちを返す。
◎ Returns slot's assigned nodes. ◎ slot . assignedNodes({ flatten: true }) ◎ Returns slot's assigned nodes, if any, and slot's children otherwise, and does the same for any slot elements encountered therein, recursively, until there are no slot elements left.
`name@m
同じ名前の内容~属性を`反映-$し~MUST。 ◎ The name IDL attribute must reflect the content attribute of the same name.
`assignedNodes(options)@m

被呼出時には、次を走らせ~MUST: ◎ The assignedNodes(options) method, when invoked, must run these steps:

  1. ~IF[ %options の `flatten^m ~member値 ~EQ ~F ] ⇒ ~RET 此れに`割当されている~nodeたち$ ◎ If the value of options's flatten member is false, then return this element's assigned nodes.
  2. ~RET `~slot用に平坦化された~slotableたちを見出す$( 此れ ) ◎ Return the result of finding flattened slotables with this element.