chapter07网页设计与Web编程教案课件

《chapter07网页设计与Web编程教案课件》由会员分享，可在线阅读，更多相关《chapter07网页设计与Web编程教案课件（87页珍藏版）》请在金锄头文库上搜索。

1、第七章第七章 JavaScript 脚本脚本编程程 chapter07网页设计与Web编程教案内容提要内容提要pJavaScript概述概述p词法规则词法规则p基本数据类型基本数据类型p运算符和表达式运算符和表达式p核心语句核心语句p函数函数p复合数据类型复合数据类型p对象模型对象模型p事件处理事件处理chapter07网页设计与Web编程教案JavaScript概述概述JavaScript是是由由Netscape和和Sun公公司司联联合合开开发发的的基基于于对对象象和和事事件件驱驱动动的的客客户户端端脚脚本本编编程程语语言言，通通过过它它与与HTML、XML、DOM、CSS、JavaAppl

2、et等等技技术术的的有有机机结结合合，可可以以开开发发出出具具有有很很强强交互性的动态页面。交互性的动态页面。chapter07网页设计与Web编程教案第一个第一个JavaScript程序程序实时显示时间实时显示时间!- setInterval(showTime( ),1000); function showTime( ) var d,s; d=new Date( ); s=d.getHours( )+:+d.getMinutes( )+:+d.getSeconds( ); timetxt.innerHTML=当前时间：当前时间：+ s+; /-chapter07网页设计与Web编程教案n基于

3、对象基于对象n事件驱动事件驱动n解释性语言解释性语言n简单性简单性n实时性实时性n跨平台性跨平台性n安全性安全性JavaScript的特点的特点chapter07网页设计与Web编程教案nJavaScript脚本的引入方法脚本的引入方法通通 过过 与与 标标 签签 对对 引引 入入 。 将将JavaScript脚脚本本代代码码放放在在与与之之间间，浏浏览览器器自自动动识识别别该该标标签签对对并并逐逐行行解解释释其间的代码。其间的代码。通通过过标标签签的的src属属性性引引入入。将将包包含含在在与与标标签签对对之之间间的的代代码码放放入入扩扩展展名名为为.js的的脚脚本本文文件件中中，然然后后在

4、在HTML文文档档中中通通过过标标签签的的src属属性性来来引引用用该该脚脚本本文文件。件。在网在网页中嵌入中嵌入JavaScript脚本脚本chapter07网页设计与Web编程教案nJavaScript脚本的引入方法脚本的引入方法通通过过JavaScript伪伪协协议议引引入入。伪伪协协议议是是非非标标准准化化通通信信机机制制的的统统称称，JavaScript伪伪协协议议的的一一般般格格式式为为：javascript: URL。其其中中“javascript:”是是伪伪协协议议说说明明符符，URL的的主主体体可可以以是是任任意意的的JavaScript代代码码，多个语句之间使用分号进行分隔

5、。多个语句之间使用分号进行分隔。 例如：例如： 在网在网页中嵌入中嵌入JavaScript脚本脚本chapter07网页设计与Web编程教案nJavaScript脚本的引入方法脚本的引入方法通通过过HTML的的事事件件属属性性引引入入。HTML元元素素的的事事件件属属性性用用于于指指示示如如何何处处理理特特定定的的事事件件，方方法法是是将将脚脚本本指指定定为为事事件件属属性性的的值值，以以响响应应系系统统或或用用户户的的动动作作。事事件件属属性性名名称称由由事事件件名名称加一个称加一个“on”前缀构成，如前缀构成，如onClick，onMouseOver等。等。 例如：例如： 在网在网页中嵌入

6、中嵌入JavaScript脚本脚本chapter07网页设计与Web编程教案n嵌入嵌入JavaScript脚本的位置脚本的位置 JavaScript脚脚本本可可放放在在HTML文文档档中中任任何何需需要要的的位位置置。一一般般来来说说，可可以以在在与与标标签签对对、与与标标签签对对之之间间放放置置JavaScript脚脚本本代代码码。放放置置在在与与标标签签对对之之间间的的JavaScript脚脚本本一一般般用用于于提提前前载载入入，以以响响应应用用户户的的页页面面动动作作，且且一一般般不不影影响响HTML文文档档的的浏浏览览器器显显示示格格局局。如如果果需需要要在在页页面面载载入入时时动动态

7、态生生成成页页面面内内容容，应应将将JavaScript脚脚本本放放置置在在与与标签对之间。标签对之间。在网在网页中嵌入中嵌入JavaScript脚本脚本chapter07网页设计与Web编程教案n标识符标识符 在在JavaScript中，标识符用来命名变量和函数。中，标识符用来命名变量和函数。标标识识符符的的第第一一个个字字符符必必须须是是字字母母、下下划划线线或或美美元元符符号号，后后续续字字符符可可以以是是字字母母、数数字字、下下划划线线或或美美元元符符号号。例例如如：x、user_name、U571、_pswd、$money都是合法的标识符。都是合法的标识符。不不能能使使用用JavaS

8、cript中中的的关关键键字字作作为为标标识识符符。在在JavaScript中中定定义义了了20多多个个关关键键字字，这这些些关关键键字字是是JavaScript内内部部使使用用的的，如如var、for、function、if等，它们都不能作为标识符使用。等，它们都不能作为标识符使用。词法法规则chapter07网页设计与Web编程教案词法法规则n关键字和保留字关键字和保留字 关关键键字字是是JavaScript语语法法自自身身的的一一部部分分，具具有有特特殊殊的意义，不能用作标识符。的意义，不能用作标识符。 保保留留字字是是为为将将来来的的关关键键字字而而保保留留的的单单词词，由由于于未未来

9、来浏浏览览器器可可能能会会实实现现这这些些保保留留字字，因因此此它它们们最最好好也也不不要作为标识符使用。要作为标识符使用。breakcasecatchcontinuedefaultdeletedoelsefinallyforfunctionifininstanceofnewreturnswitchthisthrowtrytypeofvarvoidwhilewithJavaScript的保留字的保留字chapter07网页设计与Web编程教案词法法规则n大小写敏感大小写敏感JavaScript是是一一种种区区分分大大小小写写的的脚脚本本语语言言。在在输输入入关关键键字字、变变量量名名、函函数数

10、名名以以及及其其它它所所有有标标识识符符时时，都都必必须须采采取取一一致致的的字字符符大大小小写写形形式式。例例如如， “username”、“userName”、“UserName”代代表表三个不同的变量名。三个不同的变量名。许许多多JavaScript对对象象的的属属性性和和它它们们所所代代表表的的HTML标标签签的的属属性性同同名名，在在HTML中中这这些些标标签签的的属属性性可可以以以以任任意意大大小小写写的的方方式式输输入入，但但是是在在JavaScript中中它它们们通通常常都都有有固固定定的的大大小小写写格格式式。例例如如，body标标签签的的背背 景景 颜颜 色色 属属 性性

11、可可 以以 声声 明明 为为 “bgcolor”、“bgColor”或或者者“BGCOLOR”，但但代代表表body标标签签的的document对对 象象 的的 背背 景景 颜颜 色色 属属 性性 只只 能能 声声 明明 为为“bgColor”。chapter07网页设计与Web编程教案词法法规则n空白字符空白字符空空白白字字符符包包括括空空格格、制制表表符符和和换换行行符符等等，在在编编写写脚脚本本时时占占据据一一定定的的空空间间，以以增增强强代代码码的的可可读读性，方便开发人员查看和维护。性，方便开发人员查看和维护。空空格格是是使使用用最最为为频频繁繁的的空空白白字字符符，常常被被用用作作

12、分分隔符。隔符。例例1：sum = 3 + 10 ; sum=3+10;空格被忽略空格被忽略例例2：var x=typeof JavaScript;空格作为分隔空格作为分隔符符chapter07网页设计与Web编程教案词法法规则n语句结束符语句结束符JavaScript使使用用分分号号作作为为语语句句结结束束符符，多多个个语语句句可写在不同行或同一行。可写在不同行或同一行。 例如：例如： var str=Welcome to JavaScript World!; document.write(str); 也可写成：也可写成：var str=Welcome to JavaScript World

