这章讲的是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>
2020-04-22 21:25:41