JS 历史及在 HTML 中使用 JS - 《JavaScript 高级程序设计》

JavaScript 历史
在 HTML 中使用 JavaScript
在 XHTML 中使用 JavaScript

JavaScript 历史

JavaScript 是由网景公司设计，其最初设计的目的是为了把原来需要后端做的验证放到前端，要知道在那个绝大多数因特网用户都是使用速度仅仅为 28.8kbit/s 的“猫”上网的年代，当用户填写完一个表单，点击提交按钮，等待了 30 秒钟，最终服务器返回消息说有一个必填字段没有填写，内心是不是很崩溃的。
当时的网速不仅慢，而且贵，网景公司发现需在在其浏览器中植入一种脚本语言，用来控制浏览器行为。管理层对这种浏览器脚本语言的设想是：功能不需要太强，语法较为简单，容易学习和部署。
那一年，正逢 Sun 公司的 Java 语言问世，市场推广活动非常成功。Netscape 公司决定与 Sun 公司合作，浏览器支持嵌入 Java 小程序（后来称为 Java applet）。但是，浏览器脚本语言是否就选用 Java，则存在争论。后来，还是决定不使用 Java，因为网页小程序不需要 Java 这么“重”的语法。
JavaScript 最初叫做 Mocha，95 年9 月又改为了 LiveScript，网景公司为了搭上当时炒作的 Java 风，所以最终 LiveScript 改名为 JavaScript。JavaScript 设计者并不喜欢 Java，但是网景公司喜欢 Java，所以 JavaScript 实际上是两种语言风格的混合产物，即（简化的）函数式编程与（简化的）面向对象编程的结合，这是由 Brendan Eich（函数式编程）和网景公司（面向对象编程）共同决定的。

在 HTML 中使用 JavaScript

我们都比较熟悉使用<script>元素来在 HTML 中插入 JavaScript 的方式，这个方式是由网景公司发明的，后来这个元素被正式的加入到 HTML 规范中。
使用<script>元素的方式有两种，即直接在页面中嵌入 js 代码和包含外部 js 文件。包含外部 js 文件即使用src属性，该属性的值是一个指向外部 js 文件的链接。但是如果你同时使用两种方式，那么直接嵌入的 js 代码就会失效。
需要注意的是，在使用<script>嵌入 js 代码时，不要在任何地方出现"</script>"字符串，如下所示：

<script type="text/javascript">
// 这样写会报错，浏览器会认为这个字符串就是结束符
function sayScript() {
    alert("</script>");
}
// 可以通过转义字符解决这个问题
function sayScript() {
    alert("<\/script>");
}
</script>

不管是嵌入的 js 代码，还是包含的外部 js 文件，它们都是按照顺序从上到下依次执行的，并且在解析这些 js 代码时，页面的处理也会暂时停止，因此把<script>元素放到<head>标签内，会让页面出现一段时间的空白，影响用户体验。
所以常见的解决方案是把<script>放到页面内容的底部。HTML4.01 为<script>定义了 defer 属性，这个属性的用途表明脚本在执行时不会影响页面的构造，所以脚本会被延迟到整个页面都解析完毕后再运行；HTML5 为<script>定义了 async 属性，它与 defer 类似，都只适用于外部 js 文件，指定 async 属性的目的是不让页面等待两个脚本的下载和执行。
defer 与 async 的区别在于，defer 会保证按顺序执行，而 async 则不会保证按顺序执行，所以脚本之间不能有依赖。

在 XHTML 中使用 JavaScript

XHTML 即可扩展超文本标记语言，编写 XHTML 代码的规则比编写 HTML 的规则严格得多，而且直接影响能否在嵌入 JavaScript 代码时使用<script/>标签。比如下面的代码在 HTML 中能正确运行，但是在 XHTML 中就不适用。

<script type="text/javascript">
function compare(a, b) {
    if (a < b) {
        alert("a < b");
    }
}
</script>

此处的比较语句中有小于号，在 XHTML 中将被当作开始一个新标签来解析，但是作为标签来讲，小括号后面不能跟空格，因此就导致了语法错误。为了避免上述错误，可以使用 HTML 实体（<）替换小于号。

<script type="text/javascript">
// 但是这样导致代码更加晦涩了
function compare(a, b) {
    if (a &lt; b) {
        alert("a < b");
    }
}
</script>

另一个办法就是用一个 CData 片段来包含 js 代码，在 XHTML 中，CData 片段是文档中的一个特殊区域，这个区域可以包含不需要解析的任意格式的文本内容，个人觉得记住就行了。

<script type="text/javascript">
// 使用注释的原因是为了兼容那些不兼容 XHTML 的浏览器
//<![CDATA[
function compare(a, b) {
    if (a &lt; b) {
        alert("a < b");
    }
}
//]]>
</script>