13、!; document.write(str);语句分行后，作为语句结束符的分号可以省略。语句分行后，作为语句结束符的分号可以省略。 例如：例如： var str=Welcome to JavaScript World! document.write(str)注注意意：省省略略分分号号不不是是一一个个好好的的编编程程习习惯惯，它它可能导致程序产生一种不明确的状态。可能导致程序产生一种不明确的状态。chapter07网页设计与Web编程教案词法法规则n注释注释 JavaScript有单行注释和多行注释两种形式。有单行注释和多行注释两种形式。单单行行注注释释以以“/”开开头头，处处于于“/”和和一一

14、行行结结尾尾之间的任何文本都被当作注释而被浏览器忽略掉。之间的任何文本都被当作注释而被浏览器忽略掉。多多行行注注释释以以“/*”开开头头，以以“*/”结结尾尾，处处于于“/*”和和“*/”之之间间的的文文本本被被当当作作注注释释，这这些些文文本可以跨越多行，但是其中不能有嵌套的注释。本可以跨越多行，但是其中不能有嵌套的注释。 例如：例如： /这是单行注释这是单行注释 /* *这是多行注释这是多行注释 *它是多行的它是多行的 *它是多行的它是多行的 */chapter07网页设计与Web编程教案基本数据基本数据类型型基本数据类型定义了一组不可再分的值的集合，以基本数据类型定义了一组不可再分的值的

15、集合，以及及作作用用于于该该集集合合上上的的操操作作集集。JavaScript支支持持的的基基本本数数据据类类型型包包括括数数值值型型、字字符符串串型型和和布布尔尔型型，分分别别对对应于不同的存储空间。应于不同的存储空间。n基本数据类型和常量基本数据类型和常量 当某种基本类型的数据项直接出现在程序中时，称之为常当某种基本类型的数据项直接出现在程序中时，称之为常 量，即值不能被改变的量。量，即值不能被改变的量。数值型：最基本的数据类型，包括整型和浮点型数值型：最基本的数据类型，包括整型和浮点型整整型型常常量量：可可以以使使用用十十进进制制、八八进进制制或或十十六六进进制制表表示示，如如1234、

16、0745、0x93C等。等。浮浮点点型型常常量量：可可以以使使用用小小数数或或指指数数方方法法表表示示，如如12.34、5.9e7、4.3e-5等。等。特特殊殊的的数数值值型型常常量量：Infinity表表示示正正无无穷穷大大， -Infinity表表示示负负无无穷穷大大，NaN表表示示“不不是是一一个个数数值值”、“没没有有意意义义的的运运算算”或或“无无法法转转换换成成数数值值类类型型”。如如5/0的的运运算算结结果果为为Infinity，-5/0的的运运算算结结果果为为-Infinity，0/0的运算结果为的运算结果为NaN。chapter07网页设计与Web编程教案基本数据基本数据类型

17、型n基本数据类型和常量基本数据类型和常量字字符符串串型型：表表示示文文本本的数据类型的数据类型字字符符串串常常量量：用用 或或 括括起起来来的的若若干干个个 字字 符符 ， 如如JavaScript、This is a book of C+等。等。转转义义字字符符：以以反反斜斜杠杠 开开头头的的具具有有特特殊功能的字符。殊功能的字符。转义字符字符功能功能说明明b退格退格f换页n换行行r回回车t制表制表单引号引号双引号双引号反斜反斜线XXXASCII字符，每一个大字符，每一个大X是一是一个八个八进制数制数值，整个八，整个八进制制数的范数的范围是是0377。例如：。例如：101表示表示AxXXAS

18、CII字符，每一个大字符，每一个大X是一是一个十六个十六进制数制数值，整个十六，整个十六进制数的范制数的范围是是00FF。例如：。例如：x65表示表示euXXXXUnicode字符，每一个大字符，每一个大X是是一个十六一个十六进制数制数值。例如：。例如：u000A表示表示换行，和行，和n结果一果一样chapter07网页设计与Web编程教案基本数据基本数据类型型n基本数据类型和常量基本数据类型和常量布尔型：表示状态的数据类型布尔型：表示状态的数据类型布布尔尔常常量量：只只有有两两个个可可能能的的值值true和和false，表表示示“真真”和和“假假”两两种种状状态态。如如53的的运运算算结结果

19、果为为true，“Chinese”“China”的的运运算算结结果果是是false。n变量变量 变量是存放常量的容器，主要作用是存取数据。变量是存放常量的容器，主要作用是存取数据。变变量量的的声声明明：在在JavaScript中中，可可以以先先通通过过关关键键字字var来声明变量，然后再使用。来声明变量，然后再使用。 例如：例如：var num; var str, flag; num = 100; str = JavaScript Language; flag = true; chapter07网页设计与Web编程教案变量的初始化：变量可以在声明的同时指定初始值。变量的初始化：变量可以在声明的

20、同时指定初始值。 例如：例如：var num = 100; var str = JavaScript Language, flag = true; 仅用仅用var声明但未初始化的变量获得默认初值声明但未初始化的变量获得默认初值undefined。 变量的类型变量的类型实实际际类类型型视视变变量量内内容容而而定定。例例如如，上上例例中中的的num为为数数值值型型变量，变量，str为字符串型变量，为字符串型变量，flag为布尔型变量。为布尔型变量。变量的类型可以根据变量内容的改变而自动更改。变量的类型可以根据变量内容的改变而自动更改。 例如：例如：var num = 1; /num为数值型变量为数

21、值型变量 num = Hello World!; /num为字符串型变量为字符串型变量变变量量可可以以不不经经过过var声声明明就就直直接接使使用用，而而在在变变量量赋赋值值时时自自动动声声明该变量。明该变量。 例如：例如：num = 100; str = JavaScript Language; flag = true; 好的编程风格：所有变量在第一次使用前都用好的编程风格：所有变量在第一次使用前都用var进行声明！进行声明！基本数据基本数据类型型chapter07网页设计与Web编程教案运算符和表达式运算符和表达式运运算算符符是是完完成成操操作作的的一一系系列列符符号号，JavaScrip

22、t支支持持的的运运算算符符包包括括算术运算符、比较运算符、逻辑运算符等。算术运算符、比较运算符、逻辑运算符等。表表达达式式是是由由变变量量、常常量量和和运运算算符符连连接接起起来来的的式式子子，根根据据运运算算符符类类型型的的不不同同，表表达达式式可可分分为为算算术术表表达达式式、比比较较表表达达式式、逻逻辑辑表表达式等。达式等。n算术运算符和算术表达式算术运算符和算术表达式算算术运算符运算符 算算术表达式表达式运算运算结果果简要要说明明+6+1521将两个数据相加将两个数据相加-9-72将两个数据相减将两个数据相减*4*832将两个数据相乘将两个数据相乘/17/53.4将两个数据相除将两个数

23、据相除%13%61取两个数据相除的余数取两个数据相除的余数+x+变量量x的原的原值加加1将将变量量值加加1-y变量量y的原的原值减减1将将变量量值减减1chapter07网页设计与Web编程教案运算符和表达式运算符和表达式n比较运算符和比较表达式比较运算符和比较表达式当操作数当操作数类型不同时类型不同时进行类型转进行类型转换换当操作数当操作数类型不同时类型不同时不进行类型不进行类型转换转换比比较运算符运算符比比较表达式表达式运算运算结果果简要要说明明-6ChinaChinesefalse大于大于=true=12=12true大于或等于大于或等于=false=0true等于等于!=x!=xfal

24、se不等于不等于=true=1false恒等于恒等于!=2008!=2008true恒不等于恒不等于chapter07网页设计与Web编程教案运算符和表达式运算符和表达式n逻辑运算符和逻辑表达式逻辑运算符和逻辑表达式逻辑运算符运算符逻辑表达式表达式运算运算结果果简要要说明明!falsetrue逻辑非，操作数非，操作数为假假则结果果为真，否真，否则结果果为假假&75&8=6false逻辑与，操作数全与，操作数全为真真则结果果为真，真，否否则结果果为假假| |2=2| |true=1true逻辑或，操作数全或，操作数全为假假则结果果为假，假，否否则结果果为真真chapter07网页设计与Web编程

