Dreamweaver CS3 Ajax网页设计入门与实例详解
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

4.4 面向对象编程

严格地讲,JavaScript并不是一种面向对象的编程语言,而只是一种基于对象的脚本语言。它没有提供类、继承和重载等面向对象编程功能,但它允许开发者创建自己的对象,并且可以使用由脚本引擎和宿主环境实现的对象,又具有面向对象编程的一些基本特征。

4.4.1 对象概述

每个对象都是由类定义的。类定义了对象的属性和方法,为开发者通过编码访问对象提供了接口。使用类创建对象,所生成的对象称为类的实例;由类创建对象实例的过程称为实例化。从一个类出发,可以生成许多对象实例;生成对象实例的数目仅受限于运行脚本的计算机的物理内存。这些实例具有相同的行为,但每个实例用于处理一组独立的数据。

实际上,在JavaScript中并没有正式的类。在JavaScript中,使用一个函数来保存对象的定义,该函数称为构造函数。在下面的叙述中,有时也把对象的定义称为类。

1.对象的组成

在JavaScript中,对象是一组名称-值对,可以将对象视为包含字符串关键字的词典。换言之,对象只是一些属性的集合,每个属性用于存储一个基本数据、对象或函数。如果属性存储的是函数,则该函数称为对象的方法。

2.对象实例化

在JavaScript中,使用new运算符来创建一个新对象,语法如下:

        new constructor[(args)]

其中constructor为对象的构造函数。如果构造函数没有参数,也可以省略圆括号。

new运算符执行下面的任务:首先创建一个没有成员的对象;然后为这个对象调用构造函数,传递一个指针给新创建的对象作为this指针;接着构造函数根据传递给它的参数初始化该对象。

下面给出一些使用new运算符的例子:

        var object=new Object();           // 创建Object类实例,并将对象引用存储到变量object中
        var string=new String();           // 创建String类实例,并将对象引用存储到变量string中

在JavaScript中,创建对象时,总是将对象的引用存储到一个变量中,然后可以通过该变量来访问对象的属性和方法。语法如下:

        object.property
        object.methond([args])

访问对象的属性时,也可以使用方括号运算符,例如object["property"]。

3.废弃对象

创建一个对象后,可以通过该对象完成某些操作,然后把对象的所有引用都设置为null值,以释放所占用的内存资源,强制性地废弃对象。例如:

        var object=new Object();
        // 在这里利用对象obj完成某些操作
        object=null;

4.早期绑定与后期绑定

绑定是把对象的属性和方法与对象实例结合在一起的方法。绑定分为早期绑定和后期绑定,早期绑定是指实例化对象之前定义其属性和方法,使编译程序或解释程序能提前转换机器代码;后期绑定是指编译程序或解释程序在代码运行前不知道对象的类型。

JavaScript不支持早期绑定,对所有对象都使用后期绑定,不检查对象的类型,只检查对象是否支持属性和方法。

5.对象的类型

在JavaScript中,可以使用以下几种类型的对象。

(1)本地对象。本地对象是指由JavaScript实现提供的、独立于宿主环境的对象。本地对象主要包括:Number,String,Boolean,Function,Array,Date,Object,等等。

(2)内置对象。内置对象是指在JavaScript脚本程序开始执行时出现的所有本地对象。JavaScript提供了内置对象:Global和Math。

(3)宿主对象。宿主对象是指由JavaScript实现的宿主环境提供的对象。各种DOM(Document Object Model)对象都属于宿主对象。

(4)用户自定义对象。这是由开发者自己定义类并基于类创建的对象。使用各种预定义对象只是JavaScript面向对象语言功能的一部分,允许开发者根据需要创建自己的类和对象才是JavaScript的真正强大之处。

4.4.2 Number对象

Number对象代表数值数据类型和提供数值常数的对象。语法如下:

        new Number(value)

其中value参数是对象的数值。

JavaScript根据传递的数值创建Number对象。通常很少有必要显式创建Number对象。该对象最主要的用途是将其属性集中到一个对象中,以及使数字能够通过toString方法转换为字符串。

1.Number对象的属性

(1)MAX_VALUE属性。该属性返回JavaScript所能表示的最大的正数,其值约等于1.79E+308。编写脚本时,以Number.MAX_VALUE格式引用该属性。在访问MAX_VALUE属性前不必创建Number对象。

(2)MIN_VALUE属性。该属性返回JavaScript所能表示的最小的正数,其值约等于5E-324。编写脚本时,以Number.MIN_VALUE格式引用该属性。在访问MAX_VALUE属性前不必创建Number对象。

(3)NaN属性。该属性表示算术表达式返回非数字值的特殊值。编写脚本时,可以通过Number.NaN格式引用该属性,其中的Number可以省略。NaN不与任何值相等,包括其本身。要检测一个数值是否为NaN,可使用isNaN函数。

(4)NEGATIVE_INFINITY属性。该属性用于返回比JavaScript能够表示的最小负数(-Number MAX_VALUE)更小的值。编写脚本时,以Number.NEGATIVE_INFINITY格式引用该属性。JavaScript将NEGATIVE_INFINITY值显示为-Infinity。该值在数学上的作用与负无穷相同。

(5)POSITIVE_INFINITY属性。该属性用于返回比JavaScript能够表示的最大正数(Number.MAX_VALUE)更大的值。编写脚本时,以Number.POSITIVE_INFINITY格式引用该属性。JavaScript将NEGATIVE_INFINITY值显示为Infinity。该值在数学上的作用与负无穷相同。

(6)constructor属性。表示创建对象的构造函数。语法如下:

        object.constructor

其中object参数是对象或构造函数的名称。

constructor属性是所有具有prototype的对象的成员。它们包括除Global和Math对象以外的所有JavaScript本地对象。constructor属性保存了对特定对象构造函数的引用。

(7)prototype属性。该属性返回对象类型原型的引用,语法如下:

        object.prototype

object参数是对象的名称。

用prototype属性提供对象的类的一组基本功能。对象的新实例“继承”赋予该对象原型的行为。所有JavaScript本地对象都有只读的prototype属性,可以利用该属性为原型添加功能,但该对象不能被赋予不同的原型。用户定义的对象可以被赋给新的原型。

2.Number对象的方法

Number对象提供了以下方法。

(1)toExponential()方法。强制以指数形式表示数值,语法如下:

        number.toExponential(fractionDigits)

其中number表示数值对象;fractionDigits参数是一个整数,指定返回的数值在小数点后面的位数。

(2)toFixed()方法。把数值格式化为小数点后面指定的位置,语法如下:

        number.toFixed(fractionDigits)

其中number表示数值对象;fractionDigits参数是一个整数,指定返回的数值在小数点后面的位数。

(3)toLocalString()方法。根据浏览器设置按一定格式返回当前数值的字符串形式,语法如下:

        number.toLocalString()

其中number表示数值对象。

(4)toString()方法。返回数值对象的字符串表示,语法如下:

        number.toString([radix])

其中number是要得到字符串表示的数值对象;radix为可选项,指定将数字值转换为字符串时的进制,默认值为10。

(5)toPrecision()方法。指定数值的精度,语法如下:

        number.toPrecision(precisionDigits)

图4-18 Number对象应用示例

其中number是数值对象;precisionDigits指定数值总共显示多少位数(包括小数点)。

(6)valueOf()方法。返回指定数值对象的原始值,语法如下:

                                              number.valueOf()

其中number参数表示数值对象。

例4-16 Number对象应用示例。在JavaScript脚本中应用Number对象的属性和方法,网页运行结果如图4-18所示。

设计步骤

1 在Dreamweaver中打开Ajax站点,在chap04文件夹中创建一个HTML网页并保存为page4-16.html,把网页标题设置为“Number对象应用示例”。

