网页设计之-JavaScript 脚本编程.ppt

1、JavaScript 脚本编程,内容提要,JavaScript概述 词法规则 基本数据类型 运算符和表达式 核心语句 函数 复合数据类型 对象模型 事件处理,2020/12/5,网页设计与制作,2,JavaScript概述,JavaScript是由Netscape和Sun公司联合开发的基于对象和事件驱动的客户端脚本编程语言，通过它与HTML、XML、DOM、CSS、JavaApplet等技术的有机结合，可以开发出具有很强交互性的动态页面。 JavaScript是介于Java与HTML之间，基于对象和事件驱动的编程语言。,2020/12/5,网页设计与制作,3,脚本,服务器端脚本 首先在服务器执

2、行，将得到的结果转换成html流进行输出如asp,php,jsp等 客户端脚本 由服务器下载到客户端的浏览器中，由客户端的浏览器执行,2020/12/5,网页设计与制作,4,动作和事件,动作和事件 动作是由JavaScript和HTML代码组成的，该代码能执行各种特殊任务，如弹出一个信息框、播放一段音乐等。用户可以使用“行为”面板直接向页面中添加动作。 事件是浏览器生成的消息，指示该页的用户执行了某种操作。如果用户预先设置了某个动作，则事件将触发相应的动作发生，如弹出一个信息框等。,2020/12/5,网页设计与制作,5,JavaScript,JavaScript的特点： JavaScript

3、是一种脚本语言，采用小程序段的方式实现编程，可以直接嵌入HTML文档中。 JavaScript是一种基于对象的语言，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。 基于Java基本语句和控制流；没有严格的数据类型。 安全性：只能通过浏览器进行信息浏览或动态交互。 跨平台性：依赖于浏览器本身，与操作环境无关。,2020/12/5,网页设计与制作,6,JavaScript,2020/12/5,网页设计与制作,7,第一个JavaScript程序, 实时显示时间 当前时间：+ s+; /- ,2020/12/5,网页设计与制作,8,第一个JavaScript程序,使用JavaScript编写

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

5、ript的注释标识，其后的信息不被浏览器解释。,2020/12/5,网页设计与制作,10,浏览器对象,2020/12/5,网页设计 课程简介,11,JavaScript概述,Navigator对象的常用属性和取值,2020/12/5,网页设计 课程简介,12,JavaScript概述,Window对象的常用方法,2020/12/5,网页设计 课程简介,13,JavaScript概述,Document中的对象,2020/12/5,网页设计 课程简介,14,JavaScript概述,JavaScript中的事件,2020/12/5,网页设计 课程简介,15,JavaScript概述,基于对象 事件

6、驱动 解释性语言 简单性 实时性 跨平台性 安全性,JavaScript的特点,2020/12/5,网页设计与制作,16,JavaScript脚本的引入方法 通过与标签对引入。将JavaScript脚本代码放在与之间，浏览器自动识别该标签对并逐行解释其间的代码。 通过标签的src属性引入。将包含在与标签对之间的代码放入扩展名为.js的脚本文件中，然后在HTML文档中通过标签的src属性来引用该脚本文件。例如: ,在网页中嵌入JavaScript脚本,2020/12/5,网页设计与制作,17,JavaScript脚本的引入方法 通过JavaScript伪协议引入。伪协议是非标准化通信机制的统称，

7、JavaScript伪协议的一般格式为：javascript: URL。其中“javascript:”是伪协议说明符，URL的主体可以是任意的JavaScript代码，多个语句之间使用分号进行分隔。 例如： ,在网页中嵌入JavaScript脚本,2020/12/5,网页设计与制作,18,JavaScript脚本的引入方法 通过HTML的事件属性引入。HTML元素的事件属性用于指示如何处理特定的事件，方法是将脚本指定为事件属性的值，以响应系统或用户的动作。事件属性名称由事件名称加一个“on”前缀构成，如onClick，onMouseOver等。 例如： ,在网页中嵌入JavaScript脚本,

