web程序设计第7章.ppt

《web程序设计第7章.ppt》由会员分享，可在线阅读，更多相关《web程序设计第7章.ppt（46页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第7章章 JavaScript 概述概述 JavaScript是介于是介于Java与与HTML之间，之间，基于对象和事件驱动的编程语言。它提基于对象和事件驱动的编程语言。它提供了一种实时的、动态的、可交互的表供了一种实时的、动态的、可交互的表达能力，用交互式的达能力，用交互式的Web页面取代了静页面取代了静态的态的HTML页面，有效实现了网络计算页面，有效实现了网络计算和网络计算机的蓝图。和网络计算机的蓝图。7.1 第一个第一个JavaScript程序程序演示演示7.1 第一个第一个JavaScript程序程序使用使用JavaScript编写程序的特点：编写程序的特点：JavaScript是

2、一种脚本语言，采用小程序段的方式实现编程，可以直接嵌入HTML文档中。在标识之间可以加入JavaScript脚本。可将标识放在或之间。将JavaScript脚本置于之间，可使之在主页和其余部分代码之前装载。JavaScript是一种基于对象的语言，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。7.1 第一个第一个JavaScript程序程序使用使用JavaScript编写程序的特点：编写程序的特点：对于不支持JavaScript的浏览器，所有在中的代码均被忽略；对于支持JavaScript的浏览器，则执行中的代码。/是JavaScript的注释标识，其后的信息不被浏览器解释。7.2

3、JavaScript基本数据结构基本数据结构JavaScript脚本语言同其他语言一样，有它自身的基本数据类脚本语言同其他语言一样，有它自身的基本数据类型、表达式、运算符以及程序的基本框架结构。型、表达式、运算符以及程序的基本框架结构。p基本数据类型和常量基本数据类型和常量数值型：最基本的数据类型，包括整型和实型整型常量：可以使用十进制、八进制或十六进制表示，整型常量：可以使用十进制、八进制或十六进制表示，如如1234、0745、0 x93C等；等；实型常量：可以使用小数或指数方法表示，如实型常量：可以使用小数或指数方法表示，如12.34、5e7、4e-5等。等。字符串型：表示字符序列的数据类

4、型字符串常量：用字符串常量：用 或或 括起来的若干个字符，如括起来的若干个字符，如JavaScript、This is a book of C+等；等；控制字符：以反斜杠控制字符：以反斜杠 开头的具有特殊功能的字符，如开头的具有特殊功能的字符，如n、r、t等。等。7.2 JavaScript基本数据结构基本数据结构p基本数据类型和常量基本数据类型和常量布尔型：表示状态的数据类型布尔常量：只有两个可能的值布尔常量：只有两个可能的值true和和false，表示，表示“真真”和和“假假”两种状态。两种状态。null和undefinednull：null的类型是的类型是Object，用来表示一个变量没

5、有任何，用来表示一个变量没有任何数值。例如：数值。例如：var empty=null;/empty的值为的值为nullundefined：undefined的类型也是的类型也是undefined，表示变量没，表示变量没有定义任何值。有定义任何值。例如：例如：var value;/value的值为的值为undefined7.2 JavaScript基本数据结构基本数据结构p变量变量变量的主要作用是存取数据和提供存放信息的容器，在变量的主要作用是存取数据和提供存放信息的容器，在JavaScript程序中必须明确变量的命名、声明和作用域。程序中必须明确变量的命名、声明和作用域。变量的命名：必须以字母

6、或下划线开头，后面可以跟数字、字母和下划线。不能使用JavaScript中的关键字作为变量名。例如：正确的变量名：正确的变量名：num1、_value、thisbook错误的变量名：错误的变量名：1_max、C+、this、true变量的声明：在JavaScript中，不论变量的数据类型为什么，都用var关键字来声明。例如：var num=1;var str=JavaScript Language;7.2 JavaScript基本数据结构基本数据结构变量的实际类型视变量数据的内容而定。例如，上例中的num为数值型变量，str为字符串型变量。变量的类型也可以随时被改变，只要指定不同类型的数据，变

