第3章javascript对象课件.ppt

1、1JavaScript对象2整 体 概 述THE FIRST PART OF THE OVERALL OVERVIEW,P L E A S E S U M M A R I Z E T H E C O N T E N T第一部分3面向对象与JavascriptlJavascript不是面向对象语言，而是基于对象的语言，而不是面向对象语言不是面向对象：没有类，不支持继承（Javascript仿真继承：prototype-based inheritance），多态基于对象：大部分设计都是源于面向对象编程中用到的概念和方法，文档和文档元素都是基于对象建模的。4JavaScript对象在JavaScri

2、pt中，对象是属性的集合，属性由两种：数据属性和方法属性l 数据属性：简称属性，这些属性可以是JavaScript变量（类型为原始数据类型：数值，字符串），也可以是已经定义的其他对象（对象的引用）。l 方法属性：简称方法，这些方法就是JavaScript的函数。l 可以通过句点(.)来访问一个对象的属性和对象的方法。例如：MyCar.Color=Red;MyCar.leftWheel=new Wheel(“4”,”black”,”东风”)MyCar.TurnLeft();MyCar.display_car();5JavaScript常用对象的类别l JavaScript是一种基于对象的脚本语言

3、，常用对象可以分为以下三种类别：JavaScript对象；BOM浏览器对象：常用的窗口对象；常用的文档对象；1.DOM对象；6简介JavaScript对象l 自定义对象l 核心语言对象（内置对象），常用的有：数学对象Math；数值对象Number；日期对象Date；字符串对象String；数组对象Array；全局对象Global；正则表达式对象RegExp；67简介BOM对象l 浏览器BOM对象，主要有：窗口对象window；浏览器信息对象navigator；屏幕对象screen；网址对象location；历史记录对象history；文档对象document；窗体对象form；锚点对象anch

4、or；链接对象link；图像对象image；78简介 DOM对象89自定义的对象l创建自定义对象通过对象初始化创建对象通过定义对象的构造函数创建对象l定义对象的方法属性10一、创建自定义对象(1)在JavaScript中，创建用户自定义对象有两种方法：n通过对象初始化创建对象。在用户创建对象的同时也完成了对象的初始化工作，它使用的一般形式如下所示：对象=属性1:属性值1,属性2:属性值2,属性N:属性值Nl例：一个汽车对象，它有3个属性：颜色(Color)、牌照号码(Number)、轮胎数量(Wheels)MyCar=Color:Red,Number:123456,Wheels:411通过对象

5、初始化创建一个汽车对象 在下例的页面中创建了这个汽车对象，并将汽车对象的颜色显示在浏览器中。-car.html-MYCAR12创建自定义对象(2)(2)通过定义对象的构造函数创建对象。在这种方法中，用户必须先定义一个对象的构造函数，然后再通过new函数创建这个对象的实例。这种方式和面向对象编程中的先定义类、然后创建类的实例的创建对象的方式十分相似。例如，如果要将上例中的汽车对象改用这种方法来实现，l 首先必须定义对象的构造函数：function Car(theColor,theNumber,theWheels)this.Color=theColor;this.Number=theNumber;

6、this.Wheels=theWheelsl 然后，可以使用new操作符创建这个对象的实例：var MyCar=new Car(Red,123456,4);13通过定义对象的构造函数创建对象例子MYCAR14二、定义对象的方法属性对象的方法就是与对象相联系的函数，在定义方法的时候和定义普通函数并没有什么区别，不过在定义完方法之后，还需要将方法和对象相联系起来。15定义对象的方法属性例子（1）如果为上例中的MyCar对象中定义了一个ReportInfo()方法，能够将汽车的所有信息在页面中显示出来：l 首先定义这个函数，代码如下所示：function ReportInfo()var inform

