JavaScript程序设计（微课版）课件全套 第1-7章 JavaScript概述 - Ajax应用

JavaScript程序设计与应用JavaScript基础目

录JavaScript的历史与现状JavaScript的运行JavaScript的开发环境目

录JavaScript的历史与现状JavaScript的运行JavaScript的开发环境JavaScript历史与现状一、历史发展1994年12月，Navigator发布了1.0版，Navigator浏览器需要一种可以嵌入网页的脚本语言，用来控制浏览器行为（表单验证）。1995年，程序员BrendanEich开发了Javascript。由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript写出来的程序混乱不堪。1996年8月互联网巨头微软公司进入浏览器领域，推出JScript，和NetScript公司开始争夺博主地位。同年11月，Netscape公司决定将JavaScript提交给国际标准化组织ECMA（EuropeanComputerManufacturersAssociation）。1997年7月，ECMA组织发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript1.0版。2015年6月，第六版发布（ES6），新浏览器都支持这一版本，之后每年发布一版，版本号以年份命名。ECMAScript和JavaScript的关系：前者是后者的规格（规范），后者是前者的一种实现。在日常场合，这两个词是可以互换的。JavaScript历史与现状二、现状JavaScript是web前端三大技术之一。JavaScript嵌入html页面中被浏览器解释执行，可以实现用户和客户端浏览器之间的交互。结构：超文本标记语言，描述网页结构表现：层叠样式表，定义网页布局和样式行为：脚本语言，实现用户和客户端浏览器之间的交互目

录JavaScript的历史与现状JavaScript的运行JavaScript的开发环境JavaScript的运行二、JavaScript代码的装载与解析JavaScript是一种解释型语言当一个HTML页面被装载时，它会装载并解析过程中遇到的任何JavaScript。代码解析是浏览器取得代码并将之转化成可执行代码的过程。

一、引入JavaScript脚本代码到HTML文档中

使用script标签告诉浏览器JavaScript从何处开始，到何处结束<scripttype="text/javascript></script>

1、嵌入脚本代码<scripttype="text/javascript">...</script>

脚本代码可以方法html的任意地方，一般放在body最下方，也可以由实际功能需求决定其位置。

2、引入脚本文件<scripttype="text/javascript"src="文件路径"></script>目

录JavaScript的历史与现状JavaScript的运行JavaScript的开发环境JavaScript的开发环境一、JavaScript脚本编写步骤①选择JavaScript语言编辑器编辑脚本代码；②嵌入该JavaScript脚本代码到HTML文档中；③选择支持JavaScript的浏览器浏览该HTML文档；④如果错误则检查并修正源代码，重新浏览，此过程重复直至代码正确为止；⑤处理不支持JavaScript脚本的情况。二、编辑器由于JavaScript纯粹由文本构成，因此编写JavaScript代码可以用任何文本编辑器，例如Hbuilder、SublimeText、vscode等。三、运行与调试JavaScript代码运行和调试JavaScript的主要工具还是Web浏览器，主流的Web浏览器还会包含一些JavaScript调试程序。例如MozillaFirefox、GoogleChrome等。JavaScript程序设计与应用语

法目

录JavaScript语法基础JavaScript数据类型JavaScript运算符JavaScript语句JavaScript函数JavaScript语法基础一、变量与常量1、什么是变量和常量

变量和常量都是指程序中命名的一个存储单元。变量是相当于常量而言的，常量通常是一个不会改变的固定值，而变量是对应到某个值的一个符号，这个符号中的值可能会随着程序的执行而改变，因此称为“变量”。2、变量和常量的命名规则JavaScript中的命名同其他语言非常相似，这里要注意以下几点：①第一个字符必须是字母（大小写均可），下划线（_）或者美元符号（$）；②后续的字符可以是字母、数字、下划线或者美元符号；③变量名称不能是关键字或保留字；④不允许出现中文变量名，且大小写敏感。$ab1B1studentnameschool_whlong

this

年龄

5bookJavaScript语法基础Javacript语法基础3、变量和常量的命名惯例命名有意义:尽量使用英文单词（1）变量小驼峰格式：stuName前缀应当是名词，尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而name、title表示为字符串类型。//好的命名方式varmaxCount=10;vartableTitle='LoginTable';//不好的命名方式varsetCount=10;vargetTitle='LoginTable';（2）常量名称全部大写,使用大写字母和下划线来组合命名,下划线用以分割单词constMAX_COUNT=10;constURL='';JavaScript语法基础二、关键字和保留字1、关键字ECMA-262定义了JavaScript支持的一套关键字（keyword）。根据规定，关键字不能用作变量名或函数名。breakcasecatchcontinuedefaultdeletedoelsefinallyforfunctionifininstanceofnewreturnswitchthisthrowtrytypeofvarvoidwhilewithJavaScript语法基础2、保留字JavaScript还定义了一套保留字（reservedword）。保留字在某种意义上是为将来的关键字而保留的单词。因此，保留字也不能被用作变量名或函数名。abstractbooleanbytecharclassconstdebuggerdoubleenumexportextendsfinalfloatgotoimplementsimportintinterfacelongnativepackageprivateprotectedpublicshortstaticsupersynchronizedthrowstransientvolatileJavaScript语法基础JavaScript语法基础三、变量与常量的声明JavaScript是一种弱类型语言(无类型、松散、动态类型)，声明变量时不需要指定数据类型。1、var可以声明一个或多个变量，可以在声明的同时或者声明后赋值，值可以修改var声明的是全局变量2、let可以声明一个或多个变量，可以在声明的同时或者声明后赋值，值可以修改let声明的变量是块级作用域3、constconst声明常量，必须在声明时初始化，值不能修改const声明的是块级作用域在js中，垃圾回收器每隔一段时间就会找出那些不再使用的数据，并释放其所占用的内存空间。尽量少使用var声明变量，而使用let，否则可能引起内存泄漏（不再用到的内存，没有及时释放）。目