7、量的类型就会跟着改变。例如：var num=1;/num为数值型变量 num=Hello World!;/num为字符串型变量变量也可以不用var声明而直接使用，这时必须设定变量的初始值，否则会产生编译错误。例如：x=100;/x为数值型变量 y=China;/y为字符串型变量 z=true /z为布尔型变量好的编程风格：每个变量在第一次使用时都用好的编程风格：每个变量在第一次使用时都用var声明！声明！7.2 JavaScript基本数据结构基本数据结构变量的作用域：分为全局变量和局部变量全局变量：在所有函数外声明的变量，在程序的每个全局变量：在所有函数外声明的变量，在程序的每个地方都可以使

8、用；地方都可以使用；局部变量：在某函数内声明的变量，只对该函数可见。局部变量：在某函数内声明的变量，只对该函数可见。例如：例如：var attr=1;/attr为全局变量为全局变量 function testFunc()var tmp=attr+1;/tmp为局部变量为局部变量 return tmp;var sum=testFunc();/sum为全局变量为全局变量 document.write(attr=,attr,);document.write(sum=,sum,);document.write(tmp=,tmp);演示演示？7.2 JavaScript基本数据结构基本数据结构p运算符和

9、表达式运算符和表达式JavaScript提供了丰富的运算符，包括算术运算符、逻辑运提供了丰富的运算符，包括算术运算符、逻辑运算符等。表达式是常量、变量及运算符的集合，根据运算算符等。表达式是常量、变量及运算符的集合，根据运算符类型不同，表达式可分为算术表达式、逻辑表达式等。符类型不同，表达式可分为算术表达式、逻辑表达式等。算术运算符及算术表达式算术运算符算术运算符说明说明例子例子+两个操作数的加法两个操作数的加法3+5=8-两个操作数的减法两个操作数的减法9-2=7*两个操作数的乘法两个操作数的乘法2*3=6/两个操作数的除法两个操作数的除法3/2=1.5%求两个操作数相除的余数求两个操作数相

10、除的余数12%5=2+单一操作数加一单一操作数加一var x=3;+x;-单一操作数减一单一操作数减一var y=16;y-;-单一操作数取反单一操作数取反var x=3;x=-3;7.2 JavaScript基本数据结构基本数据结构比较运算符及比较表达式比较运算符比较运算符说明说明例子例子=等于等于2=2(true)3=3(true)!=不等于不等于3!=4(true)1!=1(false)大于大于74(true)32(true)小于小于52(false)6=大于等于大于等于7=7(true)3=2(true)=小于等于小于等于4=1(false)5=3(false)=恒等于恒等于2=2(t

11、rue)3=3(false)!=恒不等于恒不等于3!=4(true)1!=1(true)当操作数类当操作数类型不同时进型不同时进行类型转换行类型转换当操作数类型当操作数类型不同时不进行不同时不进行类型转换类型转换7.2 JavaScript基本数据结构基本数据结构逻辑运算符及逻辑表达式逻辑运算符逻辑运算符说明说明例子例子&逻辑于逻辑于(全真为真，其余为假全真为真，其余为假)true&true(true)(true&false)&true(false)|逻辑或逻辑或(全假为假，其余为真全假为假，其余为真)false|(true&false)(false)(false&true)|true(tru

12、e)!逻辑非逻辑非(非真即假，非假即真非真即假，非假即真)!true(false)!(true|false)&false)(true)7.2 JavaScript基本数据结构基本数据结构位运算符及位表达式位运算符位运算符说明说明例子例子&将两个操作数的对应二进制位作与运算将两个操作数的对应二进制位作与运算3&5=1|将两个操作数的对应二进制位作或运算将两个操作数的对应二进制位作或运算3|5=7将两个操作数的对应二进制位作异或运算将两个操作数的对应二进制位作异或运算3 5=6将单个操作数的二进制位作取反运算将单个操作数的二进制位作取反运算 5=-6将操作数的二进制位向左移动指定位数，将操作数的二

