第二章

HTML中的JavaScript

2.1<script>元素

属性：

1.async（可选）：立即开始下载脚本（异步下载），只对外部脚本有用
2.charset（可选）：使用src来指定代码的字符集，不常用
3.crossorigin（可选）：一种机制，用于一个网页向另一个域请求从第三方服务器获取资源，crossorigin= "anonymous"属性值表示它定义了一个 CORS 请求，该请求将在不传递凭证信息的情况下发送。crossorigin="usecredentials"属性值表示将发送带有凭据、cookie 和证书的 CORS  请求。
4.defer（可选）：表示脚本会被延迟到文档完全加载解析了之后才执行，只对外部脚本生效。
5.integrity（可选）：通过对比接收到的资源的签名和这个属性的签名是否相同来验证资源的完整性，如果不相同，脚本就不会被执行。
6.language（废弃）：用于表示代码块的脚本语言。
7.src（可选）：表示要执行的外部脚本文件。
8.type（可选）：用于代替language，其值始终是text/javascript

使用<script>的方式有两种：通过它直接在网页中嵌入 JavaScript 代码，以及通过它在网页中包含外部 JavaScript 文件。
在使用行内 JavaScript 代码时，要注意代码中不能出现字符串</script>。比如，下面的代码会导致浏览器报错：

<script> function sayScript() { console.log("</script>"); }
</script>

浏览器解析行内脚本的方式决定了它在看到字符串</script>时，会将其当成结束的</script>标签。想避免这个问题，只需要转义字符“\”①即可：

<script> function sayScript() { console.log("<\/script>"); }
</script>

这样修改之后，代码就可以被浏览器完全解释，不会导致任何错误。

2.1.1标签位置

最开始所有<script>元素都被放在页面的标签内

<!DOCTYPE html>
<html> <head> <title>Example HTML Page</title> <script src="example1.js"></script> <script src="example2.js"></script> </head> <body> <!-- 这里是页面内容 --> </body>
</html>

这种方法是为了把从外部导入得脚本文件放在一起。但是把所有JavaScript文件都放在<head>里，也就意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染）。如果脚本文件很多，会导致页面渲染产生明显的延迟，这时的页面完全处于空白。
后来为了解决这一问题，现代web应用会把脚本文件放在在<body>元素中的页面内容后面

<!DOCTYPE html>
<html> <head> <title>Example HTML Page</title> </head> <body> <!-- 这里是页面内容 --> <script src="example1.js"></script> <script src="example2.js"></script> </body>
</html>

这样一来，页面会在处理 JavaScript 代码之前完全渲染页面。用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。

2.1.2 推迟执行脚本

具体做法就是使用defer属性，因为defer属性表示在脚本执行的时候不会改变页面结构，使得脚本会被延迟到整个页面解析完成之后再执行，所以，在<script>上设置defer属性就是告诉浏览器立即下载，但是延迟执行。

<!DOCTYPE html>
<html> <head> <title>Example HTML Page</title> <script defer src="example1.js"></script> <script defer src="example2.js"></script> </head> <body> <!-- 这里是页面内容 --> </body>
</html>

虽然这个例子中的<script>元素包含在页面的<head>中，但它们会在浏览器解析到结束的</html>标签后才会执行。

2.1.3 异步执行脚本

HTML5 为<script>元素定义了 async 属性。从改变脚本处理方式上看，async 属性与 defer 类<script>元素似。当然，它们两者也都只适用于外部脚本，都会告诉浏览器立即开始下载。不过，与 defer 不同的是，标记为 async 的脚本并不保证能按照它们出现的次序执行

<!DOCTYPE html>
<html> <head> <title>Example HTML Page</title> <script async src="example1.js"></script> <script async src="example2.js"></script> </head> <body> <!-- 这里是页面内容 --> </body>
</html>

在这个例子中，第二个脚本可能先于第一个脚本执行。

2.1.4 动态加载脚本

加载脚本的方法，除了<script>标签外，还有通过向DOM中添加script元素也可以实现加载脚本。只需要创建一个script元素并且添加到DOM中就可以。

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

默认情况下，以这种方式创建的<script>元素是以异步方式加载的，相当于添加了 async 属性。不过这样做可能会有问题，因为所有浏览器都支持 createElement()方法，但不是所有浏览器都支持 async 属性。因此，如果要统一动态脚本的加载行为，可以明确将其设置为同步加载：

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

2.2 行内代码与外部文件

使用外部文件的理由：

