JavaScript的常用对象.ppt

《JavaScript的常用对象.ppt》由会员分享，可在线阅读，更多相关《JavaScript的常用对象.ppt（53页珍藏版）》请在三一办公上搜索。

1、第3章 JavaScript的常用对象,上一章向读者介绍了JavaScript的基本知识，在实际编码过程中，还会经常用到这样一些对象：他们由JavaScript语言本身提供或者由执行JavaScript的浏览器提供，他们包含丰富的内置属性和方法。灵活运用这些对象，可以使JavaScript的行为更丰富，功能更强大，也可以使编码更简单。下面向读者一一介绍。,3.1 保存多个数据元素的容器：Array对象,在上一章已经向读者介绍了JavaScript的数组。数组是一种数据类型，它包含了被编码的值。每个编码的值称为数组的一个元素，编码被称作下标。每个元素都可以存储任意数据类型的值，同一个数组的不同元

2、素，可以具有不同的数据类型，这点和强类型语言如Java、C+等不同。接下来向读者介绍数组的对象的一些常用方法。,3.1.1 数组的创建,在中已经向读者介绍了数组的2种创建方式，即数组直接量创建数组和利用Array()构造函数来创建数组。参考下面的示例代码。/直接量创建数组var a=0,1,2,abc,new Object();var b=;/空数组var c=123,ab,2,3,22;/嵌套的数组/Array构造函数创建数组var d=new Array(10);/10个元素的数组var e=new Array(0,1,2,abc);var f=new Array(123,new Arra

3、y(ab,2),3,22);,3.1.2 得到数组的长度,Array对象提供了一个属性length，让程序可以得到数组中所包含的元素的个数，即数组的长度。如有一数组a，则数组的长度为a.length，示例代码如下所示。var a=1,2,abc;var b=a.length;/b=3,3.1.3 添加、删除和替换数组元素,对数组最常用的操作，就是添加、删除或者替换数组元素。添加数组元素可以使用unshift方法或者push方法。使用数组的unshift方法可以将一个新的元素添加到数组的开头，数组中所有原有元素都往后移动一位，数组长度增加1。unshift方法的使用示例如下所示。var a=1,

4、2,3,4,5;a.unshift(0);/a=0,1,2,3,4,5var b=new Array(abc,test);b.unshift(yes);b.unshift(32);/b=32,yes,abc,test,3.1.4 得到数组片段,利用Array对象的slice方法，可以得到数组的一个片段，或者说子数组。它的两个参数指定了要返回的数组片段的起始点。数组片段由slice方法第一个参数指定位置开始，到第二个参数指定位置结束的所有元素组成，但不包含第二个参数指定位置的元素。如果省略掉第二个参数，则会返回从第一个参数指定位置的元素到数组结束的所有元素。,3.1.5 反转数组,利用Array

5、对象的reverse方法可以将数组所有元素反转，示例如下所示。var a=1,2,3,4,5;a.reverse();/a=5,4,3,2,1,3.1.6 将数组转换成字符串,利用Array对象的join方法可以将数组的所有元素使用指定的字符串连接成一个新的字符串。Join方法可以接受一个参数，如果参数被提供，则使用改参数提供的字符串来分隔和连接数组的所有元素到新的字符串，如果参数没有被提供，则默认使用“,”。join方法使用示例，如下所示。var a=1,2,3,4,5;a.join();/返回1,2,3,4,5a.join(-);/返回1-2-3-4-5a.join(*);/返回1*2*3

6、*4*5,3.1.7 数组元素的排序,利用Array对象的sort方法可以对数组的元素进行排序。当sort方法不带参数执行时，在排序的时候会将数组元素转换成字符串，并按照字符串首个字符的ASCII码从小到大排列，如果数组含有未定义的元素，则这些元素会被放到数组末尾。一个使用sort方法排序的例子如下所示。var a=d,csd,32,1,ef1,2as;a.sort();/返回1,2as,32,csd,d,ef1,3.2 字符串的处理：String对象,在一节中已经向读者介绍了字符串的一些知识，在本节中将向读者介绍String对象的一些常用属性和方法。,3.2.1 获取字符串的长度,同Arra

