HTML中的 JavaScript 学习--高级程序设计学习

主要内容：

• 使用<script>元素
• 行内脚本与外部脚本的比较

• 文档模式对JavaScript有什么影响
• 确保JavaScript不可用时的用户体验

1 <script> 元素

script元素的属性：

async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作。只对外部脚本有效。

charset：可选。

crossorigin：可选。配置相关请求的cors（跨资源共享）设置。anonymous配置请求不必设置凭据标志。"use-credetials"设置凭证标志，。意味着出站请求会包含的凭证。

defer：可选。脚本可以延迟到文档完全解析和显示之后再执行。只对外部脚本有效。

integrity：可选。允许对比接收到额资源和指定的加签名以验证资源的完整性（SRI）。

src：可选。表示包含要执行的代码的外部文件。

type：可选。代替language。表示代码中脚本语言的内容类型（MIME类型）。按照管理，要是是text/javascript或者module。前者基本是默认值。如果是后者，则代码会被当成ES6模块，这时候代码中才能出现import和export关键字。

1.1 标签占位符

script 建议放在页面内容之后，</body>之前。这样就页面就在处理javaScript代码之前渲染页面。用户感觉加载更快。

1.2 推迟执行脚本

defer属性--立即下载，但延迟执行。会在浏览器解析到结束</html>标签之后才会执行。脚本应该按照他们出现的顺序执行。但实际，不一定。

1.3 异步执行脚本

async属性：与defer类似，但是执行顺序是随机的。重点在于，这些脚本没有依赖关系。

1.4 动态加载脚本

javaScript可以使用DOM API。所以通过DOM中动态添加script元素同样可以加载指定的脚本。

let script = document.creatElement('script');
script.src = 'gx.js';
script.async = false;
document.head.appendChild(script);

1.5 XHTML中的变化

可扩展超文本标记语言(XHTML)是将HTML作为XML的应用重新包装的结果。与HMTML不同，XHTML中使用JavaScript必须指定type属性且值为text/javascript。

1.6 废弃的语法

2 行内代码与外部文件

虽然可以直接在html文件总潜入javaSccript代码，但通常认为最佳实践是尽可能将JavaScript代码放在外部文件中。推荐外部文件理由如下：

1. 1. 可维护性。
   2. 缓存。如果，两个页面用到同一个文件，则该文件只需下载一次。意味着页面加载更快。

1. 1. 适应未来。外部的js文件，在html和xhtml中是一样的。

3 文档模式

doctype切换文档模式。最初有：混杂模式和标准模式。后面添加：准标准模式。

4 <noscript> 元素

针对浏览器不支持javaScript的问题，需要一个页面优雅的降级处理方案。noscript用于给不支持javaScript的浏览器提供替代内容。对于禁用JavaScript的浏览器来说，这个元素仍然有用。在下面两种情况，浏览器将显示noscript中的内容。

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

5 小结

JavaScript是通过script元素插入到HTML页面中。这个元素可以把javaCript代码潜入到HTML页面中。跟其他标记混合在一起，也可以引入保持在外部的JavaScript。

• • 要包含外部JavaScript文件，必须将src属性设置为要包含的文件的URL。
  • 所有script元素会依照它们在页面中出现的次序被解析。在不实用defer和async的属性情况下，会严格按照次序解析。

• • 对于不推迟执行的脚本，浏览器必须解释完位于script元素中的代码，然后才能继续渲染页面的剩余部分。
  • 可以使用defer属性，把脚本推迟到文档渲染完毕再执行。推迟的原则按照出现次序。

• • 可以使用async属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，既异步加载，同时无法保证它们在页面中出现的次序。
  • 可以通过使用noscript元素。指定浏览器不支持脚本显示的内容。