1.可维护性。JavaScript 代码如果分散到很多 HTML 页面，会导致维护困难。而用一个目录保存所有 JavaScript 文件，则更容易维护，这样开发者就可以独立于使用它们的 HTML 页面来编辑代码。
2.缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快。
3.适应未来。通过把 JavaScript 放到外部文件中，就不必考虑用 XHTML 或前面提到的注释黑科技。包含外部 JavaScript 文件的语法在 HTML 和 XHTML 中是一样的。

2.3 <noscript>元素

该元素是针对不支持JavaScript的早期浏览器，为不支持JavaScript的浏览器提供替代内容，如今，因为所有的浏览器已经支持JavaScript，所以只有两种情况可以看到这个元素：

浏览器不支持脚本
浏览器对脚本的支持被关闭
任何一个条件被满足，包含在中的内容就会被渲染。否则，浏览器不会渲染<noscript>中的内容。

<!DOCTYPE html>
<html> <head> <title>Example HTML Page</title> <script defer="defer" src="example1.js"></script> <script defer="defer" src="example2.js"></script> </head> <body> <noscript> <p>This page requires a JavaScript-enabled browser.</p> </noscript> </body>
</html>

这个例子是在脚本不可用时让浏览器显示一段话。如果浏览器支持脚本，则用户永远不会看到它。

2.4小结

JavaScript 是通过<script>元素插入到 HTML 页面中的。这个元素可用于把 JavaScript 代码嵌入到
HTML 页面中，跟其他标记混合在一起，也可用于引入保存在外部文件中的 JavaScript。本章的重点可
以总结如下:

要包含外部 JavaScript 文件，必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同
一台服务器上，也可以位于完全不同的域。
所有<script>元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的
情况下，包含在<script>元素中的代码必须严格按次序解释。
对不推迟执行的脚本，浏览器必须解释完位于<script>元素中的代码，然后才能继续渲染页面
的剩余部分。为此，通常应该把<script>元素放到页面末尾，介于主内容之后及</body>标签
之前。
可以使用 defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出
的次序执行。
可以使用 async 属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异
步脚本不能保证按照它们在页面中出现的次序执行。
通过使用<noscript>元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启
用脚本，则<noscript>元素中的任何内容都不会被渲染。

读JavaScript高级程序设计感受相关推荐

读javascript高级程序设计-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/> 本笔记是为了方便日后查阅,仅作学习交 ...
读javascript高级程序设计10-DOM
一.节点关系元素的childNodes属性来表示其所有子节点,它是一个NodeList对象,会随着DOM结构的变化动态变化. hasChildNodes():是否有子节点. var headline ...
读javascript高级程序设计15-Ajax,CORS,JSONP,Img Ping
平时用惯了jQuery.ajax之类的方法,却时常忽略了它背后的实现,本文是学习了AJAX基础及几种跨域解决方案之后的一些收获. 一.AJAX--XMLHttpRequest 谈起Ajax我们都很熟悉 ...
读javascript高级程序设计13-JSON
JSON是一个轻量级的数据格式,可以简化表示数据结构的工作量.在实际工作中,我们经常用它来传递数据,不过对于其使用的一些细节还是需要注意的.在ECMAScript5中定义了原生的JSON对象,可以用来 ...
读javascript高级程序设计02-变量作用域
一. 延长作用域链有些语句可以在作用域前端临时增加一个变量对象,该变量对象在代码执行完成后会被移除. ①with语句延长作用域. function buildUrl(){ var qs=" ...
读javascript高级程序设计12-HTML5脚本编程
一.跨文档消息传递(XDM) 1.发送消息 postMessage(msg,domain)用于发送跨文档消息.第一个参数是要传递的消息内容,第二个参数表示接收方来自哪个域.第二个参数有助于提高安全性, ...
读javascript高级程序设计03-函数表达式、闭包、私有变量
一.函数声明和函数表达式定义函数有两种方式:函数声明和函数表达式.它们之间一个重要的区别是函数提升. 1.函数声明会进行函数提升,所以函数调用在函数声明之前也不会报错: test(); functi ...
读javascript高级程序设计11-事件
一.事件流事件流指从页面中接收事件的顺序. 1.事件冒泡(常用) IE中采用的事件流是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素. 2.事件捕获(少用) Netscapte采用事件 ...
读javascript高级程序设计06-面向对象之继承
原型链是实现继承的主要方法,通过原型能让一个引用类型继承另一个引用类型. 1.原型链实现继承 function SuperType(){ this.superprop=1; } SuperType.p ...
读javascript高级程序设计04-canvas
一.基本用法 1.要使用canvas元素,需要先给定其width和height来设置绘图区域的大小.canvas中间的文本会在浏览器不支持canvas的情况下显示出来. <canvas widt ...

读JavaScript高级程序设计感受

第二章