录JavaScript语法基础JavaScript数据类型JavaScript运算符JavaScript语句JavaScript函数JavaScript数据类型一、基础数据类型类型

举例简要说明Number45,-34,32.13,3.7E-2数值型数据String"name",'Tom'字符型数据，需加双引号或单引号Booleantrue,flase布尔型数据，不加引号，表示逻辑真或假Undefinedundefined表示未定义，指声明了但是没有赋值的值Nullnull表示空值typeof检测运算符:typeofnum三个特殊的Number值:Infinity无穷大，-Infinity负无穷，NaN(notanumber)不是一个数字JavaScript数据类型二、原始值与引用值1、原始值：基础（简单）数据类型：Number、String、Boolean、Undefined、Null2、引用值：复杂（复合）数据类型（1）对象JavaScript中的对象是一个属性（键值对）的集合，其中的每一个属性都对应一个属性值。通过这些属性可以访问值，属性值通常作为对象的属性来引用。对象的基本语法格式如下:{属性名1：属性值1，

......属性名n：属性值}（2）数组

一些数据的集合。这些数据也可以是任意基础数据类型或者引用型。基本语法格式如下： [数据1，数据2，......数据n]JavaScript数据类型三、解构赋值从数组和对象提取值，对变量进行赋值1、利用数组解构赋值：将数组中的数据依次提取给变量（1）变量先声明再赋值（2）变量声明的同时赋值（3）变量和数组的数目不匹配时忽略某些值（4）预设默认值2、利用对象解构赋值：将对象中的属性的值依次提取给对应的变量（1）变量的次序可以和属性名不一致（2）变量的名字必须和属性名相同JavaScript数据类型四、数据类型转换1、显示数据类型转换根据需要，使用某种方法将数据类型转换成另外一种类型2、隐式数据类型转换当运算符在运算时，如果两边数据类型不统一CPU就无法计算，这时编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的再进行计算。这种无需程序员手动转换，而由编译器自动转换的方式就称为隐式转换JavaScript数据类型1、显示数据类型转换(1)转换成字符串toString()方法toString()方法不会影响到原变量，它会将转换的结果返回转换规则：基本按照各值的字符串形式转换为字符串①undefined和null值：不能转换并报错；②布尔值：值为true转换成“true”，值为false转换成“false”；③数字型值：转换成NaN或数字型变量的完整字符串；此外,toString()方法添加参数可以将数值以该参数的进制转换为对应十进制数的字符串④其他对象：如果该对象的toString()方法存在，则返回toString方法的返回值，否则返回undefinedString()函数转换规则基本同toString()和toString()的区别：String()可以将null和undefined这两个值转换成字符串JavaScript数据类型（2）转换成布尔值Boolean()函数转换规则:相对简单

①只有空字符串("")、null、undefined、+0、-0和NaN转为false，其他的都是true

②数组、对象（包括空数组、空对象）转换为布尔类型都是trueJavaScript数据类型parseInt():转换为整数parseFloat():转换为浮点数转换规则:这两个方法都可以将一个字符串中的有效的数字内容取出来，若转换对象没有有效数字则转换为NaNNumber()函数转换规则①纯数字的字符串转换为数字，含有非数字则转换为NaN，空串或者是一个全是空格的字符串，转换为0

②true转成1,false转成0③undefined转成NaN④null转成0

Number()接受不同进制数值作为参数，返回值永远是十进制值（3）转换成数字JavaScript数据类型2、隐式数据类型转换后台调用Number()、Boolean()、String进行自动转换常用转换规则转成string类型：+（有一个操作数是字符时，+是字符串连接符）转成number类型：++/--+-*/%><>=<===!====!===转成boolean类型JS遇到预期为布尔值的地方(比如if语句的条件部分),就会将非布尔值的参数自动转换为布尔值。系统内部会自动调用Boolean函数。如果对非布尔值进行运算，则会将其转换为布尔值，然后再取反。JavaScript数据类型2、隐式数据类型转换后台调用Number()、Boolean()、String进行自动转换常用转换规则转成string类型：+（有一个操作数是字符时，+是字符串连接符）转成number类型：++/--+-*/%><>=<===!====!===转成boolean类型JS遇到预期为布尔值的地方(比如if语句的条件部分),就会将非布尔值的参数自动转换为布尔值。系统内部会自动调用Boolean函数。如果对非布尔值进行运算，则会将其转换为布尔值，然后再取反。目