2 切换到代码视图,在<body>标记下方创建一个JavaScript脚本块,源代码如下:

        <script language="javascript" type="text/javascript">
        var number1=123.456789;
        var number2=10813;
        document.write("最大正数:"+Number.MAX_VALUE+";");
        document.write("最小正数:"+Number.MIN_VALUE+"<br />");
        document.write("非数字:"+Number.NaN+";");
        document.write("负无穷:"+Number.NEGATIVE_INFINITY+";");
        document.write("正无穷:"+Number.POSITIVE_INFINITY+"<br />");
        document.write("<hr />number1 = "+number1+"<br />");
        document.write("用科学计数法:"+number1.toExponential(6)+";");
        document.write("取3位小数:"+number1.toFixed(3)+";");
        document.write("总共5位数字:"+number1.toPrecision(5));
        document.write("<hr />number2 = "+number2+"(十进制)<br />");
        document.write("二进制:"+number2.toString(2)+";");
        document.write("八进制:"+number2.toString(8)+";");
        document.write("十六进制:"+number2.toString(16));
        </script>

3 在浏览器中查看网页的运行结果。

4.4.3 String对象

String对象提供对文本字符串的操作和格式处理,用于判定在字符串中是否存在某个子字符串及确定其位置等。语法如下:

        var string=new String("String Literal");
        string[.method|proerty]
        "String Literal"[.method|proerty]

String对象可以用两种方法来创建:一种方法是使用new运算符,另一种方法是使用字符串文字显式创建。用这两种方法创建的String对象在处理上有所不同。所有字符串文字共享公用的全局字符串对象,若为字符串文字添加属性,则它对所有标准字符串对象都是可用的。每个用new String声明的String对象有其自己的一组成员,若为一个String对象添加属性,则该属性专属于该对象。

在下面的例子中,为字符串str1添加了test属性,但该属性也用于str2和所有将来的字符串。

        var str1,str2;
        str1="这是一个字符串";
        str2="这也是一个字符串";
        str1.test=10;

不过,在下面的例子中,为str3添加了test属性,该属性仅用于str3,不用于str4。

        var str3,str4;
        str1=new String("这是一个字符串");
        str4=new String("这是也一个字符串");
        str3.test=10;

1.String对象的属性

String对象具有以下属性。

(1)constructor属性。该属性保存了对String对象的构造函数的引用。

(2)length属性。返回String对象的长度。语法如下:

        strVariable.length
        "String Literal".length

length属性包含一个整数,用来指出String对象中的字符数。String对象中的最后一个字符的索引为length-1。

(3)prototype属性。返回String对象类型原型的引用。

2.String对象的方法

String对象有以下方法,这些方法都是String.prototype的成员。

(1)anchor方法。在对象中的指定文本两端放置一个有name属性的HTML锚点。语法如下:

        string.anchor(anchorstring)

其中string是一个String对象或字符串常量;anchorstring参数是想要放置HTML锚点的name属性的文本。

(2)big方法。把<big>标记放置在String对象中的文本两端,语法如下:

        string.big()

其中string是一个String对象或字符串常量。

(3)blink方法。把<blink>标记放置在String对象中的文本两端,语法如下:

        string.blink()

(4)bold方法。把<b>标记放置在String对象中的文本两端。语法如下:

        string.bold()

其中string是一个String对象或字符串常量。

(5)charAt方法。返回指定索引位置处的字符,语法如下:

        string.charAt(index)

其中string是一个String对象或字符串常量;index参数指定想得到的字符的基于零的索引,有效值是0与字符串长度减1之间的值。

charAt方法返回一个字符值,该字符位于指定索引位置。字符串中的第一个字符的索引为0,第二个字符的索引为1,等等。超出有效范围的索引值返回undefined。

(6)charCodeAt方法。返回指定字符的Unicode编码,语法如下:

        string.charCodeAt(index)

其中string是一个String对象或字符串常量;index指定字符基于零的索引。

(7)concat方法。返回一个String对象,该对象包含了提供的两个字符串的连接,语法如下:

        string1.concat(string2)

string1是要与string2连接的String对象或字符串常量,string2是要连接到string1尾部的String对象或字符串常量。

concat方法的结果等于:result = string1 + string2。

(8)fixed方法。把<tt>标记放置在String对象中的文本两端,语法如下:

        string.fixed()

其中string是一个String对象或字符串常量。

(9)fontcolor方法。把带有color属性的一个<font>标记放置在String对象中的文本两端,语法如下:

        string.fontcolor(color)

其中string是一个String对象或字符串常量;color参数是一个包含颜色值的字符串,可以是颜色的十六进制值,或预先定义好的颜色名字。

(10)fontsize方法。把一个带有size属性的<font>标记放置在String对象中的文本的两端,语法如下:

        string.fontsize(size)

其中string是一个String对象或字符串常量;size是一个整数值,指定文本字体大小。

(11)fromCharCode方法。从一些Unicode字符值中返回一个字符串,语法如下:

        String.fromCharCode(code1,code2,...,coden)

其中code参数是要转换为字符串的Unicode字符值序列。

在调用fromCharCode前不必创建String对象。

(12)indexOf方法。返回String对象内第一次出现子字符串的字符位置,语法如下:

        string.indexOf(substring,startindex)

其中string是一个String对象或字符串常量;substring指定要在String对象中查找的子字符串;startindex是一个可选的整数值,指定在String对象内开始查找的索引。如果省略,则从字符串的开始处查找。

indexOf方法从左向右执行查找子字符串并返回一个整数值,指出String对象内子字符串的开始位置。如果没有找到子字符串,则返回-1。

如果startindex是负数,则startindex被当做零。如果它比最大的字符位置索引还大,则它被当做最大的可能索引。

(13)italics方法。把<i>标记放置在String对象中的文本两端,语法如下:

        string.italics()

其中string是一个String对象或字符串常量。

(14)lastIndexOf方法。返回String对象中子字符串最后出现的位置,语法如下:

        string.lastIndexOf(substring,startindex)

其中string是一个String对象或字符串常量;substring指定要在String对象内查找的子字符串;startindex是一个可选的整数值,指定在String对象内进行查找的开始索引位置,索引值从字符串开头以0开始计数。如果省略,则查找从字符串的末尾开始。

lastIndexOf方法从右向左执行查找并返回一个整数值,指出String对象内子字符串的开始位置。如果没有找到子字符串,则返回-1。

如果startindex是负数,则startindex被当做零。如果它比最大字符位置索引还大,则它被当做最大的可能索引。

(15)link方法。把一个有href属性的HTML锚点放置在String对象中的文本两端,即创建一个超链接,语法如下:

        string.link(linkstring)

其中string是一个String对象或字符串常量;linkstring参数指定想要放置在HTML锚点的href属性中的文本。

(16)match方法。使用正则表达式对象对字符串进行查找并将结果作为数组返回,语法如下:

        string.match(rgExp)

其中string是对其进行查找的String对象或字符串常量;rgExp指定在查找中使用的正则表达式。

match方法将返回一个数组。该数组的元素0包含最后匹配的字符,元素1...n包含与正则表达式中任何用插入符分开的子字符串匹配的内容。

(17)replace方法。返回根据正则表达式进行文字替换后的字符串的复制,语法如下:

        string.replace(rgExp,replaceText)

其中string是要执行该替换的String对象或字符串常量,该对象不会被replace方法修改;rgExp是描述要查找的内容的一个正则表达式对象;replaceText是一个String对象或字符串常量,对于str中每个匹配rgExp中的位置都用该对象所包含的文字加以替换。

replace方法的结果是一个完成了所有替换的str对象的复制。

(18)search方法。返回与正则表达式匹配的第一个子字符串的位置,语法如下:

        string.search(rgexp)

其中string是要进行查找的String对象或字符串常量;rgexp是包含要查找的模式的正则表达式对象。

search方法指明是否存在相应的匹配。如果找到一个匹配,search方法将返回一个整数值,指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配,则返回-1。若要获得进一步的信息,可使用match方法。

(19)slice方法。返回字符串的片段,语法如下:

        string.slice(start,[end])

