JS学习笔记

看达内视频的听课笔记

一

1.JS的历史和发展

浏览器的核心：内容渲染引擎 + 脚本解释引擎

常见的浏览器的核心：

(1) IE的核心：Trident(双引擎)

(2) Chrome的核心：Webkit(渲染引擎)+V8(脚本解释)

(3) Safari的核心：Webkit(双引擎)

(4) Opera的核心：Presto(双引擎-o-) / Webkit(双引擎)

(5) Firefox的核心：Gecko(双引擎)

Netscape Navigator – Mozilla Firefox(Gecko)

Microsoft IE

JS由三部分组成：

·核心——由ECMAScript标准制定，可以运行在任何js引擎中，不光可以编写客户端脚本，还可以编写服务器端脚本(NodeJS)、编写桌面应用程序、网络程序

·DOM——将JS嵌入在网页中操作HTML标签

·BOM——使用JS与浏览器宿主进行交互

2.JavaScript运行环境搭建

(1)方式一：安装一个独立JS解释器——V8(NodeJS)

·可以交互式执行；

·也可以批量的执行多条语句(需要编写.js文件中)

(2)方式二：使用浏览器内嵌JS解释器

·直接在控制台输入中一行一行的输入并执行脚本；

·把JavaScript语句混排在HTML中，让浏览器解释执行整个HTML文件

JavaScript编写在外部.js文件中，HTML中使用<script src=”.js文件的路径”></script>引用外部js文件；页面元素的某个事件发生时调用外部js中定义的函数

3．代码的调试

《调试的艺术》

调试(Debug)：Ada，世界上第一个女程序员，找到程序中的小错误，纠正它。

核心JS——ECMAScript，可以运行浏览器/单纯的JS引擎

console.log(‘hello’);

DOM——操作HTML，需要浏览器

document.write(‘<hr/>’);

BOM——与浏览器交互，需要浏览器

window.alert(‘用户名已存在！请重试！’); //弹出一个警告框

window.prompt(‘请输入用户名：’); //弹出一个输入提示框

window.confirm(‘您确定要关闭当前页面吗？’); //弹出一个确认框

4.注释

HTML:

CSS: /* color: red; */

JavaScript: /* 多行注释 */ //单行注释

5.JavaScript中定义变量和常量

常量：值固定不能改变的量，JS与其它语言不同，没有关键字可用于自定义常量

‘用户名错误’ —— 字符串常量

3.1415926 —— 数字常量

变量：值可以改变的量，如下格式：

var 变量名; //Variable

var 变量名 = 值;

变量名的命名规则：

(1) 变量名不能使用关键字/保留字

(2) 变量名中可以包含数字、字母、下划线、$、或其他的Unicode字符(如中文)，不能以数字开头；不能包含标点符号。

(3) 变量名最好做到见名知义，如x = 10; y = ‘ABC’;不好

(4) 变量名推荐使用下述三种规则之一：

a) 匈牙利命名法，用一个/多个表示类型的字母开头，如 sUserName、iAge、bIsMarried、oBirthday、eManager、wLogout;

b) 下划线命名法，用_分隔多个单词，如user_name、is_married、manager_name、our_class_monitor_name

c) 小驼峰命名法，用首字母的大写区分多个单词，如userName、changeRate、empFirstName、studentName

d) 大驼峰命名法，每个单词首字母都大写，如UserName、EmpLastName

变量的使用：

(1) 重新修改变量的值——写操作

(2) 获取变量的当前值——读操作

6.JavaScript中的数据类型——重点

(1)基本类型/简单类型/值类型：number、string、boolean

(2)特殊类型：null、undefined

(3)复杂类型/引用类型：object、function

7.基本类型：string

字符编码：计算机只能处理数字(10101001)，每个字符可以分配一个唯一的数字与之对应。

ASCII: 使用8个bit的二进制数来表示一个字符，最多表示256个字符

Unicode：使用16个bit的二进制数来表示一个字符，最多表示65536个字符

(1)常见的转义字符：

\n 表示换行

\t 表示水平制表符(tab键)

\\ 表示一个\

\’ 表示一个单引号

\” 表示一个双引号

\u 后面跟四个十六进制数(Unicode码)

8．基本类型：number

JS中的数字不区分整型、浮点型，底层保存时都使用64位的浮点型保存。

二

1.运算符的分类

(1)单目运算符 -a b++ !c

(2)双目运算符 a+b a>b

(3)三目运算符 a?b:c

2.算术运算符——单目/双目

+

-：减法、取负值

*

/

%: 判断是否能整除、数据分组

++ i++先取值再自加 ++i先自加再取值

-- i-- --i

3.关系运算符

> number和string比较时，自动把string解析为number

<

>=

<=

== number和string比较时，自动把string解析为number

!= number和string比较时，自动把string解析为number

=== 只有类型、值都相同，才判定为true

!== 只要类型或值有一项不同，即判定为true

