JavaScript高级程序设计（第3版）阅读笔记第01天-js简介

第1章

JavaScript简介

本章内容
*JavaScript历史回顾
*JavaScript是什么
*JavaScript与ECMAScript的关系
*JavaScript的不同版本

　　JavaScript诞生于1995年，当时主要目的是处理以前由服务器端语言（如Perl）负责的一些输入验证操作。之前必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域，是否输入无效的值。所以出现了JavaScript。。如今JavaScript的用途已不再局限于简单的数据验证，而是具备了与浏览器窗口及其内容等几乎所有方面交互的能力，成为全面的编程语言，能够处理复杂的计算与交互，拥有了闭包、匿名（lamda，拉姆达）函数，甚至元编程等特性。

1.1JavaScript简史

　　当时Netscape公司开发了这种语言，随后微软也紧跟热潮开发了JScript，但当时并没有规范的标准，1997年，欧洲计算机制造商协会（ECMA）制定了标准，并定义为ECMAScript（发音为ek-ma-script）的新脚本语言的标准。

1.2JavaScript实现

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

1.21ECMAScript

ECMAScript规定了下列组成部分

*语法
*类型
*语句
*关键字
*保留字
*操作符
*对象

1.22文档对象模型（DOM）

文档对象模型（DOM）是针对XML但经过扩展用于HTML的应用程序编程接口（API）。

1.23浏览器对象模型（BOM）

支持可以访问和操作浏览器窗口的浏览器对象模型。可以控制浏览器显示的页面以外的部分。

1.3小结

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

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

当前五大浏览器（IE,Firefox，Chrome，Safari和Opera）对ECMAScript5的支持越来越高，对DOM的支持则彼此相差很多。

第2章

在HTML中使用JavaScript

本章内容

*使用`<script>`元素

*嵌入脚本与外部脚本

*文档模式对JavaScript的影响

*考虑禁用JavaScript的场景

2.1`<script>`元素

HTML4.01为`<script>`定义了下列6个属性

　　*async：可选。表示应该立即下载脚本，但不妨碍页面中的其他操作。只对外部脚本文件有效。

　　*charset:可选。表示通过src属性制定的代码的字符集。少有人用。

　　*defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。

　　*language:已废弃。

　　*src:可选。表示包含要执行代码的外部文件。

　　*type：可选。language的替代属性；表示编写代码使用的脚本语言的内容类型。默认值为type/javascript

使用`<script>`方式有两种：直接在页面中嵌入JavaScript代码和包含外部JavaScript文件。

使用`<script>`元素嵌入JavaScript代码时，只须为`<script>`制定type属性。如下：

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

　　包含在`</script>`元素内部的JavaScript代码将从上至下一次解释。

　　注意：不要在代码中任何地方出现`</script>`字符串，会被浏览器错误识别。如需使用，加转义字符<\/script>

　　外链式写法为

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

　　如果是在XHTML文档中，可省略为

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

　　HTML文档中不可以这么使用，不符合HTML规范，得不到某些浏览器（尤其IE）的正确解析。

　　注意：带有src属性的`<script>`元素，不应在`<script></script>`标签之间再包含额外JavaScript代码，嵌入代码会被忽略。

　　代码中只要不存在defer和async属性，浏览器都会按照

　　尽量不要使用完整url，如

<script type="text/javascript" src="www.somewhere.com/afile.js"></script>

　　如果遇到不怀好意的程序员，随时可能替换该文件的代码，所以确定安全再使用。

2.11标签的位置

　　按照传统做法，所有`<script>`元素都应该放在页面的元素中。如

<!DOCTYPE html>
<html>
<head>
    <title>example page</title>
    <script type="text/javascript" src="example1.js"></script>
    <script type="text/javascript" src="example2.js"></script>
</head>
    <body>
        <!-- 这里放内容 -->
    </body>
</html>