7、y对象类似，String对象也有一个表示字符串长度的length属性，而与Array对象的length属性所不同的是，String对象的length属性表示的是字符串所包含的字符数，而且不能被人为的修改。使用length属性获取字符串长度的例子如下所示。var a=;a.length;/返回0var b=Ajax;b.length;/返回4Ajax study.length;/返回10,3.2.2 字符串的截取,用Array对象的slice方法，可以获得一个数组的段落，String对象也提供了substring方法来截取一段字符串的片段。同slice方法一样，substring方法可以接受两个

8、参数来指定截取范围，当第二个参数被省略时，默认截取到字符串的结尾。使用substring方法截取字符串的例子如下所示。var a=I love ajax;var b=a.substring(2,4);/b=lovar c=a.substring(2);/c=love ajax,3.2.3 字符串的替换,使用String对象的replace方法可以将字符串中指定的内容替换成新的内容并返回一个新的字符串。replace方法接受2个参数，第一个为需要被替换的子字符串，第二个为替换的内容。当执行replace方法时，程序会在字符串中查找所有与第一个参数相符的片段，并替换为第二个参数指定的内容。repl

9、ace方法完成替换后会返回一个新的字符串，而不会对原字符串产生影响。下面是一些使用replace方法的示例。var a=I love ajax;var b=a.replace(,_);/b=I_love_ajaxvar c=a.replace(a,o);/c=I love ojoxvar d=a.replace(ajax,AJAX);/d=I love AJAX/a=I love ajax,3.2.4 大小写转换,String对象提供了两个方法来作大小写转换的操作：toLowerCase方法和toUpperCase方法。toLowerCase方法将字符串中的所有大写字母转换为小写字母，toUp

10、perCase则将字符串中所有的小写字母转换为大写字母。但是这两个方法并不改变原有字符串，而是转换后返回一个新的字符串。一个大小写转换的示例如下所示。var a=I love ajax;var b=a.toUpperCase();var c=a.toLowerCase();,3.2.5 将字符串转换成数组,使用split方法可以将字符串根据指定的子字符串分割成若干元素，并将这些元素按照顺序在字符串中的先后排列并返回一个包含这些元素的数组。split方法可以理解为Array对象的join方法的逆运算。split方法使用示例如下所示。var a=00-12-13-DF-3A;var b=a.spl

11、it(-);/b=00,12,13,DF,3Avar c=I love ajax;var d=c.split();/d=I,love,ajaxvar e=a=1/e=a=1,b=2,c=3,3.2.6 拼接字符串的优化方法,JavaScript的字符串更像是一个常量，其值是不可以被更改的，在进行字符串的连接操作的时候，实际上是创建了新的字符串而非在原有字符串的基础上进行修改，所以当进行大量字符串拼接的操作的时，会带来性能损耗的问题，一般的解决办法是用结合数组的join方法来达到拼接字符串的效果。,3.3 正则表达式：RegExp对象,在上一节中，向读者介绍了String对象的一些常用属性和方法

12、，这一节向大家介绍同样使用广泛，并且和String对象紧密关联的正则表达式对象：RegExp。正则表达式是一个描述字符模式的对象，或者说是用某种模式去匹配一类字符串的一个公式。很多程序设计语言都支持正则表达式，JavaScript中的正则表达式，由RegExp对象表示。,3.3.1 创建正则表达式,创建一个正则表达式，可以使用RegExp构造函数和直接量两种方式。就像字符串直接量被包含在一对引号中一样，正则表达式直接量被包含在一对斜线（/）中。例如，创建一个正则表达式的方法如下所示。var reg1=new RegExp(d+);var reg2=new RegExp(1-9a-zA-Z*$)