录JavaScript语法基础JavaScript数据类型JavaScript运算符JavaScript语句JavaScript函数JavaScript运算符一、赋值运算符赋值运算有以下两种形式：简单的赋值运算=：把等号右侧操作数的值直接复制给左侧的操作数，因此左侧操作数的值会发生变化。附加操作的赋值运算：赋值之前先对右侧操作数执行某种操作，然后把运算结果复制给左侧操作数。具体说明如表所示。JavaScript运算符二、算数运算符算术运算符是最简单、最常用的运算符，可以使用它们进行通用的数学计算运算符表达式说明示例+x+y返回x加y的值x=4+2，结果为6-x-y返回x减y的值x=8-6，结果为2*x*y返回x乘以y的值x=3*5，结果为15/x/y返回x除以y的值x=6/3，结果为2%x%y返回x与y的模（x除以y的余数）x=8%3，结果为2++x++、++x返回数值递增、递增并返回数值--x--、--x返回数值递减、递减并返回数值JavaScript运算符三、逻辑运算符逻辑运算符通常用于执行布尔运算，JavaScript脚本语言的逻辑运算符包括“&&”、“||”和“!”等，用于两个逻辑型数据之间的操作，返回值的数据类型为布尔型。运算符表达式说明示例&&表达式1&&表达式2若两边表达式的值都为ture，则返回ture；任意一个值为false，则返回false5>3&&5<6返回true5>3&&5>6返回false||表达式1||表达式2只有表达式的值都为false时，才返回false，否则返回true5>3||5>6返回true5>7||5>6返回false!!表达式求反。若表达式的值为true，则返回false，否则返回true!(5>3)返回false!(5>6)返回tureJavaScript运算符四、关系运算符关系运算符用于比较两个操作数的大小，其比较的结果是一个布尔型的值。运算符说明示例==相等，若两数据相等，则返回布尔值true，否则返回falsenum==8!=不相等，若两数据不相等，则返回布尔值true，否则返回falsenum!=8>大于，若左边数据大于右边数据，则返回布尔值true，否则返回falsenum>8<小于，若左边数据小于右边数据，则返回布尔值true，否则返回falsenum<8>=大于或等于，若左边数据大于或等于右边数据，则返回布尔值true，否则返回falsenum>=8<=小于或等于，若左边数据小于或等于右边数据，则返回布尔值true，否则返回falsenum<=8JavaScript运算符五、位运算符位运算符是对操作数按其在计算机内表示的二进制数逐位地进行逻辑运算或移位运算。运算符说明示例&按位与，若两数据对应位都是1，则该位为1，否则为09&4^按位异或，若两数据对应位相反，则该位为1，否则为09^4|按位或，若两数据对应位都是0，则该位为0，否则为19|4~按位非，若数据对应位为0，则该位为1，否则为0~4>>算术右移，将左侧数据的二进制值向左移动由右侧数值表示的位数，右边空位补09>>2<<算术左移，将左侧数据的二进制值向右移动由右侧数值表示的位数，忽略被移出的位9<<2>>>逻辑右移，将左边数据表示的二进制值向右移动由右边数值表示的位数，忽略被移出的位，左侧空位补09>>>2JavaScript运算符六、运算符的关联性和优先级1、优先级决定了表达式中运算执行的先后顺序，优先级高的运算符最先被执行vara=1+2*32、关联性决定了拥有相同优先级的运算符的执行顺序aOPbOPc左关联（左到右）:相当于把左边的子表达式加上小括号(aOPb)OPc右关联（右到左）:相当于

aOP(bOPc)。varm=8*4/16;JavaScript运算符常用运算符基本优先级规则最高（）自增、自减、逻辑非

>

算术

>

关系

>

逻辑与、或

最低

？

:=，目

录JavaScript语法基础JavaScript数据类型JavaScript运算符JavaScript语句JavaScript函数JavaScript语句JavaScript语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。通常要在每行语句的结尾加上一个分号，这是一个好的编程习惯。分号是可选的，浏览器把行末作为语句的结尾。正因如此，常常会看到一些结尾没有分号的例子。通过使用分号，可以在一行中写多条语句。语句流程控制：程序的三种基本结构顺序结构：从上到下执行的代码就是顺序结构，程序默认就是由上到下顺序执行的分支结构：根据不同的情况，执行对应代码循环结构：重复做一件事情选择语句循环语句跳转语句异常处理语句JavaScript几种语句JavaScript语句一、选择语句根据条件选择执行哪些语句或不执行哪些语句1、if语句if(表达式){

语句块}

​

​

if(表达式){

语句块1}else{语句块2}if(表达式){

语句块1}elseif(表达式){语句块2}…..}else{语句块n}if条件假设语句是比较简单的一种选择结构语句，若给定的逻辑条件表达式为真，则执行一组给定的语句注意：if语句会把后面的值隐式转换成布尔类型JavaScript语句2、switch...case语句提供了if…else语句的一个变通形式，可以从多个语句块中选择其中一个执行。

switch(表达式){case常量1:

代码块break;case常量2:代码块break;…case常量n:代码块break;

default:代码块}执行规则：计算一次switch表达式，把表达式的值与每个case的值进行对比，如果存在匹配，则执行关联代码break：遇到break关键词，它会跳出switch代码块。break可以省略，如果省略，代码会继续执行下一个casedefault：规定不存在case匹配时所运行的代码。default不必是switch代码块中最后一个case。switch语句在比较值时使用的是全等操作符。表达式的值必须与要匹配的类型相同。不同的case可以使用相同的代码。JavaScript语句3、条件运算符?：

