教学第3章javascript对象课件

上传人：x*** IP属地：贵州上传时间：2022-11-26 格式：PPT 页数：166 大小：733.94KB 积分：25 举报 版权申诉

已阅读5页，还剩161页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

JavaScript对象1JavaScript对象1整体概述THEFIRSTPARTOFTHEOVERALLOVERVIEW,PLEASESUMMARIZETHECONTENT第一部分2整体概述第一部分2面向对象与JavascriptJavascript不是面向对象语言，而是基于对象的语言，而不是面向对象语言不是面向对象：没有类，不支持继承（Javascript仿真继承：prototype-basedinheritance），多态基于对象：大部分设计都是源于面向对象编程中用到的概念和方法，文档和文档元素都是基于对象建模的。3面向对象与JavascriptJavascript不是面向对JavaScript对象在JavaScript中，对象是属性的集合，属性由两种：数据属性和方法属性数据属性：简称属性，这些属性可以是JavaScript变量（类型为原始数据类型：数值，字符串），也可以是已经定义的其他对象（对象的引用）。方法属性：简称方法，这些方法就是JavaScript的函数。可以通过句点(.)来访问一个对象的属性和对象的方法。例如： MyCar.Color="Red"; MyCar.leftWheel=newWheel(“4”,”black”,”东风”)

MyCar.TurnLeft(); MyCar.display_car();4JavaScript对象在JavaScript中，对象是属性JavaScript常用对象的类别JavaScript是一种基于对象的脚本语言，常用对象可以分为以下三种类别：JavaScript对象；BOM浏览器对象：常用的窗口对象；常用的文档对象；DOM对象；5JavaScript常用对象的类别JavaScript是一种简介JavaScript对象自定义对象核心语言对象（内置对象），常用的有：数学对象Math；数值对象Number；日期对象Date；字符串对象String；数组对象Array；全局对象Global；正则表达式对象RegExp；66简介JavaScript对象自定义对象66简介BOM对象浏览器BOM对象，主要有：窗口对象window；浏览器信息对象navigator；屏幕对象screen；网址对象location；历史记录对象history；文档对象document；窗体对象form；锚点对象anchor；链接对象link；图像对象image；77简介BOM对象浏览器BOM对象，主要有：77简介DOM对象88简介DOM对象88自定义的对象创建自定义对象通过对象初始化创建对象通过定义对象的构造函数创建对象定义对象的方法属性9自定义的对象创建自定义对象9一、创建自定义对象(1)在JavaScript中，创建用户自定义对象有两种方法：通过对象初始化创建对象。在用户创建对象的同时也完成了对象的初始化工作，它使用的一般形式如下所示：对象={属性1:属性值1,属性2:属性值2,…属性N:属性值N}例：一个汽车对象，它有3个属性：颜色(Color)、牌照号码(Number)、轮胎数量(Wheels)MyCar={Color:"Red",Number:"123456",Wheels:4}10一、创建自定义对象(1)在JavaScript中，创建用户自通过对象初始化创建一个汽车对象

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

然后，可以使用new操作符创建这个对象的实例：varMyCar=newCar("Red","123456",4);12创建自定义对象(2)(2)通过定义对象的构造函数创建对象。通过定义对象的构造函数创建对象例子<HTML><HEAD><TITLE>MYCAR</TITLE><SCRIPTLANGUAGE="JavaScript"></SCRIPT></HEAD><BODY></BODY></HTML>13通过定义对象的构造函数创建对象例子<HTML>13二、定义对象的方法属性

对象的方法就是与对象相联系的函数，在定义方法的时候和定义普通函数并没有什么区别，不过在定义完方法之后，还需要将方法和对象相联系起来。14二、定义对象的方法属性对象的方法就是与对象相联系的函数，在定义对象的方法属性例子（1）

如果为上例中的MyCar对象中定义了一个ReportInfo()方法，能够将汽车的所有信息在页面中显示出来：首先定义这个函数，代码如下所示：