7、ation=new String;information=Color:+this.Color+information+=Number:+this.Number+information+=Wheels:+this.Wheels window.document.write(information);在这个函数中定义了一个字符串，该字符串中包含着需要显示的全部信息，然后再运用document的write()方法将字符串显示到页面中。在这里运用了this操作符，它代表的是调用这个方法的对象。16定义对象的方法例子（2）l 然后，需要运用this操作符将这个函数与对象相关联起来，成为对象的方法。完整的对

8、象构造函数如下所示：function Car(theColor,theNumber,theWheels)this.Color=theColor;this.Number=theNumber;this.Wheels=theWheels;this.Report=ReportInfo;l 这样在运用new操作符建立对象后，就可以运用通过对象调用对象的方法，如果定义了一个MyCar对象，就可以如下使用对象的方法：MyCar.Report();17定义对象的方法例子：MYCAR!-function ReportInfo()var information=new String;information=Col

9、or:+this.Color+information+=Number:+this.Number+information+=Wheels:+this.Wheels;window.document.write(information);function Car(theColor,theNumber,theWheels)this.Color=theColor;this.Number=theNumber;this.Wheels=theWheels;this.Report=ReportInfo;var MyCar=new Car(Red,123456,4);MyCar.Report();/-18创建对象

10、和访问对象l 创建对象：一般通过new操作符进行创建，new表达式将调用构造函数构造一个对象如：MyCar=Color:Red,Number:123456,Wheels:4 var MyCar=new Car(Red,123456,4);l 可以通过句点(.)来访问一个对象的属性和对象的方法。例如：MyCar.Color=Red;MyCar.leftWheel=new Wheel(“4”,”black”,”东风”)MyCar.TurnLeft();MyCar.display_car();l 也 可 以 用 对 象 属 性 名 称 作 为 下 标 的 形 式 进 行 访 问例如：var colo

11、r1=MyCar.Color；var color2=MyCar“Color”;l 如果访问对象的属性不存在，那么得到的值是undefined。19增加/删除对象属性lJavascript中，其对象中的属性的数目是动态的，在解释过程中的任何时刻，都可以为对象增加属性或删除属性。l如：var MyCar=Color:Red,Number:123456,Wheels:4/creat and initialize the make propertyMyCar.make=“Ford”;/creat and initialize the model propertyMyCar.model=“Contour

12、 SVC”;/delete the model propertydelete MyCar.model20删除对象在JavaScript脚本中运用new操作符建立对象，在使用完对象之后，可以通过delete操作符删除这个对象。例如：如果建立对象的名称为MyCar，则删除这个对象的语句如下所示：delete MyCar;21和对象有关的程序语句:forin语句 forin语句的一般表达形式如下所示：for(变量in对象)代码块 l JavaScript是一种基于对象的语言，forin是循环语句在对象上的一种应用方式。在这个语句中，变量将会列举对象的每一个属性.for(var prop in MyC

13、ar)document.write(Name:,prop,;value:,MyCar prop,);22和对象有关的程序语句:with语句 with语句的一般表达形式如下所示：with(对象)代码块l with语句用于声明代码块的缺省对象，代码块可以直接使用with语句声明的对象的属性和方法，而不必写出这个属性和方法的完整引用。l 如果在代码块中有许多语句需要使用同一个对象的属性和方法，使用with语句后，只需要写一次这个对象的完整引用，然后可以在代码块中直接编写对象的属性和方法，这样能够极大地减少代码编写的工作量。with(window.document)write(hello);write

14、(hello11);write(hello1234);23typeof操作符l用法 typeof x 或者 typeof(x)l返回值是一字符串，表示某个操作数的类型原始数据类型l 数值（“number”）l 字符串（“string”）l 布尔型（“boolean”）l 未定义型（“undefined”）l null（“object”）l 对象（“object”）24核心语言对象 数学对象Math；数值对象Number；日期对象Date；字符串对象String；数组对象Array；全局对象Global；正则表达式对象RegExp；25数学对象（Math）l该对象的所有属性和方法都是静态的，在使

