【读书笔记】JavaScript 简介与使用在1995年时，由Netscape公司的Brendan Eich，在网景导航

JavaScript 从一个简单的输入验证器发展成为一门强大的编程语言。

1.1 JavaScript 简史

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，JavaScript兼容于ECMA标准，因此也称为ECMAScript。

1.2 JavaScript 实现

一个完整的 JavaScript 实现应该由核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM）三个不同的部分组成。

ECMAScript：描述了该语言的语法和基本对象。
- ECMAScript 就是对实现该标准规定的各个方面内容的语言的描述。JavaScript 实现了 ECMAScript。
文档对象模型（DOM）：描述处理网页内容的方法和接口。
- DOM 级别
  - DOM1 级由两个模块组成：DOM 核心和 DOM HTML。
  - DOM2 级包括： DOM 视图、DOM 事件、DOM 样式和 DOM 遍历和范围。
  - DOM3 级则进一步扩展了 DOM，引入了以统一方式加载和保存文档的方法——在 DOM 加载和保存模块中定义；新增了验证文档的方法——在 DOM 验证模块中定义。
浏览器对象模型（BOM）：描述与浏览器进行交互的方法和接口。
- 扩展
- 弹出新浏览器窗口的功能；
- 移动、缩放和关闭浏览器窗口的功能；
- 提供浏览器详细信息的 navigator 对象；
- 提供浏览器所加载页面的详细信息的 location 对象；
- 提供用户显示器分辨率详细信息的 screen 对象；
- 对 cookies 的支持；
- 像 XMLHttpRequest 和 IE的 ActiveXObject 这样的自定义对象。

1.3 JavaScript 版本

1.4 小结

JavaScript 是一种专为与网页交互而设计的脚本语言，由下列三个不同的部分组成：

ECMAScript，由 ECMA-262 定义，提供核心语言功能；
文档对象模型（DOM），提供访问和操作网页内容的方法和接口；
浏览器对象模型（BOM），提供与浏览器交互的方法和接口。

JavaScript 的这三个组成部分，在当前五个主要浏览器（IE、Firefox、Chrome、Safari 和 Opera）中都得到了不同程度的支持。其中，所有浏览器对 ECMAScript 第 3 版的支持大体上都还不错，而对 ECMAScript 5 的支持程度越来越高，但对 DOM 的支持则彼此相差比较多。对已经正式纳入 HTML5 标准的 BOM来说，尽管各浏览器都实现了某些众所周知的共同特性，但其他特性还是会因浏览器而异。

2.1 <script>元素

<script> 定义了下列 6 个属性：
- async ：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
- charset ：可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
- defer ：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7 及更早版本对嵌入脚本也支持这个属性。
- language ：已废弃。原来用于表示编写代码使用的脚本语言（如 JavaScript 、 JavaScript1.2 或 VBScript ）。大多数浏览器会忽略这个属性，因此也没有必要再用了。
- src ：可选。表示包含要执行代码的外部文件。
- type ：可选。可以看成是 language 的替代属性；表示编写代码使用的脚本语言的内容类型（也称为 MIME 类型）。目前 type 属性的值依旧还是text/javascript 。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript 。
使用 <script> 元素的方式:
- 直接在页面中嵌入 JavaScript 代码
- 包含外部 JavaScript文件

//直接在页面中嵌入 JavaScript 代码
<script type="text/javascript">
    function sayHi(){
    alert("Hi!");
    }
</script>

//包含外部 JavaScript文件
<script type="text/javascript" src="example.js"></script>

标签的位置

按照传统的做法，所有 <script> 元素都应该放在页面的 <head> 元素中,意味着必须等到全部 JavaScript 代码都被下载、解析和执行完成以后，才能开始呈现页面的内容对于那些需要很多 JavaScript 代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代 Web 应用程序一般都把全部 JavaScript 引用放在元素中页面内容的后面。

延迟脚本

defer属性：脚本会被延迟到整个页面都解析完毕后再运行。

<script type="text/javascript" defer="defer" src="example1.js"></script> // defer 属性只适用于外部脚本文件

异步脚本

async属性：告诉浏览器立即下载文件，并不保证按照指定它们的先后顺序执行

<script type="text/javascript" async src="example1.js"></script> // async 属性只适用于外部脚本文件

2.2 外部文件的优点

可维护性
可缓存
适应未来

2.3 文档模式：

标准模式：则让 IE 的行为更接近标准行为
准标准模式

//标准模式
<!-- HTML 5 -->
<!DOCTYPE html>

//准标准模式 
<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

2.4 <noscript> 元素

早期浏览器都面临一个特殊的问题，即当浏览器不支持 JavaScript 时如何让页面平稳地退化。对这个问题的最终解决方案就是创造一个<noscript> 元素，用以在不支持 JavaScript 的浏览器中显示替代的内容。

<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<noscript>
<p> 本页面需要浏览器支持（启用）JavaScript 。
</noscript>
</body>
</html>

2.5 小结

把 JavaScript 插入到 HTML 页面中要使用 <script> 元素。使用这个元素可以把 JavaScript 嵌入到 HTML页面中，让脚本与标记混合在一起；也可以包含外部的 JavaScript文件。而我们需要注意的地方有：

◆ 在包含外部 JavaScript 文件时，必须将 src 属性设置为指向相应文件的 URL。而这个文件既可以是与包含它的页面位于同一个服务器上的文件，也可以是其他任何域中的文件。

◆ 所有<script> 元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用 defer 和 async 属性的情况下，只有在解析完前面 <script> 元素中的代码之后，才会开始解析后面 <script> 元素中的代码。

◆ 由于浏览器会先解析完不使用 defer 属性的 <script> 元素中的代码，然后再解析后面的内容，所以一般应该把 <script> 元素放在页面最后，即主要内容后面， </body> 标签前面。

◆ 使用 defer 属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。

◆ 使用 async 属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。

另外，使用 <noscript> 元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下，浏览器不会显示 <noscript> 元素中的任何内容。

参考资料

《JavaScript高级程序设计》（第3版）