　　这样做的目的是把所有外部文件（包括css和JavaScript文件）的引用都放在相同的地方。但在这种在标签中放着，就意味着必须等到全部JavaScript代码都被下载、解析和执行完成之后，才能开始呈现页面的内容（浏览器在遇到后才会呈现内容），这会导致浏览器在呈现页面时出现明显的延迟，而延迟期间浏览器窗口将是一片空白。

　　为避免这个问题，一般把JavaScript引入放到`<body>`内容后，如

<!DOCTYPE html>
<html>
<head>
    <title>example page</title>
</head>
    <body>
        <!-- 这里放内容 -->
        <script type="text/javascript" src="example1.js"></script>
        <script type="text/javascript" src="example2.js"></script>
    </body>
</html>

　　这样，在解析代码之前，页面内容将完全呈现在浏览器中，用户也会因为浏览器窗口显示空白时间缩短而感觉打开页面速度加快了。

2.12延迟脚本

　　HTML4.01定义了defer属性，用途是表明脚本在执行时不会影响页面的构造，就是脚本延迟到整个页面都解析完毕后再运行。用这个属性表示告诉浏览器理解下载，但延迟执行。

<!DOCTYPE html>
<html>
<head>
    <title>example page</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>

　　虽然把`<script>`元素放在`<head>`标签中，但延迟脚本会在浏览器遇到`</html>`后执行。规范要求的按先后顺序执行，第一个脚本先于第二个脚本执行，但这两个脚本会先于DOMCurrentLoad事件（详见第13章）执行。在现实中，延迟脚本不一定会按照顺序执行，也不一定会在DOMCurrentLoad事件前执行，因此最好只包含一个延迟脚本。

2.13异步脚本

　　标记为async会告诉浏览器立即下载文件，执行先后顺序并不确定。制定async属性的目的是为不让页面等待两个脚本的下载和执行，从而异步加载页面其他内容。

　　异步脚本一定会在页面的Load时间之前执行，但可能会在DOMCurrentLoad事件触发之前或之后执行。支持的浏览器有Fiefox3.6、Safari5和Chrome。

　　在XHTML文档中，要把async属性设置为async=”async”。

2.14在XHTML中的用法

可扩展超文本标记语言，即XHTML，是将HTML作为XML的应用而重新定义的一个标准。规则比HTML严格的多。例如if(a < b),小于号（<）会被XHTML当作新标签来解析，但作为标签，小于号后面不能跟空格，就导致语法错误。

避免出现类似语法错误方法有两种。一个是用HTML的实体（`<`）替换（<）,例如if（a`<`b），但代码不好理解。

　　另一种方法为用一个cData片段来包含JavaScript代码，在XHTML中，CData是文档中的特殊区域，可以包含不需要解析的任意格式的文本内容。如

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

　　兼容XHTML的浏览器可以这么使用，实际上不少浏览器不兼容XHTML，因而不支持CData片段，可用JavaScript注释掉CData标记就可以了，如

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

这种格式在所有现代浏览器中都可以正常使用。

2.2嵌入代码与外部文件

　　虽然在HTML中嵌入JavaScript代码虽然没有问题，但最好使用外部文件来包含JavaScript代码，有以下几个优点：

　　　　*可维护性：将所有JavaScript文件放在一个文件夹里，维护比较轻松。

　　　　*可缓存：浏览器会根据具体的设置缓存所有外部JavaScript文件。可加快页面加载速度。

　　　　*适应未来：无须注释hack。

2.3文档模式

　　文档类型doctype，最初为混杂模式和标准模式。

　　标准模式可以通过类似文档类型开启。

<!-- HTML5 -->  
<!DOCTYPE html>

2.4`<noscript>`元素

　　早期浏览器面临一个问题，当浏览器不支持JavaScript时如何让页面平稳的退化。于是出现了<noscript>，只有当浏览器不支持脚本或者浏览器支持脚本，但脚本被禁用时显示出来。如

<!DOCTYPE html>
<html>
<head>
    <title>example 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</p>
        </noscript>
    </body>
</html>