13、进制位向左移动指定位数，最右边的位最右边的位(最低位最低位)补补04 2=16-5 将操作数的二进制位向右移动指定位数，将操作数的二进制位向右移动指定位数，最左边的位最左边的位(最高位最高位)补符号位补符号位4 2=1-5 3=-1 将操作数的二进制位向右移动指定位数，将操作数的二进制位向右移动指定位数，最左边的位最左边的位(最高位最高位)补补04 2=1-5 3=229-17.2 JavaScript基本数据结构基本数据结构赋值运算符及赋值表达式赋值运算符赋值运算符例子例子等价于等价于=x=5+=x+=7x=x+7-=x-=6x=x-6*=x*=5+3x=x *(5+3)/=x/=6-4x=

14、x/(6-4)%=x%=3x=x%3&=x&=4x=x&4|=x|=5x=x|5=x=2x=x 2=x=3x=x=x=5x=x 3=x=2x=x 27.2 JavaScript基本数据结构基本数据结构字符串运算符及字符串表达式字符串运算符字符串运算符说明说明例子例子+连接两个字符串连接两个字符串var strA=Java;var strB=Script;str=strA+strB;str的值是的值是JavaScript+=连接两个字符串，然后赋值连接两个字符串，然后赋值var strA=Hello;var strB=World;strA+=strB;strA的值是的值是Hello World7

15、.2 JavaScript基本数据结构基本数据结构条件运算符及条件表达式 条件运算符有3个操作数，格式如下：var varA=条件式?valueB:valueC 当条件式成立时，valueB会被赋给varA，否则将 valueC赋给varA。例如：var min=67?6:7;思考：假设思考：假设x、y、z三个变量均以赋值，请写出求三个三个变量均以赋值，请写出求三个变量中最大值和最小值的条件表达式。变量中最大值和最小值的条件表达式。7.3 JavaScript程序构成程序构成JavaScript程序的基本构成包括语句、函数、对象、方法和属程序的基本构成包括语句、函数、对象、方法和属性等，通过它

16、们来实现编程。性等，通过它们来实现编程。p程序控制结构程序控制结构选择结构：通过判断给定的条件是否成立，从给定的各种可能中选择一种执行。if语句的三种形式：语句的三种形式：单分支结构：单分支结构：if(表达式表达式)语句段语句段 例例1：if(count 10)count=0;例例2：if(count 10)count=0;alert(count被重设为被重设为0!);注意：如果语句段中的语句不止一条，应用大括号将它注意：如果语句段中的语句不止一条，应用大括号将它们括起来。们括起来。7.3 JavaScript程序构成程序构成双分支结构：双分支结构：if(表达式表达式)语句段语句段1 else

17、 语句段语句段2 例例1：if(num%2=0)alert(num是一个偶数是一个偶数);else alert(num是一个奇数是一个奇数);注意：注意：else不能单独使用，必须与不能单独使用，必须与if配对使用；每一个配对使用；每一个else总总是与离它最近的一个尚未匹配的是与离它最近的一个尚未匹配的if配对。配对。例例2：if(a=b)if(a=c)alert(a是最大值是最大值);else alert(c是最大值是最大值);else if(b=c)alert(b是最大值是最大值);else alert(c是最大值是最大值);7.3 JavaScript程序构成程序构成多分支结构：多分支

18、结构：if(表达式表达式1)语句段语句段1 else if(表达式表达式2)语句段语句段2 else if(表达式表达式n-1)语句段语句段n-1 else 语句段语句段n 例如：例如：if(x0)alert(x0);else if(x5)alert(0=x5);else if(x10)alert(5=x=10);7.3 JavaScript程序构成程序构成例例 根据用户的不同操作在页面上显示不同的信息根据用户的不同操作在页面上显示不同的信息演示演示7.3 JavaScript程序构成程序构成switch语句 基本格式：基本格式：switch(表达式表达式)case 常量表达式1:语句段1;b

19、reak;case 常量表达式2:语句段2;break;case 常量表达式n-1:语句段n-1;break;default:语句段n;执行过程：首先计算表达式的值，当表达式的值与某个执行过程：首先计算表达式的值，当表达式的值与某个case后面的常量表达式的值相等时，就执行此后面的常量表达式的值相等时，就执行此case后面的后面的语句段；若所有语句段；若所有case后的常量表达式的值都不与表达式后的常量表达式的值都不与表达式的值相等，就执行的值相等，就执行default后面的语句段。后面的语句段。7.3 JavaScript程序构成程序构成例例 根据用户的不同操作在页面上显示不同的信息根据用户