其中string是一个String对象或字符串常量,其从索引0开始;start是从str的指定部分起始索引;end是可选的,指定从str的指定部分结束索引。

slice方法返回一个包含str的指定部分的String对象。

如果end是负数,则表示从str结尾开始起算的一个正偏移量;在这种意义下,它不是从0开始起算的(例如,如果end = -1则表示提取到字符串的结尾)。如果省略end,就一直提取到str的结尾。

(20)small方法。将<small>标记添加到String对象中的文本两端,语法如下:

        string.small()

其中string是一个String对象或字符串常量。

(21)split方法。将一个字符串分割为子字符串并将结果作为字符串数组返回,语法如下:

        string.split(delimiter)

其中string是要被分解的String对象或字符串常量,该对象不会被split方法修改;delimiter是一个字符串或正则表达式对象,描述用来定义分解位置的字符。

split方法返回一个字符串数组,在string中每个出现delimiter的位置都要进行分解。

(22)strike方法。把<strike>标记放置到String对象中的文本两端,语法如下:

        string.strike()

其中string是一个String对象或字符串常量。

(23)sub方法。把<sub>标记放置到String对象中的文本两端,语法如下:

        string.sub()

其中string是一个String对象或字符串常量。

(24)substr方法。返回一个从指定位置开始的指定长度的子字符串,语法如下:

        string.substr(start [,length])

其中string是要提取子字符串的字符串文字或String对象;start指定所需的子字符串的起始位置,字符串中的第一个字符的索引为0。length是可选的,指定在返回的子字符串中应包括的字符个数。

如果length为0或负数,将返回一个空字符串。如果没有指定该参数,则子字符串将延续到string的最后。

(25)substring方法。返回位于String对象中指定位置的子字符串,语法如下:

        string.substring(start,end)

其中string是一个String对象或字符串常量;start指定子字符串的起始位置,该索引从0开始起算;end指明子字符串的结束位置,该索引也从0开始起算。

substring方法将返回一个包含从原始对象中获得的子字符串的String对象。

substring方法使用start和end两者的较小值作为子字符串的起始点。例如,string.substring(0, 3)和str.substring(3, 0)将返回相同的子字符串。

如果start参数小于0,则作为0来处理。如果end参数是负数,则将设置为第一个参数的值。该子字符串的长度等于start和end差的绝对值。例如,在str.substring(0, 3)与strvar.substring(3,0)返回的子字符串的长度是3。

start和end可以是字符串。在这种情况下,如果可能这些字符串将被强制转换为整数。如果不能转换,参数的值将作为0处理。

(26)sup方法。把<sup>标记放置到String对象中的文本两端,语法如下:

        string.sup()

其中string是一个String对象或字符串常量。

(27)toLowerCase方法。返回一个字符串,该字符串中的字母被转换为小写字母,语法如下:

        string.toLowerCase()

其中string是一个String对象或字符串常量。

toLowerCase方法对非字母字符不会产生影响。

(28)toUpperCase方法。返回一个字符串,该字符串中的所有字母都被转化为大写字母。语法如下:

        string.toUpperCase()

其中string是一个String对象或字符串常量。

toUpperCase方法对非字母字符不会产生影响。

(29)toString方法。返回对象的字符串表示,语法如下:

图4-19 String对象应用示例

                                                string.toString()

其中string是一个String对象或字符串常量。

(30)valueOf方法。返回String对象的字符串值,语法如下:

                                                string.valueOf()

其中string是一个String对象或字符串常量。

例4-17 String对象应用示例。在本例中演示了字符串对象的属性和方法,网页运行结果如图4-19所示。

设计步骤

1 在Dreamweaver中打开Ajax站点,在chap04文件夹中创建一个HTML网页并保存为page4-17.html,把网页标题设置为“字符串对象应用示例”。

2 切换到代码视图,在<body>标记下方创建一个JavaScript脚本块,源代码如下:

        <script language="javascript" type="text/javascript">
        var string="这是一个字符串";
        document.write("1. 原字符串:"+string+";");
        document.write("2. 字符串长度:"+string.length+"<br />");
        document.write("3. 用大字体表示:"+string.big()+";");
        document.write("4. 用小字体表示:"+string.small()+"<br />");
        document.write("5. 用斜体显示:"+string.italics()+";");
        document.write("6. 文本闪烁:"+string.blink()+"<br />");
        document.write("7. 用粗体显示:"+string.bold()+";");
        document.write("8. 位置4上的字符:"+string.charAt(4)+"<br />");
        document.write("9. 用红色显示:"+string.fontcolor("red")+";");
        document.write("10. 添加删除线:"+string.strike()+"<br />");
        document.write("11.“串”字在字符串中的位置:"+string.indexOf("串")+";");
        document.write("12.创建超链接:"+"博文视点".link("http://www.broadview.com.cn/")+"<br />");
        document.write("13. 上标与下标:"+"2".small().sub()+"A"+"3".small().sup()+";");
        document.write("14. 取子字符串:"+string.substr(4,3)+",");
        document.write(string.substring(2,4)+"<br />");
        string="This is a string";
        document.write("15. 原字符串:"+string+";");
        document.write("16. 转换为大写:"+string.toUpperCase()+"<br />");
        document.write("17. 转换为小写:"+string.toLowerCase());
        </script>

3 在Firefox浏览器中查看网页的运行结果。Firefox浏览器支持<blink>标记,Internet Explorer浏览器不支持该标记。

4.4.4 Boolean对象

Boolean对象是Boolean数据类型的包装器。每当Boolean数据类型转换为Boolean对象时,JavaScript将隐含地使用Boolean对象。通常很少显式地调用Boolean对象。

Boolean对象创建一个新的Boolean值,语法如下:

        var variablename=new Boolean(bool)

其中bool参数是可选的,指定新对象的初始Boolean值。如果省略该值,或者为false、0、null、NaN及空字符串,则该Boolean对象的初始值为false。否则,初始值为true。

1.Boolean对象的属性

Boolean对象具有constructor和prototype属性,前者表示创建对象的函数,保存了对Boolean对象实例的构造函数的引用,后者用于返回对象类型原型的引用。

2.Boolean对象的方法

Boolean对象有以下两个方法。

(1)toString方法。返回Boolean对象的字符串表示。如果Boolean值是true,则返回“true”,否则返回“false”。

(2)valueOf方法。返回指定Boolean对象的原始值。对于Boolean对象,该方法返回Boolean值。

4.4.5 Array对象

在JavaScript中,通过Array对象提供对创建任何数据类型的数组的支持,语法如下:

        new Array()
        new Array(size)
        new Array(element0,element1,...,elementN)

其中size指定数组的大小。由于数组的下标是从0开始的,因此创建的元素的下标为从0到size-1。element0, ... , elementN给出要放到数组中的元素。

创建数组后,可以通过[]符号对数组元素进行访问,例如:

        var arr=new Array();
        for(i=0;i<10;i++){
          arr[i]=i;
        }
        x=arr[4];

由于JavaScript中的数组的下标是从0开始的,因此上述例子中最后一条语句访问数组的第5个元素,该元素中保存的值是4。

如果只向Array的构造函数传递了一个参数,而该参数是数字,则它被强制转为无符号整数,并且该值被用做数组的大小。否则,传入的参数被作为数组中唯一的元素。

除了利用Array构造函数创建数组外,也可以通过括号把数组元素括起来,语法如下:

        var arr=[element0,element1,...,elementN];

1.Array对象的属性

除了constructor和prototype属性外,Array对象还有一个length属性。length属性返回一个整数值,这个整数比数组中所定义的最高位元素的下标大1。语法如下:

        var num=array.length

由于一个数组中的元素并不一定是连续的,所以length属性也并不一定就等于数组中的元素个数。例如,在下面的数组定义中,array.length中就包含7,而不是2:

        var arr=new Array();
        arr[0]="Test";
        arr[6]="Another Test";

