JS高级程序设计（1-3章笔记）

浏览数：40 / 时间：2015年06月09日

第一章 JavaScript简介

1.1 JavaScript简史

1995.02-

公司：Netscape

主要人物：就职于Netscape的Brendan Eich(布兰登.艾奇)

事件：为Netscape Navigator 2开发一种名为LiveScript的脚本语言

1995.02-前夕

公司：Netscape

事件：临时将LiveScript改名为JavaScript

1995.02+

JavaScript1.0获得巨大成功

1996.08

公司：微软

IE3加入名为JScript的JavaScript实现

1997

组织：ECMA

事件：以JavaScript1.1为蓝本的建议被提交给欧洲计算机制造商协会（ECMA），ECMA-262诞生。

1998

组织：国家标准化组织和国际电工委员会（ISO/IEC）

事件：ISO/IEC采用ECMAScript作为标准，即ISO/IEC-16262

1.2 JavaScript实现?

说明：JavaScript的含义比ECMAScript包含的要多。

核心（ECMAScript）
文档对象模型（DOM）
浏览器对象模型（BOM）

1.2.1 ECMAScript

说明：ECMAScript-262没有参照WEB浏览器

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

1. 版本

ECMAScript第一版：本质上与Netscape JavaScript1.1相同（针对浏览器的部分除外）
ECMAScript第二版：主要是班级加工的结果，没有任何增删改。
ECMAScript第三版：标志着ECMAScript成为一门真正的语言

字符串处理
错误定义
数值输出
正则表达式
新控制语句
try-catch
国际化
ECMAScript第四版：正式发布前被废弃
强类型变量
新语句
新数据结构
真正的类
经典继承
数据交互新方式

ECMAScript第五版：ECMAScript3.1，在第三版的基础上进行小幅修改

澄清第三版中已知的歧义
增添新的功能
原生JSON对象（用于解析和序列化JSON数据）
继承的方法
高级属性定义
严格模式
对引擎解释和执行代码进行补充说明

2. 什么是ECMAScript兼容

基本定义：

支持ECMA-262
支持Unicode字符标准

扩展定义：

标准中没有规定的新对象和对象的心新属性
修改扩展内置的正则表达式语法

3. WEB浏览器对ECMAScript的支持

1.2.2 文档对象模型（DOM）

1. 为什么要使用DOM

问题：IE4和Navigator4支持不同形式的DHTML，需要加以控制。

解决：负责制定Web通信标准的W3C开始着手规划DOM.

2. DOM级别

注意：DOM0级表准不存在，只是一种参照说法，指IE4和Na4最初支持的DHTML

DOM1: 映射文档的结构

DOM Core: 如何映射基于XML的文档结构
DOM HTML：扩展添加针对HTML的对象和方法

DOM2: 扩充鼠标用户界面事件、范围、遍历等，增加对CSS的支持

DOM视图：定义跟踪不同文档视图的接口；
DOM事件: 定义事件和事件处理的接口；
DOM样式：定义基于CSS应用样式接口
DOM遍历和范围：定义遍历和操作文档树的接口

DOM3: 引入以统一方式加载和保存文档的方法，开始支持XML1.0规范

3. 其他DOM标准（W3C推荐）

SVG1.0(可伸缩矢量图)
MathML1.0(数学标记语言)
SMIL(同步多媒体集成语言)

4. WEB浏览器对DOM的支持

1.2.3 浏览器对象模型（BOM）

基本：

处理浏览器和框架；

扩展：

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

1.3 JavaScript版本（Netscape/Mozilla）

第二章在HTML中使用JavaScript

2.1 <script>元素

历史：由Netscape创造并在Netscape Navigator 2中首先实现。之后被加入HTML规范。

元素（HTML4.01）: 6个，全部非必需

async：异步方式下载脚本
charset：使用src属性指定的字符集，大多数浏览器会忽略这个值，很少用
defer: 立即下载，但延迟到文档被完全解析和显示之后（遇到</html>）执行。只对外部文件有效
language: 使用的脚本语言，已废弃
src：执行代码的外部文件
type: 默认死type/javascript

使用方式：

直接嵌入：指定type属性，js代码中不能出现‘</script>‘
包含外部文件：src属性必需，可以跨域，不能混合嵌入代码，在xhtml中可以自闭合（不推荐）

2.1.1 标签的位置