20、的不同操作在页面上显示不同的信息var name=prompt(请输入您的大名：请输入您的大名：,);/弹出提示窗弹出提示窗口口var user=Da Vinci;switch(name)case :document.write(您没有输入任何信息您没有输入任何信息!);break;case null:document.write(您取消了操作您取消了操作!);break;case user:document.write(欢迎欢迎,name,光临光临!);break;default:document.write(欢迎欢迎,name,加入加入!);演示演示7.3 JavaScript程序构成程序

21、构成switch语句break的作用：的作用：当某个当某个case后面的语句段执行完后，直接后面的语句段执行完后，直接跳出整个跳出整个switch控制语句。如果省略控制语句。如果省略break，在执行完某，在执行完某个个case后面的语句段后会继续执行下一个后面的语句段后会继续执行下一个case后面的语句后面的语句段，直到遇上段，直到遇上break或者所有的语句段都被执行完。或者所有的语句段都被执行完。思考：省略上例中所有的break语句，当用户在提示窗口中执行不同操作时，页面上会显示什么信息？演示演示7.3 JavaScript程序构成程序构成JavaScript程序的基本构成包括语句、函数

22、、对象、方法和属程序的基本构成包括语句、函数、对象、方法和属性等，通过它们来实现编程。性等，通过它们来实现编程。p程序控制结构程序控制结构循环结构：在某条件成立时反复执行相同的语句段(循环体)。循环语句的三种形式for语句语句格式：格式：for(表达式表达式1;表达式表达式2;表达式表达式3)循环体循环体;各部分的作用：各部分的作用：表达式表达式1：给循环控制变量赋初值；：给循环控制变量赋初值；表达式表达式2：设置循环条件；：设置循环条件；表达式表达式3：修改循环控制变量的值；：修改循环控制变量的值；循环体：当循环条件成立时反复执行。循环体：当循环条件成立时反复执行。7.3 JavaScrip

23、t程序构成程序构成执行流程：执行流程：a.求解表达式求解表达式1；b.求解表达式求解表达式2，若其值为，若其值为true，则进入，则进入 c；若为；若为false，则，则进入进入 f；c.执行循环体；执行循环体；d.求解表达式求解表达式3；e.返回返回 b 继续执行继续执行;f.结束循环，执行结束循环，执行for语句的后续语句。语句的后续语句。例如：例如：var sum=0,i;for(i=1;i=100;i+)sum=sum+i;注意：如果循环体中的语句不止一条，应用大括号将它们注意：如果循环体中的语句不止一条，应用大括号将它们括起来。括起来。7.3 JavaScript程序构成程序构成wh

24、ile语句语句格式：格式：while(循环条件循环条件)循环体循环体;功能：当循环条件为功能：当循环条件为true时，反复执行循环体；当循环时，反复执行循环体；当循环条件为条件为false时，退出循环，执行时，退出循环，执行while语句的后续语句。语句的后续语句。例如：例如：var sum=0,i=1;while(i=100)sum=sum+i;i+;7.3 JavaScript程序构成程序构成do-while语句语句格式：格式：do 循环体循环体;while(循环条件循环条件);执行流程：执行流程：先执行循环体，再判断循环条件，若为先执行循环体，再判断循环条件，若为true，则重新执行循环

25、体，如此反复，直到循环条件，则重新执行循环体，如此反复，直到循环条件为为false时退出循环，执行时退出循环，执行do-while语句的后续语句。语句的后续语句。例如：例如：var sum=0,i=1;do sum=sum+i;i+;while(i=100);7.3 JavaScript程序构成程序构成例例 求求1!+2!+3!+10!var i,t=1,s=0;for(i=1;i=10;i+)t=t*i;s+=t;alert(1!+2!+3!+10!=+s);演示演示7.3 JavaScript程序构成程序构成p程序控制结构程序控制结构break和continue语句break语句语句格式：