8、2020/12/5,网页设计与制作,19,嵌入JavaScript脚本的位置 JavaScript脚本可放在HTML文档中任何需要的位置。一般来说，可以在与标签对、与标签对之间放置JavaScript脚本代码。放置在与标签对之间的JavaScript脚本一般用于提前载入，以响应用户的页面动作，且一般不影响HTML文档的浏览器显示格局。如果需要在页面载入时动态生成页面内容，应将JavaScript脚本放置在与标签对之间。,在网页中嵌入JavaScript脚本,2020/12/5,网页设计与制作,20,标识符 在JavaScript中，标识符用来命名变量和函数。 标识符的第一个字符必须是字母、下划

9、线或美元符号，后续字符可以是字母、数字、下划线或美元符号。例如：x、user_name、U571、_pswd、$money都是合法的标识符。 不能使用JavaScript中的关键字作为标识符。在JavaScript中定义了20多个关键字，这些关键字是JavaScript内部使用的，如var、for、function、if等，它们都不能作为标识符使用。,词法规则,2020/12/5,网页设计与制作,21,词法规则,关键字和保留字 关键字是JavaScript语法自身的一部分，具有特殊的意义，不能用作标识符。 保留字是为将来的关键字而保留的单词，由于未来浏览器可能会实现这些保留字，因此它们最好也不

10、要作为标识符使用。,JavaScript的保留字,2020/12/5,网页设计与制作,22,词法规则,大小写敏感 JavaScript是一种区分大小写的脚本语言。在输入关键字、变量名、函数名以及其它所有标识符时，都必须采取一致的字符大小写形式。例如， “username”、“userName”、“UserName”代表三个不同的变量名。 许多JavaScript对象的属性和它们所代表的HTML标签的属性同名，在HTML中这些标签的属性可以以任意大小写的方式输入，但是在JavaScript中它们通常都有固定的大小写格式。例如，body标签的背景颜色属性可以声明为“bgcolor”、“bgColo

11、r”或者“BGCOLOR”，但代表body标签的document对象的背景颜色属性只能声明为“bgColor”。,2020/12/5,网页设计与制作,23,词法规则,空白字符 空白字符包括空格、制表符和换行符等，在编写脚本时占据一定的空间，以增强代码的可读性，方便开发人员查看和维护。 空格是使用最为频繁的空白字符，常被用作分隔符。,例1：sum = 3 + 10 ; sum=3+10;,例2：var x=typeof JavaScript;,2020/12/5,网页设计与制作,24,词法规则,语句结束符 JavaScript使用分号作为语句结束符，多个语句可写在不同行或同一行。例如： var

12、str=Welcome to JavaScript World!; document.write(str); 也可写成： var str=Welcome to JavaScript World!; document.write(str); 语句分行后，作为语句结束符的分号可以省略。 例如： var str=Welcome to JavaScript World! document.write(str),注意：省略分号不是一个好的编程习惯，它可能导致程序产生一种不明确的状态。,2020/12/5,网页设计与制作,25,词法规则,注释 JavaScript有单行注释和多行注释两种形式。 单行注释以

13、“/”开头，处于“/”和一行结尾之间的任何文本都被当作注释而被浏览器忽略掉。 多行注释以“/*”开头，以“*/”结尾，处于“/*”和“*/”之间的文本被当作注释，这些文本可以跨越多行，但是其中不能有嵌套的注释。 例如： /这是单行注释 /* *这是多行注释 *它是多行的 *它是多行的 */,2020/12/5,网页设计与制作,26,基本数据类型,基本数据类型定义了一组不可再分的值的集合，以及作用于该集合上的操作集。JavaScript支持的基本数据类型包括数值型、字符串型和布尔型，分别对应于不同的存储空间。 基本数据类型和常量 当某种基本类型的数据项直接出现在程序中时，称之为常 量，即值不能被