惯例：<head>元素中（浏览器遇到<body>标签时才会开始呈现内容，因而会有延迟）

推荐：<body>元素中页面的内容后面

2.1.2 延迟脚本

方式：

<script type="text/javascript"defer></script> ----HTML
<script type="text/javascript"defer="defer"></script> ----XHTML

规范行为（HTML5）：

脚本会延迟到浏览器遇到</html>标签后再按照出现的顺序执行，但都先于DOMContentLoaded事件触发前执行；
只适用于外部脚本文件；

现实行为：

延迟的脚本不一定会在DOMContentLoaded事件触发前执行，也不一定按照顺序执行，为了避免加载顺序的混乱，建议只有一个defer脚本；
IE4-IE7支持对嵌入脚本的defer属性，IE8等支持HTML5实现的浏览器则会忽略这个属性。

2.1.3 异步脚本 (HTML5)

方式：

<script type="text/javascript" async></script> ----HTML
<script type="text/javascript" async="async"></script> ----XHTML

行为：

只是用外部文件；

立即异步下载，页面不会等待下载完毕和执行；
不保证顺序，因此确保异步脚本之间彼此不依赖；
页面load事件前执行，DOMContentLoaded事件之前或之后；

支持情况：

2.1.4 在XHTML中的用法（可以跳过这一节，因为HTML5标准正快速占领市场）

错误方式：<(小于号)在XHTML中被当作开始一个新标签来解析。

正确方式

方式一：使用HTML实体替代尖括号（比如&lt替换<）

方式二： CData片段+JavaScript注释

2.1.5 不推荐使用的语法（早期）

2.2 嵌入代码与外部文件

外部文件优点

可维护性
可缓存（复用）
适应未来： HTML和XHTML包含的外部文件的语法相同

2.3 文档模式（IE提出，其它效仿）

注意：主要影响css呈现，某些情况下也会影响js。

类型：

混杂模式：不推荐，如果不适用hack技术，不同浏览器差异可能非常大

<!--在文档开始处没有文档类型声明，所有浏览器默认开启混杂模式-->

标准模式：行为相对一致

<!-- HTML 4.01严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<!-- XHTML 1.0  严格型-->
<!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">
<!-- XHTML 1.0 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<!-- 框架集型 -->
<!-- HTML 4.01 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01  Frameset//EN"
"http://www.w3.org/TR/html4/frameset.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 <noscript>元素：不支持JS的浏览器平稳退化的方式

用法： <body>中的任何标签中都可以使用

行为：下列情况下浏览器才会显示其中的内容

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

2.5 小结

第3章基本概念

3.1 语法

3.1.1 区分大小写

3.1.2 标识符

第一个字母：    字母、_、$?
其它字母：     字母、_、$、数字
驼峰大小写格式（ECMAScript惯例但不强制）

3.1.3 注释

3.1.4 严格模式

启用方式

在整个脚本中启用

//在顶部添加
"use strict"

指定某些函数在严格模式下执行

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

行为特点

在ECMAScript 5中开始支持严格模式
严格模式下ECMAScript3的一些不确定行为将会处理
某些不安全的操作会抛出错误

3.1.5 语句

1. 分号结尾（不推荐省略分号）

避免不完整的输入；
可以放心地通过删除多余的空格来压缩ECMAScript代码；
在某些情况下会增进性能；

2. 代码块使用{}(可以省略的情况下也不推荐省略)

编码意图更加清晰；
降低修改代码时出错的几率；

3.2 关键字和保留字

关键字(26)

break	case	catch	continue	debugger*	default
delete	do	else	finally	for	function
if	in	instanceof	new	return	switch
this	throw	try	typeof	var	void
while	with

保留字（第三版全部+第五版let、yield）(31?)

abstract	boolean	byte	char	class	const
debugger	double	enum	export	extends	final
float	goto	implements	import	int	interface
long	native	package	private	protected	public
short	static	super	synchronized	throws	transient
volatile					?

保留字（第五版严格模式 8）

class

const

enum

extends

super

export

import

保留字（第五版严格模式额外施加限制的部分）

implements

package

public

interface

private

protected

let

static

yield

3.3 变量

特点：松散类型（可以保存任何类型的数据）

使用：

1. 局部变量

//函数内部定义+var
function test(){
    var message = "hi";//函数退出时销毁
}

2. 全局变量

