实验5 Java Script对象
一、实验目的
? 掌握JavaScript语言的对象分类。
? 掌握JavaScript语言的核心对象使用方法。
? 掌握JavaScript中建立用户自定义对象的方法及其使用。 二、JavaScript用户自定义对象
?
了。
虽然ECMAScript越来越正规化了,但创建对象的方法却被置之不理。在高级的编程语言(如C#)中,
创建对象的方法被明确的定义了。所以不会有太大的分歧。但在脚本语言中创建对象的方法就是多种多样
2.1 工厂方式
由于对象的属性可在对象创建后动态定义,所以许多开发者都在初次引入JavaScript时编写类似下面的代码:
Var oCar=new Object(); oCar.color=\ oCar.doors=4; oCar.mpg=23;
oCar.showColor=function(){alert(this.color);};
在这段代码中,创建对象car。然后给它设置几个属性:它的颜色是红色,有四个门,每加仑油23英里。最后一个属性是指向函数的指针,意味着该属性其实是个方法。执行这段代码后,就可以使用对象car了。可是要创建多个car实例就麻烦了。
要解决此问题,开发者可以创建并返回特定类型的对象的工厂函数。例如,函数CreateCar()可用于封装前面列出的创建car对象的操作: Function createCar() {
Var oTempCar=new Object(); oTempCar.color=\ oTempCar.doors=4; oTempCar.mpg=23;
oTempCar.showColor=function(){alert(this.color)};
return oTempCar; }
Var oCar1=createCar(); Var oCar2=createCar();
这里,前面的所有代码都包含在createCar()函数中,此外还有一行额外的代码,返回Car对象作为函数值。调用此函数时,将创建新对象,并赋予它所有必要的属性,复制出一个前面说明的car对象。使用该方法,可以容易地创建car对象的两个版本,他们的属性完全一样。当然,还可以修改creatCar()函数,给它传递各个属性的默认值,而不是赋予属性默认值: Function createCar(sColor,iDoors,iMpg)
{
Var oTempCar=new Object(); oTempCar.color= sColor; oTempCar.doors= iDoors; oTempCar.mpg= iMpg;
oTempCar.showColor=function(){alert(this.color)}; return oTempCar; }
Var oCar1=createCar(\ Var oCar2=createCar(\
oCar1.showColor(); // 输出\ oCar2.showColor(); // 输出\
给createCar()函数加上参数,即可为要创建的car对象的color、doors和mpg属性赋值。使这两个对象具有相同的属性,却有不同的属性值。但这里有个问题:每次调用函数createCar(),都要创建新函数showColor(),意味着每个对象都有自己的showColor()版本。事实上,每个对象用的都是同一段代码。这样的定义方法还有一个如下的变形: Function Car(sColor,iDoors,iMpg) {
this.color= sColor; this.doors= iDoors; this.mpg= iMpg;
this.showColor=function(){alert(this.color)}; }
Var oCar1=new Car(\ Var oCar2=new Car(\
oCar1.showColor(); // 输出\ oCar2.showColor(); // 输出\
这个方法和上一个方法有个一样的缺陷:重复的创建了showColor()函数。为了解决这个缺陷我们可以用下面的方法。 2.2 原型方式
该方法利用了对象的Prototype属性。用空构造函数来设置类名,然后所有的属性和方法都被直接赋予prototype属性: Function Car() {}
Car.prototype.color=\ Car.prototype.doors=4; Car.prototype.mpg=23;
Car.prototype.showColor=function(){alert(this.color)};
Var oCar1=new Car(); Var oCar2=new Car();
使用这个方法可以解决重复创建showColor()函数,但又会有新的问题,考虑下面的例子:
Function Car() {}
Car.prototype.color=\ Car.prototype.doors=4; Car.prototype.mpg=23;
Car.prototype.drivers=new Array(\ Car.prototype.showColor=function(){alert(this.color)}; Var oCar1=new Car(); Var oCar2=new Car();
oCar1.drivers.push(\
alert(oCar1.drivers); // 输出\ alert(oCar2.drivers); // 输出\
这里,属性drivers是指向Array对象的指针。改变指针指向的内容,所有的实例都会改变。看来这种方法也不可取 2.3 混合方式
这种方式就是用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。结果所有的函数只创建一次,而每个对象都具有自己的对象属性实例。 Function Car(sColor,iDoors,iMpg) {
this.color= sColor; this.doors= iDoors;
this.mpg= iMpg;
Car.drivers=new Array(\ }
Car.prototype.showColor=function(){alert(this.color)};
Var oCar1=new Car(\ Var oCar2=new Car(\
oCar1.drivers.push(\
alert(oCar1.drivers); // 输出\ alert(oCar2.drivers); // 输出\
这种方式是ECMAScript主要采用的方式,它具有其他方式的特性,却没有它们的缺陷。在实际编程中应用的也是最多了。
另外还有JSON创建方式。其创建的方式如下: var Car = {
color: \ doors: 4, mpg: 23,
drivers: [{name: \age: 20, Married: false}, {name: \age: 30, Marred: true}],
showColor: function() {alert(this.color)} };
这种创建对象的方式也比较优雅。可作为Ajax返回的文本,然后用eval()函数将其还原成一个对象。著名的脚本框架JQuery就有专门接收返回文本为JSON对象的异步方法。
三、JavaScript内置对象 3.1、 Math 对象
1 、 Math 对象的属性是数学中常用的常量,如圆周率 PI ,自然对数的底 E 等。
2 、 Math 对象的方法则是一些十分有用的数学函数,如 sin() 、 random() 、 log() 等。 3、在调用 Math 对象的属性和方法时,直接写成: Math. 属性和 Math. 方法。 4 、案例 2_1 :求 PI 的 5 次方,并四舍五入取整。
5、思考题:设计 javascript 程序,在网页上随机显示 10 个两位整数。 3.2 Date 对象
1 、 Date 对象的主要方法
常用方法 : 设置和获取日期中的年、月、日、小时、分、秒和毫秒等。 2 、创建 Date 对象 要使用 Date 对象,必须先使用 new 运算符创建它。创建 Date 对象的常见方式有三种: (1) 不带参数 var today = new Date();
(2) 创建一个指定日期的 Date 变量 var theDate = new Date(2000, 9, 1); (3) 创建一个指定时间的 Date 变量 var theTime = new Date(2000, 9, 1, 10, 20,30,50)
3 、案例 2_2 :计算求 1+2+3+…10000 之和所需要的运行时间 ( 毫秒数 ) 。
4、思考题:在网页上显示当前日期和时间,并显示是星期几 。
3.3、Number 对象
1、 Number 对象用于存放 MAX_VALUE 、 MIN_VALUE 、 NaN 、
NEGATIVE_INFINITY 、 POSITIVE_INFINITY 等极端数值。 2 、案例 2_3 :在页面中显示 JavaScript 可以处理的数的区间。 3.4、 String 对象
1 、 String 对象提供对字符串进行处理的属性和方法。 2 、在使用 String 对象时,首先要创建一个字符串变量。 3 、使用 new 运算符来创建,如:
newstring = new String(\
4 、也可以直接将字符串赋给变量。 newstring = \ 5、 String 对象的最常用属性和方法 length 、
toLowerCase() 、 toUpperCase() 、 charAt(index) 、 substr(start,len)
6 、 String 对象的常用方法
7 、思考题:将用户输入的字符串反向输出到页面上,并且要求将其中的小写字母转换为大写字母。
例如,如果输入 ”abc123” ,则输出 ”321CBA” 。 六、 Array 对象
1 、什么是数组
一个数组可以包含多个数组元素。数组中数组元素的个数称为数组长度。
2 、创建和访问数组
一个数组元素由数组名、一对方括号 [ ] 和这对括号中的下标组合起来表示。
如: arrayname[0] 、 arrayname[1] 。 3 、 for…in 语句
用 for…in 语句处理数组,可以依次对数组中的每个数组元素执行一条或多条语句。 for…in 的格式是: for( 变量 in 数组 ) 循环体语句 ;
4 、程序案例 2_5 :使用 for…in 语句,显示数组的值 。
四、实验练习
1 、定义Student对象,包含Number、Name、Age属性,定义Student数组,存储5个学生,按照学号升序排序,并将排序后的5个学生信息在页面上显示。
2 、编写一个中文小日历程序,可以在网页中显示出今日的日期信息,同时也可以显示出本月其他日期的星期。