2HTML中的JavaScript_html2.js-CSDN博客

HTML中的JavaScript

以下内容出自JavaScript高级程序设计（第4版），笔者系统学习书籍章节并整理出以下内容，仅针对笔者本人学习的方便性，希望对大家有所帮助：

HTML中引入JavaScript的方法是使用**<script>**标签。该标签可以包含以下属性：
- async：异步执行脚本，只适用于外部脚本，使用该属性的目的是告诉浏览器，不必等脚本下载和执行完成后再加载页面、也不必等到异步脚本下载和执行后再添加其它脚本。后一个脚本有可能先于前一个脚本执行，因此异步脚本不应该再加载期间修改DOM。
```
<!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>
```
- charset：指定src属性的代码字符集。
- crossorigin：配置相关请求的CORS（跨源资源共享），该属性有两个值，anonymous即配置文件请求不必设置凭据标志，use-credentials即设置凭据标志。
- defer：只对外部引用文件有用，表示脚本可以延迟到文档完成被解析和显示之后再执行。相当于告诉浏览器立即下载，但延迟执行。即使<script>包含在<head>内，脚本依然会在浏览器解析到结束的</html>后才会执行。某些浏览器不支持defer属性，因此还是将要延迟执行的脚本放在页面底部比较好。
- integrity：允许比对接受到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）。
- src：表示包含要执行的代码的外部文件。使用了src属性的<script>元素不应该再在此标签中包含其它JavaScript代码。若两者都提供，则浏览器仅下载并执行外部文件。src属性所包含的值可以是一个完整的URL，且该URL指向的资源可以跟包含它的HTML不再同一个域中。
```
<script src="http://www.somewhere.com/afile.js"></script>

```
- type：代替废弃的属性language，表示代码块中脚本语言的内容类型（MIME），该值始终是"text/javascript"。如果这个值是module，则代码会被当成ES6模块，当且仅当此时，代码中才能出现import和export关键字。
使用<script>的方式有两种：
- 直接在网页中嵌入JavaScript代码
- 在网页中包含外部JavaScript文件
放在<script>内的代码会从上到下解释，除非其中包含了async或defer属性，在其中的代码被计算完成之前，页面的其余内容不会被加载，也不会显示。
将<script>标签放在<head>内会导致页面渲染被明显延迟，因此通常将JavaScript引用全部放在<body>的页面内容后面。或者使用async或defer属性。

可以使用以下脚本动态加载脚本：

let script = document.createElement('script')
script.src = 'gibberish.js'
script.async = false 	//有些浏览器不支持async属性，因此统一为同步加载
document.head.appendChild(script)

这种方式获取资源对浏览器的预加载器是不可见的，可以在文档头部显示声明它们：

<link rel="preload" href="gibberish.js">

<!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>