2 《JavaScript高级程序设计》__ HTML中的JavaScript
2 《JavaScript高级程序设计》__ HTML中的JavaScript
前言
大家好，我是HoMeTown，web领域有一本神书大家应该都有看过，这本书我看过两遍，但是每次看都是粗粗的略过一些重要的知识点，甚至一些面试过程中的问题，在这本书里都能找到答案。
工作这么多年，到现在为止对这本书都没有一个系统的知识点记录，这次想从头读一遍这一本JavaScript高级程序设计【第4版】，并把重要的知识点记录下来，同时加上自己的见解，这也是我第一次在掘金上记录分享读书笔记，共勉之！
关注专栏，一起学习吧~
script 标签
script标签出现的原因是为了解决早期js引入html页面的同时，不会导致页面在其他浏览器中渲染出问题。
通过<script></script>的方式可以将一段script脚本插入到html中，或者引入到html中。
script标签有以下属性：
- async
- charset
- crossorigin
- defer
- integrity
- language
- src
- type
async 异步执行脚本
可选值，开启async后，浏览器会立即开始下载脚本，这个动作是异步的，不能阻止页面其他动作。必须是引入外部文件的script上才能使用，也就是必须与src属性同时使用。
<script
async
src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"
></script><script>
console.log(jQuery); // Uncaught ReferenceError: jQuery is not defined</script>上面这段代码会抛出错误，因为上面的script async src=jquery是异步，并不会影响下面的script脚本，并且后面这段script脚本执行时，上面的脚本还未加载完毕。
改造一下：
<script
async
src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"
></script><script>
setTimeout(() => {
console.log(typeof jQuery); // function
}, 1000);</script>charset 指定字符集
可选值，使用src属性时，指定的代码字符集，一般很少用，一般为UTF-8,Unicode的字符编码。 兼容ASCII。
corssorigin 开启跨域校验
可选值，开启后可以要求服务器是否进行cors校验，属性的可用值：
anonymous对此元素的 CORS 请求将不设置凭据标志（默认值）use-credentials对此元素的 CORS 请求将设置凭证标志；这意味着请求将提供凭据""与corssorigin="anonymous"效果相同
HTML5新增属性，其实本来<script>标签就是可以跨域请求资源的，那为啥还要有这么一个属性呢？红宝书上对这个属性并没有太多的解释。
查阅资料后发现script 标签请求资源的时候，request header里是没有origin的：
加上crossorigin后就有了，值为null：
其实这样还是能请求成功，因为这个文件设置了access-control-allow-origin: *，随便找一个没有设置的，测试如下：
删除这个属性，测试如下：
只是有代码上的报错，但是不跨域了。
总结一下：
- 设置了
crossorigin就相当于开启了cors校验。 - 开启cors校验之后，跨域的script资源在运行出错的时候，
window.onerror可以捕获到完整的错误信息。 crossorigin=use-credentials可以跨域带上cookie。
defer 延迟执行脚本
可选值，脚本可以延迟到文档完全被解析和显示以后才执行，举个例子：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script defer src="./defer1.js"></script>
<script defer src="./defer2.js"></script>
</head>
<body>
<div id="box"></div>
<script>
let box = document.querySelector("#box");
box.innerHTML = "HoMeTown";
for (var i = 0; i < 999999; i++) {
console.log(i);
}
</script>
</body></html>执行结果如下：
也就是说，即使我的script标签在顶部，只要加了defer属性之后其实就是在文档全部解析渲染完毕后执行的。需要注意的是，defer属性的支持是从IE4、Firefox3.5、Safari5和Chrome7开始的，其他浏览器则会忽略这个属性，因此，最好还是把要推迟执行的脚本放在页面底部比较好。
integrity web安全文件资源完整性校验
可选值，允许比对接收到的资源和指定的加密签名以验证子资源的完整性（SRI，Subresource Integrity），如果接收到的资源的签名和这个属性置顶的签名不匹配，页面会报错。这个属性可以确保CDN(Content Delivery Network)不会提供恶意内容。
src 引入外部js文件
可选值，引入外部js代码文件。
type 规定内容类型
可选值，表示代码块中语言的内容类型（MIME类型）。一般情况下始终为text/javascript，如果值为moddule，则代码会被当成ES6模块，只有这时候，代码中才能出现import和export关键字。
举个例子：
<script type="module">
import { num } from "./type.js";
console.log(num);</script>noscript标签
针对早期浏览器不支持 JavaScript标签的问题，<noscript>标签诞生，现在基本上所有浏览器都支持Js，所以这个基本没什么作用了，但是有的浏览器支持禁用Js，所以，项目里还是写上这个标签比较稳妥。
<noscript>
您的浏览器不支持JavaScript，请更换浏览器。</noscript>总结
- script标签支持的属性需要明白什么意思，有什么作用。
- noscript标签是在不支持js的浏览器中才生效的，如果支持，则看不到该标签内的内容。