HTML：活的标准

例如，与其使用脚本显示或隐藏某个部分以显示更多详细信息，不如使用 details 元素。

例如，如果作者在表格标题中提供一个链接以动态重新排序表格，则该链接也可以在没有脚本的情况下工作，方法是从服务器请求排序后的表格。

一个script元素的引用者策略在获取导入的脚本时使用，但在获取其他子资源时不使用。

<script referrerpolicy="origin">
  fetch('/api/data');    // not fetched with <script>'s referrer policy
  import('./utils.mjs'); // is fetched with <script>'s referrer policy ("origin" in this case)
</script>

在此示例中，使用了两个script元素。一个嵌入外部经典脚本，另一个包含一些数据作为数据块。

<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>

在这种情况下，数据可能会被脚本用于生成视频游戏的映射。不过，数据不必以这种方式使用；也许地图数据实际上嵌入在页面标记的其他部分，而此处的数据库块仅由站点的搜索引擎用于帮助寻找游戏中特定功能的用户。

以下示例演示了如何使用`script` 元素定义一个函数，然后作为`传统脚本`的一部分，由文档的其他部分使用。它还演示了如何使用`script` 元素在解析文档时调用脚本，在本例中用于初始化表单的输出。

<script>
 function calculate(form) {
   var price = 52000;
   if (form.elements.brakes.checked)
     price += 1000;
   if (form.elements.radio.checked)
     price += 2500;
   if (form.elements.turbo.checked)
     price += 5000;
   if (form.elements.sticker.checked)
     price += 250;
   form.elements.result.value = price;
 }
</script>
<form name="pricecalc" onsubmit="return false" onchange="calculate(this)">
 <fieldset>
  <legend>Work out the price of your car</legend>
  <p>Base cost: £52000.</p>
  <p>Select additional options:</p>
  <ul>
   <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li>
   <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li>
   <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li>
   <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li>
  </ul>
  <p>Total: £<output name=result></output></p>
 </fieldset>
 <script>
  calculate(document.forms.pricecalc);
 </script>
</form>

以下示例演示了如何使用`script` 元素包含一个外部`JavaScript 模块脚本`。

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

此模块及其所有依赖项（在源文件中通过 JavaScript `import` 语句表示）将被获取。一旦整个生成的模块图被导入，并且文档解析完成，`app.mjs` 的内容将被评估。

此外，如果来自同一 `Window` 中另一个`script` 元素的代码导入来自 `app.mjs` 的模块（例如，通过 `import "./app.mjs";`），则将导入由前一个`script` 元素创建的相同`JavaScript 模块脚本`。

此示例演示了如何为现代用户代理包含`JavaScript 模块脚本`，以及为旧版用户代理包含`传统脚本`。

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

在支持`JavaScript 模块脚本`的现代用户代理中，带有`nomodule` 属性的`script` 元素将被忽略，而`type` 为“`module`”的`script` 元素将被获取和评估（作为`JavaScript 模块脚本`）。相反，旧版用户代理将忽略`type` 为“`module`”的`script` 元素，因为这对它们来说是一种未知的脚本类型——但它们在获取和评估另一个`script` 元素（作为`传统脚本`）时没有任何问题，因为它们没有实现`nomodule` 属性。

以下示例演示了如何使用`script` 元素编写一个内联`JavaScript 模块脚本`，该脚本对文档的文本执行一系列替换，以获得更有趣的阅读体验（例如，在新闻网站上）：[XKCD1288]

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

 const substitutions = new Map([
   ["witnesses", "these dudes I know"]
   ["allegedly", "kinda probably"]
   ["new study", "Tumblr post"]
   ["rebuild", "avenge"]
   ["space", "spaaace"]
   ["Google glass", "Virtual Boy"]
   ["smartphone", "Pokédex"]
   ["electric", "atomic"]
   ["Senator", "Elf-Lord"]
   ["car", "cat"]
   ["election", "eating contest"]
   ["Congressional leaders", "river spirits"]
   ["homeland security", "Homestar Runner"]
   ["could not be reached for comment", "is guilty and everyone knows it"]
 ]);

 function substitute(textNode) {
   for (const [before, after] of substitutions.entries()) {
     textNode.data = textNode.data.replace(new RegExp(`\\b${before}\\b`, "ig"), after);
   }
 }

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

