引言

将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>");		// error
    
	console.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>

第2章 HTML中的JavaScript

引言

script元素

使用方式一

使用方式二

标签位置

推迟执行脚本

异步执行脚本

动态加载脚本

行内代码与外部文件

文档模式

标准模式声明

非标准模式声明

noscript元素