壹--了解JavaScript
1、什么是DOM
文档对象模型（DOM， Document Object Model），是一个应用变成接口(API)。这是书上的定义。拥有DOM，可以把一个页面的各个节点，变成一个树形的结构。
<html>
<head>
<title>一个简单的页面</title>
</head>
<body>
<p> Hello World!</p>
</body>
</html>
通过DOM可以表示为：
DOM 通过创建表示文档的树，让开发者可以随心所欲地控制网页的内容和结构。 DOM映射网页的结构，开发者想要修改网页内容时，就可以通过DOM进行查找，更有规律。
由于DOM自身的优点十分受用，DOM也被其他语言实现了。但是对于浏览器来说，DOM就是通过ECMAScript实现的，是JavaScript的重要组成部分。
2、什么是BOM
浏览器对象模型(BOM)，用于支持访问和操作浏览器的窗口。使用 BOM，开发者可以操控浏览器显示页面之外的部分。而 BOM 真正独一无二的地方，当然也是问题最多的地方，就是它是唯一一个没有相关标准的 JavaScript 实现。
BOM 主要针对浏览器窗口和子窗口（ frame）。不过人们通常会把任何特定于浏览器的扩展都归在 BOM 的范畴内。 比如：
- 弹出新浏览器窗口的能力
- 移动、缩放和关闭浏览器窗口的能力
- navigator 对象，提供关于浏览器的详尽信息
- location 对象，提供浏览器加载页面的详尽信息
- screen 对象，提供关于用户屏幕分辨率的详尽信息
- performance 对象，提供浏览器内存占用、导航行为和时间统计的详尽信息
- 对 cookie 的支持
BOM长时间都没有一个统一的标准，每个浏览器都有自己的标准。
3、小结
JavaScript是一门用来与网页进行交互的脚本语言（Node.js使得JavaScript语言可以与服务器交互）
- ECMAScript：由 ECMA-262 定义并提供核心功能
- 文档对象模型（ DOM）：提供与网页内容交互的方法和接口
- 浏览器对象模型（ BOM）：提供与浏览器交互的方法和接口
贰--HTML中的JavaScript
1、通过<script>标签引入JavaScript文件或插入JavaScript代码块
<script> 标签一般使用两个属性，src和type。
src：可选。表示包含要执行的代码的外部文件
type：可选。一般情况下这个值始终都是"text/javascript"。如果是非IE浏览器有效值还有："application/javascript"和"application/ecmascript"
行内嵌入JavaScript代码：
<script>
functionsayHi() {
console.log("Hi!");
}
</script>
包含在<script>内的代码会被从上到下解释 。
在使用行内 JavaScript 代码时，要注意代码中不能出现字符串</script>。比如，下面的代码会导致浏览器报错：
<script>
functionsayScript() {
//浏览器解析时，会把"</script>"与上面的<script>进行匹配，从而结束
console.log("</script>");
}
</script>
//想避免这个问题，只需要转义字符“\”即可
<script>
functionsayScript() {
console.log("<\/script>");
}
</script>
若是要使用外部文件的JavaScript，就必须要包含src属性。这个属性的值是一个路径，一般是js文件的地址。
<scriptsrc="jq.js"></script>
使用了 src 属性的<script>元素不应该再在<script>和</script>标签中再包含其他JavaScript 代码。否则，浏览器只会执行scr所指向的文件，而不会执行标签内的js代码。
2、推迟执行脚本
HTML 4.01为<script>定义了一个新的属性——defer。这个属性表示，脚本会被推迟到所有页面加载完成后才执行。所以，在设置defer属性后，就相当于告诉浏览器，这个脚本你先慢慢下载着，等其他页面都出来之后再执行这个脚本。这样的话，不会出现下载脚本过慢，从而导致浏览器长时间出现空白。
但是，在HTML5中，脚本的执行是按照从上到下依次执行的。第二个推迟的脚本会在第一个推迟的脚本后面执行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<scriptdefersrc="example1.js"></script>
<scriptdefersrc="example2.js"></script>
</head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>
3、异步执行脚本
为<script>添加属性async。功能和用法与defer类似，不同的点在于带有async属性的脚本不会按照一定的顺序执行，第二个脚本可能会先执行，也可能会后执行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<scriptasyncsrc="example1.js"></script>
<scriptasyncsrc="example2.js"></script>
</head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>
