《JavaScript高级程序设计》——第二章在HTML使用JavaScript

　　这章讲的是JavaScript在HTML中的使用，也就是<script>元素的属性。书中详细讲了async、defer、src和type四个<script>的属性。

　　下面是对第二章做的笔记

<script>元素

type：可选。表示编写代码的脚本语言的类型；属性的值一般是text/javascript。不过，这个属性不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript。

 <script type="text/javascript">
    function sayHi(){
        alert("Hi");
    }
    </script>

也就是说下面的代码和上面的是等价的

<!--type属性不是必需的，如果没有指示这个属性，则其默认值仍为这个text/javascript-->
    <script>
        function sayHi(){
            alert('Hi');
        }
    </script>

在使用<script>嵌入JavaScript代码时，在任何地方出现"</script>"字符串都是错误的。

   <script>
            alert("</script>");  //这段代码是错误的
    </script>

这个时候需要转义字符“”来解决这个问题

 <script>
            alert("</script>");  //用转义字符“”来解决这个问题
 </script>

2、src：可选。属性的值是一个指向外部JavaScript的链接。

<script type="text/javascript" src="example.js"></script>

后面结束的</script>可以省略

<script type="text/javascript" src="example.js" />

标签的位置

在文档<head>元素中包含所有的JavaScript文件，意味着必须等到全部JavaScript代码都被下载解析和执行完成以后，才能开始呈现页面内容，这样会使浏览器呈现页面出现明显延迟。（浏览器遇到<bady>元素才开始呈现内容）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>《JavaScript高级程序设计》第二章</title>
    <script type="text/javascript" src="example1.js"></script>
    <script type="text/javascript" src="example2.js"></script>
</head>
<body>
 <!--这里放内容-->
</body>
</html>

3、defer（延迟）:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>《JavaScript高级程序设计》第二章</title>
    <script type="text/javascript" defer="defer" src="example1.js"></script>
    <script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
 <!--这里放内容-->
</body>
</html>

4、async（异步）:可选。表示当前脚本不需要等待其他脚本，也不必阻塞文档呈现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>《JavaScript高级程序设计》第二章</title>
    <script type="text/javascript" async src="example1.js"></script>
    <script type="text/javascript" async src="example2.js"></script>
</head>
<body>
 <!--这里放内容-->
</body>
</html>

对脚本不太理解，下面是在百度搜的脚本简介

脚本（Script）：是一种批处理文件的延伸，是一种纯文本保存的程序，一般来说的计算机脚本程序是确定的一系列控制计算机进行运算操作动作的组合，在其中可以实现一定的逻辑分支等。

脚本简单地说就是一条条的文字命令，这些文字命令是可以看到的（如可以用记事本打开查看、编辑），脚本程序在执行时，是由系统的一个解释器，将其一条条的翻译成机器可识别的指令，并按程序顺序执行。因为脚本在执行时多了一道翻译的过程，所以它比二进制程序执行效率要稍低一些。

2020-04-22 21:25:41