若length属性被赋予了一个比原先值小的数值,则数组就被截断,所有数组下标等于或者大于length属性的新值的元素都会被丢失;若length属性被赋予了一个比原先值大的数值,则数组就被扩展,并且所有新建元素都被赋值为undefined。

2.Array对象的方法

Array对象的方法都是Array.prototype属性的成员,包括:concat,join,reverse,slice,sort,toString,valueOf。

(1)concat方法。把两个数组组合成一个新数组并返回该数组,语法如下:

        array1.concat(array2)

其中array1是一个与array2进行连接的Array对象;array2是一个连接到array1末尾的Array对象。

concat方法返回一个Array对象,其中包含了array1和array2的连接。

(2)join方法。把整个数组的所有元素连接在一起而形成一个String对象并返回该对象,语法如下:

        array.join(separator)

其中separator参数是一个String对象,指定在最终的String对象中数组元素之间的分隔符。若省略了该参数,则数组元素之间用一个空字符串来分隔。

join方法返回一个String对象,这个对象中包括了数组array中的所有元素,这些元素都已被转换成字符串并且被连接在一起。

(3)pop方法。移除数组中的最后一个元素并返回该元素,语法如下:

        array.pop()

其中array引用一个Array对象。

若该数组为空,则将返回undefined。

(4)push方法。把新元素添加到一个数组中并返回数组的新长度值,语法如下:

        array.push([item1 [item2 [... [itemN ]]]])

其中array引用一个Array对象。item1, item2,. . . itemN指定要添加到该数组的新元素。

push方法将以新元素出现的顺序添加这些元素。若参数中包含数组,则该数组将作为单个元素添加到数组中。

(5)reverse方法。反转数组的元素顺序并返回反转后的数组,语法如下:

        array.reverse()

reverse方法把数组array中的元素位置进行反转。在执行过程中,这个方法并不会创建一个新的Array对象。如果数组是不连续的,reverse方法将在数组中创建元素以便填充数组中的间隔。这样所创建的全部元素的值都是undefined。

(6)shift方法。移除数组中的第一个元素并返回该元素,语法如下:

        array.shift()

其中array引用一个Array对象。shift方法移除数组中的第一个元素并返回该元素。

(7)slice方法。返回一个数组的一段,语法如下:

        array.slice(start,[end])

其中array参数表示一个Array对象,其下标从0开始;start参数表示该数组中所指定的部分的开始元素的下标;end参数表示该数组中所指定的部分的结束元素的下标。

slice方法返回一个Array对象,其中包含了数组array的指定部分。

slice方法一直复制到end所指定的元素,但是不包括该元素。若end值为负,则end为从数组array结尾计算的偏移量,而不是从0开始计数的。若省略了该参数,则slice方法将一直复制到数组array的结尾。

(8)sort方法。返回一个元素已经进行了排序的Array对象,语法如下:

        array.sort(sortfunction)

其中array是要排序的数组;sortfunction参数是用来确定元素顺序的函数的名称。若省略该参数,则元素将按照ASCII字符顺序进行升序排列。

sort方法将Array对象进行适当的排序;在执行过程中并不会创建新的Array对象。

若为sortfunction参数提供了一个函数,则该函数必须返回下列值之一:

负值,如果所传递的第一个参数比第二个参数小。

零,如果两个参数相等。

正值,如果第一个参数比第二个参数大。

(9)splice方法。从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素。语法如下:

        array.splice(start,deleteCount,[item1[,item2[,. . . [,itemN]]]])

其中array引用一个Array对象;start指定从数组中移除元素的开始位置,这个位置是从0开始计算的;deleteCount指定要移除的元素的个数;item1, item2,. . .,itemN指定要在所移除元素的位置上插入的新元素。

splice方法可以移除从start位置开始的指定个数的元素并插入新元素,从而修改array。返回值是一个由所移除的元素组成的新Array对象。

(10)toLocaleString方法。返回由数组元素构成的字符串,若数组元素为日期对象,则该日期使用当前区域设置转换为字符串,语法如下:

        array.toLocaleString()

其中array引用一个Array对象。

(11)toString方法。返回数组对象的字符串表示,语法如下:

        array.toString()

toString方法将数组array的元素转换为字符串。结果字符串由逗号分隔,且连接起来。

(12)unshift方法。把指定的元素插入数组开始位置并返回该数组,语法如下:

        array.unshift([item1[,item2 [,. . . [,itemN]]]])

其中array引用一个Array对象;item1, item2,. . .,itemN指定将要插入到该数组开始部分的元素。unshift方法把这些元素插入到一个数组的开始部分,所以这些元素将以参数序列中的次序出现在数组中。

(13)valueOf方法。返回指定Array对象的原始值,语法如下:

        array.valueOf()

valueOf方法将数组array的元素转换为字符串,这些字符串由逗号分隔,连接在一起。其行为与Array对象的toString和Array.join方法相同。

例4-18 Array对象应用示例。在本例中演示了数组对象的属性和方法的使用方法,网页运行结果如图4-20所示。

图4-20 数组对象应用示例

设计步骤

1 在Dreamweaver中打开Ajax站点,在chap04文件夹中创建一个HTML网页并保存为page4-18.html,把网页标题设置为“数组对象应用示例”。

2 切换到代码视图,在<body>标记下方创建一个JavaScript脚本块,源代码如下:

        <script language="javascript" type="text/javascript">
        function outputArray(array){                    // 定义数组输出函数outputArray
          for(var i=0;i<array.length;i++){
            document.write(array[i])
            document.write(i<array.length-1?",":"");
          }
        }
        function compareNumber(n1,n2){                  // 定义数组元素排序函数
          return(n1-n2);
        }
        var arr1=new Array(5,2,1,4,3);              // 定义一个数组并初始化
        var arr2=[16,8,6,9,7,12,10];                // 定义另一个数组并初始化
        var arr3,arr4,arr5,i;
        document.write("A. 数组arr1包含"+arr1.length+"个元素:");
        outputArray(arr1);
        document.write("<br />");
        document.write("B. 数组arr2包含"+arr2.length+"个元素:");
        outputArray(arr2);
        arr3=arr1.concat(arr2);
        document.write("<br />");
        document.write("C. 把arr1和arr2合并到新数组arr3,包含"+arr3.length+"个元素:");
        outputArray(arr3);
        document.write("<br />");
        document.write("D. 把arr1数组元素连接成字符串:"+arr1.join("-"));
        document.write("<br />");
        document.write("E. 把arr2数组元素按相反顺序排列:");
        outputArray(arr2.reverse());
        arr4=arr2.slice(2,5);
        document.write("<br />");
        document.write("F. 从arr2数组中取出部分元素放到arr4中:");
        outputArray(arr4);
        Array.prototype.sum=function(){
          var x=0;
          for(var i=0;i<this.length;i++){
            x+=this[i];
          }
          return x;
        };
        document.write("<br />");
        document.write("G. 数组arr2各元素之和:"+arr2.sum());
        document.write("<br />");
        document.write("H. 向数组arr1中添加元素,使其长度变为"+arr1.push(9,16,6)+":");
        outputArray(arr1);
        document.write("<br />");
        document.write("I. 从数组arr1中删除最后一个元素"+arr1.pop()+":");
        outputArray(arr1);
        document.write("<br />");
        document.write("J. 从数组arr1中删除第一个元素"+arr1.shift()+":");
        outputArray(arr1);
        document.write("<br />");
        arr1.unshift(777,888,999);
        document.write("K. 在数组arr5开头添加3个元素"+":");
        outputArray(arr1);
        arr5=arr1.sort();
        document.write("<br />");
        document.write("L. 对arr1数组元素按字符排序并放入arr5:");
        outputArray(arr5);
        arr5=arr1.sort(compareNumber);
        document.write("<br />");
        document.write("M. 对arr1数组元素按数字排序并放入arr5:");
        outputArray(arr5);
        </script>