26、格式：break;功能：提前退出循环或从功能：提前退出循环或从switch结构中直接跳出。结构中直接跳出。例：例：var sum=0,i=1;while(i=100)if(i%2=0)break;sum=sum+i;i+;程序运行结果：程序运行结果：sum=17.3 JavaScript程序构成程序构成continue语句语句格式：格式：continue;功能：跳过循环体内剩余的语句，提前进入下一次功能：跳过循环体内剩余的语句，提前进入下一次循环。循环。例：例：var sum=0,i=0;while(i=100)i+;if(i%2=0)continue;sum=sum+i;程序运行结果：程序运

27、行结果：sum=26017.3 JavaScript程序构成程序构成p函数函数JavaScript函数用来封装那些在程序中要多次用到的功能模块，函数用来封装那些在程序中要多次用到的功能模块，并可作为事件驱动的结果而被调用。并可作为事件驱动的结果而被调用。定义方式：function 函数名(参数表)函数体;function：定义函数的关键字；：定义函数的关键字；函数名：自定义函数的名称；函数名：自定义函数的名称；参数表：包含若干个参数，不同参数间用逗号间隔。当调参数表：包含若干个参数，不同参数间用逗号间隔。当调用函数时，可以向参数表中传入常量值、变量值或其他表用函数时，可以向参数表中传入常量值、

28、变量值或其他表达式的值，函数体可通过参数名来引用这些传进来的值；达式的值，函数体可通过参数名来引用这些传进来的值；函数体：实现函数功能的程序代码。当函数体包含的语句函数体：实现函数功能的程序代码。当函数体包含的语句不止一条时，应用大括号将它们括起来。不止一条时，应用大括号将它们括起来。7.3 JavaScript程序构成程序构成例例 定义一个求阶乘的函数定义一个求阶乘的函数 function fact(n)var s=1,i;for(i=1;i=n;i+)s=s*i;return s;定义函数定义函数的关键字的关键字函数名函数名参数表参数表函数体函数体7.3 JavaScript程序构成程序构

29、成调用方式：函数名(实参表);实参是传送给被调用函数的实际参数值。实参可以是实参是传送给被调用函数的实际参数值。实参可以是常量、变量和表达式，实参必须有确定的值常量、变量和表达式，实参必须有确定的值；在函数体内改变某个传进来的参数值，并不会对函数在函数体内改变某个传进来的参数值，并不会对函数外的实参值造成影响。外的实参值造成影响。例如：例如：function inc(n)n+;alert(n);var x=5;inc(x);alert(x);调用函数调用函数inc参数传递参数传递程序运行结果：程序运行结果：n=6 x=57.3 JavaScript程序构成程序构成返回值：在JavaScript

30、中经常需要将函数的执行结果传回程序，一般格式为：return 返回值;例如：function inc(n)n+;return n;var x=5;var y=inc(x);alert(x);alert(y);参数传递参数传递返回值返回值调用函数调用函数inc程序运行结果：程序运行结果：x=5 y=67.3 JavaScript程序构成程序构成变量的作用范围：在函数内才会用到的局部变量应该用var声明，否则一旦函数执行完毕，没有用var声明的局部变量会变成全局变量。例如：程序运行结果：程序运行结果：sum=8程序运行结果：程序运行结果：y 未定义未定义 function inc(n)y=+n;r

31、eturn y;var x=3;var sum=inc(x)+y;alert(sum);function inc(n)var y=+n;return y;var x=3;var sum=inc(x)+y;alert(sum);7.3 JavaScript程序构成程序构成p事件驱动及事件处理事件驱动及事件处理JavaScript是基于对象和事件驱动的脚本语言，通常把由鼠是基于对象和事件驱动的脚本语言，通常把由鼠标或热键引发的一连串程序的动作称为事件驱动。对事件标或热键引发的一连串程序的动作称为事件驱动。对事件进行处理的程序或函数，称为事件处理程序。进行处理的程序或函数，称为事件处理程序。Java

32、Script主要有以下一些常用事件：主要有以下一些常用事件：单击事件onClick：当用户单击元件时，触发onClick事件，同时onClick指定的事件处理程序将被调用执行。通常在下列基本对象中产生：button（按钮）checkbox（复选框）radio（单选按钮）7.3 JavaScript程序构成程序构成例例 单击按钮激活单击按钮激活btnClick()处理程序处理程序function btnClick()alert(You have clicked the button!);演示演示7.3 JavaScript程序构成程序构成改变事件onChange：当text、textarea和s