13、;var reg3=/d+/;var reg4=/1-9a-zA-Z*$/;,3.3.2 正则表达式的语法规则,正则表达式由字符直接量、元符号和各种转义序列组成。字符直接量匹配的是它本身，除了字母字符和数字外，还可以通过转义符（）开头的转义序列来支持一些非字母字符。,3.3.3 正则表达式的属性,每个RegExp对象都有5个属性。属性source是一个只读的字符串，它存放的是正则表达式的文本，示例代码如下所示。var reg=new RegExp(1-9a-zA-Z*$,im);var text=reg.source;/text=1-9a-zA-Z*$,3.3.4 用于模式匹配的String方

14、法,在一节中，读者已经知道String对象的replace方法可以结合正则表达式使用。其实String对象有4个方法可以结合正则表达式使用，其中最简单的，就是search方法。search方法以正则表达式为参数，返回第一个与之匹配的子字符串的开始位置，如果没有任何子字符串与之匹配，则返回-1。search方法的使用示例如下所示。var str=I love JavaScript and Ajax;alert(str.search(/l.*e/);/匹配love，返回2alert(str.search(/s/);/匹配I和love之间的空格，返回1alert(str.search(/.(?:Sc

15、ript)/);/匹配Script前面的a，返回10,3.3.5 用于模式匹配的RegExp方法,RegExp定义了2个用于模式匹配的方法，他们的行为和前面介绍的String方法很类似。第一个是exec方法，它与String对象的match方法很相似，只是它接受的参数是一个字符串，它会在此字符串中进行匹配查找，并返回一个数组。与mactch方法不同的是，无论正则表达式是否开启了全局匹配模式，exec方法每次只匹配一个结果，返回的数组第1个元素是匹配的子字符串，从第2个元素开始是正则表达式中各个分组所匹配的内容。,3.3.6 常用正则表达式,下面列出了一些常用的正则表达式，供读者参考学习：匹配中

16、文字符：u4e00-u9fa5匹配双字节字符（包括汉字）：x00-xff匹配HTML标记：/.*|/匹配Email地址：/w+(-+.w+)*w+(-.w+)*.w+(-.w+)*$/i匹配URL地址：/http:/(w-+.)+w-+(/w-./?%&=*)?$/i匹配字符串收尾的空格：/(s*)|(s*$)/匹配颜色代码：/#a-fA-F0-96/匹配身份证号码：/d15(d2xX0-9)?$/匹配电话号码：/(d3)|(d3-)?(0d2,3)|0d2,3-)?1-9d6,7$/匹配整数：/(+|-)?1-9d*$/匹配浮点数：/(+|-)?(0.|1-90-9*.?)(0-9*1-9)

17、$/,3.4 日期和时间：Date对象,对时间的处理是程序设计中经常需要做的事情。在JavaScript中，时间由Date对象表示，一个Date对象表示一个日期和时间值。Date对象提供了丰富的方法来对这些值进行操作。下来向读者介绍如何创建一个Date对象，以及Date对象的各种常用属性和方法。,3.4.1 Date对象的创建,创建一个Date对象，需要使用Date构造函数。当不带参数调用Date构造函数时，返回的是一个表示当前时间的对象，如下所示。var now=new Date();,3.4.2 读取和设置日期及时间的各个部分,当得到一个Date对象后，经常需要得到日期和时间的各个组成部分

18、以进行进一步的操作和处理，这时可以使用下列方法：getFullYear()：返回对象中的年份部分，用四位数表示。getMonth()：返回对象中的月份部分（从0开始计算）。getDate()：返回对象所代表的一月中的第几天。getDay()：返回对象所代表的一周中的第几天。getHours()：返回对象中的小时部分。getMinutes()：返回对象中的分钟部分。getSeconds()：返回对象中的秒部分。getMilliseconds()：返回对象中的毫秒部分。getTime()：返回对象的内部毫秒表示。getTimezoneOffset()：返回对象所表示的日期的本地时间和UTC时间之间

19、的时间差，以分钟为单位。,3.4.3 日期和时间的换算,在程序设计中，经常需要对日期和时间对象作换算，例如计算5天后是什么日期，或者3个小时后是几点钟。在JavaScript中，日期的换算需要搭配get类方法和set类方法同时完成，例如计算5天后的日期，代码如下所示。var date=new Date();date.setDate(date.getDate()+5);,3.5 复杂的数学运算：Math对象,基本的JavaScript运算符只能做一些简单的数学运算，当需要做幂运算等高级数学运算时，就需要使用Math对象。JavaScript内置的Math对象提供了很多静态方法来完成复杂的数据运算

20、，下面为大家介绍最常用的一些方法。,3.5.1 小数的取整,在程序设计中，经常需要对一些小数进行取整操作，这时可以使用Math对象的ceil和floor方法。ceil方法提供了对一个浮点数的上舍入操作，即返回的是一个大于或者等于原数的整数。floor方法提供了对一个浮点数的下舍入操作，即返回的是一个小于或者等于原数的整数。由于Math对象提供的都是静态方法，所以调用其方法时需要使用如下格式。Math.方法名(参数);,3.5.2 得到随机数,随机数就是计算机随机产生的数字序列，在实际应用中也会经常使用，例如：一个摇奖程序，需要每次从0-9这十个数中随机抽取一个数，这个时候可以使用Math对象的

21、random方法。Math.random()总是返回一个介于0到1之间的随机数，通过对这个随机数的处理，我们可以得到任意想要的随机数。,3.5.3 幂运算,当需要进行幂运算时，可以使用Math对象的pow方法。该方法接受2个参数，第一个参数为底数，第二个参数为幂数。,3.5.4 最大值和最小值,当需要在一组数中选出最大值或者最小值时，可以使用max方法和min方法。两个方法很类似，都接受0个或者多个数字作为参数，只是他们的返回值不同：max方法返回参数列表中的最大值，而min方法返回参数列表其中的最小值；如果参数数量为0，max方法则返回-Infinity，而min方法返回Infinity；如

22、果有一个参数为NaN，或者是不能转化为数字类型的其他数据类型，两个方法都返回NaN。,3.6 操作浏览器窗口：window对象,在编写客户端脚本程序的时候，window对象是一个最常用也最重要的对象之一，每个浏览器的窗口和框架都是由window对象来表示。window对象是客户端JavaScript的全局对象，也是客户端对象层次的根。window对象定义了很多属性和方法，本节将向读者介绍如何使用这些属性和方法。,3.6.1 使用对话框,对话框允许程序向用户以对话窗口的方式呈现信息，并且能够根据用户的操作取得特定的返回值，依次来完成最基本的交互功能。JavaScript中的对话框有三种形式，分别

23、对应着window对象的3个方法：alert、confirm和prompt。,3.6.2 改变窗口状态栏的信息,window对象提供了一个可读写的属性status，使得JavaScript程序可以控制浏览器窗口状态栏所显示的信息，如下所示。window.status=I love Ajax;,3.6.3 延迟执行和定时执行,window对象提供了setTimeout方法可以让某段程序代码、某个函数或者某个方法在指定的时间延迟后执行。该方法接受2个参数，第一个参数为需要延迟执行的代码段、函数或者方法，第二个参数则表示了延迟的时间长度，单位为毫秒。,3.6.4 URL的获取和跳转,window对象

24、提供了location属性来标识当前页面的URL地址。,3.6.5 历史记录的前进和后退,window对象的history属性保存浏览器的历史记录。同location一样，history本身也是一个对象，它提供了go、back和forward三种方法对历史记录进行操作。go方法接受一个正整数或者负整数作为参数，其语法格式如下所示。history.go(n);,3.6.6 控制窗口的大小和位置,window对象提供了一组方法，使得JavaScript可以控制浏览器窗口的大小和位置：1.resizeTo方法2.resizeBy方法3.moveTo方法4.moveBy方法,3.6.7 打开和关闭窗口

25、,window对象提供了open和close方法来让JavaScript控制窗口的打开和关闭。,3.6.8 获得焦点和失去焦点,调用window对象的focus方法，可以使窗口获得焦点，而调用blur方法，则可以让窗口失去焦点。在调用focus方法的时候，系统会将窗口移动到窗口堆栈的顶部，使窗口可见。在使用open方法打开新窗口的时候，浏览器会自动在窗口堆栈顶部创建窗口，但如果open方法第二个参数指定的窗口名已经存在，open方法并不会自动让那个窗口可见，这时就可以使用focus方法。,3.6.9 取得用户显示器的信息,window对象的screen属性是一个记录了客户端显示器信息的对象，它

26、提供有关显示器大小和可用颜色数量的信息。属性availWidth和availHeight是实际可用的显示器大小，他们排除了诸如windows任务栏等所占用的空间，也可以理解为显示器可以提供给浏览器使用的空间大小。属性colorDepth指定可以显示的颜色数以2为底的对数。,3.6.10 取得用户浏览器的信息,window对象的navigator属性保存了客户端浏览器的总体信息。navigator是一个对象，它主要有5个属性来描述正在运行的浏览器的版本信息。,3.7 操作HTML文档：document对象,document对象是window对象的属性，由于其重要性，所以在此节中单独向读者介绍。每

27、个window对象都有document属性，该属性引用的是窗口中显示的HTML文档的Document对象。在之前的许多演示程序中，读者已经接触了document.write方法，除此之外，document对象还提供了一些描述HTML文档那个整体信息的属性，已经针对HTML文档进行操作的方法。下面向读者介绍document对象最常用的属性和方法。,3.7.1 文档的输出,document对象提供了write方法使得JavaScript可以附加文本到当前打开的文档中，在之前的许多示例中读者已经接触过write方法的使用。document对象还提供了一个与write方法类似的方法：writeln。w

28、riteln方法的使用和write方法一样，所不同的是会在输出的内容后面自动加上一个换行符。,3.7.2 文档的标题,document对象的title属性描述了位于HTML文档中和中间的内容，即文档的标题，JavaScript可以读取和设置这个值。,3.7.3 文档的图像,document对象的images属性是一个数组，保存了对当前HTML文档中所有图像的引用。在下面的演示程序中，通过遍历images数组来给文档中所有的图片加上边框。,3.7.4 文档的超链接,同images属性类似，links属性也是一个数组，其保存了文档中所有超链接的引用。,3.7.5 文档的表单,document对象的

29、forms属性是一个数组，保存了当前文档中所有表单的引用。表单是HTML中最重要的元素之一，是用户与服务器进行数据交互的重要工具。,3.8 应用实例,在前面几节中，向读者介绍了JavaScript常用的对象及其方法和属性。在本节中将向读者展示两个综合运用这些知识的实例，一个是在网页上显示自动更新的日期和时间，另外一个则是一个简单的小游戏Lucky Seven。,3.8.1 在网页上显示自动更新的日期和时间,本实例通过操作Date对象及利用setInterval方法，来制作在网页上自动更新的日期和时间。,3.8.2 一个简单的小游戏：Lucky Seven（幸运七）,Lucky Seven是一种

30、最早来源于街头游戏厅的游戏。Lucky Seven包含这一组图，开始游戏后，在3个容器中将这组图快速的轮换显示。玩家依次按下3个按钮，来停止3个图形容器的滚动。当3个容器中的图片都停止后，如果图片都是7，就会中奖并得到奖金。下面这个实例，是使用JavaScript来简单的实现这个游戏。,3.9 小结,本章主要向读者介绍了JavaScript的一些常用对象，其中包括数组对象（Array）、字符串对象（String）、正则表达式对象（RegExp）、日期和时间对象（Date）、数学运算对象（Math）、浏览器窗口对象（window）和文档对象（document），并辅以实例详细介绍了其常用的属性和方法。最后，向读者展示了两个综合应用这些知识的实例。,