3 在浏览器中查看网页的运行结果。

4.4.6 Date对象

Date对象提供日期和时间的基本存储和检索,语法如下:

        var date=new Date();
        var date=new Date(dateVal);
        var date=new Date(year,month,date[,hours[,minutes[,seconds[,ms]]]]);

其中dateVal参数可以是数字或字符串。若是数字值,则dateVal表示指定日期与1970年1月1日午夜间全球标准时间(UTC,Universal Time Code)的毫秒数。若是字符串,则dateVal按照parse方法中的规则进行解析。

year参数指定完整的年份,例如1976(而不是76);month参数表示月份,用整数0~11表示1月至12月;date参数表示日期(1~31);hours为可选项,若提供了minutes,则必须给出hours,表示小时(0~23);minutes为可选项,若提供了seconds,则必须给出minutes,表示分钟(0~59);seconds为可选项,若提供了milliseconds,则必须给出seconds,表示秒钟(0~59);ms为可选项,表示毫秒(0~999)。若未向Date对象传递参数,它将被初始化为当前时间(UTC)。

下面给出两个创建日期对象的例子。

        var date=new Date();               // 用当前时间创建新的日期对象
        var date=new Date(2008,7,8,20);// 其中第二个参数为7,表示8月份

Date对象表示特定时间段,以毫秒为单位保存。若某个参数的值大于其范围或为负数,则存储的其他值将做相应的调整。例如,若指定150秒,则将该数字重新定义为2分30秒。若数字为NaN,则表示该对象不代表特定的时间段。Date对象能够表示的日期范围约等于1970年1月1日前后各285616年。

1.Date对象的属性

Date只有以下两个属性。

(1)constructor属性。用于返回对Date对象实例的构造函数的引用。

(2)prototype属性。用于返回对象类型原型的引用。

2.Date对象的方法

Date对象的大多数方法都属于Date.prototype的成员。不过,也有两个静态方法不是Date.prototype的成员:parse和UTC方法。不创建Date对象就可以调用这些静态方法。Date对象的常用属性如下。

(1)toString方法。把日期对象转换为字符串并返回该字符串,语法如下:

        date.toString()

toString方法返回一个表示日期的字符串,例如“Fri Aug 1009:21:18 UTC+08002007”。

(2)valueOf方法。返回日期的毫秒数表示,语法如下:

        data.valueOf()

(3)toLocaleString方法。把日期对象转换为一个包含日期和时间的字符串并返回该字符串,其中的日期部分使用当前国别的默认格式表示。语法如下:

        date.toLocaleString()

toLocaleString方法返回一个String对象,这个对象中包含了用当前国别的默认格式表示的日期。返回值的格式要根据当前的国别来确定。

(4)toLocaleDateString方法。把日期对象转换为一个包含日期的字符串并返回该字符串,该日期使用当前国别的默认格式表示。语法如下:

        date.toLocaleDateString()

toLocaleDateString方法返回一个String对象,该对象中包含了用当前国别的默认格式表示的日期。返回值的格式要根据当前的国别来确定。

(5)toUTCString方法。把日期转换为一个字符串并返回该字符串,用全球标准时间(UTC)表示日期和时间。语法如下:

        date.toUTCString()

toUTCString方法返回一个String对象,此对象中包含了使用UTC惯例以一种方便易读的形式进行格式化的日期。

(6)getTimezoneOffset方法。返回宿主计算机上的时间和全球标准时间(UTC)之间的差值(以分钟表示),语法如下:

        date.getTimezoneOffset()

getTimezoneOffset方法返回一个整数值,表示当前计算机上的时间与UTC之间相差的分钟数。这些值和执行脚本的计算机相关。若这个方法被一个服务器脚本调用,那么返回值和服务器相关。如果这个方法被一个客户机脚本调用,则返回值就根据客户机上的时间来确定。

若所在位置的时间落后于UTC,则这个值就是正值,若所在位置的时间超前于UTC,则这个值就是负值。

(7)parse方法。解析一个包含日期的字符串,并返回该日期与1970年1月1日午夜之间的毫秒数。语法如下:

        Date.parse(dateVal)

其中dateVal是一个包含以诸如 "Jan 5, 199608:47:00"的格式表示的日期的字符串。

parse方法返回一个整数值,这个整数表示dateVal中所包含的日期与1970年1月1日午夜之间间隔的毫秒数。

parse方法是Date对象的一个静态方法。正因为它是一个静态方法,所以应通过下面例子中所示的方法来调用,而不是作为一个已创建Date对象的一个方法被调用。

        var datestring="2008/8/8 8:00 PM";          // 设置一个表示日期和时间的字符串
        var date=new Date(Date.parse(datestring));  // 把该字符串解析为毫秒数并用来创建日期对象

(8)UTC方法。返回全球标准时间的1970年1月1日到所指定日期之间所间隔的毫秒数。语法如下:

        Date.UTC(year,month,day[,hours[,minutes[,seconds[,ms]]]])

其中year参数用于指定年份,需要使用完整的年份表示法,若year处于0到99之间,则year被假定为1900+year;month参数指定一个整数(0~11),表示月份(1月到12月);date参数指定一个整数(1~31),表示日期;hours参数指定一个整数(0~23),表示小时,若提供了minutes,则必须提供此项;minutes参数指定一个整数(0~59),表示分钟值,若提供了seconds,则必须提供此项;seconds参数指定一个整数(0~59),表示秒钟数,若提供了milliseconds,则必须提供此项;ms参数指定一个整数(0~999),表示毫秒数。

UTC方法返回从UTC的1970年1月1日午夜到所指定日期之间的毫秒数。这个返回值可以用在Date对象的构造函数中。例如,下面的语句利用指定的UTC时间创建一个新的日期对象:

        var d=Date.UTC(2008,7,8,12,0,0);            // 设置指定日期的秒数
        var date=new Date(d);                       // 由毫秒数创建日期对象

若一个参数的值超出其范围或者是一个负数,则其他保存过的值将相应地得到改变。例如,如果使用者指定150秒,则会将该数值重新定义为2分30秒。

UTC方法和Date对象的接受日期值的构造函数之间的差别在于:UTC方法假设UTC,而Date对象的构造函数假定本地时间。

Date对象的其他方法均用于设置或获取日期值的某个部分,这些方法在表4-8中列出(其中date为日期对象)。

表4-8 Date对象的方法

例4-19 Date对象应用示例。在本例中利用日期对象的方法制作了北京奥运会倒计时牌,网页运行结果如图4-21所示。

图4-21 Date对象应用示例

设计步骤

1 在Dreamweaver中打开Ajax站点,在chap04文件夹中创建一个HTML网页并保存为page4-19.html,把网页标题设置为“日期对象应用示例”。

2 在页面上创建一个<div>标记段落,将其id设置为div1。

3 切换到代码视图,在</title>标记下方创建一个JavaScript脚本块,源代码如下:

        <script language="javascript" type="text/javascript">
        var intervalID=window.setInterval("showTime()",1000);
        function showTime(){
          var string;
          var ms,secs,mins,hours,days;
          var date1=new Date();
          var date2=new Date(2008,7,8,20);
          var t=date2.getTime()-date1.getTime();
          days=Math.floor(t/(24*60*60*1000));
          hours=Math.floor((t/(24*60*60*1000)-days)*24);
          mins=Math.floor(((t/(24*60*60*1000)-days)*24-hours)*60);
          secs=Math.floor((((t/(24*60*60*1000)-days)*24-hours)*60-mins)*60);
          if(hours<10)hours="0"+hours;
          if(mins<10)mins="0"+mins;
          if(secs<10)secs="0"+secs;
          string="<p>现在时间是:"+"<br />";
          string+=date1.toLocaleString()+"(北京时间)<br />";
          string+=date1.toUTCString()+"(全球标准时间)</p>";
          string+="<p>北京奥运会开幕时间是:";
          string+=date2.toLocaleString()+"</p>"
          string+="<p>离北京奥运会开幕还有:";
          string+=(days+"天"+hours+"小时"+mins+"分"+secs+"秒").bold().fontcolor("red")+"</p>";
          if(date1.toString()==date2.toString() || days<0){
            window.clearInterval(intervalID);
            string="热烈祝贺北京奥运会开幕!".bold().fontcolor("red");
          }
          document.getElementById("div1").innerHTML=string;
        }
        </script>

