第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标签内嵌js代码的使用js代码中不能使用字符串

");		// error
    
	console.log("<\/script>");		// 使用转移字符可以正常运行
  }

使用方式二

要包含外部文件中的JavaScript，就必须使用src属性。与解释行内JavaScript一样，在解释外部JavaScript文件时，页面也会阻塞。

注意使用了外部资源就不能再在script标签中内嵌js

scr除了可以是本地的文件外，还可以是url。浏览器在解析这个资源时，会向src属性指定的路径发送一个GET请求，以取得相应资源

在包含外部域的JavaScript文件时，要确保该域是自己所有的，或者该域是一个可信的来源。

不管包含的是什么代码，浏览器都会按照script在页面中出现的顺序依次解释它们，前提是它们没有使用defer和async属性。

标签位置

早期script元素都是写在head元素中，但这会造成页面延迟加载

	
		...
		
	

最好的做法是写在body元素最后，这样就不会因为先加载js造成的延迟

	

	...
	

推迟执行脚本

写在head上是最好加上defer属性，推迟js加载顺序。等待html加载完毕后会加载
defer属性只能用于外部的js，并且如果多个script添加defer会自上而下的js加载顺序

	
		...
		
	

异步执行脚本

和defer用法类似，最大的区别是async是那个js先加载完毕会优先加载那个js。

	
		...
		
	

动态加载脚本

在把HTMLElement元素添加到DOM且执行到这段代码之前不会发送请求

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

以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级
要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：

---

行内代码与外部文件

推荐使用外部文件引入js，原因如下

• 更好的可维护性
• 缓存：浏览器会根据特定的设置缓存所有外部链接的JavaScript文件，多个页面只用下载一次
• 适应未来

多个js文件引入最好统一放到一个单独的js引入

...

---

文档模式

文档模式有三种：混杂模式，标准模式，准标准模式
三种模式的区别主要体现在css的使用结果上

标准模式声明

非标准模式声明

---

noscript元素

主要为了解决游览器不支持/禁用script而出现，被用于给不支持JavaScript的浏览器提供替代内容

当游览器不支持或者禁用script，noscript会被加载可以放在任意位置