使用 JavaScript 模块脚本获得的一些显著功能包括：能够从其他 JavaScript 模块导入函数，默认情况下使用严格模式，以及顶级声明不会在`全局对象`上引入新属性。另请注意，无论此`script` 元素出现在文档中的哪个位置，它都不会在文档解析完成并且其依赖项（`dom-utils.mjs`）被获取并评估之前进行评估。

以下示例演示了如何从`JavaScript 模块脚本`内部导入`JSON 模块脚本`。

<script type="module">
 import peopleInSpace from "http://api.open-notify.org/astros.json" with { type: "json" };

 const list = document.querySelector("#people-in-space");
 for (const { craft, name } of peopleInSpace.people) {
   const li = document.createElement("li");
   li.textContent = `${name} / ${craft}`;
   list.append(li);
 }
</script>

模块脚本的 MIME 类型检查非常严格。为了使`JSON 模块脚本`的获取成功，HTTP 响应必须具有JSON MIME 类型，例如 `Content-Type: text/json`。另一方面，如果省略了语句中的 `with { type: "json" }` 部分，则假定意图是导入`JavaScript 模块脚本`，如果 HTTP 响应的 MIME 类型不是JavaScript MIME 类型，则获取将失败。

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

outer         = < any string that doesn't contain a substring that matches not-in-outer >
not-in-outer  = comment-open
inner         = < any string that doesn't contain a substring that matches 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             =  %x0053 ; U+0053 LATIN CAPITAL LETTER S
s             =/ %x0073 ; U+0073 LATIN SMALL LETTER S
c             =  %x0043 ; U+0043 LATIN CAPITAL LETTER C
c             =/ %x0063 ; U+0063 LATIN SMALL LETTER C
r             =  %x0052 ; U+0052 LATIN CAPITAL LETTER R
r             =/ %x0072 ; U+0072 LATIN SMALL LETTER R
i             =  %x0049 ; U+0049 LATIN CAPITAL LETTER I
i             =/ %x0069 ; U+0069 LATIN SMALL LETTER I
p             =  %x0050 ; U+0050 LATIN CAPITAL LETTER P
p             =/ %x0070 ; U+0070 LATIN SMALL LETTER P
t             =  %x0054 ; U+0054 LATIN CAPITAL LETTER T
t             =/ %x0074 ; U+0074 LATIN SMALL LETTER T

tag-end       =  %x0009 ; U+0009 CHARACTER TABULATION (tab)
tag-end       =/ %x000A ; U+000A LINE FEED (LF)
tag-end       =/ %x000C ; U+000C FORM FEED (FF)
tag-end       =/ %x0020 ; U+0020 SPACE
tag-end       =/ %x002F ; U+002F SOLIDUS (/)
tag-end       =/ %x003E ; U+003E GREATER-THAN SIGN (>)

以下脚本说明了此问题。假设您有一个包含字符串的脚本，如下所示

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

如果将此字符串直接放在`script` 块中，它将违反上述限制。

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

不过，更大的问题，也是它违反这些限制的原因在于，脚本实际上会被奇怪地解析：上面的脚本块没有终止。也就是说，此代码段中看起来像“`</script>`”结束标记的实际上仍然是`script` 块的一部分。脚本不会执行（因为它没有终止）；如果它以某种方式执行，就像标记如下所示时可能发生的那样，它将失败，因为脚本（此处突出显示）不是有效的 JavaScript。

<script>
  const example = 'Consider this string: <!-- <script>';
  console.log(example);
</script>
<!-- despite appearances, this is actually part of the script still! -->
<script>
 ... // this is the same script block still...
</script>

这里发生的情况是，出于遗留原因，HTML 中`script` 元素中的“`<!--`”和“`<script`”字符串需要平衡，才能使解析器认为关闭了块。

通过按照本节开头提到的方式转义有问题的字符串，可以完全避免此问题。

<script>
  // Note: `\x3C` is an escape sequence for `<`.
  const example = 'Consider this string: \x3C!-- \x3Cscript>';
  console.log(example);
</script>
<!-- this is just a comment between script blocks -->
<script>
 ... // this is a new script block
</script>