14、改变的量。 数值型：最基本的数据类型，包括整型和浮点型 整型常量：可以使用十进制、八进制或十六进制表示，如1234、0745、0 x93C等。 浮点型常量：可以使用小数或指数方法表示，如12.34、5.9e7、4.3e-5等。 特殊的数值型常量：Infinity表示正无穷大， -Infinity表示负无穷大，NaN表示“不是一个数值”、“没有意义的运算”或“无法转换成数值类型”。如5/0的运算结果为Infinity，-5/0的运算结果为-Infinity，0/0的运算结果为NaN。,2020/12/5,网页设计与制作,27,基本数据类型,数值型：最基本的数据类型，包括整型和浮点型,2020/1

15、2/5,网页设计与制作,28,基本数据类型,基本数据类型和常量 字符串型：表示文本的数据类型 字符串常量：用 或 括起来的若干个字符，如JavaScript、This is a book of C+等。 转义字符：以反斜杠 开头的具有特殊功能的字符。,2020/12/5,网页设计与制作,29,基本数据类型,基本数据类型和常量 布尔型：表示状态的数据类型 布尔常量：只有两个可能的值true和false，表示“真”和“假”两种状态。如53的运算结果为true，“Chinese”“China”的运算结果是false。 null和undefined null：null的类型是Object，用来表示一个

16、变量没有任何数值。例如： var empty=null; /empty的值为null undefined：undefined的类型也是undefined，表示变量没有定义任何值。 例如：var value; /value的值为undefined,基本数据类型,变量 变量是存放常量的容器，主要作用是存取数据。 变量的声明：在JavaScript中，可以先通过关键字var来声明变量，然后再使用。 例如：var num; var str, flag; num = 100; str = JavaScript Language; flag = true;,2020/12/5,网页设计与制作,31,Jav

17、aScript基本数据结构,变量 变量的主要作用是存取数据和提供存放信息的容器，在JavaScript程序中必须明确变量的命名、声明和作用域。 变量的命名：必须以字母、下划线或$开头，后面可以跟数字、字母和下划线。不能使用JavaScript中的关键字作为变量名。例如： 正确的变量名：num1、_value、thisbook 错误的变量名：1_max、C+、this、true 变量的声明：在JavaScript中，不论变量的数据类型为什么，都用var关键字来声明。例如： var num = 1; var str = JavaScript Language;,2020/12/5,网页设计与制作,

18、32,变量的初始化：变量可以在声明的同时指定初始值。 例如：var num = 100; var str = JavaScript Language, flag = true; 仅用var声明但未初始化的变量获得默认初值undefined。 变量的类型 实际类型视变量内容而定。例如，上例中的num为数值型变量，str为字符串型变量，flag为布尔型变量。 变量的类型可以根据变量内容的改变而自动更改。 例如：var num = 1; /num为数值型变量 num = Hello World!; /num为字符串型变量 变量可以不经过var声明就直接使用，而在变量赋值时自动声明该变量。 例如：nu

19、m = 100; str = JavaScript Language; flag = true; 好的编程风格：所有变量在第一次使用前都用var进行声明！,基本数据类型,2020/12/5,网页设计与制作,33,基本数据类型,变量的作用域：分为全局变量和局部变量 全局变量：在所有函数外声明的变量，在程序的每个地方都可以使用； 局部变量：在某函数内声明的变量，只对该函数可见。 例如： var attr = 1; /attr为全局变量 function testFunc( ) var tmp = attr + 1; /tmp为局部变量 return tmp; var sum = testFunc(

20、 ); /sum为全局变量 document.write(attr = , attr, ); document.write(sum = , sum, ); document.write(tmp = , tmp);,演示,？,运算符和表达式,运算符是完成操作的一系列符号，JavaScript支持的运算符包括算术运算符、比较运算符、逻辑运算符等。 表达式是由变量、常量和运算符连接起来的式子，根据运算符类型的不同，表达式可分为算术表达式、比较表达式、逻辑表达式等。 算术运算符和算术表达式,2020/12/5,网页设计与制作,35,运算符和表达式,比较运算符和比较表达式,当操作数类型不同时进行类型转换