4.逻辑运算

&& 与、并且

|| 或、或者、要么...要么

！非、取反

5.条件运算符——三目

表达式1 ? 表达式2 : 表达式3

要求：要求表达式1必须是boolean或者能自动转换为boolean；2和3则无所谓。含义：“如果式1为true，则整个表达式的为式2的值；否则整个表达式的为式3的值”

6补充运算符：

typeof: 用于判定变量的类型 typeof age typeof(age+1)

number、string、boolean、object、null、undefined

instanceof： ----

delete：---- delete(obj.name)

7.函数：

概念：一个可以包含多条语句功能体，完成特定的功能。一个函数是一个封闭的空间，其中定义的变量只能在函数体中使用。

定义：function 函数名( [形式参数] ){

//执行语句;

[return 值;]

}

调用：var 接收返回值的变量名 = 函数名([实际参数]);

8.作用域

变量、函数、对象可以在一个特定的范围内使用，离开此范围，可能就无效，此范围就称为“作用域”

9.函数的递归调用

递归调用/嵌套调用：在函数里调用自己

经典递归问题：汉诺塔问题

三

1.几个JS自带的全局函数

parseInt();

parseFloat();

isNaN( x ); 判定参数x是否为一个“NaN”（非数字）

isFinite( x ); 判定参数x是否为一个“有限大的值”

eval( str ); 把参数str理解为一段js代码，加以执行

encodeURI(); 把URI中的非法字符进行编码/转码，得到一个合法的URI，只对空白字符、中文等进行编码

decodeURI(); 把使用encodeURI()编码后的字符串解码回原始字符串