33、elect元件失去焦点且内容被改变时，触发该事件。例如：function textChange(textObj)alert(textObj.value);演示演示7.3 JavaScript程序构成程序构成载入事件onLoad：当网页载入完成时，触发该事件。卸载事件onUnload：当用户离开网页时，触发该事件。例如：function loadFile()do var name=prompt(请输入您的大名：,);while(name=|name=null);alert(欢迎+name+光临!);演示演示7.4 JavaScript对象对象利用利用JavaScript基于对象的功能，可以大大简

34、化程序的基于对象的功能，可以大大简化程序的设计，用更直观、模块化和可复用的方式进行程序开发。设计，用更直观、模块化和可复用的方式进行程序开发。p对象的基本知识对象的基本知识对象的基本结构：对象是由属性和方法两个基本元素构成的。属性用来描述对象的数据特征，与变量相关联；方法用来描述作用在属性上的操作(行为)，与函数相关联。例如：大型客机可视为对象，它具有位置、速度、颜色、容量等属性，对于该对象可施行起飞、降落、加速、维修等操作，这些操作将或多或少地改变飞机的属性值。7.4 JavaScript对象对象引用对象的方式：要么创建新的对象，要么利用现存的对象。引用引用JavaScript内部对象，如内

35、部对象，如Date、Math等；等；由浏览器环境中提供，如由浏览器环境中提供，如window、document等；等；使用使用new运算符创建新对象。运算符创建新对象。对象属性的引用方式一：通过点运算符方式一：通过点运算符(.)实现引用实现引用 例如：例如：university.province=湖北省湖北省;university.name=武汉大学武汉大学;university.date=1893;university是一个已经存在的对象，是一个已经存在的对象，province、name和和date是它的三个属性。是它的三个属性。7.4 JavaScript对象对象方式二：通过对象的下标实现

36、引用方式二：通过对象的下标实现引用 例如：例如：university0=湖北省湖北省;university1=武汉大学武汉大学;university2=1893;方式三：通过字符串的形式实现引用方式三：通过字符串的形式实现引用 例如：例如：universityprovince=湖北省湖北省;universityname=武汉大学武汉大学;universitydate=1893;对象方法的引用 格式：ObjectName.methodName()例如：window.alert(Hello World!);document.write(欢迎光临!);7.4 JavaScript对象对象浏览器对象：

37、每个HTML文档被载入浏览器中时浏览器就创建了一系列分级的对象体系，其中最常用的对象包括window、frame、document、history等。window对象对象 window对象处于浏览器对象层次的最顶端，代表对象处于浏览器对象层次的最顶端，代表当前网页所在的窗口，可以用它来参考包含在网页当前网页所在的窗口，可以用它来参考包含在网页中的所有元件。中的所有元件。例如：例如：window.document.bgColor=FF0000;window对象是预设的参考对象，因此在使用对象是预设的参考对象，因此在使用window对象的属性和函数时，可以不指定对象的属性和函数时，可以不指定win

38、dow。例如：例如：window.alert(欢迎光临欢迎光临);等价于等价于 alert(欢迎光临欢迎光临);7.4 JavaScript对象对象document对象对象 document对象是浏览器对象系统的核心，它可以对象是浏览器对象系统的核心，它可以更新正在载入或已经载入的更新正在载入或已经载入的HTML文档，并可以访文档，并可以访问载入文档所包含的元件。问载入文档所包含的元件。例如：例如：document.write(JavaScript学习天地学习天地);document.fgColor=#0000FF;history对象对象 history对象记录着浏览器所浏览过的每一个页面，对象记录着浏览器所浏览过的每一个页面，这些页面组成了一个历史记录列表。用户可以通过这些页面组成了一个历史记录列表。用户可以通过forward()、back()或或go()方法来寻找符合条件的历史记录。方法来寻找符合条件的历史记录。例如：例如：history.back();/从当前页面后退一页从当前页面后退一页 histrory.go(2);/从当前页面前进两页从当前页面前进两页