21、,当操作数类型不同时不进行类型转换,2020/12/5,网页设计与制作,36,运算符和表达式,逻辑运算符和逻辑表达式,2020/12/5,网页设计与制作,37,运算符和表达式,位运算符和位表达式,2020/12/5,网页设计与制作,38,运算符和表达式,赋值运算符和赋值表达式,2020/12/5,网页设计与制作,39,条件运算符和条件表达式 条件运算符有3个操作数，一般格式如下： 条件式 ? valueB : valueC 当条件式成立时，valueB会被赋给整个条件表达式，否则将valueC赋给条件表达式。 例如： var min = 67 ? 6 : 7; 思考：假设x、y、z三个变量均已

22、赋值，请写出求三个变量中最大值和最小值的条件表达式。,运算符和表达式,2020/12/5,网页设计与制作,40,字符串运算符和字符串表达式,运算符和表达式,2020/12/5,网页设计与制作,41,逗号运算符和逗号表达式 逗号既可以作为分隔符，也可以作为运算符。逗号表达式的一般格式如下： 表达式1, 表达式2, , 表达式n 逗号表达式的求值过程：先求表达式1的值，再求表达式2的值，依次下去，最后求表达式n的值，表达式n的值即为整个逗号表达式的值。 例如： var a=2, b=4, c=6, x, y; /逗号作为分隔符 y=(x=a+b, x+c); /逗号作为运算符,运算符和表达式,20

23、20/12/5,网页设计与制作,42,基本控制结构 基本控制结构用来决定程序的处理流程，JavaScript 支持三种结构：顺序、选择和循环。,核心语句,2020/12/5,网页设计与制作,43,分支结构,2020/12/5,网页设计与制作,44,多分支结构,2020/12/5,网页设计与制作,45,循环结构,2020/12/5,网页设计与制作,46,表达式和复合语句 由各种类型的表达式加上分号组成的语句被称为表达式语句。 例如： sum+; /算术表达式语句 str=Olympic + 2008; /赋值表达式语句 用大括号“ ”括起来的语句序列称为复合语句，用来在需要使用单行语句的地方完成

24、多项任务。 例如： var angle=Math.PI; var cosine=Math.cos(angle); alert(cos(+angle+)=+cosine); ,核心语句,2020/12/5,网页设计与制作,47,条件语句 选择结构的核心语句是条件语句，通过判断某个逻 辑条件是否成立，从给定的各种可能操作中选择一 种执行。条件语句包括if语句和switch语句。 if语句的三种形式 单分支选择。其一般格式如下： if (表达式) 语句; 功能：计算表达式的值，若计算结果为true，执行语句；否则跳过if语句执行其后的语句。 例1：if(count 10) count = 0; 例2

25、：if(count 10) count = 0; alert(count被重设为0!); ,核心语句,2020/12/5,网页设计与制作,48,双分支选择。其一般格式如下： if (表达式) 语句1; else 语句2; 功能：如果表达式的计算结果为true，执行语句1；否则执行语句2。 例如： var num=Math.round(Math.random( )*100); if(num%2=0) alert(num+是一个偶数); else alert(num+是一个奇数);,核心语句,2020/12/5,网页设计与制作,49,多分支选择。其一般格式如下： if (表达式1) 语句1; el