functionReportInfo(){varinformation=newString;information="Color:"+this.Color+"<BR>"information+="Number:"+this.Number+"<BR>"information+="Wheels:"+this.Wheelswindow.document.write(information);}

在这个函数中定义了一个字符串，该字符串中包含着需要显示的全部信息，然后再运用document的write()方法将字符串显示到页面中。在这里运用了this操作符，它代表的是调用这个方法的对象。15定义对象的方法属性例子（1）如果为上例中的MyCar对象定义对象的方法例子（2）然后，需要运用this操作符将这个函数与对象相关联起来，成为对象的方法。完整的对象构造函数如下所示：functionCar(theColor,theNumber,theWheels){this.Color=theColor;this.Number=theNumber;this.Wheels=theWheels;this.Report=ReportInfo;}这样在运用new操作符建立对象后，就可以运用通过对象调用对象的方法，如果定义了一个MyCar对象，就可以如下使用对象的方法：MyCar.Report();16定义对象的方法例子（2）然后，需要运用this操作符将这个函定义对象的方法例子：<HTML><HEAD><TITLE>MYCAR</TITLE><SCRIPTLANGUAGE="JavaScript"></SCRIPT></HEAD><BODY></BODY></HTML>17定义对象的方法例子：<HTML>17创建对象和访问对象创建对象：一般通过new操作符进行创建，new表达式将调用构造函数构造一个对象

如：MyCar={Color:"Red",Number:"123456",Wheels:4}

varMyCar=newCar("Red","123456",4);可以通过句点(.)来访问一个对象的属性和对象的方法。

例如：

MyCar.Color="Red"; MyCar.leftWheel=newWheel(“4”,”black”,”东风”)

MyCar.TurnLeft(); MyCar.display_car();

也可以用对象属性名称作为下标的形式进行访问

例如：varcolor1=MyCar.Color；

varcolor2=MyCar[“Color”];如果访问对象的属性不存在，那么得到的值是undefined。18创建对象和访问对象创建对象：一般通过new操作符进行创建，n增加/删除对象属性Javascript中，其对象中的属性的数目是动态的，在解释过程中的任何时刻，都可以为对象增加属性或删除属性。如：varMyCar={Color:"Red",Number:"123456",Wheels:4}//creatandinitializethemakepropertyMyCar.make=“Ford”;//creatandinitializethemodelpropertyMyCar.model=“ContourSVC”;//deletethemodelpropertydeleteMyCar.model19增加/删除对象属性Javascript中，其对象中的属性的数删除对象

在JavaScript脚本中运用new操作符建立对象，在使用完对象之后，可以通过delete操作符删除这个对象。例如：如果建立对象的名称为MyCar，则删除这个对象的语句如下所示： deleteMyCar;20删除对象在JavaScript脚本中运用new操作符建立对和对象有关的程序语句:for…in语句

for…in语句的一般表达形式如下所示：for(变量

in对象)｛

代码块｝

JavaScript是一种基于对象的语言，for…in是循环语句在对象上的一种应用方式。在这个语句中，变量将会列举对象的每一个属性.for(varpropinMyCar){document.write("Name:",prop,";value:",MyCar[prop],"<br>");}21和对象有关的程序语句:for…in语句for…in语句的一和对象有关的程序语句:

with语句

with语句的一般表达形式如下所示：with(对象){

代码块}with语句用于声明代码块的缺省对象，代码块可以直接使用with语句声明的对象的属性和方法，而不必写出这个属性和方法的完整引用。如果在代码块中有许多语句需要使用同一个对象的属性和方法，使用with语句后，只需要写一次这个对象的完整引用，然后可以在代码块中直接编写对象的属性和方法，这样能够极大地减少代码编写的工作量。with(window.document){write("hello");

write("hello11");write("hello1234");}