25、教案运算符和表达式运算符和表达式n位运算符和位表达式位运算符和位表达式位运算符位运算符 位表达式位表达式运算运算结果果简要要说明明&5&64按位与，若两操作数按位与，若两操作数对应二二进制位都是制位都是1，则结果位果位为1，否，否则为0|9|311按位或，若两操作数按位或，若两操作数对应二二进制位都是制位都是0，则结果位果位为0，否，否则为1743按位异或，若两操作数按位异或，若两操作数对应二二进制位相反，制位相反，则结果位果位为1，否，否则为00-1按位非，若操作数按位非，若操作数对应二二进制位制位为0，则结果位果位为1，否，否则为016-323-4算算术右移，左右移，左侧操作数的二操作数的

26、二进制位向右移制位向右移动由右由右侧数数值表示的位数，左表示的位数，左边空位空位补符号符号-323536870908逻辑右移，左右移，左侧操作数的二操作数的二进制位向右移制位向右移动由右由右侧数数值表示的位数，左表示的位数，左边空位空位补0chapter07网页设计与Web编程教案运算符和表达式运算符和表达式n赋值运算符和赋值表达式赋值运算符和赋值表达式赋值运算符运算符 赋值表达式表达式等价形式等价形式简要要说明明=x=y+zx=(y+z)赋值+=x+=y+zx=x+(y+z)相加后相加后赋值-=x-=y+zx=x-(y+z)相减后相减后赋值*=x*=y+zx=x*(y+z)相乘后相乘后赋值/

27、=x/=y+zx=x/(y+z)相除后相除后赋值%=x%=y+zx=x%(y+z)取余后取余后赋值&=x&=y+zx=x&(y+z)按位与后按位与后赋值|=x|=y+zx=x|(y+z)按位或后按位或后赋值=x=y+zx=x (y+z)按位异或后按位异或后赋值=x=y+zx=x=x=y+zx=x(y+z)算算术右移后右移后赋值=x=y+zx=x(y+z) 逻辑右移后右移后赋值chapter07网页设计与Web编程教案n条件运算符和条件表达式条件运算符和条件表达式 条件运算符有条件运算符有3个操作数，一般格式如下：个操作数，一般格式如下：条件式条件式 ? valueB : valueC 当条件式

28、成立时，当条件式成立时，valueB会被赋给整个条件表会被赋给整个条件表达式，否则将达式，否则将valueC赋给条件表达式。赋给条件表达式。 例如：例如： var min = 67 ? 6 : 7;思考：假设思考：假设x、y、z三个变量均已赋值，请写出三个变量均已赋值，请写出求三个变量中最大值和最小值的条件表达式。求三个变量中最大值和最小值的条件表达式。运算符和表达式运算符和表达式chapter07网页设计与Web编程教案n字符串运算符和字符串表达式字符串运算符和字符串表达式字符串运算符字符串运算符说明说明例子例子+连接两个字符串连接两个字符串var strA = Java; var strB

29、 = Script; str = strA + strB;str的值是的值是JavaScript+=连接两个字符串，然后赋值连接两个字符串，然后赋值var strA = Hello ; var strB = World; strA += strB;strA的值是的值是Hello World运算符和表达式运算符和表达式chapter07网页设计与Web编程教案n逗号运算符和逗号表达式逗号运算符和逗号表达式 逗逗号号既既可可以以作作为为分分隔隔符符，也也可可以以作作为为运运算算符符。逗号表达式的一般格式如下：逗号表达式的一般格式如下：表达式表达式1, 表达式表达式2, , 表达式表达式n 逗逗号号

30、表表达达式式的的求求值值过过程程：先先求求表表达达式式1的的值值，再再求求表表达达式式2的的值值，依依次次下下去去，最最后后求求表表达达式式n的的值，表达式值，表达式n的值即为整个逗号表达式的值。的值即为整个逗号表达式的值。 例如：例如： var a=2, b=4, c=6, x, y; /逗号作为分隔符逗号作为分隔符 y=(x=a+b, x+c); /逗号作为运算符逗号作为运算符运算符和表达式运算符和表达式chapter07网页设计与Web编程教案n基本控制结构基本控制结构 基本控制结构用来决定程序的处理流程，基本控制结构用来决定程序的处理流程，JavaScript 支持三种结构：顺序、选择

31、和循环。支持三种结构：顺序、选择和循环。核心核心语句句开始开始语句语句1语句语句2结束结束顺序结构顺序结构chapter07网页设计与Web编程教案分支分支结构构单分支选择和双分支选择结构单分支选择和双分支选择结构语句语句1语句语句2结束结束开始开始逻辑条件逻辑条件truefalse开始开始逻辑条件逻辑条件truefalse语句语句1结束结束chapter07网页设计与Web编程教案多分支多分支结构构false条件条件1语句语句1truefalse开始开始语句语句2true条件条件2false条件条件3语句语句3true条件条件nfalse语句语句ntrue语句语句n+1结束结束多分支选择结构

32、多分支选择结构chapter07网页设计与Web编程教案循循环结构构循环结构循环结构当型循环当型循环开始开始逻辑条逻辑条件件truefalse循环体循环体结束结束直到型循环直到型循环开始开始逻辑条逻辑条件件truefalse循环体循环体结束结束chapter07网页设计与Web编程教案n表达式和复合语句表达式和复合语句由由各各种种类类型型的的表表达达式式加加上上分分号号组组成成的的语语句句被被称称为为表表达达式式语句。语句。 例如：例如： sum+; /算术表达式语句算术表达式语句 str=Olympic + 2008; /赋值表达式语句赋值表达式语句用用大大括括号号“ ”括括起起来来的的语语

33、句句序序列列称称为为复复合合语语句句，用用来来在在需要使用单行语句的地方完成多项任务。需要使用单行语句的地方完成多项任务。 例如：例如： var angle=Math.PI; var cosine=Math.cos(angle); alert(cos(+angle+)=+cosine); 核心核心语句句chapter07网页设计与Web编程教案n条件语句条件语句 选择结构的核心语句是条件语句，通过判断某个逻选择结构的核心语句是条件语句，通过判断某个逻 辑条件是否成立，从给定的各种可能操作中选择一辑条件是否成立，从给定的各种可能操作中选择一 种执行。条件语句包括种执行。条件语句包括if语句和语句

34、和switch语句。语句。if语句的三种形式语句的三种形式单分支选择。其一般格式如下：单分支选择。其一般格式如下： if (表达式表达式) 语句语句;功功能能：计计算算表表达达式式的的值值，若若计计算算结结果果为为true，执执行行语语句句；否否则则跳跳过过if语句执行其后的语句。语句执行其后的语句。例例1：if(count 10) count = 0; 例例2：if(count 10) count = 0; alert(count被重设为被重设为0!); 核心核心语句句chapter07网页设计与Web编程教案双分支选择。其一般格式如下：双分支选择。其一般格式如下： if (表达式表达式)