26、se if (表达式2) 语句2; else if (表达式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 if (age40) alert(四十不惑); else alert(英雄迟暮);,核心语句,

27、2020/12/5,网页设计与制作,50,if语句的嵌套：在if语句中又包含一个或多个if语句。在嵌套的if 语句中，可能包含多个if和else，它们的匹配原则是：一个else总是与其之前距离最近且尚未配对的if 匹配。 例如： var max, a=15, b=36, c=28; if (a=b) if (a=c) max=a; else max=c; else if (b=c) max=b; else max=c; alert(max=+max);,核心语句,2020/12/5,网页设计与制作,51,JavaScript程序构成,例 根据用户的不同操作在页面上显示不同的信息 ,演示,202

28、0/12/5,网页设计与制作,52,switch语句 switch语句用来实现多分支选择结构，其一般形式如下： switch (表达式) case 常量表达式1: 语句1; break; case 常量表达式2: 语句2; break; case 常量表达式n: 语句n; break; default: 语句n+1; 功能：比较表达式的值是否与某一个case后面的常量表达式的值相等，如果相等，则执行相应的语句；如果所有case后面常量表达式的值都不与表达式的值相等，则执行default后面的语句。default子句可以省略，即所有常量表达式的值都不满足条件时直接跳过switch语句执行其后的语

29、句。,核心语句,2020/12/5,网页设计与制作,53,例如： var age=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子句后会继续执行下一个case子

30、句，直到遇上break语句或者所有的子句都被执行完为止。,核心语句,2020/12/5,网页设计与制作,54,JavaScript程序构成,例 根据用户的不同操作在页面上显示不同的信息 var name=prompt(请输入您的大名：, ); /弹出提示窗口 var user=wzy; switch(name) case : document.write(您没有输入任何信息!); break; case null: document.write(您取消了操作!); break; case user: document.write(欢迎 ,name, 光临!); break; default:

31、document.write(欢迎 ,name, 加入!); ,演示,2020/12/5,网页设计与制作,55,JavaScript程序构成,switch语句 break的作用： 当某个case后面的语句段执行完后，直接跳出整个switch控制语句。如果省略break，在执行完某个case后面的语句段后会继续执行下一个case后面的语句段，直到遇上break或者所有的语句段都被执行完。 思考：省略上例中所有的break语句，当用户在提示窗口中执行不同操作时，页面上会显示什么信息？,演示,2020/12/5,网页设计与制作,56,循环语句 循环语句允许在逻辑条件成立时反复执行相同 的语句(循环体

32、)。 while语句 一般格式：while (表达式) 语句; 功能：计算表达式的值，如果计算结果为true，反复执行语句；否则结束循环。语句可以是单行语句或者复合语句。 例如：用while语句编写求1+3+5+99累加和的程序： var sum=0, i=1; while(i=100) sum+=i; i+=2; ,核心语句,2020/12/5,网页设计与制作,57,do-while语句 一般格式：do 语句; while (表达式); 功能：反复执行语句，直到表达式的计算结果为false时结束循环。 例如：用do-while语句编写求1+3+5+99累加和的程序： var sum=0, i

33、=1; do sum+=i; i+=2; while(i=100);,核心语句,2020/12/5,网页设计与制作,58,for语句 一般格式：for (表达式一; 表达式二; 表达式三) 语句; 功能： (1) 计算表达式一的值； (2) 计算表达式二的值，如果计算结果为true，进入(3)，否 则进入(6)； (3) 执行语句； (4) 计算表达式三的值； (5) 回到(2)继续执行； (6) 结束循环，执行for语句的后续语句。 例如：用for语句编写求1+3+5+99累加和的程序： var sum=0, i; for(i=1; i=100; i+=2) sum+=i;,核心语句,202

34、0/12/5,网页设计与制作,59,循环语句的嵌套 循环语句中又包含一个或多个循环语句称为循环语句的嵌套。 例如： var i,j; for(i=1;i); for(j=1;j); for(i=1;i); for(j=1;j); ,核心语句,2020/12/5,网页设计与制作,60,break和continue语句 break语句只能用在循环语句和switch语句中，作用是停止执 行尚未执行的部分，直接从循环语句或switch语句中跳出来。 continue语句只能用在循环语句中，作用是跳过循环体内剩 余的语句而提前进入下一次循环。 例如：var sum=0, i=0; while(true)

35、 i+; if(i100) break; if(i%2=0) continue; sum+=i; ,核心语句,2020/12/5,网页设计与制作,61,标签语句 在JavaScript中，语句可以在其前面加上标签，一般格式为： 标识符: 语句; 标签必须是合法的JavaScript标识符，不能是关键字或保留字。标签可以与程序中的变量或函数同名。 通过给语句加标签，达到在程序其他位置引用该语句的目的。 例如：outer: for(i=0; ii) document.write(); continue outer; k=i*j; document.write(k+ ,核心语句,2020/12/5,

36、网页设计与制作,62,在JavaScript中，函数用来封装那些在程序中反复使用的程序段，常作为事件处理程序被调用。 函数的基本组成 函数定义 一般格式：function 函数名(参数列表) 函数体; return 返回值; 说明： function：定义函数的关键字。 函数名：函数的标识符，表示函数的入口地址。 参数列表：包含若干个参数，不同参数间用逗号间隔。当调用函数时，可以向参数列表中传入常量值、变量值或其它表达式的值，函数内的程序语句可以通过参数名称来引用传进来的这些值。参数列表也可以为空。 函数体：实现函数功能的程序语句。 return：指定函数返回值的关键字。return语句负责将

37、函数的执行结果返回到程序中函数调用的位置，一个函数中最多只能有一条return语句。,函数,2020/12/5,网页设计与制作,63,例 定义一个求阶乘的函数 function fact (n) var s = 1, i; for( i=1; i=n; i+ ) s=s*i; return s; ,函数,2020/12/5,网页设计与制作,64,函数调用 一般格式：函数名(实参列表); 说明： 实参列表中包含若干个实际参数，参数之间用逗号间隔，实参个数应与函数定义时参数列表中的参数个数相等。实参的表示形式可以是常量、变量或者表达式，所有实参都必须得到具体的赋值。 函数调用时的参数传递都是以值传

38、递的方式进行的。也就是说，在函数中将某个传进来的变量值改变了，并不会影响原来函数外的变量值。 例如：function inc(n) n+; alert(n); var x = 5; inc(x); alert(x);,函数,函数调用,程序运行结果： n=6 x=5,2020/12/5,网页设计与制作,65,函数的作用域 在函数外部声明的变量称为全局变量，全局变量在程序的 任何地方都可以使用。在函数内部声明的变量称为局部变 量，局部变量应用关键字var声明，没有用var声明的局部 变量在函数执行完毕后会变成全局变量。,程序运行结果： sum = 8,程序运行结果： y 未定义,function

39、inc(n) y = +n; return 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);,函数,2020/12/5,网页设计与制作,66,函数的嵌套与递归 函数的嵌套：嵌套定义是指在定义一个函数的过程中定义另一个函数，定义在某个函数内部的函数称为局部函数，其作用域局限在所属的框架函数。嵌套调用是指在调用一个函数的过程中又调用另一个函数。 例如：function lcm(m, n)

40、/框架函数，求最小公倍数 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); ,函数,2020/12/5,网页设计与制作,67,函数的递归：递归调用是指函数在调用过程中直接或间接调用自身，是一种特殊的嵌套调用。 例如：function fac(n) var res; if(n=1) r