/*
*函数外部定义+var
*/
var message = ‘hi‘;
/*函数内部定义+省略var(不推荐)+赋值
*只要调用一次test函数，globalVar就有了定义，就可以在函数外部的任何地方被调用
*严格模式下给未经声明的变量赋值会抛出ReferenceError错误
*/
function test(){
    globalVar = "hi";
}

注意：

可以使用一条语句定义多个变量，初始化和不初始化均可；

//通过换行和缩进提高可读性
var message = "hi", 
      found = false, 
      age = 29;

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

3.4 数据类型

基本数据类型（简单数据类型）（5）

Undefined

Null

Boolean

Number

String

复杂数据类型（1）

Object

3.4.1 typeof操作符

说明：检测给定变量的数据类型，返回字符串

注意：

null被认为是一个空对象；
函数是特殊的对象，typtof对函数和普通对象进行了区分；
Sfari 5-、Chrome 7-在对正则表达式调用typeof是返回"function"，其它返回"Object"

使用：

var message = "some string";
alert(typeof message);//变量或直接量都可以

返回值：

未声明	"undefined"
布尔值	"boolean"
字符串	"string"
数值	"number"
对象或null	"object"
函数	“function”

3.4.2 Undefined类型（派生自Null）

两种情况：

//1.    声明后默认取得undefined
var message;
//2    下面这个变量没有声明
//var age;
 
//不同点：两种变量从技术角度看有本质区别
alert(message);//"undefined"
alert(age);//产生错误
 
//相同点：无论哪种变量都无法执行有意义的操作
alert(typeof message);//"undefined"
alert(typeof age);//"undefined"

3.4.3 Null类型

特点：只有一个值（null）得数据类型

null: 空对象指针

var car = null;
alert(typeof car);//"object"

使用：如果定义的变量将来用来白村对象，最好将该变量初始化为null,方便判断该变量是否已经保存了一个对象的引用

if(car != null){

//执行体

}

null和undefined:

联系：

alert(null == undefined);//true

区别：无论在什么情况下都没有必要把一个变量的值显式设置为undefined，同样的规则对null不适用。

3.4.4 Boolean类型

两个字面值: true和false区分大小写

各种类型转换为Boolean类型：

3.4.5 Number 类型

特点：使用IEEE754格式来表示整数和浮点数（双精度数值），存在舍入误差

整数分类：在进行计算时都被转成十进制计算

十进制
八进制（在严格模式下不支持）：第一位必须为0
十六进制：前两位必须是0x

1. 浮点数值（最该精度17位小数）

写法

var floatNum1 = 1.1;
var floatNum2 = .1;//表示0.1,不推荐
var floatNum3 = 1.;//表示1.0，会被解析为整数1，不推荐
var floatNum4 = 3e-2;//0.03，科学记数法，小数点后带有6个0以上会被自动转为科学记数法表示

2. 数值范围

最小数

Number.MIN_VALUE(5e-324)

最大数

Number.MAX_VALUE(1.7976931348623157e+308)

查出范围的值（无法继续参与运算）

-Infinity(负无穷) Infinity(正无穷)

或

Number.NEGATIVE_INFINITY(负无穷) Number.POSITIVE_INFINITY(正无穷)

检测数值是否有效

var result = NUmber.MAX_VALUE+Number.MAX_VALUE;
alert(isFinate(result));    //false

3. NaN（Not a Number）

特点：

任何涉及NaN的操作都返回NaN;
NaN和任何值都不想等，包括其本身

alert(NaN == NaN);//false

isNaN(val) ----检测一个值是否是NaN

4. 数值转换（非数值->数值）

任何类型->数值： Number()

字符串->整数： parseInt()

字符串->浮点数： parseFloat()

3.4.6 String类型

说面：用于表示由零个或多个16位Unicode字符组成的字符序列

注意：以单引号开头必需以单引号结尾，双引号亦。

1. 字面直接量

2. 字符串的特点

不可变的

3. 转换为字符串

toString(): null和undefined以外的所有数据类型都包含该方法

非数字调用toString()：没有参数
数字调用toString(): 可以传递一个参数，指定输出任意有效进制格式的字符串

var num =10;
alert(num.toString());//"10"
alert(num.toString(2));//"1010"    
alert(num.toString(8));//"12"   
alert(num.toString(10));//"10"   
alert(num.toString(16));//"a"   