高程学习笔记

第1章 JavaScript简介

在1995年，它的主要目的是处理以前由服务器语言负责的一些输入验证操作。

1.1 JavaScript简史

主要是写js的最开始的发展历程

1.2 JavaScript实现

核心(ECMAScript)
文档对象模型(DOM)
浏览器对象模型(BOM)

1.2.1 ECMAScript

ECMAScript 规定了这门语言的下列组成部分：

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

1.2.2 文档对象模型(DOM)

是针对XML但经过扩展用于HTML的应用程序编程接口(API)

1.2.3 浏览器对象模型(BOM)

支持可以访问和操作浏览器窗口

弹出新浏览器窗口的功能
移动、缩放和关闭浏览器窗口的功能
提供浏览器详细信息的 navigator 对象
提供浏览器所加载页面的详细信息 location 对象
提供用户显示器分辨率详细信息的 screen 对象
对 cookies 的支持
像 XMLHttpRequest 和 IE 的 activeXObject 这样的自定义对象

1.3 JavaScript 版本

大多数浏览器在提及对 JavaScript 的支持情况时，一般都以 EMCAScript 兼容性和对 DOM 的支持情况为准。

1.4 小结

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

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

第2章在 HTML 中使用 JavaScript

2.1 `<script>` 元素

<script> 的6个属性：

async:可选。表示应该立即下载脚本，但是不应妨碍页面中的其他操作，比如下载其他资源或者等待加载其他脚本。只对外部脚本文件有效。
charset:可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。
language:已废弃。
src:可选。表示包含要执行代码的外部文件。
type:可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也成为MIME类型）。默认值是text/javascript。服务器在传送JavaScrpit文件时使用的MIMIE类型通常是application/x-javascript。

注意事项:

在<script>标签内写</script>，需要使用转义字符”\”。

2.1.1 标签的位置

所有的<script>元素都放在<head>元素中，意味着所有的 JavaScript 代码都被下载、解析和执行完成以后，才能呈现页面的内容。这就导致浏览器在呈现页面是出现延迟，也就是一片空白。
为了避免这个问题，现代WEB应用程序一般都把全部的 JavaScript 应用放在 <body>元素中页面内容的后面。这样用户会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

2.1.2 延迟脚本

defer属性，脚本会延迟到整个页面都解析完毕后再运行。 相当于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html>
<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>
        <!-- 这里放内容 -->
    </body>
</html>

在这个例子中，原本按照 HTML5 规范的脚本先后顺序执行，并且先于 DOMContentLoaded 事件(详见第13章)执行，但是事实上这两个脚本不一定会按照顺序执行，也不一定会先于 DOMContentLoaded 事件执行， 因此最好只包含一个延迟脚本。

最佳选择：把延迟脚本放在页面底部。

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

2.1.3 异步脚本

async属性，同样只适用于外部脚本文件，并告诉浏览器立即下载文件。与defer不同的是，标记为async的脚本并不保证按照指定他们的先后顺序执行。例如：

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

上面的例子第二个脚本有可能会在第一个脚本文件之前执行。 所以要确保两个文件之间互不依赖。 异步脚本一定会在页面的load时间之前执行，单可能会在 DOMContentLoaded 事件触发之前或之后执行。支持异步脚本的浏览器有 Firefox 3.6、Safari 5 和 Chrome。

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

2.1.4 在 XHTML 中的用法

XHTML 即可扩展超文本标记语言。一般采用这个<![CDATA[ 内容 ]]>

将页面模式指定为”application/xhtml+xml”的情况下会触发XHTML模式。并不是所有浏览器都支持这种方式提供XHTML文档。

2.1.5 不推荐使用的语法

现在已经所有浏览器都支持这个 <script>。所以这个模块了解下就好了。

2.2 嵌入代码与外部文件

使用外部文件的优点：

可维护性
可缓存性
适应未来

2.3 文档模式

混杂模式：让IE行为与(包含非标准特性对的)IE5相同

不写 DOCTYPE

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

不标准的地方主要体现在处理图片间隙的时候（在表格中使用图片的时候问题最明显）

标准模式：一般意义上是指标准模式和准标准模式。

<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- 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">

<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01 Frameset //EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!-- XHTML 1.0 过渡型 -->
<!DOCTYPEHTML PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/html4/xhtml1-transitional.dtd">

<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD XHTML 1.0 Frameset //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

如果文档开始出没有发现文档类型声明，则所有浏览器都会默认开启混杂模式

2.4

一般在以下情况会用到

浏览器不支持脚本
浏览器支持脚本，但是脚本被禁用

<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML Page</title>
        <script type="text/javascript" async src="example1.js"></script>
        <script type="text/javascript" async src="example2.js"></script>
    </head>
    <body>
        <!-- 这里放内容 -->
        <noscript>
            <p>本页面需要浏览器支持(启用)JavaScript。</p>
        </noscript>
    </body>
</html>

脚本无效的情况下，用户会收到一条消息。但在启用脚本的浏览器中用户就看不到，虽然他是页面的一部分。

2.5 小结