41、es=1; else res=n*fac(n-1); /递归调用 return res; var n=parseInt(prompt(请输入整数,); var f=fac(n); alert(n+ 的阶乘是 +f);,函数,2020/12/5,网页设计与制作,68,对象 对象是属性与方法的集合，这些属性和方法被用来 描述对象的特性与行为。 创建对象 方式一：var 对象名 = new Object( ); 用Object( )建立的对象没有任何属性，可以通过“对象名.属性名=属性值;”的方式为新建对象增加属性并指定属性值。 例如：var teacher=new Object( ); teach

42、=杨鏖丞; teacher.age=32; teacher.sex=男; 注意：Object( )实际上是内部对象Object的构造函数。Object对象是所有JavaScript对象的父对象，它所提供的属性和方法会被其他的对象继承。,复合数据类型,2020/12/5,网页设计与制作,69,创建对象 方式二： var 对象名= new 自定义构造函数名(实参列表); 实参列表用来初始化新建对象的属性。新建对象的属性声明是在属性名称前加上“this.”，然后将参数值指定给它，或是直接设定属性的初始值。 例如：function person(n, a, s) =n;

43、 this.age=a; this.sex=s; var yac=new person(杨鏖丞,32, 男); var yyq=new person(余颖秋,30, 女); 注意：关键字this是对当前对象的引用。,复合数据类型,2020/12/5,网页设计与制作,70,存取对象属性 方式一：对象名.属性名 例如：function birthday(y, m, d) this.year=y; this.month=m; this.day=d; var p1=new birthday(2000, 7, 25); alert(生于+p1.year+年+ p1.month+月+p1.day+日);

44、可以根据对象的个别需求来增加它自己的属性，个别定义的对象属性不会影响其他对象。 例如： var p2=new birthday(1976, 2, 15); p2.time=3:25; /p1对象不具备time属性,复合数据类型,2020/12/5,网页设计与制作,71,存取对象属性 方式二：对象名属性名|属性索引值 例如：,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;

45、 p22=15; alert(生于+p20+ 年+p21+月+ p22+日);,复合数据类型,2020/12/5,网页设计与制作,72,定义和调用对象方法 对象的方法是描述对象动态特征的操作序列，即函数。定义对象方法和定义对象属性非常类似，只需要将已定义函数的名称指定给对象方法名，或者直接定义函数。一般格式为： 对象名.方法名 = 已定义函数名; 或者 对象名.方法名 = 函数定义; 例如： function calAge( ) return (new Date( ).getYear( )-this.year; function birthday(y, m, d) this.year=y; t

46、his.month=m; this.day=d; this.getAge=calAge; /定义对象方法 var p=new birthday(2000, 7, 25); alert(年龄： +p.getAge( );,复合数据类型,2020/12/5,网页设计与制作,73,定义和调用对象方法 上述对象方法定义也可写成： function birthday(y, m, d) this.year=y; this.month=m; this.day=d; this.getAge=function( ) return (new Date( ).getYear( )-this.year; 调用对象方法

47、的一般格式为： 对象名.方法名(实参列表) 例如：var p1=new birthday(1997, 7, 1); var p2=new birthday(2008, 8, 1); document.write(年龄1: +p1.getAge( )+ 年龄2: +p2.getAge( );,复合数据类型,2020/12/5,网页设计与制作,74,对象操作语句及运算符 for.in语句 一般格式：for(变量名 in对象名) 循环体; 该语句会将对象包含的所有属性逐个取出来，当取得对象的一个属性后会将该属性的名称指定给变量，并继续执行for循环直到取得对象的最后一个属性。该语句的优点是无需知道对

48、象中属性的名称和个数即可进行操作。 例如：var p=new birthday(1978, 10, 1); for(var prop in p) document.write(属性名: +prop+ ,复合数据类型,2020/12/5,网页设计与制作,75,对象操作语句及运算符 with语句 一般格式：with(对象名) 语句段; 该语句会将语句段内出现的任何变量和函数都认为是对象的属性和方法，从而简化对象的引用过程。如果语句段内的变量或函数不是对象的属性或方法，则会自动引用with语句外部的变量或函数。 例如： var nativity=湖北省武汉市; var p=new birthday(

49、1992, 11, 3); with(p) alert(生于+year+-+month+-+day); alert(籍贯：+nativity); ,复合数据类型,2020/12/5,网页设计与制作,76,对象操作语句及运算符 typeof运算符 一般格式：typeof 运算量 typeof运算符可放在任意类型的运算量之前，返回结果是一个字符串，表明运算量的数据类型。 例如： var p=new birthday(1985, 8, 8); var str=JavaScript; var num=1000; var flag=false; function func( ) alert(typeof

50、 p); /返回object alert(typeof str); /返回string alert(typeof num); /返回number alert(typeof flag); /返回boolean alert(typeof func); /返回function alert(typeof x); /返回undefined,复合数据类型,2020/12/5,网页设计与制作,77,对象操作语句及运算符 delete运算符 一般格式：delete 运算量 delete运算符用来删除放在其后的运算量，如果运算量被删除，返回true，否则返回false。运算量可以是变量、对象属性和数组元素。 例

51、如： 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); /返回true alert(delete p.year); /返回true alert(delete Math.PI); /返回false alert(delete ary2); /返回true 注意：用关键字var声明的变量，内部对象的属性不能用delete运算符删除。,复合数据类型,2020/12/5,网页设计与制作,

52、78,内部对象 JavaScript提供了非常丰富的内部对象，用户可以直接使用这些对象的属性和方法来实现快速的程序开发。 String对象 创建String对象的一般格式为： var 对象名 = new String( ); 或 var 对象名 = new String (字符串参数); 例如：var strObj=new String(Hello World!); 注意：在实际应用中，很少通过new运算符和String( )构造函数创建String对象，而是直接使用字符串变量或字符串常量。例如： var strVar=Java is a oriented-object language; s

53、trVar是一个存储了字符串值的基本类型变量， JavaScript规定可以将其作为拥有属性和方法的String对象处理。,复合数据类型,2020/12/5,网页设计与制作,79,内部对象 Math对象 Math对象用于完成比简单算术运算更高级的数学处理。Math对象不需要通过new运算符和构造函数创建，用户可以通过以下方式直接访问它的属性和方法： Math.属性名 Math.方法名(实参列表) 例如：log=Math.LN10; root=Math.SQRT2; alert(Math.floor(log); alert(Math.ceil(log); alert(Math.round(roo

54、t); alert(Math.max(log, root); alert(Math.floor(Math.random( )*6)+1);,复合数据类型,2020/12/5,网页设计与制作,80,内部对象 Date对象 Date对象提供了处理日期和时间的强大功能，创建Date对象的一般格式为： var 对象名 = new Date (实参列表); 例如：var d1=new Date( ); var d2=new Date(2008, 7, 8, 20, 0, 0); 注意：在使用Date对象进行日期和时间处理时要考虑时区的因素。在JavaScript中，Date对象中包含的日期和时间信息实际

55、上是一个以毫秒为单位的值，该值从GMT(格林尼治标准时间)时区的1970年1月1日0时0分0秒开始计算。以上面的d2对象为例，如果PC内部时钟设置的时区为东八区(北京所在时区)，那么可认为d2中包含的具体时间是北京时间2008年8月8日20时0分0秒，但实际存储的是格林尼治标准时间2008年8月8日12时0分0秒的毫秒值。,复合数据类型,2020/12/5,网页设计与制作,81,内部对象 Date对象 Date对象的方法主要分为两类：一类用来读取存储在对象中的日期和时间信息，方法名以get开始；一类用来设置存储在对象中的日期和时间信息，方法名以set开始。get或set方法又可以分为两类：一类

56、以本地时间格式来读取或设置存储在对象中的日期和时间信息，读取时会完成GMT时间到本地时间的转换，设置时会完成本地时间到GMT时间的转换。另一类以GMT时间格式来直接读取或设置存储在对象中的日期和时间信息。 例如：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,复合数据类型,2020/12/5,网页设计与制作,82,数组 数组是一种经常使用的复合数据类型，它包含若干编码的数据段。每个编码的数据段被称为该数组的一个元素，每个元素的编码被称为下标，下标从0开始。数组在Java