第 2 章 HTML 中的 JavaScript

古希腊掌管牛马的神
91 阅读3分钟

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

第 2 章 HTML 中的 JavaScript

2.1 <script>元素

将 JavaScript 插入 HTML 的主要方法是使用

  1. async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
  2. charset：可选。使用 src 属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。
  3. crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin="anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。
  4. defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。在IE7及更早的版本中，对行内脚本也可以指定这个属性。
  5. integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容。
  6. language：废弃。最初用于表示代码块中的脚本语言（如"JavaScript"、"JavaScript 1.2"或"VBScript"）。大多数浏览器都会忽略这个属性，不应该再使用它。
  7. src：可选。表示包含要执行的代码的外部文件。
  8. type：可选。代替 language，表示代码块中脚本语言的内容类型（也称MIME类型）。按照惯例，这个值始终都是"text/javascript"，尽管"text/javascript"和"text/ecmascript"都已经废弃了。JavaScript 文件的 MIME 类型通常是"application/x-javascript"，不过给type 属性这个值有可能导致脚本被忽略。在非 IE 的浏览器中有效的其他值还有"application/javascript"和"application/ecmascript"。如果这个值是 module，则代码会被当成 ES6 模块，而且只有这时候代码中才能出现 import 和 export 关键字。

使用

2.1.1 标签位置

过去，所有

2.1.2 推迟执行脚本

defer：在

HTML5 规范要求脚本应该按照它们出现的顺序执行，因此第一个推迟的脚本会在第二个推迟的脚本之前执行，而且两者都会在 DOMContentLoaded 事件之前执行。不过在实际当中，推迟执行的脚本不一定总会按顺序执行或者在 DOMContentLoaded 事件之前执行，因此最好只包含一个这样的脚本

2.1.3 异步执行脚本

async：HTML5 为

2.1.4 动态加载脚本

let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);

默认情况下，以这种方式创建的 

let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);

2.1.5 XHTML 中的变化

可扩展超文本标记语言（XHTML，Extensible HyperText Markup Language）是将 HTML 作为 XML 的应用重新包装的结果。XHTML 中编写代码的规则比 HTML 中严格

2.1.6 废弃的语法

自 1995 年 Netscape 2 发布以来，所有浏览器都将 JavaScript 作为默认的编程语言

对不支持 JavaScript 的浏览器隐藏嵌入的 JavaScript 代码。最终方案是把脚本代码包含在一个 HTML 注释中

<script><!--
 function sayHi(){
 console.log("Hi!");
 }
//--></script>

已经不再必要，而且不应该再使用了

2.2 行内代码与外部文件

可以直接在 HTML 文件中嵌入 JavaScript 代码，但最佳实践是尽可能将 JavaScript 代码放在外部文件中

推荐使用外部文件的理由如下：

  • 可维护性
  • 缓存
  • 适应未来

2.3 文档模式

最初的文档模式有两种：混杂模式（quirks mode）和标准模式（standards mode）。 随着浏览器的普遍实现，又出现了第三种文档模式：准标准模式（almost standards mode）

标准模式通过下列几种文档类型声明开启：
<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML5 -->
<!DOCTYPE html> 

准标准模式通过过渡性文档类型（Transitional）和框架集文档类型（Frameset）来触发：
<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

准标准模式与标准模式非常接近，很少需要区分。人们在说到“标准模式”时，可能指其中任何一个。而对文档模式的检测（本书后面会讨论）也不会区分它们。后面所说的标准模式，指的就是除混杂模式以外的模式。

2.4 元素

针对早期浏览器不支持 JavaScript 的问题，需要一个页面优雅降级的处理方案。最终， 元素出现，被用于给不支持 JavaScript 的浏览器提供替代内容。虽然如今的浏览器已经 100%支持 JavaScript，但对于禁用 JavaScript 的浏览器来说，这个元素仍然有它的用处。

在下列两种情况下，浏览器将显示包含在中的内容：

  • 浏览器不支持脚本；
  • 浏览器对脚本的支持被关闭。

任何一个条件被满足，包含在中的内容就会被渲染。否则，浏览器不会渲染 中的内容。

2.5 小结

JavaScript 是通过

  • 要包含外部 JavaScript 文件，必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。
  • 所有
  • 对不推迟执行的脚本，浏览器必须解释完位于标签之前。
  • 可以使用 defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。
  • 可以使用 async 属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
  • 通过使用元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本，则元素中的任何内容都不会被渲染。
avatar
文章
阅读
粉丝