encodeURIComponent(); 把URI中的非法字符(空白、中文)、URI特殊字符(://@?#)进行编码/转码

decodeURIComponent();

3.程序执行的基本逻辑结构

(1)顺序执行:

(2)选择执行:

(3)循环执行:

程序 = 数据(数据结构) + 操作(算法)

4.分支/选择结构——if...else

if( 逻辑判定 ){

//可执行语句

}

===================

if( 判定 ){

}else{

}

====================

if( 判定1 ){

}else if( 判定2 ){

}else if( 判定3 ){

}else{

}

5 分支/选择结构——switch..case

switch: 开关、切换、在多种状态间进行选择

case: 案件、案例、用例、情形、场景

6.程序中的循环结构——while

循环执行：把一个代码块反复的执行多次(不是无限次)

js中循环的种类：

while

do...while

经典for

for...in

while( boolean表达式 ){

//循环体

}

先判定、再执行——有可能循环体一次都不执行

var i = 10;

while(i<0){

}

7.循环结构——do...while

do{

//循环体

}while( boolean表达式 );

先执行、再判定——循环体至少也要执行一次

var i = 10;

do{

//循环体

}while(i<0);

四

1. for循环结构

for( [表达式1] ; [表达式2] ; [表达式3] ){

}

表达式1： 可以是任意合法的执行语句，在for一开始执行时首先获得执行，且执行一次——执行且仅执行一次

表达式2： 若存在必须是一个boolean表达式，其值为true则执行循环体，否则退出循环体；若表达式2不存在，则相当于while(true){}——可能执行1~n次

表达式3： 可以是任意合法的执行语句，每次执行一次循环体之后，都要执行一次表达式3——相当于循环体中的最后一条语句，可能执行0~n次

2.有关循环的两个关键字

break：打断循环，退出循环

continue：终止此次循环体的执行，继续执行式3，再执行下一次的循环判定

3.JavaScript中的内存管理

值类型数据：保存在栈内存中

引用类型数据：变量名(引用名)保存在栈中，对象本身的数据保存在堆中，引用名中保存着对象在堆中的内存起始地址

4.for...in循环

for( var 变量名 in 数组/对象 ){

//访问数组中指定元素

}

读作：对于在指定数组/对象中的每个元素，依次将其下标赋值给指定的变量名，循环体可以对该下标作相应的处理。

var arr = [10, 30, 50];

for( var i in arr){

console.log( i ); //console.log(arr[i]);

}

输出结果为

0

1

2

for..in..循环与for循环的区别：

(1) for..in..要比for简洁

(2) for要比for..in..更加灵活，因为for..in..只能依次遍历每个元素的下标；而for可以正序、倒序、跳序访问。

5.索引数组(Indexed Array)与关联数组(Associative Array)

var arr1 = [];

arr1[0] = ‘西游记’;

arr1[1] = ‘施耐庵’;

arr1[2] = 36.5;

arr1[3] = ‘机械工业出版社’;

//索引数组：下标是0、1、2....

//使用 for和for..in..两种方式遍历

var arr2 = [];

arr2[‘bookName’] = ‘三国演义’;

arr2[‘author’] = ‘罗贯中’;

arr2[‘price’] = 38.5;

arr2[‘publisher’] = ‘清华大学出版社’;

arr2[‘price’] = 48.5;

//使用for..in..两种方式遍历

console.log( arr2[‘price’] );

//关联数组：下标不是0/1/2...等数字，而是一个string

//关联数组中的元素在遍历时，由于下标不是数字，且数组的length属性值为0，只能使用for..in..而不能使用for

6.对象的成员

对象：一切自然界中的人、事、物在程序中表现形式都是对象(object)

对象 = 属性 + 方法

属性：对象中的名词性特征，如姓名、生日、发布时间、价格....

方法：对象可以实施的行为，动词性特征，如踩煞车、登录、删除帖子、发表评论...

var emp = new Object();

emp.name = ’Tom’; //访问对象的属性

emp.salary = 4000; //访问对象的属性

emp.work( ); //访问对象的方法

emp.getSalary( ); //访问对象的方法

arr.reverse( ); //访问数组对象的reverse()方法

每个数组都是一个对象:

var arr = new Array(1, 3, 5);

console.log( arr.length ); //访问数组对象的length属性

7.Array对象的常用方法：

//shift:删除原数组的第一项，返回删除元素的值；如果数组为空则返回undefined

var arr = [1, 2, 3, 4, 5]; var out = arr.shift(); console.log(arr); //[2,3,4,5] console.log(out); //1 var arr = []; var out = arr.shift(); console.log(arr); //[] console.log(out); //undefined

//unshift:将参数添加到原数组开头，返回数组的长度(ie6下返回undefined)

var arr = [1, 2]; var out = arr.unshift(-1, 0); console.log(arr); //[-1,0,1,2] console.log(out); //4

//pop:删除原数组的最后一项，返回数组删除的值；如果数组为空则返回undefined

var arr = [1, 2, 3, 4, 5]; var out = arr.pop(); console.log(arr); //[1,2,3,4] console.log(out); //5 var arr = []; var out = arr.pop(); console.log(arr); //[] console.log(out); //undefined

//push:将参数添加到原数组的末尾，返回数组的长度

var arr = [1, 2, 3]; var out = arr.push(4, 5, 6); console.log(arr); //[1,2,3,4,5,6] console.log(out); //6

//concat:返回一个将参数添加到原数组中构成的新数组

var arr = [1, 2, 3]; var out = arr.concat(4, 5); console.log(arr); //[1,2,3] console.log(out); //[1,2,3,4,5]

//splice(start,deleteCount,val1,val2,...):从start位置开始删除原数组deleteCount项，并从该位置起插入val1,val2,...，返回删除的项组成的新数组

var arr = [1, 2, 3, 4, 5]; var out = arr.splice(2, 2, 7, 8, 9, 10); console.log(arr); //[1,2,7,8,9,10,5] console.log(out); //[3,4] //在清空数组时仅需传递start，如果不删除所有元素，再传递deleteCount var arr = [1, 2, 3, 4, 5]; var out = arr.splice(2); console.log(arr); //[1,2] console.log(out); //[3,4,5] //同shift var arr = [1, 2, 3, 4, 5]; var out = arr.splice(0, 1); console.log(arr); //[2,3,4,5] console.log(out); //[1] //同unshift var arr = [1, 2, 3, 4, 5]; var out = arr.splice(0, 0, 22, -1, 0); console.log(arr); //[22,-1,0,1,2,3,4,5] console.log(out); //[] //同pop var arr = [1, 2, 3, 4, 5]; var out = arr.splice(arr.length - 1, 1); console.log(arr); //[1,2,3,4] console.log(out); //[5] //同push var arr = [1, 2, 3, 4, 5]; var out = arr.splice(arr.length, 0, 6, 7, 8); console.log(arr); //[1,2,3,4,5,6,7,8] console.log(out); //[]

//reverse:将原数组倒序；

//sort(orderfunction):sort()为升序排列，但是先调用每个数组项的toString()方法，然后比较字符串来排序，是按ASCII进行比较的；

//所以跟reverse不同原理不同。sort()不带参数的时候是从字面上对数组排序 var arr = [0, 1, 5, 10, 15]; arr.sort(); console.log(arr); //0,1,10,15,5 ,注意这里是字符串按ASCII进行比较的 //调用这样的函数就按数值方式排列了 function sortNumber(a, b) { return a - b } arr.sort(sortNumber); console.log(arr); //0,1,5,10,15

//slice(start,end):返回从原数组中指定start到end(不包含该元素)之间的项组成的新数组,如只有一个参数，则从start到数组末尾

var arr = [1, 2, 3, 4, 5, 6, 7, 8]; var out = arr.slice(2,3); console.log(arr); //[1, 2, 3, 4, 5, 6, 7, 8] console.log(out); //[3]

//join(separator):将数组的元素组成一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符

var arr = [1, 2, 3, 4, 5, 6]; var out = arr.join(); console.log(arr); //[1, 2, 3, 4, 5, 6] console.log(out); //1,2,3,4,5,6 out = arr.join(""); console.log(out); //123456 out = arr.join("&"); console.log(out); //1&2&3&4&5&6

五、

1. 正则表达式

Regular Expression，规则的、有模式的、有规律的，表示式——用于描述一种字符串模式的表达式。

定义一个正则表达式对象的两种方式：——RegExp对象不是String对象

(1) var patt1 = /表达式/特性;

(2) var patt2 = new RegExp(‘表达式’, ‘特性’);

可以在两种情形下使用一个正则表达式对象：

(1) patt.test( str ); //用正则表达式对象检索字符串对象

(2) str.replace( patt ); //调用String的方法，把正则表达式对象作参数

正则表达式pattern的写法

内容形式	含义	示例
字符、数字、汉字	匹配这种字符本身	/com/ /139/
n?	指定字符出现0、1次
n*	指定字符出现0~多次	/ab/ /(ab)/
n+	指定字符出现1~多次
n{x}	指定出现的确切次数	/x{9}/
n{x,y}	指定出现的次数>=x且<=y	/ab{2,4}/
n{x,}	指定出现的次数>=x	/ab{2, }/
[abcd]	匹配多个之一
[^abcd]	不允许出现多个之一
[0-9]	相当于[0123456789]
[a-z]	匹配任意一个小写字母
[A-Z]	匹配任意一个大写字母
[A-z]	匹配任意大小写字母，以及[ \ ] ^ _ `
[A-Za-z]	匹配任意一个大小写字母
[A-Za-z0-9_$]	匹配大小写字母、数字、下划线、$其中之一，注意：[]中元字符可以不用转义
表达式1\|表达式2	匹配两个表达式其中之一注意：[]只匹配一个字符；而\|匹配是一个完整的表达式	/abc\|xyz/ /m(abc\|xyz)/
(表达式)	使用()创建一个子表达式/表达式小分组。注意：每个()创建的分组会自动分配一个从1开始的编号，在正则表达式中想引用某个分组的值使用“\编号”，在正则表达式的外部想引用某个分组的值使用“$编号”	/ab/ /(ab)(cd)*/ /(ab)(cd)(ef)/ 分组ab的编号为1 分组ef的编号为3
\d	匹配任意一个数字(decimal)	/\d/ <=> /[0-9]/
\D	匹配任意一个非数字字符	/\D/ <=> /[^0-9]/
\w	匹配任意一个单词字符(word)，如大小写字母、数字、_	/\w/ <=> /[a-zA-Z0-9_]/
\W	匹配任意一个非单词字符	/\W/ <=> /[^a-zA-Z0-9_]/
\s	匹配任意个空白字符(space)，	/\s/ <=> /[ \n\t\r]/
\S	匹配任意个非空白字符	/\S/ <=> /[^ \n\t\r]/
.	匹配除了换行和回车之外的任意一个字符	/./ <=> /[^\n\r]/
上面的匹配符都是“字符匹配符” 下面的匹配符都是“位置匹配符”，匹配字符串中的特定位置
^	匹配字符串的开头	/^a/
$	匹配字符串的结尾	/a$/
\b	匹配单词的边界(boundary)	/\bis\b/
\B	匹配非单词边界	/\Bis\b/
?=x	匹配后面紧跟指定字符x的字符串，注意：匹配的结果中不包含x	/do(?=not)/
?!x	匹配后面没有紧跟指定字符x	/do(?!not)/

2.正则表达式中的特性修饰符：

var regexp = /表达式/特性修饰符 ;

特性修饰符可以取下列的一个或多个：

(1) i ignoreCase,匹配时忽略大小写

(2) g global，全局匹配，默认情况下所有的匹配仅进行一次；若声明了全局匹配，则可以把所有的匹配情形全部找出来

(3) m multiline，执行多行匹配，m只对^和$位置匹配符有影响，默认情况下，不执行多行匹配，即

默认情况下： ^只匹配字符串的开头；$只匹配字符串的结尾

若声明了m： ^可以匹配每一行的开头；$匹配每一行的结尾

3.RegExp类型的常用成员

成员属性：

global 只读

ignoreCase 只读

multiline 只读

source 只读，返回正则表达式原始式子

RegExp.$1.... RegExp.$9 其中保存着最近一次成功匹配时指定编号的的子表达式具体匹配的值；即读取这9个变量前，必须要有一次成功的 regexp.test(str) 或者 regexp.exec( str ) 方法的调用。

lastIndex 可读/可写，返回下一次匹配搜索的起始位置——必须声明全局搜索才有此属性——此属性可以用于计算匹配的总次数

成员方法：

test(): 需要一个字符串参数，用于验证该字符串是否匹配定义好的模式，返回true/false。该方法会影响lastIndex和$1..$9属性

exec() 执行一次对字符串参数的匹配，返回此次匹配成功的实际子串，以及匹配到的下标；若找不到匹配了返回null。此方法可以多次调用，会不停的影响lastIndex属性——常用于“找到一篇文章中所有的电话/邮箱/钱数”等功能。

compile() 修改和重新编译表达式，可以加快执行速度。

4.String类中可以使用正则表达式作参数的方法

str.方法(patt);

(1)replace( value/patt, replacement) 将指定的子串/正则表达式匹配的内容替换为replacement

(2)split( value / patt ) 使用指定的子串或正则表达式拆分原始字符串，如拆分出一条语句中所有的英文单词，即可以 /\s+/ 来拆分

六

1.String对象的方法中可以使用RegExp作参数的

str.replace( regexp, replacement );

str.match( regexp ) 返回字符串中所有匹配正则表达式的子串

str.split( regexp )

str.search( regexp ) 作用于indexOf()类似，但参数支持正则表达式

2.贪婪匹配(Greey Match和懒惰匹配(Lazy Match)

贪婪匹配：* + {x,y} 默认情况下，频次元字符会“尽可能多”的匹配

懒惰匹配：在频次元字符后面加?，转换为懒惰匹配：会“尽可能少”的匹配内容

3.Math对象

static : 静态的，JS中的保留字

非静态属性： var s1 = new String(‘abc’); s1.length

非静态方法： var patt = new RegExp(‘’,’’); patt.test(‘’);

总结：非静态成员，使用时必须先构建一个对象，使用对象的引用来调用

静态属性： RegExp.$1 Math.PI

静态方法： Math.abs(-5)

总结：静态成员，使用时无需构建对象，直接使用类型名来调用

Math类型中的所有属性和方法都是静态的，故无需创建Math对象

Math类型常用属性和方法：

Math.PI

Math.round()

Math.ceil()

Math.floor()

Math.random()

4.Number类型

Number类型是（number值类型）对应的引用类型

var n1 = 123; //值类型

var n2 = new Number(123); //引用类型对象

var n3 = new Number(‘123.45’); //

var n4 = new Number(‘123.45ab’); //

Number类型常用静态属性：

Number.NaN

Number.MAX_VALUE

Number.MIN_VALUE

Number.POSITIVE_INFINITY

Number对象的常用方法：

n1.toExponential() 转换为指数法表示形式

n1.toFixed(x) 四舍五入到指定小数位数的数组

n1.toPrecision(x) 转换为指数法表示形式，具有指定的有效位

n1.toString(2/8/16) 转换为指定进制的字符串表示

5.Date类型

表示日期和时间(到毫秒精度) 1s=1000ms

计算机中以一个长整型的数字来表示时间，值指距离“计算机元年“经过了多少毫秒。

var n1 = new Date(1000*3600);

var t = n1.getTime(); //3600000

Date常用方法：

d1.getYear() 返回存储的年份-1900

d1.getFullYear() 返回存储的年份

d1.getMonth() 返回存储的月份 0~11

d1.getDate()

d1.getHours()

d1.getMinutes()

d1.getSecond()

d1.getMilliseconds()

d1.getTime() 返回存储的时间距离计算机元年多少毫秒

d1.toLocaleDateString()

d1.toLocaleTimeString()

d1.toString()

6.错误处理

可抛出(throw)的对象：其它语言分为“异常”和“错误”，JavaScript中能够抛出的对象全部称为Error——可能出现、也可能不出现的问题。遇到错误，JavaScript解释器会创建一个Error对象，其中有name和message属性，保存着错误的名称/提示消息；并把此对象抛出来给用户。用户若处理了（有的解释器还提供了一个stack属性，提供了函数调用的追踪信息），则程序还可以继续执行；若程序没有处理，程序会终止执行。JavaScript中提供的错误类型：

Error 所有Error共同父类，但解释器只可能抛出某种具体的错误对象，而不会直接抛出一个Error对象

SyntaxError 语法错误

TypeError 类型错误

ReferenceError 引用错误

EvalError 非法调用eval()函数抛出的错误，很少见

RangeError 范围错误，如new Array(-1)

URIError URI错误，encodeURI() / decodeURI() / encodeURIComponent() / decodeURIComponent()若发现了非法的URI可能抛出URIError

总结：ECMAScript中定义的所有原生的引用类型

Number Boolean String

Array RegExp Math Date

Error SyntaxError ReferenceError TypeError RangeError EvalError URIError

Object Function

Global (其存在的目的是为了搜集js中全局函数，如parseInt())

七

1.错误/异常处理机制

错误处理机制：专用于处理项目中“非功能性需求(安全性需求)”，把这种与主业务需求并非密切相关的需求从核心代码中剥离出来。

错误/异常：程序中出现的“非正常的运行状态”，一般情况下，解释器/用户可以抛出一个Error对象，以通知当前函数的调用者：此处发生了一个异常情形，需要用户加以处理。

错误处理：若用户不处理程序中抛出的Error对象，则程序将终止执行；若用户“试着...捕捉...”错误的发生，并加以处理的话，程序仍然可以绕过错误继续执行下去。

语句1;

try{

语句2;

语句3;

}catch(err){

语句4;//错误处理语句

}

语句5;

若上述代码没有错误抛出：语句1=>语句2=>语句3=>语句5

若语句2错误抛出：语句1=>语句2=>语句4=>语句5

若语句3错误抛出：语句1=>语句2=>语句3=>语句4=>语句5

try...catch结构中，还可以在尾部添加一个finally子句，不论错误抛出与否(甚至执行了return)，都要执行finally操作——表达的含义：执行try块不论正常与否，都要进行的扫尾/清理操作。

try{

语句1

语句2

return;

语句3

}catch(er){

语句4

}finally{

语句5

}

语句6

2.JavaScript-OOP

OOP OOT OOA

Object-Oriented Programming/Programmer

Object-Oriented Testing/Tester

Object-Oriented Architect

面向对象：Java C# AS4 C++ PHP JavaScript

面向过程：C C++ PHP JavaScript

面向切面：基于面向对象而又高于面向对象——发现并抽取面向对象中切面对象

面向过程和面向对象的异同？

面向过程：把复杂业务划分为若干个“Procedure、Function”。

function giveOrder(order, money){

}

function findShop(){

}

function buy(){

return bread;

}

function getBack(){

}

function eat(){

}

面向过程的思维方式：彻底的理解现实场景，理清其中的逻辑关系和运行顺序，划分为若干个小的处理单元——落实为function

Teacher{

money;

giveOrder()

eat();

}

Student{

speed;

findShop()

buy()

getBack();

}

LadyBread{

bread[]

makeBread()

sellBread()

}

面向对象的思维方式：首先观察现实场景，发现其中有哪些角色和对象，赋予这些对象以属性和行为，让他们彼此发消息，从而构建整个大的应用场景。

对象(Object)：现实应用/场景中的某个事物在程序中的体现。对象是无特定顺序的属性的集合。

面向对象的程序需要具备的三个/四个基本特征：

(1) 封装(capsulation)：把零散的多个变量组成一个整体

(2) 继承(inheritance)：子对象自动获得父对象的所有特征

(3) 多态(polymorphism)：一个方法根据参数的不同可以运行出不同的结果

(4) 聚集(aggregation)：多个对象可以聚合为一个更大的对象

JavaScript具备上述四种能力。

Object = Property* + Method*

属性和方法统一称为对象的特性(attribute)或成员(member)

3.创建对象的四种方式

(1)通过new关键字调用Object()构造方法

(2)对象直接量

(3)?

(4)?

方式一：

如何创建新对象：

var emp1 = new Object();

对象的引用向堆申请新空间构造方法格式化内存

在栈中分配4/8个字节的引用必需空间；new在堆中申请分配足够的对象空间，对象中的成员全部保存在堆中。

var emp2 = null;

emp2.name = “Tom”; //TypeError：没有空间可用于保存name

console.log( emp2.name ); //TypeError：

如何为对象分配新的属性：

emp1.ename = ‘Tom’;

emp1[‘ename’] = ‘Tommy’; //注意[]中必需一个string表达式

如何为对象分配新的方法：

emp1.work = function(){//赋值为一个匿名函数

console.log(this.ename+’在工作’);

}

emp1.getSalary = gs;//赋值为一个命名函数

function gs(){

console.log(this.ename+’在领工资’);

}

emp1.work();

emp1.getSalary();

4.创建自定义对象的方式二

对象直接量(object literal )创建一个新的对象：

var emp1 = null;

var emp2 = { }; //在堆中创建新的对象，作用于new Object();

emp2.ename = ‘Mary’;

emp2.salary = 3500;

emp2.work = function(){

}

var emp3 = {

属性1: 值1,

‘属性2’: 值2,

方法名1:function(){ },

‘方法名2’: function(){ }

};

emp3.属性1 = 新值;

如何判定一个对象中是否具有某个属性

(1) ‘属性名’ in 对象

(2) 对象.hasOwnProperty(‘属性名’)

(3) 对象.属性 === undefined

(4) if(对象.属性){ ... }

5.JSON

JavaScript Object Notation，js对象表示法，原本是js中创建对象的“对象直接量语法”；现在已经广泛的被所有语言所采用，用于描述和存储数据——JSON是一种轻量级的数据描述和交换方案，很多场合下已经替代了XML，尤其是AJAX应用。

JSON语法：

数据有两种形式：

JSON对象： { }

JSON数组： [ ]

对象中可以存储多个“名/值对”，名和值间用冒号分隔；不同的名值对间用逗号分隔，名需要使用双引号引起来，值中若是字符串也需要使用双引号引起来。

JSON字符串和JavaScript对象间的转换：

var data = ‘{“x”:50, “y”:30}’; //JSON格式的字符串

console.log( data.x ); //undefined

把JSON格式的字符串解析为JavaScript对象：

(1) var obj = eval( ‘(’+data+’)’ ); obj.x; //50

(2) var obj = JSON.parse(data); obj.x; //50

把JavaScript对象转换为JSON字符串：

var emp = {ename:’tom’, salary:3500};

var jsonString = JSON.stringify( emp );

console.log(jsonString);

八

1.ECMAScript5中属性的分类

(1)数据属性(Data Property)

(2)访问器属性(Accessor Property)

var obj = {

get 属性名(){

return 属性值;

},

set 属性名(value){

//需要接收到的value作处理

}

};

注意：

(1)访问器属性的本质是两个函数，若向读取访问器属性的值，会自动调用get访问器；若想为访问器属性赋值，会自动调用set访问器，并把等号右边的值传递给set访问器的形参。

(2)访问器属性自己是不能存储数据的，所以访问器属性的值往往要依赖于另一个数据属性。(3)访问器属性一般用于两个场合：用于冗余属性和有意控制属性的只读或只写。

2.ECMAScript5中新添内容：属性(property)的特性(attribute)

属性：对象中可以保存数据的变量，如stu.math / stu.total

属性的特性：

(1) 数据属性的特性：value、writable、enumerable、configurable

(2) 访问器属性的特性：get、set、enumerable、configurable

JavaScript中的数据类型：

(1) 值类型

(2) 特殊类型

(3) 引用类型

a) 原生对象——ECMAScript标准定义

b) 宿主对象——由浏览器提供的对象——浏览器兼容性问题——W3C组织定义

c) 自定义对象

3.当前主流的动态Web开发技术

动态：网页的内容，可以在不同的时间、针对不同的客户呈现出不同的内容。

(1) JSP = HTML + Java

(2) ASPX = HTML + C#

(3) PHP = HTML + php

4.DHTML

Dynamic HTML，动态HTML、动态网页，指的是页面的表现、样式是可以随着用户的操作而发生不同的变化。DHTML = HTML + CSS + JavaScript，即DHTML是把已经存在的三项技术整合起来进行组合应用，就是使用JavaScript来“增删改查”HTML元素和CSS样式，最终使得页面呈现一个更友好的交互效果。

DHTML对象：

(1) BOM：window、history、location、document、screen、event、navigator

用于JavaScript脚本与浏览器进行交互；

(2) DOM：HTML页面中的每个元素都被JavaScript理解为一个DOM对象

用于JavaScript脚本与当前显示HTML文档进行交互；

5.DOM树

(1)DOM元素树：以document对象为根，每个HTML标签都是元素树的一个节点。

(2)DOM节点树：以document对象为根，每个标签、文本、属性、注释等都是节点树上的一个节点。

Node对象的几个属性：

(1) parentNode: Node类型，当前节点的那个唯一的直接父节点对象

(2) childNodes：NodeList类型，当前节点的所有子节点，组成一个类数组对象

(3) firstChild：Node类型，当前节点的第一个子节点

(4) lastChild：Node类型，当前节点的最后一个子节点

(5) nextSibling：Node类型，当前节点的下一个兄弟节点

(6) previousSibling：Node类型，当前节点前一个兄弟节点

(7) nodeName：String类型

(8) nodeType：Number类型

(9) nodeValue：String类型

6.获取元素节点中的内容

var elementNode = ...;

elementNode.innerHTML; //获取/设置元素中的HTML内容

elementNode.textContent; //获取/设置元素中的纯文本——IE8-不支持

elementNode.innerText; //获取/设置元素中的纯文本——FF不支持

7.与元素节点的属性相关的DOM属性

(1)element.attributes //获取元素节点所有属性节点——类数组对象

(2)element.attributes[‘属性名’] //获取元素身上指定的属性的值

(3)element.getAttribute(‘属性名’) //获取元素身上指定的属性的值

(4)element.setAttributeNode(attrNode); //修改某个属性的值

(5)element.removeAttribute(‘属性名’) //删除指定的属性

8.在DOM树中查找/选择元素节点

(1) document.getElementById(‘id’) : ElementNode

注意：普通的元素节点没有此方法！

(2)document/node.getElementsByTagName(‘标签名’): NodeList

(3)document.getElementsByName(‘name属性的值’): NodeList

(4)document/node.getElementsByClassName(‘具备指定的class名’)：NodeList

(5)document/node.querySelector(‘CSS选择器’)： ElementNode,返回第一个匹配元素

(6)document/node.querySelectorAll(‘CSS选择器’)：NodeList，返回所有的元素

(7)document.all:NodeList，获取HTML中所有的元素节点对象

(8)document.documentElement: 获取页面中的HTML标签

(9)document.body: 获取页面中的BODY标签

9.DOM 节点树和元素树

	节点树	元素树
获取父节点	parentNode	parentElementNode
获取全部子节点	childNodes	children
获取第一个子节点	firstChild	firstElementChild
获取最后一个子节点	lastChild	lastElementChild
获取下一个兄弟	nextSibling	nextElementSibling
获取上一个兄弟	previousSibling	previousElementSibling

九

1.DOM操作——删除已有节点

var deletedChild = parentNode.removeChild( existingChild );

2.DOM操作——替换已有节点

var replacedChild = parentNode.replaceChild( newChild, existingChild );

3.DOM操作——删除属性节点

element.removeAttribute(‘属性名’);

element.removeAttributeNode(attrNode);

4.BOM模型

通过BOM对象，JavaScript程序可以与当前的浏览器窗口进行交互。所有的BOM对象无需程序员来创建，浏览器已经内置好了。

BOM对象的根对象：

Window: 该类型的对象指当前的浏览器窗口，是一个全局对象，其中所有的属性可以直接使用，即：

·Window.screen

·screen

·Window.window.screen

·window.screen

上述四种写法的含义是一样的。同理：

·Window.alert();

·alert();

·Window.window.alert();

·window.alert();

5.window对象的常用方法：

window.alert(‘’) //弹出一个警告框

window.prompt(‘’) //弹出一个输入提示框，返回值可能是null / ‘’ / ‘用户输入的字符串’

window.confirm() //弹出一个确认框，返回值可能是true / false

window.close() //关闭当前窗口

function Window(){

}

Window.window = new Window(); //Window类型

Window.document = new Document();

Window.screen = new Screen();

Window.history = new History();

Window.location = new Location();

Window.navigator = new Navigator();

Window.event = new Event();

Window.alert(123);

function Document(){

}

function Screen(){

}

6.JavaScript中的特殊运算符

typeof : string

instanceof : boolean

delete : ?

void : undefined

7.window对象提供的两种定时器

(1)周期性定时器：每隔指定的时间间隔，执行一次指定的功能

var timer1 = window.setInterval(task, time);

设置一个周期性定时器，并立即启动它；先计时，再运行。

window.clearInterval( timer1 );

停止并删除计时器

(2)一次性定时器：间隔指定的时间后，执行一次指定的功能，仅执行一次。

var timer2 = window.setTimeout(task, time);

设置一个一次性计时器，并立即启动它；先计时，再执行。

window.clearTimeout( timer2 );

在一次性计时器执行之前打断并删除该计时器。

十

1.window.navigator对象的使用

常用的属性成员：

userAgent: 返回浏览器/操作系统的信息

2.window.location对象的使用

Location对象表示浏览器当前显示的页面的URL地址

href：读取或设置当前浏览器显示的页面的url，用于页面跳转

reload() 重新加载当前页面/刷新

客户端可以实现页面跳转的方法：

(1)<a href=”url”></a>

(2)<form action=”url”></form>

(3)location.href=”url”; location.assign(‘url’);

(4)window.open(‘url’);

(5)<meta http-equiv=”Refresh” content=”3;url”/>

服务器端可以实现页面跳转的方法——控制HTTP响应头

3.window.history对象的使用

History中保存着当前浏览器访问的所有页面的历史顺序

length：访问历史中共有多少个页面

back() 退回到访问历史中的上一个页面

forward() 前进到访问历史中的下一页页面

go(num) 直接跳转到访问历史中的下num个页面； go(1) <=> forward(); go(-1) <=>back();

4.window.screen对象的使用

Screen对象代表当前浏览器窗口所在的显示屏幕

width：当前屏幕的水平分辨率

height：当前屏幕的竖直分辨率

availWidth：当前屏幕的水平分辨率 – 任务条宽

availHeight：当前屏幕的竖直分辨率 – 任务条高

5.event的类型：

(1) 鼠标事件

(2) 键盘事件

(3) 状态事件

如何获取event对象：

HTML: <button οnclick=”alert(event)”>

JS: <button οnclick=”f1(event)”>

function f1(event){

alert(event);

}

</script>

event对象的常用属性：

cancelBubble: boolean

clientX

clientY

screenX

screenY

offsetX

offsetY

keyCode

var src = event.srcElement || event.target

1.补充：常用的事件——重点

鼠标事件：

onclick

ondblclick

onmousedown

onmouseup

onmouseover

onmouseout

onmousemove

onkeydown：按键被按下，按键的值尚未被目标接收到

onkeypress：按键被按下，按键的值已经被目标接收到

onkeyup：按键松开

onfocus：获得焦点

onblur：失去焦点

onchange：当表单中的输入项的值发生改变，如select元素。注意：普通输入框的onchange事件必须同时满足“内容改变”和“失去焦点”

onsubmit：表单被提交时，<input type=’submit’>或<input type=’image’>

onload：一般用于body元素，指当页面所有元素加载完成——即把所用到的css/js/image全部加载完毕，才会触发此事件

onerror：可以用于body、img元素，当发生解析错误时会调用onerror处理方法。