可以用src引入外部或者其他任何域的文件
所有<script>元素都会按照他们在页面中出现的先后顺序执行(在不使用defer和async的情况下)
由于浏览器会先解析完不使用defer属性的<script>元素中的代码，然后在解析后面的内容，所以一般应该把<script>元素放在页面最后面，</body>标签前面
使用defer属性可以让脚本在文档完全呈现以后再执行。
使用async属性可以表示当前脚本不必等待其他的脚本，也不必阻塞文档呈现。
使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下，浏览器不会显示<noscript>元素中的内容。

第3章基本概念

语法
数据类型
流控制语句
函数

由于本章主要按照第3版定义的 ECMAScript 介绍这门语言的基本概念，并就第5版的变化给出说明。

3.1 语法

ECMAScript 的语法相对比较宽松。

3.1.1 区分大小写

ECMAScript 中的一切(变量、函数名和操作符)都区分大小写。

3.1.2 标识符

所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以使按照下列各式规则组合起来的一或者多个字符：

第一个字符必须是一个字母、下划线(_)或一个美元符号($)
其他字符可以使字母、下划线、美元符号或数字
采用驼峰大小写，例如：firstChild
注意：不能把关键字、保留字、true、false和null用作标识符

3.1.3 注释

//单行注释
/*
* 这是一个多行注释
* 这边二三行前面添加 * ，是为了增加注释的可读性(企业中用的比较多)
*/

3.1.4 严格模式

严格模式(strict mode)，是为了JavaScript定义一种不同的解析与执行模型。
在该模式下，一些不确定的行为将得到处理，对一些不安全的操作会抛出错误
可以在顶部添加

1	"use strict"; //这是一个编译指示(pragma)

也可以在函数内部的上方包含这条编译指示

function doSomething(){
    "use strict";
    //函数体
}

3.1.5 语句

ECMAScript 语句最好以分号结束
把多条语句组合到一个代码块

3.2 关键字和保留字

ECMAScript 的全部关键字(带*是第五版新增的)

break do instanceof typeof

case else new var

catch finally return void

continue for switch while

debugger* function this with

delete in try

ECMAScript 的全部保留字(第3版定义的)

abstract enum(枚举) int short

boolean export interface(接口) static

char final native synchronized(同步的)

class float package throws

const goto private transient(短暂的)

debugger implements(工具) protected volatile

double import public

第5版把在非严格模式下运行时的保留字缩减为下列这些：

class enum extends super

const export import

在严格模式下，第5版还对以下保留字施加了限制：

implements package public

interface private static

let protected yield

注意，let 和 yield 是第5版新增的保留字；其他保留字都是第3版定义的。为了最大程度地保证兼容性，建议将第3版定义的保留字外加 let 和 yield 作为编程时的参考。
一般来说最好都不用关键字和保留字作为标识符和属性名。
除了上面的，ECMA-262第5版对 eval 和 arguments 也做了限制，在严格模式下不能作为标识符或属性名。

3.3 变量

松散类型(可以用来保存任何类型的数据)

操作符(关键字)	变量名(标识符)
var	message

message 未经过初始化之前，值为undefined

尽量使用局部变量，全局变量很难维护。
给未经声明的变量赋值，在严格模式下会导致抛出 ReferenceError
可以使用一条语句定义多个变量，只要把每个变量用逗号隔开，如下:

1
2
3

var message = "hi",
    found = false,
    age = 29;

在严格模式下，不能定义名为 eval 或 arguments 的变量，否则会导致语法错误

3.4 数据类型

五个基本数据类型:number、boolean、string、null、undefined.
复杂数据类型:object

3.4.1 typeof 操作符

typeof 是一个操作符，不是函数。例如typeof null不加圆括号
typeof null这个返回一个object。因为特殊值null被认为是一个空的对象引用
Safari 5 及之前版本、Chrome 7 及之前本版在对正则表达式调用typeof操作符会返回function，而其他浏览器则返回object.
从技术角度讲，函数在 ECMAScript 中式对象，不是一种数据类型。然而，函数也确实有一些特殊的属性，因此通过typeof操作符来区分函数和其他对象是有必要的。

3.4.2 undefined 类型

建议显式地初始化变量(var a = 1)，因为如果能做到这点，就可以用typeof操作符检测变量是还没有被声明，而不是尚未初始化。
无论在什么情况下，都没有必要把变量显式的设置为undefined。

3.4.3 null 类型

表示一个空对象指针，所以typeof操作符检测结果是object。
如果定义的变相准备在将来用于保存对象，那么最好将该变量初始化为null。
检查相应变量是否已经保存了一个对象的引用

1
2
3

if (car != null){
    //对car对象执行某些操作
}

实际上，undefined 值是派生自null，因此 ECMA-262 规定对它们的相等性测试要返回true.

1	alert(null == undefined); //true

想要保存对象的变量还没有真正保存对象，就应该明确的让变量保存null值。
可以体现null作为空指针的惯例，同时区分null和undefined。

3.4.4 boolean 类型

数据类型	转换为true的值	转换为false的值
Boolean	true	false
string	任何非空字符串	“”(空字符串)
Number	任何非零数字值(包括无穷大)	0和NaN
Object	任何对象	null
undefined	N/A(不适用，not applicable缩写)	undefined

3.4.5 number 类型

十进制
八进制: 第一位必须是0，然后是八进制数字序列(0~7)，在严格模式下无效
十六进制: 前两位必须是0x
在算数计算时，所有以八进制和十六进制表示的数值最终都将被转换成十进制数值。

浮点数值