35、语句语句1; else 语句语句2;功功能能：如如果果表表达达式式的的计计算算结结果果为为true，执执行行语语句句1；否则执行语句；否则执行语句2。例如：例如： var num=Math.round(Math.random( )*100); if(num%2=0) alert(num+是一个偶数是一个偶数); else alert(num+是一个奇数是一个奇数);核心核心语句句chapter07网页设计与Web编程教案多分支选择。其一般格式如下：多分支选择。其一般格式如下： if (表达式表达式1) 语句语句1; else if (表达式表达式2) 语句语句2; else if (表达式表达

36、式n) 语句语句n; else 语句语句n+1;功功能能：如如果果表表达达式式1的的值值为为true，执执行行语语句句1；否否则则计计算算表表达达式式2的的值值，如如果果返返回回true则则执执行行语语句句2；如如果果所所有有表表达达式式都不成立，则执行都不成立，则执行else后面的语句后面的语句n+1。例如：例如：var age=parseInt(prompt(请输入您的年龄请输入您的年龄,); if (age10) alert(黄口小儿黄口小儿); else if (age20) alert(年方弱冠年方弱冠); else if (age30) alert(三十而立三十而立); else

37、if (age=b) if (a=c) max=a; else max=c; else if (b=c) max=b; else max=c; alert(max=+max);核心核心语句句chapter07网页设计与Web编程教案switch语句语句 switch语句用来实现多分支选择结构，其一般形式如下：语句用来实现多分支选择结构，其一般形式如下： switch (表达式表达式) case 常量表达式常量表达式1: 语句语句1; break; case 常量表达式常量表达式2: 语句语句2; break; case 常量表达式常量表达式n: 语句语句n; break; default: 语

38、句语句n+1; 功功能能：比比较较表表达达式式的的值值是是否否与与某某一一个个case后后面面的的常常量量表表达达式式的的值值相相等等，如如果果相相等等，则则执执行行相相应应的的语语句句；如如果果所所有有case后后面面常常量量表表达达式式的的值值都都不不与与表表达达式式的的值值相相等等，则则执执行行default后后面面的的语语句句。default子子句句可可以以省省略略，即即所所有有常常量量表表达达式式的的值值都都不不满满足足条条件件时时直直接接跳跳过过switch语语句句执执行行其其后后的的语句。语句。核心核心语句句chapter07网页设计与Web编程教案例如：例如： var age=

39、parseInt(prompt(请输入您的年龄请输入您的年龄,); age=Math.floor(age/10); switch(age) case 0: alert(黄口小儿黄口小儿); break; case 1: alert(年方弱冠年方弱冠); break; case 2: alert(三十而立三十而立); break; case 3: alert(四十不惑四十不惑); break; default: alert(英雄迟暮英雄迟暮); break语语句句用用来来直直接接跳跳出出整整个个switch语语句句。如如果果省省略略break语语句句，在在执执行行完完某某个个case子子句句后后

40、会会继继续续执执行行下下一一个个case子子句句，直直到到遇遇上上break语语句句或或者者所所有有的的子子句句都被执行完为止。都被执行完为止。核心核心语句句chapter07网页设计与Web编程教案n循环语句循环语句 循环语句允许在逻辑条件成立时反复执行相同循环语句允许在逻辑条件成立时反复执行相同 的语句的语句(循环体循环体)。while语句语句一般格式：一般格式：while (表达式表达式) 语句语句;功功能能：计计算算表表达达式式的的值值，如如果果计计算算结结果果为为true，反反复复执执行行语语句；否则结束循环。语句可以是单行语句或者复合语句。句；否则结束循环。语句可以是单行语句或者复

41、合语句。例如：用例如：用while语句编写求语句编写求1+3+5+99累加和的程序：累加和的程序： var sum=0, i=1; while(i=100) sum+=i; i+=2; 核心核心语句句chapter07网页设计与Web编程教案do-while语句语句一般格式：一般格式：do 语句语句; while (表达式表达式);功功能能：反反复复执执行行语语句句，直直到到表表达达式式的的计计算算结结果果为为false时时结结束束循环。循环。例如：用例如：用do-while语句编写求语句编写求1+3+5+99累加和的程序：累加和的程序： var sum=0, i=1; do sum+=i;

42、i+=2; while(i=100);核心核心语句句chapter07网页设计与Web编程教案for语句语句一般格式：一般格式：for (表达式一表达式一; 表达式二表达式二; 表达式三表达式三) 语句语句;功能：功能： (1) 计算表达式一的值；计算表达式一的值； (2) 计算表达式二的值，如果计算结果为计算表达式二的值，如果计算结果为true，进入，进入(3)，否，否 则进入则进入(6)； (3) 执行语句；执行语句； (4) 计算表达式三的值；计算表达式三的值； (5) 回到回到(2)继续执行；继续执行； (6) 结束循环，执行结束循环，执行for语句的后续语句。语句的后续语句。例如：用

43、例如：用for语句编写求语句编写求1+3+5+99累加和的程序：累加和的程序： var sum=0, i; for(i=1; i=100; i+=2) sum+=i;核心核心语句句chapter07网页设计与Web编程教案循环语句的嵌套循环语句的嵌套 循环语句中又包含一个或多个循环语句称为循环语句的嵌套。循环语句中又包含一个或多个循环语句称为循环语句的嵌套。 例如：例如： var i,j; for(i=1;i=4;i+) document.write(); for(j=1;j=2*i-1;j+) document.write(*   ); document.wri

44、te(); for(i=1;i=3;i+) document.write(); for(j=1;j=7-2*i;j+) document.write(*   ); document.write(); 核心核心语句句chapter07网页设计与Web编程教案break和和continue语句语句 break语句只能用在循环语句和语句只能用在循环语句和switch语句中，作用是停止执语句中，作用是停止执 行尚未执行的部分，直接从循环语句或行尚未执行的部分，直接从循环语句或switch语句中跳出来。语句中跳出来。 continue语句只能用在循环语句中，作用是跳过循环体

45、内剩语句只能用在循环语句中，作用是跳过循环体内剩 余的语句而提前进入下一次循环。余的语句而提前进入下一次循环。 例如：例如：var sum=0, i=0; while(true) i+; if(i100) break; if(i%2=0) continue; sum+=i; 核心核心语句句chapter07网页设计与Web编程教案n标签语句标签语句在在JavaScript中，语句可以在其前面加上标签，一般格式为：中，语句可以在其前面加上标签，一般格式为： 标识符标识符: 语句语句;标标签签必必须须是是合合法法的的JavaScript标标识识符符，不不能能是是关关键键字字或或保保留留字字。标签可

46、以与程序中的变量或函数同名。标签可以与程序中的变量或函数同名。通过给语句加标签，达到在程序其他位置引用该语句的目的。通过给语句加标签，达到在程序其他位置引用该语句的目的。 例如：例如：outer: for(i=0; i10; i+) for(j=0; ji) document.write(); continue outer; k=i*j; document.write(k+   ); if(k=9) break outer; 核心核心语句句chapter07网页设计与Web编程教案在在JavaScript中中，函函数数用用来来封封装装那那些些在在程程序序中中反反复

47、复使使用用的的程程序序段段，常作为事件处理程序被调用。常作为事件处理程序被调用。n函数的基本组成函数的基本组成函数定义函数定义 一般格式：一般格式：function 函数名函数名(参数列表参数列表) 函数体函数体; return 返回值返回值; 说明：说明：function：定义函数的关键字。：定义函数的关键字。函数名：函数的标识符，表示函数的入口地址。函数名：函数的标识符，表示函数的入口地址。参参数数列列表表：包包含含若若干干个个参参数数，不不同同参参数数间间用用逗逗号号间间隔隔。当当调调用用函函数数时时，可可以以向向参参数数列列表表中中传传入入常常量量值值、变变量量值值或或其其它它表表达达

48、式式的的值值，函函数数内内的的程程序序语语句句可可以以通通过过参参数数名名称称来来引引用用传传进进来来的的这这些些值值。参参数数列列表也可以为空。表也可以为空。函数体：实现函数功能的程序语句。函数体：实现函数功能的程序语句。return：指指定定函函数数返返回回值值的的关关键键字字。return语语句句负负责责将将函函数数的的执执行行结结果果返返回回到到程程序序中中函函数数调调用用的的位位置置，一一个个函函数数中中最最多多只只能能有有一一条条return语句。语句。函数函数chapter07网页设计与Web编程教案例例 定义一个求阶乘的函数定义一个求阶乘的函数 function fact (n

49、) var s = 1, i; for( i=1; i=n; i+ ) s=s*i; return s; 定义函定义函数的关键数的关键字字函数名函数名参数列表参数列表函数体函数体函数函数返回函数的执行结果返回函数的执行结果chapter07网页设计与Web编程教案函数调用函数调用 一般格式：一般格式：函数名函数名(实参列表实参列表); 说明：说明：实实参参列列表表中中包包含含若若干干个个实实际际参参数数，参参数数之之间间用用逗逗号号间间隔隔，实实参参个个数数应应与与函函数数定定义义时时参参数数列列表表中中的的参参数数个个数数相相等等。实实参参的的表表示示形形式式可可以以是是常常量量、变变量量或

50、或者者表表达达式式，所所有有实实参参都都必须得到具体的赋值。必须得到具体的赋值。函函数数调调用用时时的的参参数数传传递递都都是是以以值值传传递递的的方方式式进进行行的的。也也就就是是说说，在在函函数数中中将将某某个个传传进进来来的的变变量量值值改改变变了了，并并不不会会影影响原来函数外的变量值。响原来函数外的变量值。 例如：例如：function inc(n) n+; alert(n); var x = 5; inc(x); alert(x);函数函数函数函数调调用用参数传参数传递递函数定函数定义义程序运行结果：程序运行结果： n=6 x=5chapter07网页设计与Web编程教案n函数的作

51、用域函数的作用域 在函数外部声明的变量称为全局变量，全局变量在程序的在函数外部声明的变量称为全局变量，全局变量在程序的 任何地方都可以使用。在函数内部声明的变量称为局部变任何地方都可以使用。在函数内部声明的变量称为局部变 量，局部变量应用关键字量，局部变量应用关键字var声明，没有用声明，没有用var声明的局部声明的局部 变量在函数执行完毕后会变成全局变量。变量在函数执行完毕后会变成全局变量。 程序运行结果：程序运行结果： sum = 8程序运行结果：程序运行结果： y 未定义未定义function inc(n) y = +n; return y;var x = 3;var sum = inc

52、(x) + y;alert(sum);function inc(n) var y = +n; return y;var x = 3;var sum = inc(x) + y;alert(sum);函数函数chapter07网页设计与Web编程教案n函数的嵌套与递归函数的嵌套与递归函函数数的的嵌嵌套套：嵌嵌套套定定义义是是指指在在定定义义一一个个函函数数的的过过程程中中定定义义另另一一个个函函数数，定定义义在在某某个个函函数数内内部部的的函函数数称称为为局局部部函函数数，其其作作用用域域局局限限在在所所属属的的框框架架函函数数。嵌嵌套套调调用用是是指指在在调用一个函数的过程中又调用另一个函数。调

53、用一个函数的过程中又调用另一个函数。 例如：例如：function lcm(m, n) /框架函数，求最小公倍数框架函数，求最小公倍数 var res; function gcd(m, n) /局部函数，求最大公约数局部函数，求最大公约数 var a, b, t; if(mn) t=m; m=n; n=t; a=m; b=n; while(r=a%b)!=0) a=b; b=r; return b; res=m*n/gcd(m, n); /嵌套调用嵌套调用gcd函数函数 alert(m+ 和和 +n+ 的最小公倍数是的最小公倍数是 +res); 函数函数chapter07网页设计与Web编程教

54、案函函数数的的递递归归：递递归归调调用用是是指指函函数数在在调调用用过过程程中中直直接或间接调用自身，是一种特殊的嵌套调用。接或间接调用自身，是一种特殊的嵌套调用。 例如：例如：function fac(n) var res; if(n=1) res=1; else res=n*fac(n-1); /递归调用递归调用 return res; var n=parseInt(prompt(请输入整数请输入整数,); var f=fac(n); alert(n+ 的阶乘是的阶乘是 +f);函数函数chapter07网页设计与Web编程教案n对象对象 对象是属性与方法的集合，这些属性和方法被用来对象是

55、属性与方法的集合，这些属性和方法被用来 描述对象的特性与行为。描述对象的特性与行为。创建对象创建对象方式一：方式一：var 对象名对象名 = new Object( ); 用用Object( )建建立立的的对对象象没没有有任任何何属属性性，可可以以通通过过“对对象象名名.属属性性名名=属属性性值值;”的的方方式式为为新新建建对对象增加属性并指定属性值。象增加属性并指定属性值。 例如：例如：var teacher=new Object( ); =杨鏖丞杨鏖丞; teacher.age=32; teacher.sex=男男;注注意意：Object( )实实际际上上是是内内部部对对象象Object的

56、的构构造造函函数数。Object对对象象是是所所有有JavaScript对对象象的的父父对对象象，它它所所提提供的属性和方法会被其他的对象继承。供的属性和方法会被其他的对象继承。复合数据复合数据类型型chapter07网页设计与Web编程教案创建对象创建对象方式二：方式二： var 对象名对象名= new 自定义构造函数名自定义构造函数名(实参列表实参列表); 实实参参列列表表用用来来初初始始化化新新建建对对象象的的属属性性。新新建建对对象象的的属属性性声声明明是是在在属属性性名名称称前前加加上上“this.”，然然后后将将参参数数值值指指定定给给它它，或或是是直直接接设设定定属属性性的初始值

57、。的初始值。 例如：例如：function person(n, a, s) =n; this.age=a; this.sex=s; var yac=new person(杨杨鏖鏖丞丞,32, 男男); var yyq=new person(余余颖颖秋秋,30, 女女);注意：关键字注意：关键字this是对当前对象的引用。是对当前对象的引用。复合数据复合数据类型型chapter07网页设计与Web编程教案存取对象属性存取对象属性方式一：方式一：对象名对象名.属性名属性名 例如：例如：function birthday(y, m, d) this.year=y; this.month=m; thi

58、s.day=d; var p1=new birthday(2000, 7, 25); alert(生于生于+p1.year+年年+ p1.month+月月+p1.day+日日); 可可以以根根据据对对象象的的个个别别需需求求来来增增加加它它自自己己的的属属性性，个别定义的对象属性不会影响其他对象。个别定义的对象属性不会影响其他对象。 例如：例如： var p2=new birthday(1976, 2, 15); p2.time=3:25; /p1对象不具备对象不具备time属性属性复合数据复合数据类型型chapter07网页设计与Web编程教案存取对象属性存取对象属性方式二：方式二：对象名对

59、象名属性名属性名|属性索引值属性索引值 例如：例如：var p1=new Object( );p1year=2000;p1month=7;p1day=25;alert(生于生于+p1.year+年年+p1.month+月月+p1.day+日日);var p2=new Object( );p20=1976;p21=2;p22=15;alert(生于生于+p20+年年+p21+月月+p22+日日);复合数据复合数据类型型chapter07网页设计与Web编程教案定义和调用对象方法定义和调用对象方法 对对象象的的方方法法是是描描述述对对象象动动态态特特征征的的操操作作序序列列，即即函函数数。定定义义

60、对对象象方方法法和和定定义义对对象象属属性性非非常常类类似似，只只需需要要将将已已定定义义函函数数的的名名称称指指定定给给对对象象方方法法名名，或或者者直直接接定定义义函函数数。一一般般格格式为：式为： 对象名对象名.方法名方法名 = 已定义函数名已定义函数名; 或者或者 对象名对象名.方法名方法名 = 函数定义函数定义; 例如：例如： function calAge( ) return (new Date( ).getYear( )-this.year; function birthday(y, m, d) this.year=y; this.month=m; this.day=d; thi

61、s.getAge=calAge; /定义对象方法定义对象方法 var p=new birthday(2000, 7, 25); alert(年龄：年龄： +p.getAge( );复合数据复合数据类型型chapter07网页设计与Web编程教案定义和调用对象方法定义和调用对象方法 上述对象方法定义也可写成：上述对象方法定义也可写成： function birthday(y, m, d) this.year=y; this.month=m; this.day=d; this.getAge=function( ) return (new Date( ).getYear( )-this.year;

62、调用对象方法的一般格式为：调用对象方法的一般格式为： 对象名对象名.方法名方法名(实参列表实参列表) 例如：例如：var p1=new birthday(1997, 7, 1); var p2=new birthday(2008, 8, 1); document.write(年龄年龄1: +p1.getAge( )+ 年龄年龄2: +p2.getAge( );复合数据复合数据类型型chapter07网页设计与Web编程教案对象操作语句及运算符对象操作语句及运算符for.in语句语句 一般格式：一般格式：for(变量名变量名 in对象名对象名) 循环体循环体; 该该语语句句会会将将对对象象包包含

63、含的的所所有有属属性性逐逐个个取取出出来来，当当取取得得对对象象的的一一个个属属性性后后会会将将该该属属性性的的名名称称指指定定给给变变量量，并并继继续续执执行行for循循环环直直到到取取得得对对象象的的最最后后一一个个属属性性。该该语语句句的的优优点点是是无无需需知知道道对对象象中中属属性性的的名名称称和和个个数数即即可可进进行行操作。操作。 例如：例如：var p=new birthday(1978, 10, 1); for(var prop in p) document.write(属性名属性名: +prop+  属性值属性值: +pprop+); 复合数据复合数据类型型cha

64、pter07网页设计与Web编程教案对象操作语句及运算符对象操作语句及运算符with语句语句 一般格式：一般格式：with(对象名对象名) 语句段语句段; 该该语语句句会会将将语语句句段段内内出出现现的的任任何何变变量量和和函函数数都都认认为为是是对对象象的的属属性性和和方方法法，从从而而简简化化对对象象的的引引用用过过程程。如如果果语语句句段段内内的的变变量量或或函函数数不不是是对对象象的的属属性性或或方方法法，则则会会自自动引用动引用with语句外部的变量或函数。语句外部的变量或函数。 例如：例如： var nativity=湖北省武汉市湖北省武汉市; var p=new birthday

65、(1992, 11, 3); with(p) alert(生于生于+year+-+month+-+day); alert(籍贯：籍贯：+nativity); 复合数据复合数据类型型chapter07网页设计与Web编程教案对象操作语句及运算符对象操作语句及运算符typeof运算符运算符 一般格式：一般格式：typeof 运算量运算量 typeof运运算算符符可可放放在在任任意意类类型型的的运运算算量量之之前前，返返回回结结果果是一个字符串，表明运算量的数据类型。是一个字符串，表明运算量的数据类型。 例如：例如： var p=new birthday(1985, 8, 8); var str=J

66、avaScript; var num=1000; var flag=false; function func( ) alert(typeof p); /返回返回object alert(typeof str); /返回返回string alert(typeof num); /返回返回number alert(typeof flag); /返回返回boolean alert(typeof func); /返回返回function alert(typeof x); /返回返回undefined复合数据复合数据类型型chapter07网页设计与Web编程教案对象操作语句及运算符对象操作语句及运算符d

67、elete运算符运算符 一般格式：一般格式：delete 运算量运算量 delete运运算算符符用用来来删删除除放放在在其其后后的的运运算算量量，如如果果运运算算量量被被删删除除，返返回回true，否否则则返返回回false。运运算算量量可可以以是是变变量量、对象属性和数组元素。对象属性和数组元素。 例如：例如： var str=Hello World; num=123; var p=new birthday(1985, 8, 8); var ary=new Array(1,2,3); alert(delete str); /返回返回false alert(delete num); /返回返回

68、true alert(delete p.year); /返回返回true alert(delete Math.PI); /返回返回false alert(delete ary2); /返回返回true注注意意：用用关关键键字字var声声明明的的变变量量，内内部部对对象象的的属属性性不不能能用用delete运算符删除。运算符删除。复合数据复合数据类型型chapter07网页设计与Web编程教案内部对象内部对象 JavaScript提提供供了了非非常常丰丰富富的的内内部部对对象象，用用户户可可以以直直接接使使用这些对象的属性和方法来实现快速的程序开发。用这些对象的属性和方法来实现快速的程序开发。S

69、tring对象对象 创建创建String对象的一般格式为：对象的一般格式为： var 对象名对象名 = new String( ); 或或 var 对象名对象名 = new String (字符串参数字符串参数); 例如：例如：var strObj=new String(Hello World!);注注意意：在在实实际际应应用用中中，很很少少通通过过new运运算算符符和和String( )构构造造函函数数创创建建String对对象象，而而是是直直接接使使用用字字符符串串变变量量或或字字符符串串常常量量。例如：例如： var strVar=Java is a oriented-object la

70、nguage; strVar是是一一个个存存储储了了字字符符串串值值的的基基本本类类型型变变量量， JavaScript规规定可以将其作为拥有属性和方法的定可以将其作为拥有属性和方法的String对象处理。对象处理。复合数据复合数据类型型chapter07网页设计与Web编程教案内部对象内部对象Math对象对象 Math对对象象用用于于完完成成比比简简单单算算术术运运算算更更高高级级的的数数学学处处理理。Math对对象象不不需需要要通通过过new运运算算符符和和构构造造函函数数创创建建，用用户可以通过以下方式直接访问它的属性和方法：户可以通过以下方式直接访问它的属性和方法： Math.属性名属

71、性名 Math.方法名方法名(实参列表实参列表) 例如：例如：log=Math.LN10; root=Math.SQRT2; alert(Math.floor(log); alert(Math.ceil(log); alert(Math.round(root); alert(Math.max(log, root); alert(Math.floor(Math.random( )*6)+1);复合数据复合数据类型型chapter07网页设计与Web编程教案内部对象内部对象Date对象对象 Date对对象象提提供供了了处处理理日日期期和和时时间间的的强强大大功功能能，创创建建Date对象的一般格式

72、为：对象的一般格式为： var 对象名对象名 = new Date (实参列表实参列表); 例如：例如：var d1=new Date( ); var d2=new Date(2008, 7, 8, 20, 0, 0);注注意意：在在使使用用Date对对象象进进行行日日期期和和时时间间处处理理时时要要考考虑虑时时区区的的因因素素。在在JavaScript中中，Date对对象象中中包包含含的的日日期期和和时时间间信信息息实实际际上上是是一一个个以以毫毫秒秒为为单单位位的的值值，该该值值从从GMT(格格林林尼尼治治标标准准时时间间)时时区区的的1970年年1月月1日日0时时0分分0秒秒开开始始计计

73、算算。以以上上面面的的d2对对象象为为例例，如如果果PC内内部部时时钟钟设设置置的的时时区区为为东东八八区区(北北京京所所在在时时区区)，那那么么可可认认为为d2中中包包含含的的具具体体时时间间是是北北京京时时间间2008年年8月月8日日20时时0分分0秒秒，但但实实际际存存储储的的是是格格林林尼尼治治标标准准时时间间2008年年8月月8日日12时时0分分0秒的毫秒值。秒的毫秒值。复合数据复合数据类型型chapter07网页设计与Web编程教案内部对象内部对象Date对象对象 Date对对象象的的方方法法主主要要分分为为两两类类：一一类类用用来来读读取取存存储储在在对对象象中中的的日日期期和和

74、时时间间信信息息，方方法法名名以以get开开始始；一一类类用用来来设设置置存存储储在在对对象象中中的的日日期期和和时时间间信信息息，方方法法名名以以set开开始始。get或或set方方法法又又可可以以分分为为两两类类：一一类类以以本本地地时时间间格格式式来来读读取取或或设设置置存存储储在在对对象象中中的的日日期期和和时时间间信信息息，读读取取时时会会完完成成GMT时时间间到到本本地地时时间间的的转转换换，设设置置时时会会完完成成本本地地时时间间到到GMT时时间间的的转转换换。另另一一类类以以GMT时时间间格格式来直接读取或设置存储在对象中的日期和时间信息。式来直接读取或设置存储在对象中的日期和

75、时间信息。 例如：例如：var d=Date.parse(August 8, 2008 20:00:00); alert(new Date(d).getUTCHours( ); /返回返回12 var t=Date.UTC(2008,7,8,20,0,0); alert(new Date(t).getUTCHours( ); /返回返回20复合数据复合数据类型型chapter07网页设计与Web编程教案n数组数组 数数组组是是一一种种经经常常使使用用的的复复合合数数据据类类型型，它它包包含含若若干干编编码码的的数数据据段段。每每个个编编码码的的数数据据段段被被称称为为该该数数组组的的一一个个元

76、元素素，每每个个元元素素的的编编码码被被称称为为下下标标，下下标标从从0开开始始。数数组组在在JavaScript中中是是以以对对象象的的方方式式实实现现的的，同同一一数数组组中中的的不不同同元元素素可可以以具具有有不不同同的的数数据据类类型型，元元素素的的个个数数(数组长度数组长度)也可以是不固定的。也可以是不固定的。创建数组创建数组方式一：方式一：var 数组名数组名 = new Array( ); 用用这这种种方方式式创创建建的的数数组组是是一一个个不不包包含含元元素素的的空空数组，数组长度为数组，数组长度为0。 例如：例如：var ary=new Array( );复合数据复合数据类型

77、型chapter07网页设计与Web编程教案方式二：方式二： var 数数组组名名 = new Array(初初值值1,初初值值2,初初值值3,初初值值n);用用这这种种方方式式创创建建的的数数组组包包含含n个个元元素素，通通过过构构造造函函数数Array( )带带的的实实参参列列表给每个元素赋予明确的初值，初值的数据类型可以各不相同。表给每个元素赋予明确的初值，初值的数据类型可以各不相同。 例如：例如：Date d=new Date( ); var ary=new Array(123, JavaScript, true, d);方式三：方式三：var 数组名数组名 = new Array(数

78、值数值); 用用这这种种方方式式创创建建的的数数组组具具有有指指定定的的元元素素个个数数，传传入入构构造造函函数数Array( )的数值参数明确指定了数组长度。的数值参数明确指定了数组长度。 例如：例如：var ary=new Array(10);方式四：方式四：var 数组名数组名 = 初值初值1,初值初值2,初值初值3,初值初值n; 例如：例如：var ary=Hello, 5.68, false; 复合数据复合数据类型型chapter07网页设计与Web编程教案引用数组元素引用数组元素 一般格式：一般格式：数组名数组名下标下标 其中下标的取值范围为其中下标的取值范围为0下标数组长度下标数

79、组长度-1。 例如：例如：var ary=new Array(4); ary0=123; ary1=true; ary2=JavaScript; ary3=new Date( ); for(var i=0;i4;i+) document.write(aryi+);复合数据复合数据类型型chapter07网页设计与Web编程教案不固定的数组长度不固定的数组长度JavaScript中中的的数数组组可可以以具具有有任任意意个个数数的的元元素素，可可以以在任何时候改变数组的长度。在任何时候改变数组的长度。 例如：例如：var ary=new Array( ); /数组长度为数组长度为0 ary0= C

80、hina; /数组长度为数组长度为1 ary1=new Date( ); /数组长度为数组长度为2 ary2=78.59; /数组长度为数组长度为3数数组组的的length属属性性可可读读可可写写。如如果果给给length设设置置一一个个比比它它当当前前值值小小的的值值，那那么么数数组组将将会会被被截截断断，这这个个长长度度之之外外的的元元素素都都会会被被抛抛弃弃；如如果果给给length设设置置的的值值比比当当前前值值大大，那那么么新新的的、未未定定义义初初值值的的元元素素就就会会添添加加到数组中，使数组增长到新指定的长度。到数组中，使数组增长到新指定的长度。复合数据复合数据类型型chapt

81、er07网页设计与Web编程教案例如：例如：var ary=China, 3.14, true, 911; alert(ary.length); /数组长度为数组长度为4 ary.length=3; /数组被截断，长度为数组被截断，长度为3 alert(ary3); /ary3的值为的值为undefined多维数组多维数组当当数数组组元元素素是是数数组组时时，就就可可以以定定义义出出多多维维数数组组。例例如如，定义一个定义一个43的二维数组：的二维数组： var mulAry=new Array(4); for(var x=0;xmulAry.length;x+) mulAryx=new Ar

82、ray(3);引用二维数组元素：引用二维数组元素：数组名数组名行下标行下标列下标列下标例如：例如： for(var i=0; imulAry.length;i+) for(var j=0;jmulAryi.length;j+) mulAryij=i+j;复合数据复合数据类型型chapter07网页设计与Web编程教案n浏览器对象模型浏览器对象模型(BOM) BOM提提供供了了独独立立于于内内容容而而与与浏浏览览器器窗窗口口进进行行交交互互的的对对 象象 ， 如如 window、 location、 history等等 ， 其其 中中window对象是整个对象是整个BOM的核心。的核心。wind

83、ow对象对象 window对对象象表表示示整整个个浏浏览览器器窗窗口口，是是BOM的的顶顶级级对对象象，其其常常用用属属性性和和方方法法参参考考教教材材P197的的表表7-9和和表表7-10。 注注意意：window对对象象是是默默认认的的参参考考对对象象，因因此此在在引引用用该该对对象象的的属属性性和和方方法法时时，可可以以不不指指定定window。例如：例如：window.alert(欢迎光临欢迎光临); 等价于等价于 alert(欢迎光临欢迎光临);对象模型象模型chapter07网页设计与Web编程教案history对象对象 history对对象象是是window对对象象的的属属性性，

84、代代表表浏浏览览器器窗窗口口最最近近访访问问页页面面的的URL列列表表。用用户户可可以以通通过过back( )、forward( )或或go( )方法来寻找符合条件的历史记录。方法来寻找符合条件的历史记录。back( )：浏浏览览器器载载入入历历史史URL地地址址列列表表中中当当前前URL的的前一个前一个URL，如同按下工具栏的，如同按下工具栏的Back按钮。按钮。forward( )：浏浏览览器器载载入入历历史史URL地地址址列列表表中中当当前前URL的下一个的下一个URL，如同按下工具栏的，如同按下工具栏的Forward按钮。按钮。go(n)：参参数数n表表示示前前进进或或后后退退的的页页

85、面面数数，正正数数表表示示前前进进，负负数数表表示示后后退退。如如history.go(-2)是是后后退退到到前前两两页页，history.go(1)是前进到下一页。是前进到下一页。 对象模型象模型chapter07网页设计与Web编程教案location对象对象 location对对象象是是window对对象象的的属属性性，代代表表当当前前打打开开窗窗口口或或指指定定框框架架的的URL信信息息。常常用用属属性性和和方方法法包包括：括：href属性：用于获取或设置窗口的属性：用于获取或设置窗口的URL。 例如：例如：location.href=http:/;replace( )：实实现现URL

86、地地址址的的导导航航，并并且且从从历历史史URL地址列表中删除引用该方法的页面地址列表中删除引用该方法的页面URL。 例如：例如：location.replace();reload(parameter)：重重载载当当前前页页面面，与与浏浏览览器器的的Refresh按按钮钮功功能能类类似似。参参数数parameter为为false表表示示从从浏浏览览器器缓缓存存中中载载入入，为为true表表示示从从服服务务器器端端载入，默认值为载入，默认值为false。 对象模型象模型chapter07网页设计与Web编程教案document对象对象 document对对象象是是window对对象象的的属属性性

87、，代代表表在在浏浏览览器器中中载载入入的的文文档档，它它是是唯唯一一一一个个既既属属于于BOM，又又属属于于DOM的的对对象象。从从BOM角角度度看看，document对对象象主主要要用用来来访访问问文文档档的的各各个个部部分分，并并提提供供页页面面自自身身的的信息。信息。document对象的常用属性参考教材对象的常用属性参考教材P200的表的表7-11。document对对象象的的最最常常用用方方法法是是write( )，用用来来动动态生成页面内容。态生成页面内容。 例如：例如： document.write(Hello+ World!); 等价于：等价于： document.w

88、rite(Hello,  World!); 对象模型象模型chapter07网页设计与Web编程教案n文档对象模型文档对象模型(DOM) DOM是是面面向向HTML和和XML的的应应用用程程序序接接口口(API)，为为文文档档提提供供结结构构化化表表示示，并并定定义义如如何何通通过过脚脚本本来来访访问问文文档档结结构构。DOM独独立立于于具具体体的的编编程程语语言言，用用户户可可以以使使用用任任何何脚脚本本语语言言来来访访问问文文档对象。档对象。节点树节点树 DOM将将文文档档表表示示为为一一棵棵由由不不同同层层级级节节点点构构成成的的节节点点树树，树树上上的的各各个个节节点点表表示

89、示了了文文档档的的不不同部分。同部分。 节点层次节点层次 简单文档简单文档 titlehtml节点层次节点层次headbodyp简单文档简单文档document对象模型象模型chapter07网页设计与Web编程教案DOM Level 1 DOM Level 1规规范范由由DOM Core和和DOM HTML两个模块构成。两个模块构成。DOM Core：提提供供了了基基于于XML的的文文档档结结构构图图，以方便访问和操作文档的任意部分。以方便访问和操作文档的任意部分。对象模型象模型chapter07网页设计与Web编程教案var xmlDoc=new ActiveXObject(Microso

90、ft.XMLDOM);xmlDoc.async=false;xmlDoc.load(citylist.xml);var cities=xmlDoc.getElementsByTagName(city);var csel=document.createElement(select);var op, cityName, txtNode, i;for(i=0;icities.length;i+) op=document.createElement(option); cityName=citiesi.childNodes0.nodeValue; txtNode=document.createTextN

91、ode(cityName); op.appendChild(txtNode); csel.appendChild(op);document.body.appendChild(csel); 武汉武汉 北京北京 上海上海 广州广州citylist.xmlchapter07网页设计与Web编程教案DOM HTML：扩扩展展DOM Core，增增加加了了一一些些专专门门针针对对HTML文文档档的属性和方法。的属性和方法。l允许将允许将HTML标签的属性作为标签的属性作为DOM属性进行访问。例如：属性进行访问。例如：在文档中显示边框宽度为在文档中显示边框宽度为1的图像的图像pic1.jpgvar oIm

92、g=document.createElement(img);oImg.setAttribute(src,pic1.jpg);oImg.setAttribute(border,1);document.body.appendChild(oImg);var oImg=document.createElement(img);oImg.src=pic1.jpg;oImg.border=1;document.body.appendChild(oImg);DOM CoreDOM HTML对象模型象模型chapter07网页设计与Web编程教案l增增加加对对应应于于特特定定HTML标标签签的的DOM属属性性和

93、和方方法法。例例如如，创建一个创建一个1行行2列的列的HTML表格：表格：var oTable=document.createElement(table);oTable.setAttribute(border,1);oTable.setAttribute(width,80%);var oTbody=document.createElement(tbody);oTable.appendChild(oTbody);var oTr= document.createElement(tr);oTbody.appendChild(oTr);var oTd1= document.createElement(

94、td);oTd1.appendChild(document.createTextNode(DOM Core);oTr.appendChild(oTd1);var oTd2= document.createElement(td);oTd2.appendChild(document.createTextNode(DOM HTML);oTr.appendChild(oTd2);document.body.appendChild(oTable);DOM Corevar oTable=document.createElement(table);oTable.border=1;oTable.width=8

95、0%;var oTbody=document.createElement(tbody);oTable.appendChild(oTbody);oTbody.insertRow(0); oTbody.rows0.insertCell(0); oTbody.rows0.cells0.appendChild(document.createTextNode(DOM Core);oTbody.rows0.insertCell(1);oTbody.rows0.cells1.appendChild(document.createTextNode(DOM HTML);document.body.appendC

96、hild(oTable);DOM HTML对象模型象模型chapter07网页设计与Web编程教案n事件与事件处理器事件与事件处理器 JavaScript的的事事件件处处理理机机制制使使Web应应用用程程序序开开发发者者能开发出具有交互性的动态页面。能开发出具有交互性的动态页面。事件事件定义了用户与页面交互时产生的各种操作。定义了用户与页面交互时产生的各种操作。 例例如如：单单击击超超链链接接或或按按钮钮会会触触发发Click事事件件，告诉浏览器发生了需要进行处理的单击操作。告诉浏览器发生了需要进行处理的单击操作。事事件件不不仅仅可可以以在在用用户户交交互互过过程程中中被被触触发发，浏浏览器自

97、身的状态改变也会触发事件。览器自身的状态改变也会触发事件。 例例如如：浏浏览览器器载载入入页页面面会会触触发发Load事事件件，浏浏览器窗口大小发生改变会触发览器窗口大小发生改变会触发Resize事件等。事件等。事件事件处理理chapter07网页设计与Web编程教案事件处理器事件处理器HTML元元素素的的事事件件属属性性也也被被称称为为事事件件处处理理器器，它它们们指指示示元素如何处理特定的事件。元素如何处理特定的事件。一一般般的的处处理理方方法法是是将将脚脚本本指指定定为为事事件件处处理理器器的的值值，以以响响应应系系统统或或用用户户的的操操作作。事事件件处处理理器器名名称称由由事事件件名

98、名加加一一个个“on”前缀构成，例如：前缀构成，例如： function showMsg( ) var btnName=document.getElementById(btn1); alert(您单击了名为您单击了名为 +btnName.value+ 的按钮的按钮); 事件事件处理理chapter07网页设计与Web编程教案n事件绑定事件绑定 事事件件绑绑定定是是指指构构造造能能响响应应系系统统或或者者用用户户动动作作的的 HTML 元元素素的过程，也称为事件处理。的过程，也称为事件处理。绑绑定定元元素素属属性性：将将事事件件绑绑定定到到HTML元元素素的的属属性性上上，形形成成事事件件属属性

99、性(事事件件处处理理器器)。事事件件属属性性的的值值在在形形式式上上是是被被引引号号包包含含的的JavaScript脚脚本本，最最常常见见的的值值是是一一条条调调用用某某个个函函数的语句。数的语句。绑绑定定对对象象属属性性：对对于于NN3+和和IE4+这这两两类类浏浏览览器器，可可以以把把事事件件绑绑定定到到对对象象属属性性上上，形形成成对对象象的的事事件件属属性性。对对象象的的事事件件属属性性名名称称是是元元素素事事件件属属性性的的小小写写形形式式，如如onclick、onmouseover等等。当当把把函函数数引引用用赋赋给给对对象象的的事事件件属属性性时时，就发生了绑定，函数引用是指不带

100、括号的函数名。就发生了绑定，函数引用是指不带括号的函数名。事件事件处理理chapter07网页设计与Web编程教案 function showMsg( ) var btnName=document.getElementById(btn1); alert(您单击了名为您单击了名为 +btnName.value+ 的按钮的按钮); 绑定元素属性绑定元素属性var ob;ob=document.getElementById(btn1);ob.onclick=showMsg;绑定对象属性绑定对象属性事件事件处理理chapter07网页设计与Web编程教案n取消元素的默认动作取消元素的默认动作 浏浏览览

101、器器对对于于一一些些特特定定的的HTML元元素素设设置置了了默默认认的的固固定定动动作作，如如按按下下提提交交按按钮钮会会自自动动将将表表单单的的内内容容送送出出去去等等。这这些些默默认认的的动动作作可可以以取取消消，方方法法是是在在事事件件处处理理过过程程中中返返回回一一个个布布尔尔值值，借借助助布布尔尔值值来来控控制制是是否否执行浏览器默认的动作执行浏览器默认的动作。取消表单的提交与复位动作取消表单的提交与复位动作取取消消表表单单的的提提交交动动作作：将将返返回回false值值的的函函数数引用赋给表单对象的引用赋给表单对象的onsubmit事件属性。事件属性。取取消消表表单单的的复复位位动

102、动作作：将将返返回回false值值的的函函数数引用赋给表单对象的引用赋给表单对象的onreset事件属性。事件属性。事件事件处理理chapter07网页设计与Web编程教案function formSubmit( ) return confirm(确定要提交吗确定要提交吗?,);function formReset( ) return confirm(确定要清除吗确定要清除吗?,);姓名：姓名：document.forms0.onsubmit=formSubmit; document.forms0.onreset=formReset取取消消表表单单的的提提交交与与复复位位动动作作userinf

103、o.aspchapter07网页设计与Web编程教案替换浏览器状态栏的信息替换浏览器状态栏的信息 当当光光标标经经过过超超链链接接上上方方时时，浏浏览览器器的的状状态态栏栏会会自自动动显显示示目目标标网网址址；当当光光标标离离开开超超链链接接上上方方时时，显显示示的的内内容容自自动动清清除。例如页面中有以下超链接：除。例如页面中有以下超链接： 武汉大学武汉大学 如如果果希希望望光光标标在在经经过过超超链链接接上上方方时时状状态态栏栏中中显显示示其其他他信信息息，可以将标签修改为：可以将标签修改为： 武汉大学武汉大学 事件事件处理理chapter07网页设计与Web编程教案取消取消标签的链接网页动作标签的链接网页动作 单单击击超超链链接接时时会会自自动动链链接接至至目目标标网网址址，可可以以根根据据需要取消该动作。例如：需要取消该动作。例如： 武汉大学武汉大学 事件事件处理理chapter07网页设计与Web编程教案The Endchapter07网页设计与Web编程教案