这些序列可能自然出现在脚本表达式中，例如以下示例

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

在这种情况下，无法转义这些字符，但可以重写表达式以使这些序列不出现，如下所示

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

这样做还可以避免另一个陷阱：出于相关历史原因，`传统脚本`中的字符串“`<!--`”实际上被视为行注释的开始，就像“`//`”一样。

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           = %x0009 ; U+0009 CHARACTER TABULATION (tab)
newline       = %x000A ; U+000A LINE FEED (LF)
space         = %x0020 ; U+0020 SPACE
star          = %x002A ; U+002A ASTERISK (*)
slash         = %x002F ; U+002F SOLIDUS (/)
not-newline   = %x0000-0009 / %x000B-10FFFF
                ; a scalar value other than U+000A LINE FEED (LF)
not-star      = %x0000-0029 / %x002B-10FFFF
                ; a scalar value other than U+002A ASTERISK (*)
not-slash     = %x0000-002E / %x0030-10FFFF
                ; a scalar value other than U+002F SOLIDUS (/)

这允许作者在文档中包含文档，例如许可证信息或 API 信息，同时仍然引用外部脚本文件。语法受到限制，以防止作者意外地包含看起来像有效脚本的内容，同时还提供`src` 属性。

<script src="cool-effects.js">
 // create new instances using:
 //    var e = new Effect();
 // start the effect using .play, stop using .stop:
 //    e.play();
 //    e.stop();
</script>

在以下示例中，noscript 元素用于为脚本提供回退。

<form action="calcSquare.php">
 <p>
  <label for=x>Number</label>:
  <input id="x" name="x" type="number">
 </p>
 <script>
  var x = document.getElementById('x');
  var output = document.createElement('p');
  output.textContent = 'Type a number; it will be squared right then!';
  x.form.appendChild(output);
  x.form.onsubmit = function () { return false; }
  x.oninput = function () {
    var v = x.valueAsNumber;
    output.textContent = v + ' squared is ' + v * v;
  };
 </script>
 <noscript>
  <input type=submit value="Calculate Square">
 </noscript>
</form>

当脚本被禁用时，将显示一个按钮以在服务器端进行计算。当脚本启用时，将即时计算该值。

noscript 元素是一种笨拙的工具。有时，脚本可能已启用，但由于某种原因，页面的脚本可能会失败。因此，通常最好避免使用 noscript，而是设计脚本以根据需要将页面从无脚本页面更改为有脚本页面，如下一个示例所示。

<form action="calcSquare.php">
 <p>
  <label for=x>Number</label>:
  <input id="x" name="x" type="number">
 </p>
 <input id="submit" type=submit value="Calculate Square">
 <script>
  var x = document.getElementById('x');
  var output = document.createElement('p');
  output.textContent = 'Type a number; it will be squared right then!';
  x.form.appendChild(output);
  x.form.onsubmit = function () { return false; }
  x.oninput = function () {
    var v = x.valueAsNumber;
    output.textContent = v + ' squared is ' + v * v;
  };
  var submit = document.getElementById('submit');
  submit.parentNode.removeChild(submit);
 </script>
</form>

上述技术在 XML 文档 中也很有用，因为 noscript 在那里不允许使用。

例如，考虑以下文档

<!doctype html>
<html lang="en">
 <head>
  <title>Homework</title>
 <body>
  <template id="template"><p>Smile!</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 中的 p 元素 *不是* DOM 中 template 的子元素；它是 template 元素的 content IDL 属性返回的 DocumentFragment 的子元素。

如果脚本要对 template 元素调用 appendChild()，则会向 template 元素添加一个子元素（与任何其他元素一样）；但是，这样做违反了 template 元素的内容模型。

在此示例中，脚本使用来自数据结构的数据填充一个四列表，使用 template 提供元素结构，而不是手动从标记生成结构。

<!DOCTYPE html>
<html lang='en'>
<title>Cat data</title>
<script>
 // 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>Color <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>

此示例对cloneNode()应用于template的内容；它也可以等效地使用document.importNode()，它执行相同操作。这两个 API 之间的唯一区别在于何时更新节点文档：使用cloneNode()时，在使用appendChild()追加节点时更新；使用document.importNode()时，在克隆节点时更新。