JavaScript笔记(二)——HTML中的JavaScript

读书笔记

《JavaScript高级程序设计(第4版)》

HTML中的JavaScript

JavaScript是通过<script>元素插入到HTML页面中的。

1. 要包含外部JavaScript文件，必须将src属性设置为要包含文件的URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。
2. 所有<script>元素会依照它们在网页中出现的次序被解释。在不使用defer和async属性的情况下，包含在<script>元素中的代码必须严格按次序解释。
3. 对不推迟执行的脚本，浏览器必须解释完位于<script>元素的代码，然后才能继续渲染页面的剩余部分。为此，通常应该把<script>元素放到页面末尾，介于主内容之后及</body>标签之前。
4. 可以使用defer属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。
5. 可以使用async属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
6. 通过使用<noscript>元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本，则<noscript>元素中的任何内容都不会被渲染。

内容概要

2.1 <\script>元素

将JavaScript插入HTML的主要方法是使用<script>元素。
<script>元素有8个属性。

1. async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。

2. charset：可选。使用src属性指定的代码字符集。

3. crossorigin：可选。配置相关请求的CORS(跨源资源共享)设置。默认不使用CORS。

   //配置文件请求不必设置凭据标志
   crossorigin="anonymous"
   
   //设置凭据标志，意味着出站请求会包含凭据
   crossorigin="use-credentials"
   

4. defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。

5. integrity：可选。允许接收到的资源和指定的加密签名以验证子资源完整性(SRI，Subresource Integrity)。

6. language：废弃。最初用于表示代码块中的脚本语言(如"JavaScript"、“JavaScript 1.2” 或 “VBScript”)。

7. src：可选。表示包含要执行的代码的外部文件。

8. type：可选。代替language，表示代码块中脚本语言的内容类型(也称MIME类型)。

使用<script>的方法：

1. 直接在网页中嵌入JavaScript代码。
   包含在<script>内的代码会被从上到下解释。在<script>元素中的代码被计算完成之前，页面的其余内容不会被加载，也不会被显示。

   //嵌入行内JavaScript代码
   <script>
   	function sayHi() {
        
   		console.log("Hi!");
   	}
   </script>
   

   在使用行内JavaScript代码时，要注意代码中不能出现字符串</script>，否则会导致浏览器报错。

   //使用转义字符" \"
   <script>
   	function sayHi() {
        
   		console.log("<\/script>");
   	}
   </script>
   

2. 在网页中包含外部JavaScript文件。
   使用src属性。这个属性的值是一个URL，指向包含JavaScript代码的文件。比如：

   <script src="example.js"></script>
   

   与解释行内JavaScript一样，在解释外部JavaScript文件时，页面也会阻塞。(阻塞时间也包含下载文件的时间。)
   在XHTML文档中，可以忽略结束标签。

2.1.1 标签位置

过去，所有<script>元素都被放在页面