【代码说明】

在上述代码中,首先通过调用window对象的setInterval方法启动计时器,指定每隔1000毫秒(即1秒钟)执行一次函数showTime(),并把计时器标识符存储在变量intervalID中。执行showTime()时,首先通过Date对象构造函数创建date1和date2两个日期对象,其中date1表示当前计算机时间,date2表示北京奥运会开幕时间;然后计算出这两个时间相关的毫秒数并换算成天、小时、分、秒,把时间信息保存在一个字符串str中;如果两个时间相等,或者天数为负,则把祝贺信息保存在字符串中;最后通过页面元素div1显示这个字符串的内容。在定义函数showTime时,用到了内置对象Math的floor方法,其功能是返回小于等于其数字参数的最大整数。

4 在浏览器中查看网页运行结果。

4.4.7 Function对象

在JavaScript中,Function对象用于创建新的函数。有以下两种语法:

        function functionName([argname1 [,...[,argnameN]]]){
          body
        }
        functionName=new Function([argname1,[... argnameN,]] body);

其中参数functionName指定要创建函数的名称;argname1...argnameN为可选项,指定函数接收的参数列表;body为包含调用该函数时要执行的JavaScript代码块(第一种语法)或语句字符串(第二种语法)。

第一种语法是JavaScript中创建函数的基本方法,第二种语法用于显式创建函数对象。

1.Function对象的属性

Function对象的属性包括:arguments,caller,constructor,prototype。

(1)arguments属性。为当前执行的函数对象返回一个arguments对象。通过该对象,可以在函数中处理可变数量的参数。arguments对象的length属性包含了传递给函数的参数的数目。对于arguments对象所包含的参数,其访问方法与数组元素的访问方法相同。

(2)caller属性。返回一个对函数的引用,该函数调用了当前函数。对于函数来说,caller属性只有在函数执行时才有定义。若函数是由JavaScript程序的顶层调用的,则caller包含的就是null。若在字符串上下文中使用caller属性,将返回函数的反编译文本。

(3)constructor属性。表示创建对象的函数。constructor属性是所有具有prototype的对象的成员,它保存了对构造特定对象实例的函数的引用。

(4)prototype属性。返回对象类型原型的引用。在JavaScript中,用prototype属性提供对象的类的一组基本功能。对象的新实例“继承”赋予该对象原型的操作。

2.Function对象的方法

Function对象的方法包括:apply,call,toString,valueOf。

(1)apply方法。调用某对象的一个方法,用另一个对象替换当前对象,语法如下:

        object.methodName.apply([thisObj[,argArray]])

其中methodName为对object的一个方法;thisObj指定将被用做当前对象的对象;argArray指定将被传递给该函数的参数数组。

若argArray不是一个有效的数组或者不是arguments对象,则将导致一个TypeError。

若未提供argArray和thisObj中的任何一个参数,则Global对象将被用做thisObj,并且无法被传递任何参数

(2)call方法。调用某对象的一个方法,用另一个对象替换当前对象,语法如下:

        object.methodName.call([thisObj[,arg1,arg2,... argN]])

其中methodName为对象object的一个方法;thisObj指定将被用做当前对象的对象;arg1... argN指定将被传递给该函数的一组参数。

call方法与apply方法类似,所不同的是参数的传递方式。

(3)toString方法。返回对象的字符串表示。对于Function对象,toString方法返回以下格式的字符串:function functionName(){[native code]},其中functionName是被调用toString方法函数的名称。

图4-22 Function对象应用示例

(4)valueOf方法。返回指定对象的原始值。对于Function对象,valueOf方法的返回值与toString方法的返回值相同。

例4-20 Function对象应用示例。在本例中通过apply或call方法调用一个对象的方法,用另一个对象代替当前对象,网页运行结果如图4-22所示。

设计步骤

1 在Dreamweaver中打开Ajax站点,在chap04文件夹中创建一个HTML网页并保存为page4-20.html,把网页标题设置为“Function对象应用示例”。

2 切换到代码视图,在<body>标记下方创建一个JavaScript脚本块,源代码如下:

        <script language="javascript" type="text/javascript">
        var objA={"name":"对象objA",
          "showNameA":function(arg){
            document.write((this.name+"显示参数"+arg).fontcolor("blue")+"<br />");
          }
        }
        var objB={"name":"对象objB",
          "showNameB":function(arg){
            document.write((this.name+"显示参数"+arg).fontcolor("red")+"<br />");
          }
        }
        objA.showNameA("A");
        objB.showNameB("B");
        document.write("调用objA的方法,用objB代替objA:");
        objA.showNameA.apply(objB,["A"]);
        document.write("调用objB的方法,用objA代替objB:");
        objB.showNameB.apply(objA,["B"]);
        document.write("调用objA的方法,用objB代替objA:");
        objA.showNameA.call(objB,"A");
        document.write("调用objB的方法,用objA代替objB:");
        objB.showNameB.call(objA,"B");
        </script>

【代码说明】

在上述代码中,首先以对象直接量形式创建两个对象objA和objB,它们各包含一个属性和方法,此处的方法是用匿名函数方式定义的;接着分别通过每个对象调用其自身的方法;最后通过apply或call方法调用每个对象的方法,并且用另一个对象代替当前对象。

3 在浏览器中查看网页运行结果。

4.4.8 Object对象

在JavaScript中,Object对象是一个重要的本地对象,它是其他本地对象(如Array、Date、String等)的根对象,并提供了创建自定义对象的基础。

在JavaScript中,可以像定义普通函数一样为Object对象定义一个构造函数:

        function constructorName([arg1,arg2,...,argN]){
          statements
        }

定义构造函数后,就可以利用new运算符和构造函数来创建对象实例:

        var object=new constructorName([arg1,arg2,...,argN]);

也可以利用new运算符和Object类来创建一个对象,然后为该对象添加属性和方法:

        var object=new Object();
        object.property=value;
        object.method=function(){
          body
        };

此外,还可以在脚本中使用对象直接量:

        var object={"propertyName":"value","methodName":function(argList){statements}};

创建一个对象后,即可访问该对象的属性和方法:

        object.{property|method(argList)}

1.Object对象的属性

(1)prototype属性返回对象类型原型的引用。

(2)constructor属性表示创建对象的函数。

2.Object对象的方法

(1)HasOwnProperty方法。判断对象是否具有某个特定的属性。

(2)IsPrototypeOf方法。判断对象是否为另一个对象的原型。

(3)PropertyIsEnumerable方法。判断给定属性能否用for-in语句进行枚举。

(4)toString方法。对于Object对象返回值为“[object Object]”。

(5)valueOf方法。对于Object对象返回值为“[object Object]”。

Object对象的属性和方法将会被其他类覆盖。

4.4.9 RegExp对象