运算符用于创建条件分支。在动作较为简单的情况下，较之if…else语句更加简便，其语法结构如下：(条件表达式)?语句A:语句B;执行规则：载入上述语句后，首先判断条件表达式，若结果为真则执行语句A，否则执行语句B。JavaScript语句二、循环语句JavaScript中的基本循环语句包括while语句、do…while语句、for语句等几种语句1、while语句while语句属于前测试循环语句，用于在指定条件为真时重复执行一组语句，循环次数为0次或多次。while(循环条件){

//循环体

}2、do...while语句do{

//循环体;

}while(循环条件);do…while是后测试循环语句，先执行一次循环体，再判断逻辑条件表达式是否为true，如果为true则重复执行循环体中的语句，循环次数为1次或多次。JavaScript语句3、for语句for循环语句结构简洁，它是前测试循环。它提供的是一种常用的循环模式，即初始化变量、判断逻辑条件表达式和改变变量值。for(初始化表达式1;条件判断表达式2;循环变量更新表达式3){

//循环体4

}执行顺序：1243----243-----243

(直到循环条件变成false)JavaScript语句4、for…in语句使用for…in循环语句可以遍历数组的索引或者对象的属性for(变量名in

对象名）{

语句块}for(变量名of

对象名）{

语句块}5、for…of语句使用for…of循环语句可以遍历数组的数据JavaScript语句三、跳转语句JavaScript跳转语句指的是在循环控制语句的循环体中的指定位置或者满足一定条件的情况下直接退出循环。分为break语句和continue语句。1．break语句特点：结束所有循环由于它是用来退出循环或者switch语句，所以只有当它出现在这些语句时，这种形式的break语句才是合法的。2．continue语句特点：结束当前这一次循环，继续下一次循环JavaScript语句四、异常处理语句try{

//可能会导致错误的代码}catch(error){

//在错误发生时怎么处理}finally{//始终会执行的代码块}1、try-catch-finally语句try-catch-finally语句是JavaScript中的用于处理异常的语句，该语句与throw语句不同。throw语句只是抛出一个异常，但对该异常并不进行处理，而try-catch-finally语句可以处理所抛出的异常。其语法形式如下所示：（1）自动生成异常error对象（2）自定义error对象并抛出异常目

录JavaScript语法基础JavaScript数据类型JavaScript运算符JavaScript语句JavaScript函数JavaScript函数一、函数是什么函数是将一些需要重复使用的脚本代码组合在一起，实现某些特定功能，可以重复调用。二、函数使用步骤1、定义函数2、调用函数function

函数名([形参])

{

函数体

[return表达式值;]}三、函数说明（1）函数是一种用“{}”括起来的，可重复使用、具有特定功能的语句块。每个函数都是独立的语句块。（2）函数名不要随便取，尽量取有意义的英文名。（3）参数的个数，由函数功能来决定。参数可以没有。多个参数之间用英文逗号隔开。参数的名字取有意义的。（4）如果函数只有定义没有调用，JS会自动忽略这个函数，不会去执行它,这是毫无意义的。（5）通过函数可以提高代码效率，也可以增加脚本的结构化和模块化。JavaScript函数四、函数的返回值1、没有返回值的函数2、有返回值的函数说明：（1）有返回值的函数与没有返回值的函数，两者之间的区别，仅仅是多了一个return语句。return语句就是用来返回一个结果。（2）return后面的所有语句都不执行（3）一个函数体中只能有一个returnJavaScript函数五、函数的参数1、普通参数传递：注意参数的数据类型和个数2、使用参数的默认值3、通过解构赋值传递多个参数4、使用...传递参数(spread扩展)5、使用...收集参数（rest剩余）JavaScript函数六、内置函数内置函数，就是JavaScript内部已经定义好的一些函数。我们不需要写什么函数体，不用关心它是如何实现的，只需要知道存在这样功能的一个内置函数，在需要用的时候，直接拿来使用就可以了。JavaScript程序设计与应用JavaScript面向对象编程目

录JavaScript内置对象JSON自定义对象对象概述目

录JavaScript内置对象JSON自定义对象对象概述一、对象和对象实例对象概述JavaScript是一门基于对象的脚本语言（基于原型的面向对象）1、对象

在现实生活中，对象是一个具体的事物，是一种看得见、摸得着的东西。例如，一本书、一辆汽车、一个人。

在JavaScript中，对象是一种数据类型，它是由属性和方法组成的一个集合。属性是指事物的特征，方法是指事物的行为。例如，在JavaScript中描述手机对象，手机的属性：尺寸、颜色；手机的方法：打电话、发短信。是一种复合值，它将很多值（原始值或者其他对象）聚合在一起，可通过名字访问这些值。对象也可看做是属性的无序集合，每个属性都是一个名/值对。属性名是字符串，因此我们可以把对象看成是从字符串到值的映射。对象只是一种特殊的数据。对象拥有属性和方法。在代码中，属性可以看成是对象中保存的一个变量，使用“对象.属性名”，方法可以看成是对象中保存的一个函数，使用“对象.方法名()”进行访问。对象不仅仅可以保持自有属性，还可以从一个称为原型的对象继承属性。对象的方法通常是继承的属性。这种“原型式继承”（prototypalinheritance）是JavaScript的核心特征。2、对象的实例实例：是对象的具象化产品。比如一个具体的手机是手机对象的实例。对象可以有实例、实例一定是对象手机对象和实例对象概述对象概述二、对象的特点引用值变量名存储在栈中，实际对象储存在堆中，且存在一个指针由变量名指向储存在堆中的实际对象引用值有属性法引用值有自己的属性和方法当把一个原始变量传递给另一个原始变量时，是把一个栈房间的东西复制到另一个栈房间，且这两个原始变量互不影响。当把引用对象传递给另一个变量时，复制的其实是指向实际对象的指针，此时两者指向的是同一个数据。若通过方法改变其中一个变量的值，则访问另一个变量时，其值也会随之加以改变。但若不是通过方法而是通过重新赋值，该值的原指针改变，则另外一个值不会随他的改变而改变。目

录JavaScript内置对象JSON自定义对象对象概述一、Number对象内置函数JavaScript内置对象Number是对应于原始数值类型和提供数值常数的对象。（实例）二、Boolean对象内置函数JavaScript内置对象Boolean是对应于原始逻辑数据类型的对象，它表示原始的Boolean值，只有true和false两个状态。（实例）三、String对象

String是对应于原始字符串数据类型的对象。在JavaScript脚本程序编写过程中，String对象是最为常见的处理目标，用于存储较短的数据。JavaScript语言提供了丰富的属性和方法支持，方便Web应用程序开发者灵活地操纵String对象的实例。四、Math对象Math对象在JS中属于抽象对象，不是构造函数，不能创建实例。五、Array对象内置函数JavaScript内置对象数组是包含基本和组合数据类型的有序序列。数组的实例[1,2,3]['a','b','c'][1,'a',true][{name:'jack',age:20},{name:'mary',age:18}]ECMAScript中的数组与其他多数语言中的数组有着相当大的区别（实例）六、Set对象内置函数JavaScript内置对象类似于数组，但是成员的值都是唯一的数组的实例（实例）七、Map对象Map对象就是一个键值对的集合，但是键的范围不限于字符串，各种类型的值都可以当作键八、Date对象Date对象可以表示从毫秒到年的所有时间和日期，并提供了一系列操作时间和日期的方法。Date对象的构造函数通过可选的参数，可生成表示过去、现在和将来的Date对象。其构造方式有四种，分别如下：varmyDate=newDate();varmyDate=newDate(milliseconds);varmyDate=newDate(string);varmyDate=newDate(year,month,day,hours,minutes,seconds,milliseconds);九、RegExp对象内置函数JavaScript内置对象RegularExpression正则表达式的缩写。是事先定义好的一些特定字符及这些特定字符的组合，组成一个“规则字符串”，可以用来检索、替换文本。简单的模式可以是一个单独的字符，更复杂的模式可以用于格式检查、替换、解析等。（实例）十、Error对象Error对象用来保存有关错误的信息。十一、Object对象Object对象是属性和属性值的集合。内置函数JavaScript内置对象（实例）十二、Function对象内置函数JavaScript内置对象（实例）ECMAScript的函数实际上是功能完整的对象。构造函数:都是Function对象的实例1、创建函数实例的方法：构造函数（很少用）、函数声明、匿名函数2、箭头函数

在JavaScript中，函数可以用箭头语法（”=>”）来定义，我们称之为箭头函数，有时候也叫“lambda表达式”。Lambda表达式（lambdaexpression）基于数学中的λ演算得名，直接对应于其中的lambda抽象（lambdaabstraction）。Lambda表达式是一个匿名函数，即没有函数名的函数。箭头函数表达式的语法比函数表达式更简洁，相比函数表达式它没有自己的this、arguments、super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。3、函数的属性和方法内置函数JavaScript内置对象（实例）4、即时执行函数IIFE（ImmediatelyInvokedFunctionExpression）在定义时就会立即执行的函数，即函数定义变成了一个函数调用语句5、回调函数一个函数A作为参数传递给另一个函数B，然后在B的函数体内调用函数A，A称为回调函数。

其中，匿名函数常用作函数的参数传递以实现回调函数。6、闭包JS的函数拥有相对独立的作用域。函数内部声明的是局部变量（函数参数也是局部变量），函数外部无法访问内部的局部变量。函数可以访问外部的全部变量。当内部函数作为返回值时，因为函数结束后内部变量的引用并未结束，函数的执行环境被保留下来，可以通过该引用访问本该被回收的内部变量，从而形成了闭包效果。闭包：函数以及可访问的外部的自由变量。当函数作为返回值时，外部可以访问内部的变量由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，可能导致内存泄露。目

录JavaScript内置对象JSON自定义对象对象概述内置函数JSON（实例）一、什么是JSONJSON(JavaScript

ObjectNotation)是一种轻量级的数据交换格式。它基于

ECMAScript

(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。JSON是DouglasCrockford在2001年开始推广使用的数据格式，在2005年-2006年正式成为主流的数据格式，雅虎和谷歌就在那时候开始广泛地使用JSON格式。JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。内置函数JSON（实例）JSON格式可以用来表示一系列的值

100“abc”truenull[1,2,3,“one”]{“name”:“Amy”}简单值或复合值字符串类型的值只能用双引号，不能用单引号对象的属性名必须加双引号特殊值：对象中的undefined、函数会被忽略，数组中的则会转成null内置函数JSON（实例）二、、JSON和JavaScript对象之间的互相转换 1、要实现从JSON字符串转换为JS对象，使用JSON.parse()方法： letobj=JSON.parse('{"a":"Hello","b":"World"}’);//结果是{a:'Hello',b:'World’} 2、要实现从JS对象转换为JSON字符串，使用JSON.stringify()方法： letjson=JSON.stringify({a:'Hello',b:'World'});//结果是'{"a":"Hello","b":"World"}'目

录JavaScript内置对象JSON自定义对象对象概述一、构造函数和原型的混合方式这种方式是ECMAScript中使用最广泛，认同度最高的一种创建自定义类型的方法。构造函数模式用于定义实例属性。创建实例时会将属性复制一份，每个实例都有自己的一份实例属性的副本，而且还支持向构造函数传递参数。原型模式用于定义方法和共享的属性。每个实例继承它的构造函数的原型的属性和方法(不会多次创建方法)。这样，最大限度的节省了内存。自定义对象（实例）二、ES6新语法自定义对象

classCar{

//1）定义属性

constructor(sColor,iDoors){

this._color=sColor

this._doors=iDoors

};

//2）定义方法

drive(driver){

console.log(driver+"isdrivingthecar!");

}

showInfo(){

console.log("Thecarwith"+this._doors+"doorsis"+this._color+".");

}

}

letcar1=newCar('blue',6)

car1.drive('Jack')

car1.showInfo()JavaScript程序设计与应用DOM文档对象模型目

录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作目

录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作一、DOM是什么内置函数DOM基础1、WebAPIsAPI：应用程序编程接口，是一些预定义的接口（如函数等），通过接口我们可以实现某种功能，但是使用时我们不需了解接口这个功能具体是如何实现的。WebAPIs：指浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM）。2、DOM定义文档对象模型DOM（DocumentObjectModel）：是W3C组织推荐的可扩展标记语言（html或者xml）的标准编程接口。是一个与语言无关、与平台无关的标准接口规范。它定义了HTML文档的逻辑结构，给出了一种访问和处理HTML文档的方法。通过DOM接口，JavaScript可以在任何时候访问并操作HTML文档中的任何一部分数据。可以动态地创建文档，遍历文档结构，添加、修改、删除文档内容，改变文档的显示方式等，从而实现页面交互效果。一、DOM是什么内置函数DOM基础1、WebAPIsAPI：应用程序编程接口，是一些预定义的接口（如函数等），通过接口我们可以实现某种功能，但是使用时我们不需了解接口这个功能具体是如何实现的。WebAPIs：指浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM）。2、DOM定义文档对象模型DOM（DocumentObjectModel）：是W3C组织推荐的可扩展标记语言（html或者xml）的标准编程接口。是一个与语言无关、与平台无关的标准接口规范。它定义了HTML文档的逻辑结构，给出了一种访问和处理HTML文档的方法。通过DOM接口，JavaScript可以在任何时候访问并操作HTML文档中的任何一部分数据。可以动态地创建文档，遍历文档结构，添加、修改、删除文档内容，改变文档的显示方式等，从而实现页面交互效果。二、DOM树DOM基础1、定义DOM接口提供了一种依据HTML的文档结构的分层对象模型。在浏览器中，基于DOM的HTML分析器将一个页面转换成一个对象模型的集合（通常称DOM树）。DOM基础2、节点DOM树中的每一个对象我们称之为节点，所以我们也称这个根据文档生成的层次结构是一棵节点树。不管一个文档有多简单或者多复杂，其中的信息都会被转化成一棵对象节点树。在这棵节点树中，有一个根节点即Document节点，所有其他的节点都是根节点的后代节点。DOM中的节点有元素节点、属性节点、文本节点、注释节点等不同类型，最常用的节点类型有元素、文本和属性节点这三种。DOM基础3、节点类型Node.ELEMENT_NODE(1)

一个标记（元素）Node.ATTRIBUTE_NODE(2)

表示一个标记（元素）的属性Node.TEXT_NODE(3)

表示一个元素的文本内容Node.CDATA_SECTION_NODE(4)

在XML文档中表示CharacterData（字符数据）部分Node.ENTITY_REFERENCE_NODE(5)

在文档中表示一个实体引用Node.ENTITY_NODE(6)

在XML文档中表示一个实体Node.PROCESSING_INSTRUCTION_NODE(7)

表示一个文档处理程序使用的特有指令Node.COMMENT_NODE(8)

：表示一个注释Node.DOCUMENT_NODE(9)

表示文档的根节点Node.DOCUMENT_TYPE_NODE(10)

每个文档节点都有一个DocumentType节点，它提供文档类型的定义Node.DOCUMENT_FRAGMENT_NODE(11)

可以将文档片段看作轻量级或者更小型的Document节点。定义这种数据类型是因为通常希望只提取文档的一部分来处理。Node.NOTATION_NODE(12)

在XML文档中表示一个符号DOM基础4、Document对象每个载入浏览器的HTML页面都会成为document对象（即该HTML页面对应的DOM）。document对象使我们可以通过JavaScript对HTML页面中的所有元素进行访问。（1）Document对象document对象是window对象的一部分，可通过window.document属性对其进行访问。（2）Document对象集合DOM基础（3）Document对象属性（4）Document对象方法4、Document对象目

录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作获取元素节点二、获取html元素三、获取其他元素getElementById（‘id名’）：返回的是指定id名的元素getElementsByTagName（’标记名’）：返回的是指定标记名的所有元素的集合，以伪数组的形式存储的getElementsByName（’name名’）：返回的是指定name名的所有元素的集合getElementsByClassName（’类名’）：返回的是指定class名的所有元素的集合querySelector（’选择器’）：返回的是指定选择器的第一个元素querySelectorAll（’选择器’）：返回的是指定选择器的所有元素的集合一、获取body元素document.bodydocument.documentElement目

录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作操作元素一、改变元素内容

利用DOM找到元素，我们可以获取元素的内容并且修改它们。1、innerText、innerHTML2、outerText、outerHTML3、textContent

innerHTML属性可以设置或获取标签所包含的HTML和文本信息(不包括自身标签)

innerText属性可以设置或获取标签所包含的文本信息(不包括内部标签和自身标签)。outerHTML属性可以设置或获取标签自身及其所包含的HTML和文本信息（包括自身标签）

outerText属性在获取时和innerText是相同的效果，但是设置时包含标签自身在内的文本。textContent会获取style=“display:none”中的文本，而innerText不会；

textContent会按照html代码里的格式输出，innerText会根据标签里面的元素独立一行；

innerText对IE的兼容性较好，textContent虽然作为标准方法但是只支持IE8+以上的浏览器，最新的浏览器两个都可以使用操作元素二、操作元素属性除了获取元素内容，获取和设置元素的属性值也是经常进行的操作。一般来说，浏览器在解析HTML页面时元素具有的属性列表是与收集自元素本身表示的信息一起预载入的，并存储在一个关联数组中供稍后访问。1、通过attributes操作元素属性（1）元素的attributes属性保存了该元素的所有html属性值。（2）getAttribute()方法可以获取元素的某个属性。（3）setAttribute()方法可以设置元素的某个属性。（3）removeAttribute()方法可以删除元素的某个属性。2、通过其它方式操作元素属性我们也可以直接通过‘.’或者[]的方式来获取元素的属性（1）常用元素属性，如src、title、id等属性。（2）表单元素属性，如type、value、checked、selected、disabled等属性。（3）使用[]操作属性变量。

操作元素3、样式属性我们可以通过JavaScript修改元素的大小、颜色、位置等样式（1）element.style行内样式操作，可以操作元素style属性。

例如：this.style.color=‘red’（2）element.className类名样式操作，可以操作元素的类

例如：this.className=‘stu’如果修改样式较多，可以采取操作类名方式更改元素样式因为class是一个保留字，因此使用className来操作元素类名属性className会直接更改元素的类名，并覆盖原有的类名。目

录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作利用层级关系获取元素节点一、父子关系1、父节点

node.parentNode2、子节点（1）childNodes（标准）

获取的子节点中包含换行文本节点，一般不提倡使用（2）children(非标准)获取的子节点中不包含换行文本节点（3）第一个子元素

firstChild、firstElementChild(IE9)、children[0]（4）最后一个元素

lastChild、lastElementChild(IE9)、children[length-1]二、兄弟关系1、下一个兄弟node.nextSiblingnextElementSilbling(IE9)2、上一个兄弟node.previousSiblingpreviousElementSilbling(IE9)目

录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作节点操作一、创建节点1、创建元素节点：document.createElement(‘tagName’)2、创建文本节点：document.creatTextNode(‘’)二、添加节点1、添加到末尾：node.appendChild(child)2、指定位置插入：node.insertBefore(child,指定元素)三、删除节点node.removeChild(child)四、复制节点（克隆节点）node.cloneNode（）返回调用该方法的节点的第一个副本参数为false只复制节点本身不复制里面的子节点参数为true会复制节点本身以及里面所有的子节点。节点操作五、文档碎片1、定义

当我们用DOM向页面插入元素的时候，每插入一个元素，页面就会渲染一次，但当我们要插入过多元素的时候，页面渲染的次数会使得DOM的操作性能降低。而在这个过程中，我们每次创建好一个元素的时候，不直接插入页面中，而是插入文档碎片里，最后再一次性地把所有元素插入页面中，这样页面只需要渲染一次，极大地提高了性能。2、使用方法createDocumentFragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。当你想提取文档的一部分，改变、增加或删除某些内容及插入到文档末尾可以使用createDocumentFragment()方法。JavaScript程序设计与应用事件处理目

录事件处理方式事件对象事件处理高级应用事件概述目

录事件处理方式事件对象事件处理高级应用事件概述一、什么是事件事件概述

事件是指用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应。二、事件三要素1、事件源（浏览器或页面元素)：浏览器、body、p等。2、事件触发类型（动作）:浏览器事件如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus等。HTML元素事件如点击按钮、拖动图片等。3、事件处理程序（响应）:事件处理器是与特定的文本和特定的事件相联系的JavaScript脚本代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作，而响应某个事件而进行的处理过程称为事件处理。目

录事件处理方式事件对象事件处理高级应用事件概述一、注册事件方式内置函数事件处理方式给元素添加事件称为注册事件或绑定事件，注册事件有两种方式：传统方式和绑定事件侦听器1、传统方式利用on开头的事件onclick缺点：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。2、绑定事件侦听器利用addEventListener(type，listener[,useCapture)方法注册事件。type:不带on的事件类型字符串，例如click、mouseover等;listener：事件处理程序，事件发生时会调用该监听函数;useCapture：可选参数，是一个布尔值，默认为falseW3C标准推荐方式IE9之前不支持这个方法，可以使用attachEvent（）代替特点：同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行。二、删除事件方式内置函数事件处理方式1、传统注册方式eventTarget.onclick=null;2、绑定事件侦听器的方式eventTarget.removeEventListener(type，listener)；目

录事件处理方式事件对象事件处理高级应用事件概述一、什么是事件对象内置函数事件对象

注册事件时系统自动生成的一个包含事件相关的一系列信息数据的集合，它会传递给事件处理程序。同时，这个对象有很多属性和方法。鼠标触发事件的得到的是鼠标的相关信息，键盘触发事件得到的是键盘的相关信息。二、使用事件对象

eventTarget.onclick=function(event){}eventTarget.addEventListener(‘click’,function(event){}//event:事件对象，可以自己命名，通常命名为event、e、evt三、事件对象的常见属性和方法内置函数事件对象四、鼠标事件对象内置函数事件对象内置函数事件对象五、键盘事件的常用方法目

录事件处理方式事件对象事件处理高级应用事件概述一、DOM事件流内置函数事件处理高级应用1、事件流指的是页面中事件接收的顺序。2、事件发生时会在元素节点之间按照特定的顺序传播，这个传播的过程即使DOM事件流捕获阶段(从根节点开始顺着目标节点构建一条事件路径，即事件由页面元素接收，逐级向下，到具体的元素)目标阶段(到达目标节点，即元素本身)冒泡阶段(从目标节点顺着捕获阶段构建的路径回去，即跟捕获相反具体元素本身，逐级向上，到页面元素)内置函数事件处理高级应用3、事件流中的注意事项JavaScript代码中只能执行捕获或者冒泡的一个阶段传统绑定方式和IE早期浏览器只支持冒泡addEventListen()方法的第三个参数是布尔值，true表示事件在捕获阶段调用事件处理程序，false则在冒泡阶段调用事件处理程序。实际开发中很少使用事件捕获，后面会讲到冒泡的应用有些事件没有冒泡，例如onblur、onfoucs等二、事件委托内置函数事件处理高级应用

有时候需要绑定的子节点很多，一个个地添加事件处理非常繁琐，这时可以将事件绑定在这些节点的父节点上，利用事件冒泡的原理，触发子节点时父节点也可以接收到事件，同时也会影响到每一个子节点。1、事件委托的原理2、事件委托的优点利用事件委托，只操作了一次DOM,提高了程序的性能。JavaScript程序设计与应用BOM浏览器对象模型目

录BOM基础window对象location对象navigator对象history对象screen对象目

录BOM基础window对象location对象navigator对象history对象screen对象一、BOM概述内置函数BOM基础BOM(BrowserObjectModel)浏览器对象模型，也是一个WebAPIs接口，它提供了独立于内容而与浏览器窗口进行交互的对象，即把浏览器当作一个对象来看，BOM的顶级对象是window。二、BOM的构成BOM由一系列相关的对象构成，并且每个对象都提供了很多属性和方法。通过这些对象我们可以与浏览器窗口进行交互。目

录BOM基础window对象location对象navigator对象history对象screen对象一、window对象window对象1、window对象是浏览器的顶级对象，它是JavaScript访问浏览器的一个接口。2、window是JavaScript在浏览器中的全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window。二、window对象的常用事件window对象1、onload事件加载当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)通过onload可以将JS代码写到页面元素的上方而不会影响代码的执行2、onDOMContentLoaded加载DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表、图片、flash等。IE9以上支持如果页面的图片很多，从用户访问到onload触发可能需要较长的事件导致页面交互效果不能实现，此时用DOMContentLoaded更合适3、调整窗口大小window.onresize：当调整窗口大小时会触发事件，利用这个事件可以实现响应式布局三、window对象的方法window对象1、窗口操作方法（1）open()：打开新的窗口（2）moveBy()、moveTo()：移动窗口位置（3）resizeBy()、resizeTo()：改变窗口大小（4）print()：打印窗口（5）scrollBy()、scrollTo()：滚动窗口（6）close()：关闭窗口window对象2、三种对话框“对话框”是指那些为用户提供有用信息的弹出窗口。(1)alert()方法:只接受一个参数，即要显示给用户的文本。调用alert()方法后，浏览器将创建一个具有确定按钮的系统消息框，显示指定的文本。通常用于一些对用户的提示信息，例如在表单中输入了错误的数据时，显示警告对话框。(2)prompt()方法：提示用户输入某些信息，接受两个参数，即要显示给用户的文本和文本框中的默认文本。如果点击“确定”按钮，将文本框中的值作为函数值返回；如果点击“取消”按钮，返回空值。(3)confirm()方法：只接受一个参数，即要显示的文本，浏览器创建一个具有“确定”按钮和“取消”按钮的系统消息框，显示指定的文本。该方法返回一个布尔值，如果点击“确定”按钮，返回true；点击“取消”按钮，返回false。window对象3、setTimeout定时器（1）setTimeout()方法：用于在指定的毫秒数后调用函数或计算表达式。该方法接受两个参数，要执行的代码和在执行它之前要等待的毫秒数（1/1000秒）。（2）clearTimeout()方法:如果要取消还未执行的暂停，可调用clearTimeout()方法，并将暂停ID传递给它

调用函数可以写函数、函数名或者字符串形式的函数名毫秒数省略时默认为0可以给定时器赋值一个标识符，也叫暂停IDwindow对象4、setInterval定时器(1)setInterval()方法:与setTimeout()相似，只是它无限次地每隔指定的时间段就重复一次