22和对象有关的程序语句:with语句with语句的一般表达typeof操作符用法typeofx或者typeof(x)返回值是一字符串，表示某个操作数的类型原始数据类型数值（“number”）字符串（“string”）布尔型（“boolean”）未定义型（“undefined”）null（“object”）对象（“object”）23typeof操作符用法typeofx或者typeof核心语言对象数学对象Math；数值对象Number；日期对象Date；字符串对象String；数组对象Array；全局对象Global；正则表达式对象RegExp；24核心语言对象数学对象Math；24数学对象（Math）该对象的所有属性和方法都是静态的，在使用该对象时，不需要进行创建。该对象主要为javascript核心提供了对数值进行代数计算的一系列方法以及少数重要的数值常量。25数学对象（Math）该对象的所有属性和方法都是静态的，在使用Math对象的属性如何访问这些属性值？26Math对象的属性如何访问这些属性值？26Math对象的方法27Math对象的方法27Math常用方法的应用max()和min()方法用来返回一组数中的最大值和最小值，均可接受任意多个参数。variMax=Math.max(12,45,2,66);Math对象提供了3种方法来处理小数转化为整数的操作：ceil()：表示向上取整，如：Math.ceil(4.2)的返回值是5；floor()：表示向下取整，如：Math.floor(4.7)的返回值是4；round()：表示四舍五入，如：Math.round(4.2)的返回值是4，Math.round(4.7)的返回值是5；28Math常用方法的应用max()和min()方法用来返回一组案例：小数取整的方法。<scripttype="text/javascript">document.write("ceil:"+Math.ceil(-25.6)+""+Math.ceil(25.6)+"<br/>");//向上舍入

document.write("floor:"+Math.floor(-25.6)+""+Math.floor(25.6)+"<br/>");//向下舍入

document.write("round:"+Math.round(-25.6)+""+Math.round(25.6)+"<br/>");//四舍五入</script>29案例：小数取整的方法。<scripttype="text/案例：确定小数位数。在某些应用中，需要把数值结果转换为指定的小数位数。<scripttype="text/javascript"></script>30案例：确定小数位数。在某些应用中，需要把数值结果转换为指定的创建受约束的随机数-random()random()方法：生成0~1之间的随机数，不包括0和1。获得某个范围内随机数的公式：number=Math.floor(Math.random()*total_number_of_choices+first_possible_value);例如：希望取值的随机数范围在2~99之间，有98个数字，第一个值为2，则公式应用如下：variNum=Math.floor(Math.random()*98+2);31创建受约束的随机数-random()random()方法：生案例：随机选择数组元素。32案例：随机选择数组元素。32案例：用random()更换图片。<HTML><HEAD><METAhttp-equiv="refresh"content="2"><TITLE>自动刷新</TITLE><SCRIPTlanguage="JavaScript">document.write("2秒自动刷新，随机显示图片");vari=0;i=Math.round(Math.random()*8+1);document.write("<IMGwidth=640height=433src="+i+".jpg>");</SCRIPT></HEAD><BODY>

</BODY></HTML>假定随机产生的数字i=3，上述代码即为：<IMGwidth=640height=433src=3.jpg>显示第三幅图片（3.jpg）如何实现每隔2秒刷新网页Math.round(Math.random()*8+1)产生1-9的数字33案例：用random()更换图片。<HTML>假定随机产生的数值对象（Number）Number对象是原始数值的包装对象；创建数值对象的语法如下：varmyNum=newNumber(value);//myNum是一个对象varmyNum=Number(value);//myNum是一个原始数值参数value

是要创建的Number对象的数值，或是要转换成数字的值。关于返回值：当Number()和运算符new一起作为构造函数使用时，它返回一个新创建的Number对象。如果不用new运算符，把Number()作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回NaN）。34数值对象（Number）Number对象是原始数值的包装对Number对象的常用方法.toString(radix):将数字转换为字符串。radix是可选参数，指定转换数字的基数（进制），取2~36之间的整数。若省略该参数，则使用基数10。例：varx=newNumber(123),y=123;varz=x.toString();document.write(typeof(x)+""+typeof(y)+""+typeof(z));35Number对象的常用方法.toString(radix)案例：数值转换为字符串的同时，实现进制转换。浏览结果：36案例：数值转换为字符串的同时，实现进制转换。浏览结果：36案例：数值转换为字符串的多种方法。数值和字符串作连接运算前，先被转换为字符串。37案例：数值转换为字符串的多种方法。数值和字符串作连接运算前，日期对象（Date）简介在web开发过程中，Date对象用来实现对日期和时间的控制。如果想在页面上显示计时时钟，就得重复生成新的Date对象来获取计算机的当前时间。Date对象存储的日期为自1970年1月1日00:00:00以来的毫秒数。38日期对象（Date）简介在web开发过程中，Date对象用来Date对象的创建