15、用该对象时，不需要进行创建。l该对象主要为javascript核心提供了对数值进行代数计算的一系列方法以及少数重要的数值常量。26Math对象的属性如何访问这些属性值？27Math对象的方法28Math常用方法的应用l max()和min()方法用来返回一组数中的最大值和最小值，均可接受任意多个参数。var iMax=Math.max(12,45,2,66);l Math对象提供了3种方法来处理小数转化为整数的操作：ceil()：表示向上取整，如：Math.ceil(4.2)的返回值是5；floor()：表示向下取整，如：Math.floor(4.7)的返回值是4；round()：表示四舍五入

16、，如：Math.round(4.2)的返回值是4，Math.round(4.7)的返回值是5；29案例：小数取整的方法。document.write(ceil:+Math.ceil(-25.6)+Math.ceil(25.6)+);/向上舍入 document.write(floor:+Math.floor(-25.6)+Math.floor(25.6)+);/向下舍入 document.write(round:+Math.round(-25.6)+Math.round(25.6)+);/四舍五入30案例：确定小数位数。l在某些应用中，需要把数值结果转换为指定的小数位数。!-var x=3.1

17、415926;document.write(原始数值:+x+);var y=Math.round(x*100)/100;document.write(保留2位小数:+y+);-31创建受约束的随机数-random()l random()方法：生成01之间的随机数，不包括0和1。l 获得某个范围内随机数的公式：number=Math.floor(Math.random()*total_number_of_choices+first_possible_value);l 例如：希望取值的随机数范围在299之间，有98个数字，第一个值为2，则公式应用如下：var iNum=Math.floor(Mat

18、h.random()*98+2);32案例：随机选择数组元素。33案例：用random()更换图片。自动刷新 document.write(2秒自动刷新，随机显示图片);var i=0;i=Math.round(Math.random()*8+1);document.write();假定随机产生的数字i=3，上述代码即为：显示第三幅图片（3.jpg）如何实现每隔2秒刷新网页Math.round(Math.random()*8+1)产生1-9的数字34数值对象（Number）Number 对象是原始数值的包装对象；创建数值对象的语法如下：var myNum=new Number(value);/

19、myNum是一个对象var myNum=Number(value);/myNum是一个原始数值参数 value 是要创建的 Number 对象的数值，或是要转换成数字的值。关于返回值：当 Number()和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象。如果不用 new 运算符，把 Number()作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN）。35Number对象的常用方法.toString(radix):将数字转换为字符串。radix是可选参数，指定转换数字的基数（进制），取 2 36 之间的整数。若

