第2章 HTML中的JavaScript
引言
将JavaScript引入网页，首先要解决它与网页的主导语言HTML的关系问题
script元素
将JavaScript插入HTML的主要方法是使用script元素，script有8个可选属性
- async：表示异步加载js文件内容，他们之间的顺序不一定按照html顺序
- charset：指定js文件字符集
- crossorigin：默认为anonymous配置文件请求不必设置凭据标志。use-credentials设置凭据标志
- defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效
- integrity：你可以确保所引用的外部资源在下载和使用时没有被篡改。异常会报错
- src：加载外部资源的路径
- type：默认为text/javascript，表示代码块中脚本语言的内容类型
使用方式一
直接写在script标签内部，js代码会从下自下以此执行。js代码被计算完毕之前其他元素不会执行也不会显示
<script>function sayHi() {console.log("Hi! ");}
</script>
在使用script标签内嵌js代码的使用js代码中不能使用</ script>字符串
<script>function sayScript() {console.log("</script>"); // errorconsole.log("<\/script>"); // 使用转移字符可以正常运行}
</script>
使用方式二
要包含外部文件中的JavaScript，就必须使用src属性。与解释行内JavaScript一样，在解释外部JavaScript文件时，页面也会阻塞。
注意使用了外部资源就不能再在script标签中内嵌js
<script src="example.js"></script>
scr除了可以是本地的文件外，还可以是url。浏览器在解析这个资源时，会向src属性指定的路径发送一个GET请求，以取得相应资源
在包含外部域的JavaScript文件时，要确保该域是自己所有的，或者该域是一个可信的来源。
<script src="http://www.somewhere.com/afile.js"></script>
不管包含的是什么代码，浏览器都会按照script在页面中出现的顺序依次解释它们，前提是它们没有使用defer和async属性。
标签位置
早期script元素都是写在head元素中，但这会造成页面延迟加载
<html><head>...<script src="http://www.somewhere.com/afile.js"></script></head>
</html>
最好的做法是写在body元素最后，这样就不会因为先加载js造成的延迟
<html><body>...<script src="http://www.somewhere.com/afile.js"></script>
</body>
</html>
推迟执行脚本
写在head上是最好加上defer属性，推迟js加载顺序。等待html加载完毕后会加载
defer属性只能用于外部的js，并且如果多个script添加defer会自上而下的js加载顺序
<html><head>...<script defer src="http://www.somewhere.com/afile.js"></script></head>
</html>
异步执行脚本
和defer用法类似，最大的区别是async是那个js先加载完毕会优先加载那个js。
<html><head>...<script async src="http://www.somewhere.com/afile.js"></script></head>
</html>
动态加载脚本
在把HTMLElement元素添加到DOM且执行到这段代码之前不会发送请求
let script = document.createElement('script');script.src = 'gibberish.js';document.head.appendChild(script);
以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级
要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：
<link rel="preload" href="gibberish.js">
行内代码与外部文件
推荐使用外部文件引入js，原因如下
- 更好的可维护性
- 缓存：浏览器会根据特定的设置缓存所有外部链接的JavaScript文件，多个页面只用下载一次
- 适应未来
多个js文件引入最好统一放到一个单独的js引入
<scriptsrc="mainB.js"></script>
<scriptsrc="component3.js"></script>
<scriptsrc="component4.js"></script>
<scriptsrc="component5.js"></script>
...
文档模式
文档模式有三种：混杂模式，标准模式，准标准模式
三种模式的区别主要体现在css的使用结果上
标准模式声明
<! -- 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>
非标准模式声明
<! -- 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">
noscript元素
主要为了解决游览器不支持/禁用script而出现，被用于给不支持JavaScript的浏览器提供替代内容
当游览器不支持或者禁用script，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>