语法格式如下：dateObj=newDate();

//Date对象会自动把当前日期和时间保存为其初始值。dateObj=newDate(dateVal)：newDate(“monthdd,yyyyhh:mm:ss”);newDate(“monthdd,yyyy”);newDate(ms);dateObj=newDate(year,month,date[,hours[,minutes[,seconds[,ms]]]]);39Date对象的创建语法格式如下：39参数说明40参数说明40案例：创建Date对象返回当前的日期和时间，代码如下：vartoday=newDate()；document.write(today);运行结果：系统当前时间，形式如TueFeb308:49:30UTC+08002010用年、月、日来创建日期对象，代码如下：varnewDate=newDate(2010,10,1);用年、月、日、小时、分钟、秒来创建日期对象：varnewDate=newDate(2010,10,1,8,20,50);以字符串形式创建日期对象：varmydate=newDate(“July29,1998

10:30:00”)varmydate=newDate("July29,1998")41案例：创建Date对象返回当前的日期和时间，代码如下：41Date对象的主要方法42Date对象的主要方法42Date对象的主要方法43Date对象的主要方法43Date对象的主要方法44Date对象的主要方法44案例：Date对象的应用。<HTML><BODY><scriptlanguage="javaScript">varnow=newDate();varhour=now.getHours();if(hour>=0&&hour<=12) document.write("上午好!")if(hour>12&&hour<=18)document.write("下午好!");if(hour>18&&hour<24)document.write("晚上好!");document.write("<P>今天日期:"+now.getYear()+"年“

+(now.getMonth()+1)+"月"+now.getDate()+"日");document.write("<P>现在时间:"+now.getHours()+"点"+now.getMinutes()+"分");</script></body></HTML>获得当前日期和时间获得小时，即当前是几点判断上午、下午还是晚上月份数字0－11，注意＋145案例：Date对象的应用。<HTML>获得当前日期和时间获得案例：应用Date方法拆分日期和时间，然后按指定格式显示。<scriptlanguage=“javascript”><!—vardate=newDate();varyear=date.getYear();varmonth=date.getMonth();month=month+1;varday=date.getDate();varhours=date.getHours();varminutes=date.getMinutes();varseconds=date.getSeconds();varmilliseconds=date.getMilliseconds();document.write(“当前日期为:”+year+”年”+month+”月”+day+”日”+”<br/>”);document.write(“当前时间为:”+hours+”时”+minutes+”分”+seconds+”秒”+millisenconds+”毫秒”+”<br/>”);//--></script>46案例：应用Date方法拆分日期和时间，然后按指定格式显示。<练习：如何获取时间的详细信息？实现如下浏览效果：在浏览器里输出：今天是2011年3月9日，星期三47练习：如何获取时间的详细信息？实现如下浏览效果：47练习：参考答案。48练习：参考答案。48练习：仿照如下浏览效果，计算当前日期距离08奥运会的天数。49练习：仿照如下浏览效果，计算当前日期距离08奥运会的天数。4练习：参考答案。获取当前时间距离08奥运会的毫秒数。50练习：参考答案。获取当前时间距离08奥运会的毫秒数。50字符串对象（String）String对象是动态对象，需要创建实例后才能引用该对象的属性和方法。创建字符串对象有两种不同方法：使用var语句

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

教学第3章javascript对象课件

文档简介

温馨提示

最新文档

评论

教学第3章javascript对象课件

文档简介

温馨提示

最新文档

评论

相关文档