20、省略该参数，则使用基数 10。例：var x=new Number(123),y=123;var z=x.toString();document.write(typeof(x)+typeof(y)+typeof(z);36案例：数值转换为字符串的同时，实现进制转换。浏览结果：37案例：数值转换为字符串的多种方法。数值和字符串作连接运算前，先被转换为字符串。38日期对象（Date）简介l在web开发过程中，Date对象用来实现对日期和时间的控制。l如果想在页面上显示计时时钟，就得重复生成新的Date对象来获取计算机的当前时间。lDate 对象存储的日期为自 1970 年 1 月 1 日 00:0

21、0:00 以来的毫秒数。39Date 对象的创建 语法格式如下：dateObj=new Date();/Date 对象会自动把当前日期和时间保存为其初始值。dateObj=new Date(dateVal)：new Date(“month dd,yyyy hh:mm:ss”);new Date(“month dd,yyyy”);new Date(ms);1.dateObj=new Date(year,month,date,hours,minutes,seconds,ms);40参数说明41案例：创建Date对象l 返回当前的日期和时间，代码如下：var today=new Date()；doc

22、ument.write(today);运行结果：系统当前时间，形式如Tue Feb 3 08:49:30 UTC+0800 2010l 用年、月、日来创建日期对象，代码如下：var newDate=new Date(2010,10,1);l 用年、月、日、小时、分钟、秒来创建日期对象：var newDate=new Date(2010,10,1,8,20,50);l 以字符串形式创建日期对象：var mydate=new Date(“July 29,1998 10:30:00”)var mydate=new Date(July 29,1998)42Date对象的主要方法43Date对象的主要方

23、法44Date对象的主要方法45案例：Date对象的应用。var now=new Date();var hour=now.getHours();if(hour=0&hour 12&hour18&hour 24)document.write(晚上好!);document.write(今天日期:+now.getYear()+年“+(now.getMonth()+1)+月+now.getDate()+日);document.write(现在时间:+now.getHours()+点+now.getMinutes()+分);获得当前日期和时间获得小时，即当前是几点判断上午、下午还是晚上月份数字011，注

24、意146案例：应用Date方法拆分日期和时间，然后按指定格式显示。!var date=new Date();var year=date.getYear();var month=date.getMonth();month=month+1;var day=date.getDate();var hours=date.getHours();var minutes=date.getMinutes();var seconds=date.getSeconds();var milliseconds=date.getMilliseconds();document.write(“当前日期为:”+year+”年”+

25、month+”月”+day+”日”+”);document.write(“当前时间为:”+hours+”时”+minutes+”分”+seconds+”秒”+millisenconds+”毫秒”+”);/-47练习：如何获取时间的详细信息？实现如下浏览效果：在浏览器里输出：今天是2011年3月9日，星期三48练习：参考答案。49练习：仿照如下浏览效果，计算当前日期距离08奥运会的天数。50练习：参考答案。获取当前时间距离08奥运会的毫秒数。51字符串对象（String）String对象是动态对象，需要创建实例后才能引用该对象的属性和方法。创建字符串对象有两种不同方法：使用 var 语句 var

26、 newstr=“这是我的字符串“；var newstr=也可以使用单引号;创建 String 对象 var newstr=new String(“这是我的字符串”)；5152String对象的属性 constructor属性和prototype属性都是公共属性，在Array、Date、Boolean和Number对象中都可以调用。53案例：length属性的应用。var newString=new String(study);var p=newString.length;alert(p.toString();54String 对象的主要方法54更多方法参见http:/ 没有对该方法进行标准化

27、，因此反对使用它。56案例：用slice()与substring()取子串。结果：57案例：slice()和substring()的区别。结果：58案例：index()和lastIndex()搜索子串 结果：59 var str=Hello world!document.write(str.lastIndexOf(Hello)+)document.write(str.lastIndexOf(World)+)document.write(str.lastIndexOf(world)60案例：比较字符串。相等运算符var a=“com”,b=“www”,identity;if(a=b)identi

28、ty=“same”;else identity=“different”;identity的结果是“different”;var a=“com”,b=“www”,identity;if(a！=b)identity=“different”;else identity=“same”;identity的结果是“different”;字符串相等比较字符串不等比较61案例：比较字符串。绝对相等运算符var a=42,b=“42”,identity;if(a=b)identity=“same”;else identity=“different”;identity的值为”same”;如果比较是在两个不同类型的

29、数据中进行的，js会尝试将其中一个转化为另一种类型，使得比较可以进行下去。例如，比较一个数字和一个字符串，字符串会被转化为数字，最后的比较实际上是在两个数字之间进行的。如果将“=”换成“=”，indentity的结果就为“different”。62数组对象（Array）的创建创建Array对象的语法格式：var 数组名=new Array();();例：var emp=new Array()；var 数组名=new Array(size)(size);/size;/size表示数组长度，是可选项，例：var mycars=new Array(3)var mycars=new Array(3)；

30、mycars0=Saab mycars0=Saab mycars1=Volvo“mycars1=Volvo“mycars2=BMW mycars2=BMW var 数组名=new Array(5,4,3,2,1);var misc=1.1,2.3,4.3;63案例：forin输出数组元素。var xvar mycars=new Array()mycars0=Saabmycars1=Volvomycars2=BMWfor(x in mycars)document.write(mycarsx+)64Array的length属性 length属性：返回数组中元素的个数。a=new Array(10)

31、;/a.length值为10 a=new Array(1,2,3);/a.length值为3 a=4,5;/a.length值为26465Array对象的方法66案例：用toString()方法将数组转换为字符串。浏览结果：China,USA,Britain string 分析：toString()方法转换后直接将各个数组项用逗号进行连接。如果希望用指定符号连接，可以使用join()方法。var aMap=China,USA,Britain;alert(aMap.toString()+typeof(aMap.toString();67案例：join()连接数组元素成字符串。var arr=ne

32、w Array(3);arr0=Georgearr1=Johnarr2=Thomasdocument.write(arr.join();document.write();document.write(arr.join(.);运行结果：George,John,ThomasGeorge.John.Thomas 68案例：join()方法指定转换后字符串间的连接符。浏览结果：69案例：split()方法将字符串转换为数组 浏览结果：70案例：reverse()方法实现数组元素的反序排列。浏览结果：71练习：反序输出输入框中的字符串 要点分析：利用prompt()弹出输入对话框；利用split()将输

33、入的字符串转换为数组；利用reverse()反序排列数组元素；利用join()方法将反序后的数组元素转换为字符串。72练习：参考答案。73案例：concat()合并两个数组。var arr=new Array(3)arr0=Georgearr1=Johnarr2=Thomasvar arr2=new Array(3)arr20=Jamesarr21=Adrewarr22=Martindocument.write(arr.concat(arr2)运行结果：George,John,Thomas,James,Adrew,Martin 74JavaScript 全局对象 l全局对象是预定义的对象，通过

34、使用全局对象，可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性，所以它没有名称。l全局对象只是一个对象，而不是类。既没有构造函数，也无法实例化一个新的全局对象。75全局函数76全局属性77案例：String()方法将数字转换为字符串。l方法：使用String类内建的构造函数：var a=10;alert(typeof a);a=String(a);/a=new String(a);或a=a.toString();alert(typeof a);第一个alert显示“number”，第二个alert显示“string”。78案例：Number()方法将字符串转换为数字。l

35、方法：使用Number类内建的构造函数：var a=10;alert(typeof a);a=Number(a);alert(typeof a);第一个alert显示“string”，第二个alert显示“number”。79案例：isNaN()方法判断参数是否数字。/首先获取用户的一个输入，并用Number()强制转换为数字var iNumber=Number(prompt(输入一个5到100之间的数字,);if(isNaN(iNumber)/判断输入的是否是数字document.write(请确认你的输入正确);else if(iNumber 100|iNumber 5)/判断输入的数字范

36、围document.write(你输入的数字范围不在5和100之间);elsedocument.write(你输入的数字是:+iNumber);80parseInt()语法l 功能：解析一个字符串，并返回一个整数。l 语法：parseInt(string,radix)string，必有参数，表示需要解析的字符串；radix，可选参数，表示要解析的数字的基数。该值介于 2 36 之间。如果该参数小于 2 或者大于 36，则 parseInt()将返回 NaN。当参数 radix 的值为 0，或没有设置该参数时，parseInt()会根据 string 来判断数字的基数。举例，如果 string

37、以 0 x 开头，parseInt()会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt()的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 9 的数字开头，parseInt()将把它解析为十进制的整数。l 注释：只有字符串中的第一个数字会被返回。l 注释：开头和结尾的空格是允许的。l 提示：如果字符串的第一个字符不能被转换为数字，那么 parseInt()会返回 NaN。81提问与解答环节Questions and answers82感谢参与本课程，也感激大家对我们工作的支持与积极的参与。课程后会发放课程满意度评估表，如果对我们课程或者工作有什么建议和意见，也请写在上边结束语83感谢观看The user can demonstrate on a projector or computer,or print the presentation and make it into a film