正则表达式是具有特殊语法的字符串,用于从左向右去匹配目标字符串。正则表达式模式由普通字符和元字符组成,元字符包括:( [{ \ ^ $ | ) ? * + .。普通字符在模式中表示它们自身并匹配目标中相应的字符。如果使用一个不包含任何元字符的正则表达式,则只能执行纯文本搜索。正是元字符才使正则表达式具有强大的字符串处理能力。

在JavaScript中,通过RegExp对象实现对正则表达式的支持。RegExp对象用于保存正则表达式模式,有以下两种语法:

        var reExpr=/pattern/[switch];
        var reExpr=new RegExp("pattern",["switch"]);

其中pattern指定要使用的正则表达式模式。若用第一种语法,则用斜线字符“/”分隔模式;若用第二种语法,则用引号将模式引起来。

switch为可选项。用第二种语法时,要用引号把switch括起来。有以下三个开关选项。

i:表示忽略大小写。

g:表示全文查找出现的所有pattern。

gi:表示全文查找、忽略大小写。

正则表达式对象保存用于查找字符串中的字符组合时的模式。创建正则表达式对象后,可以把它传递给字符串方法,或者把字符串传递给一个正则表达式方法。有关最近进行查找的信息保存在RegExp对象中。

当预先知道查找字符串时用第一种语法。当查找字符串经常变动或不知道时用第二种语法,例如由用户输入得到的字符串。

1.RegExp对象的属性

正则表达式对象具有以下属性。

(1)lastIndex属性。指定一个索引,下一个匹配从该索引处开始。语法如下:

        rgexp.lastIndex[=index]

其中rgexp为正则表达式对象,可以是变量名或文字。

lastIndex属性被正则表达式的exec方法、String对象的match、replace、和split方法修改。

应用于lastIndex属性值的规则如下:

若lastIndex大于字符串的长度,则test和exec方法失败,且lastIndex被设置为0。

若lastIndex等于字符串的长度,且模式与空字符串匹配,则正则表达式匹配。否则匹配失败,且lastIndex被重置为0。

否则,lastIndex被设置为紧接最近的匹配的下一个位置。

(2)source属性。返回正则表达式模式的文本的复本(只读),语法如下:

        rgexp.source

其中rgexp参数是正则对象,可以是变量名或文字。

2.RegExp对象的方法

正则表达式具有以下方法。

(1)compile方法。把一个正则表达式编译为内部格式,语法如下:

        rgexp.compile(pattern)

其中rgexp为正则表达式对象,可以是变量名或文字;pattern是一个字符串表达式,包含要被编译的正则表达式模式。

compile方法把pattern转换为内部格式,从而执行得更快。

(2)exec方法。在指定字符串中运行查找来获得匹配,语法如下:

        rgexp.exec(string)

其中rgexp为正则表达式对象,可以是变量名或文字。string指定要执行查找的字符串。

exec方法查找的结果被放在一个数组中。若exec方法未找到匹配,则返回null;若找到一个或多个匹配,则返回一个数组,并更新RegExp对象来反映查找结果。

(3)test方法。返回一个布尔值,指出在被查找的字符串中是否存在模式。语法如下:

        rgexp.test(string)

其中rgexp为正则表达式对象,可以是变量名或文字。string指定要在其上测试查找的字符串。

图4-23 RegExp对象应用示例

test方法检查在字符串中是否存在一个模式,若存在则返回true,否则返回false。

RegExp对象不由test方法来修改。

例4-21 RegExp对象应用示例。在本例中通过正则表达式模式验证IP地址、电子邮件地址和日期格式是否有效,网页运行结果如图4-23所示。

设计步骤

1 在Dreamweaver中打开Ajax站点,在chap04文件夹中创建一个HTML网页并保存为page4-21.html,把网页标题设置为“RegExp对象应用示例”。

2 切换到代码视图,在<body>标记下方创建一个JavaScript脚本块,源代码如下:

        <script language="javascript" type="text/javascript">
        var re=new Object();
        // 为对象re添加三个属性,表示正则表达式模式,分别用于匹配ip地址、电子邮件地址和日期格式
        re.ip=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/;
        re.email=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        re.date=/^\d{4}-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
        // 创建三个字符串
        var str1="192.168.17.10",str2="tom@hotmail.com",str3="2008-08-08";
        // 把字符串应用于正则表达式对象的test方法
        document.write(str1+re.ip.test(str1)?"":"不"+"是一个有效的IP地址<br />");
        document.write(str2+re.email.test(str2)?"":"不"+"是一个有效的电子邮件地址<br />");
        document.write(str3+re.date.test(str3)?"":"不"+"是一个有效的日期<br />");
        </script>

在浏览器中查看网页运行结果。

4.4.10 内置对象

在JavaScript中,内置对象也称为内部对象,这是一种特殊的本地对象,其特殊性在于当执行JavaScript脚本时将自动创建内置对象。因此,开发者可以在程序中直接使用这些对象的属性和方法。目前JavaScript只提供了两个内置对象,即Global和Math对象。

1.Global对象

定义Global对象的目的是将全局方法集中在一个对象中。Global对象是一个固有对象,该对象没有语法,该对象从不直接使用,并且不能用new运算符进行实例化。Global对象在脚本引擎被初始化时创建,并立即使其方法和属性可用。

若试图通过编写以下语句创建或引用Global对象,将会出现“Global未定义”的错误。

(1)介绍原始数据类型时提及的两个特殊值Infinity和NaN,其实都是Global对象的属性成员。此外,所有本地对象的构造函数也都是Global对象的属性。Global对象的属性和方法在脚本引擎初始化时变为可用。

下面列出Global对象的所有属性。

Infinity属性:返回Number.POSITIVE_INFINITY的初始值。

NaN属性:返回特殊值NaN,表示表达式不是数字。

Object属性:用于引用Object对象的构造函数。

Array属性:用于引用Array对象的构造函数。

Function属性:用于引用Function对象的构造函数。

Boolean属性:用于引用Boolean对象的构造函数。

String属性:用于引用String对象的构造函数。

Number属性:用于引用Number对象的构造函数。

Date属性:用于引用Date对象的构造函数。

RegExp属性:用于引用RegExp对象的构造函数。

Error属性:用于引用Error对象的构造函数。

EvalError属性:用于引用EvalError对象的构造函数。

RangeError属性:用于引用RangeError对象的构造函数。

ReferenceError属性:用于引用ReferenceError对象的构造函数。

SyntaxError属性:用于引用SyntaxError对象的构造函数。

TypeError属性:用于引用TypeError对象的构造函数。

URIError属性:用于引用URIError对象的构造函数。

(2)Global对象提供了一些方法,其中的一部分已在4.3.7节“内置函数”中介绍过了。所有内置函数都是Global对象的方法成员。

下面把Global对象的方法汇总于后。

escape方法:对String对象编码以便它们能在所有计算机上可读。

eval方法:解析JavaScript代码并执行。

isFinite方法:返回一个Boolean值,指明所提供的数字是否为有限。

isNaN方法:返回一个Boolean值,指明提供的值是否是保留值NaN(不是数字)。

parseFloat方法:返回由字符串转换得到的浮点数。

parseInt方法:返回由字符串转换得到的整数。

unescape方法:对用escape方法进行了编码的String对象进行解码。

encodeURI方法:将字符串编码为一个有效的统一资源标识符(URI)。

encodeURIComponent方法:将字符串编码为URI的一个有效组成部分。

图4-24 Global对象应用示例

decodeURI方法:对用encodeURI方法编码的字符串进行解析。

decodeURIComponent方法:对用encodeURIComponent编码的字符串进行解码。

例4-22 利用Global对象的方法对字符串进行编码和解码,运行结果如图4-24所示。

设计步骤

1 在Dreamweaver中打开Ajax站点,在chap04文件夹中创建一个HTML网页并保存为page4-22.html,把网页标题设置为“Global对象应用示例”。

2 切换到代码视图,在<body>标记下方创建一个JavaScript脚本块,源代码如下:

        <script language="javascript" type="text/javascript">
        var str1="http://www.mysite.com/demo.asp";
        var str2="name=郭靖";
        var str3=encodeURI(str1)+"?"+encodeURIComponent(str2);
        document.write("A. 编码:"+str3+"<br />");
        document.write("B. 解码:"+decodeURIComponent(str3)+"<br />");
        var str4=str1+"?"+escape(str2);
        document.write("C. 编码:"+str4+"<br />");
        document.write("D. 解码:"+unescape(str4)+"<br />");
        </script>

3 在浏览器中查看网页运行结果。

2.Math对象

Math对象用于提供基本的数学函数和常数。语法如下:

        Math[.{property|method}]

Math对象不能用new运算符创建,试图这样做将出现错误。Math对象在装载脚本引擎时由该引擎创建,其所有方法和属性在脚本中总是可用。Math对象的成员如表4-9所示。

表4-9 Math对象的成员

例4-23 Math对象应用示例。在本例中利用Math对象的方法计算一些数学表达式的值,网页运行结果如图4-25所示。

图4-25 Math对象应用示例

设计步骤

1 在Dreamweaver中打开Ajax站点,在chap04文件夹中创建一个HTML网页并保存为page4-23.html,把网页标题设置为“Math对象应用示例”。

2 切换到代码视图,在<body>标记下方创建一个JavaScript脚本块,源代码如下:

        <script language="javascript" type="text/javascript">
        var angle=Math.PI/3;
        document.write("A. 角度="+angle+"弧度<br />");
        document.write("B. 正弦值="+Math.sin(angle)+"<br />");
        document.write("C. 余弦值="+Math.cos(angle)+"<br />");
        document.write("D. 正切值="+Math.tan(angle)+"<br />");
        document.write("E. 6"+"5".small().sup()+"="+Math.pow(6,5)+"<br />");
        document.write("F. 2"+"1/3".small().sup()+"="+Math.pow(2,1/3));
        </script>

3 在浏览器中查看网页运行结果。

4.4.11 用户自定义对象

前面介绍了如何使用JavaScript提供的各种预定义对象,通过这些对象可以完成许多常见的任务,为编程带来了很大的方便。除了使用预定义对象外,JavaScript还允许开发者根据需要创建自己的对象。

1.直接创建对象

在JavaScript中,可以利用Object类来创建一个新的对象实例,然后为该对象添加属性和方法,语法如下:

        var object=new Object();                    // 创建新的对象实例
        object.property=value;                      // 为对象添加属性
        object.method=function(argList){            // 为对象添加方法
          body
        }

2.定义构造函数

在各种面向对象语言中,比较常用的工作方式是首先定义一个类并为其添加属性和方法成员,然后基于该类创建对象实例,通过设置对象的属性和调用对象的方法完成某种任务。不过,在JavaScript中没有类,与访问类最近似的方法是定义构造函数,构造函数的名称相当于类的名称。定义构造函数的语法如下:

        function constructorName(argList){
          this.propertyName=value;                 // 设置对象的属性
          this.methodName=function(argList){        // 为对象定义方法
            body
          };
        }

其中constructorName表示构造函数的名称,相当于类的名称,按照惯例此名称通常以大写字母开头;this关键字通常用于在构造函数,表示当前对象;propertyName表示属性名称;methodName表示方法名称。在构造函数中可以定义多个属性和方法。

定义一个构造函数之后,就可以利用new运算符和该构造函数来创建新的对象实例,然后访问对象的属性,调用对象的方法。语法如下:

        var object=new constructorName(argList);        // 基于构造函数创建对象实例
        object.propertyName=value;                      // 访问对象的属性
        object.methodName(argList);                     // 调用对象的方法

在JavaScript中,对象的应用方式是多种多样的。除了访问对象的属性和调用对象的方法外,还可以把对象赋给变量或作为参数传递给其他函数,也可以把对象作为其他函数的值返回,或者可以作为另一个对象的属性或数组的元素进行存储,等等。

3.改进构造函数

无论直接利用Object对象的构造函数,还是定义自己的对象构造函数,都存在一个相同的问题,即创建新对象实例时重复定义函数。为了解决这个问题,可以通过对象的原型对构造函数加以改进,利用以下方式来定义构造函数:

        function constructorName(argList){
          this.propertyName=value;                                  // 设置对象的属性
          if(typeof constructorName._initialized=="undefined)"{      // 若_initialized属性不存在
            constructorName.prototype.methodName=function(argList){  // 则为类添加方法
              body
            };
          constructorName._initialized=true;                         // 设置_initialized属性
          }
        }

在改进后的构造函数中,通过检查和设置_initialized属性的值可以保证为类添加方法时不会重复定义函数。

4.对象直接量

对象直接量的语法在4.4.8节中已经介绍过了。使用对象直接量时,应通过花括号把属性和属性值括起来,属性名与属性值用冒号分隔,属性-值对用逗号分隔。例如:

        var user={
          "name":"郭靖",
          "setName":function(name){this.name=name;},
          "getName":function(){return this.name;}
        };
        document.write(user.getName());
        user.setName("欧阳峰");
        document.write(user.getName());

在JavaScript中,对象引用也可以作为函数的参数使用,通常有以下两种处理方式。一种方式是要把一个对象传递给函数,可以通过基于构造函数创建一个对象实例并将该对象的引用存储在一个变量中,然后把该变量作为实际参数用在函数调用中;另一种方式是在函数调用中使用对象直接量作为实际参数。相比之下,后一种方式显然更为简便,因为既不需要定义构造函数,也不需要显式创建对象实例。

5.模拟命名空间

在面向对象语言中,通常使用命名空间来组织类,以避免名称冲突的问题。在JavaScript中,可以通过对象来模拟命名空间。创建一个JavaScript库时,可以将对象定义包装在命名空间内,而不需要定义全局函数和类。

使用对象模拟命名空间时,首先创建一个空对象作为命名空间,然后在此命名空间中定义构造函数。以下是模拟命名空间的代码:

        var MyNS={};
        // 在命名空间中定义一个构造函数
        MyNS.constructorName=function(argList){
        // 在此处编写代码,为对象添加属性和方法
        };
        var object=new MyNS.constructorName("argList");

根据需要,也可以创建嵌套的命名空间:

        // 创建顶级命名空间
        var MyNS={};
        // 创建嵌套的命名空间Examples
        MyNS.Examples={};
        // 在命名空间中定义一个构造函数
        MyNS.Examples.constructorName=function(argList){
        // 在此处编写代码,为对象添加属性和方法
        };
        var object=new MyNS.Examples.constructorName(argList);

例4-24 自定义对象应用示例。在本例中定义一个构造函数,并为对象添加三个属性和一个方法,然后通过调用该构造函数创建两个对象并调用其方法,网页运行结果如图4-26所示。

图4-26 自定义对象应用示例

设计步骤

1 在Dreamweaver中打开Ajax站点,在chap04文件夹中创建一个HTML网页并保存为page4-24.html,把网页标题设置为“自定义对象应用示例”。

2 切换到代码视图,在</title>标记下方创建CSS样式表,源代码如下:

      <style type="text/css">
      .ab{
          font-family:"宋体";
          font-size:9pt;
          background-color:#99FFFF;
          padding:12px;
          height:32px;
          width:350px;
          border:thin dotted #993300;
        }
        </style>

3 在</style>标记下方创建一个JavaScript脚本块,源代码如下:

        <script language="javascript" type="text/javascript">
        function AddrBook(name,phone,email){                     // 定义对象的构造函数
          this.name=name;                                       // 为对象添加属性
          this.phone=phone;
          this.email=email;
          if(typeof AddrBook._initialized=="undefined"){         // 若不存在_initialized属性
            AddrBook.prototype.showAddrBook=function(){         // 为对象添加方法
              var addrbook="<p class=\"ab\">姓名:"+this.name+"<br />";
              addrbook+="电话:"+this.phone+"<br />";
              addrbook+="Email:"+this.email+"</p>";
              document.write(addrbook);
            };
          AddrBook._initialized=true;                           // 设置_initialized属性
          }
        }
        </script>

4 在<body>标记下方创建一个JavaScript脚本块,源代码如下:

        <script type="text/javascript">
        var ab1=new AddrBook("郭靖","34567890","gj@gmail.com");   // 创建对象示例
        ab1.showAddrBook();                                     // 调用对象的方法
        var ab2=new AddrBook("欧阳峰","66778899","oyf@hotmail.com");
        ab2.showAddrBook();
        </script>

5 在浏览器中查看网页运行结果。