教学材料HTML DHTML教程-第八章

上传人：1*** IP属地：广东上传时间：2026-03-24 格式：PPT 页数：72 大小：2.26MB 积分：15 举报 版权申诉

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

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

文档简介

第8章JavaScript内置对象

JavaScript作为一种基于对象的编程语言，其中主要包括两类对象:一类是JavaScript内置对象，也就是JavaScript语言本身自带的对象;另一类是浏览器对象，由客户浏览器所支持。通过使用这些对象，我们可以控制页面元素的显示及完成各种功能。本章将介绍JavaScript的内置对象，主要内容如下:什么是对象;对象运算符和语句，如:new运算符、delete运算符、with语句和forin语句;JavaScript内置的对象，如:array对象、Date对象、Global对象、Math对象和String对象等。返回8.1什么是对象

8.1.1对象的属性和方法

对象就是客观世界中存在的特定实体。例如，电脑就是一个对象，它包含显示器、CPU,光驱、硬盘、软盘和音箱等属性，同时又包含玩游戏、上网和学习等功能，也就是说，电脑这个对象由这些特性和动作所组成。在计算机世界中也包含各种各样的对象。例如，一个Web页可以被看做是一个对象，它包含背景颜色、前景颜色等特性，同时也包含打开、关闭等动作。由此看来，对象一般包含两个要素:属性:这是一些用来描述对象特性的一组数据，也就是若干变量;方法:这是一些用来操作对象特性的动作，也就是若干函数。下一页返回8.1什么是对象

例如，document对象(一种浏览器对象，有关该对象的详细情况清参见本书第9章)的bgColor属性用于描述文档的背景颜色，而使用document对象的write方法可以在文档中写特定的内容。通过访问或设置对象的属性，并且调用对象的方法，我们可以对对象进行各种操作。上一页下一页返回8.1什么是对象

8.1.2基于对象的JavaScript

所谓面向对象的技术，就是通常说的00CObject-OrientedTechbology)技术，近年来己经逐步成为占主导地位的编程技术。与常规的线性编程方法不同，在面向对象的编程技术中，从概念上将一组函数和变量组织成一个对象，从而将数据封装起来，达到模块化编程的目的。面向对象技术具有一些典型的特点，包括:封装性(EncapsulatioW、继承性(Inheritance,分类性(Classification)III多态性(Polymorphism)等。严格地说，JavaScript不是面向对象的语言(因为它不支持分类、继承等特性)，但是它确实是基于对象(Objact-Based的编程语言(因为它支持多种对象类型，并可以创建对象实例)。尽竹JavaScript没有提供完全的面向对象的特性，但是它提供了一组特别适合于浏览器和服务器脚本的基于对象的特性。这些特性包含一组预定义浏览器对象和服务器对象，以及通过其他对象的属性和方法访问相关对象的功能。另外，JavaScript还提供了一系列内置对象，用于实现一些通用的功能。上一页返回8.2对象运算符与语句

在JavaScript中包含两个运算符和两条语句，专门用于操作对象(在第7章中种经提到过)。它们是:new运算符、delete运算符、with语句不IIforin语句。8.2.1new运算符new运算符的作用就是新建一个对象。例如，如果要创建一个新的数组对象，可以使用以下语句:varmyArray=newArray();下一页返回8.2对象运算符与语句

8.2.2delete运算符

delete运算符的作用是从对象中删除属性和方法或者从数组中删除元素(有关数组的介绍请参见8.3.1节)。下面是一个使用delete运算符的例子，其源代码如下所示:<html><head><title>Delete实例</title></head><body><scriptlanguage="JavaScript"type="text/javascript"><!--myArray=newArray(3);myArray[0]=”西瓜”上一页下一页返回8.2对象运算符与语句

myArray[1]_”南瓜”myArray[2]=”冬瓜”myArray[3]="傻瓜”document.write("使用delete之前:”);document.write(myArray);document.write("<p>");deletemyArray[3];//删除myArray[3]这个元索document.write("使用delete之后:”)document.write(myArray);//---></script></body></html>在浏览器中打开该文件，效果如图8.1所示上一页下一页返回8.2对象运算符与语句

8.2.3with语句语法with(对象){语句;}说明:如果在程序中要使用某一个对象的多个属性和方法，那么就可以使用with语句。将需要使用其属性和方法的对象用with语句包含起来，然后在代码中就可以不必再引用该对象而直接使用它的方法和属性。下面是一个使用with语句的例子，它通过with语句说明要使用的对象是document,所以在程序语句中引用当前文档中没有被访问的超链接颜色属性linkColo:和当前文档标题属性title时不再使用完整的引用。该例子的源代码如下所示:上一页下一页返回8.2对象运算符与语句

<html><head><title>对象with语句实例</title></head><body><scriptlanguage="JavaScript"type="text/javascript"><!--with(document){dooument.write}'当前文档中没有被访问I均超链接颜色为:"+IinkOolor+".<br>")dooument.write}"当前文档的标题为:"+title+"。<br>")//以上语句中的“+”表示字符串加。上一页下一页返回8.2对象运算符与语句

}//--></script></body></html>在浏览器中打开该文件，效果如图8.2所示。上一页下一页返回8.2对象运算符与语句

8.2.4forin语句语法for(对象中的变量){语句;}说明:forin语句是一种特殊的循环语句，用于浏览一个对象的所有属性，对于每一个属性，循环体内的语句被执行一次。下面的实例使用forin语句浏览window对象的所有属性，并将它们显示出来，源代码如下所示:<html><head><title>forin语句实例</title></head>上一页下一页返回8.2对象运算符与语句

<body><scriptlanguage="JavaScript"type="text/javascript"></script></body></html>在浏览器中打开该文件，效果如图8.3所示。上一页返回8.3JavaScript内置对象

下面我们将介绍一些常用的JavaScript内置对象，包括数组对象Array、日期对象Date,全局对象Global、数学对象Math、字符串对象String等8.3.1Array对象Array对象也就是数组对象，可以用来实现编程语言中最常见的一种数据结构----数组。1.构造函数Array对象的构造函数(所谓构造函数是指用来创建对象的函数)有以下三种:varvariable=newArray;下一页返回8.3JavaScript内置对象

使用该构造函数创建的数组的长度是。。当具体为其指定数组元素时，JavaScript将自动延长数组的长度。例如:以下这段源代码表示新建一个数组size，将数组中的第11个元素赋值"43inch"，其余10个数组元素的值为空值。

size=newArray;size[10]"43inch";//JavaScript数组下标从0开始编号，因此size[10]表示第11个元索。varvariable=newArray(int);

使用该构造函数可以创建一个包含int+1个元素的数组，但是没有指定具体的元素。同样，在具体指定数组元素时，数组的长度可以动态更改。例如:以下这段源代码表示新建一个包含9个元素的数组color，然后指定数组的第12个元素为“白色”，这时数组长度将自动调整为13。上一页下一页返回8.3JavaScript内置对象

color=newArray(8);Color[l2]="white";varvariable=newArray(argl,arg2,....argn);

使用该构造函数可以直接使用数组元素作为参数，数组的长度为n，数组元素按照指定的顺序赋值。使用这种构造函数时，参数之间必须使用逗号分隔开，并且不允许省略任何参数。注意，以下两种数组定义都是错误的:myColor=newArray(redblack,red,blue);myColor=newArray(red,black,red,blue,);2.Array对象的属性和方法Array对象的属性和方法如表8.1所示。上一页下一页返回8.3JavaScript内置对象

3.Array对象实例下面是一个使用Array对象的实例，其源代码如下所示：<html><head><title>Array对象实例</title></head><body><scriptlanguage="JavaScript"type="text/javascript"><!--myObject=newArray(4);myObject[0]=”专业课程一”

myObject[1]_”专业课程二”

myObject[2]="英语"myObject[3]="数学"myObject[4]=”政治”上一页下一页返回8.3JavaScript内置对象

document.write(”使用sort之前:")document.write(myObject);document.write("<p>");document.write(”使用sort之后:")document.write(myObject.sort());//myObject.sort()中的”.”是成员选择运算符，用于引用对象的属性和方法。document.write("<p>");document.write(”使用slice之前:”);document.write(myObject);document.write("<p>");上一页下一页返回8.3JavaScript内置对象

document.write(”使用slice之后:”);document.write(myObject.slice(2,4));//新数组中将包含myObject/2/和myObject/3J两个元索//--></script></body></html>在浏览器中打开该文件，效果如图8.4所示。上一页下一页返回8.3JavaScript内置对象

8.3.2Date对象

Date对象就是日期对象，它可以表小从年到毫秒的所有时间和日期。该对象是JavaScrip内置对象中使用频率最高的一个对象。1.Date对象的构造函数创建日期对象可以使用如下所小的4种构造函数:varvaribale=newDate();该构造函数可以使用当前时间和日期创建Date对象。varvaribale=newDate(millisenconds);该构造函数可以使用从GMT(格林威治平均时间)时间1970年1月1日凌晨到期望日期和时间之间的毫秒来创建Date对象。上一页下一页返回8.3JavaScript内置对象

varvaribale=newDate(string);该构造函数可以使用特定的表示期望日期和时间的字符串来创建Date实例。该字符串的格式应该与Date对象的parse方法相匹配。varvaribale=newDate(year,month,day,hours,minutes,seconds,milliseconds);该构造函数使用年、月、日、小时、分、秒、毫秒的形式创建Date对象。2.Date对象的属性和方法Date对象的属性和方法如表8.2所示。3.Date对象实例一下面是一个使用Date对象的例子，其源代码如下所示:上一页下一页返回8.3JavaScript内置对象

<html><head><title>Date对象实例之</title></head><body><scriptlanguage="JavaScript"type="text/javascript"><!---myDate=newDate();//创建一个日期对象myHour=myDate.getHours();//获得当前的小时数。if(myHour<6)//根据小时数显示小同的欢迎信息。welcomeString=”凌晨好”;上一页下一页返回8.3JavaScript内置对象

elseif(myHour<9)welcomeString=”早上好”;elseif(myHour<12)welcomeString="上午好”;elseif(myHour<14)welcomeString="中午好”;elseif(myHour<17)welcomeString=“下午好”;elseif(myHour<19)welcomeString="傍晚好”;elseif(myHour<22)welcomeString=”晚上好”;elsewelcomeString="夜里好”;上一页下一页返回8.3JavaScript内置对象

arrayDay=["日”,"一","二","三","四","五","六"]；//定义一个字符数组以显示星期数document.write("<tablebgcolor=00ccffS");document.write("<tr>");document.write("<tdalign=center>");document.write("<fontsize=2>"+welcomeString+"</font>");document.write("</td>");document.write("</tr>");document.write("<tr>");document.write("<tdalign=center>");document.write("<fontsize=2>今天是:"+(myDate.getMonth()+1)+"月”+myDate.getDate()+"日 </font>");//此语句中”+”字符串加运算。上一页下一页返回8.3JavaScript内置对象

document.write("<fontsize=2>星期”+arrayDay}myDate.getDay()]+"</font>");//arrayDay/myData.getDaysU/将获得的星期数字用汉字表示。document.write("</td>");document.write("</tr>");document.write("</table>");--></script></body></html>在浏览器中打开该文件，效果如图8.5所示上一页下一页返回8.3JavaScript内置对象

4.Date对象实例二本小例使用prototype属性和getDay()方法为Date。对象创建了一个新方法，用于显示日期对象所对应星期几的字符串。该例子的源代码如下所示:<html><head><title>Date对象实例之二</title></head><body><scriptlanguage="JavaScript"type="text/javascript"><!--上一页下一页返回8.3JavaScript内置对象

functiongetDayString(){varday;switch(this.getDay())//获得星期的数字，this是个特殊对象，表示当前止在使用的对象。在此例中，即为Date对象。case0:day=”星期日”;break;case1:day=”星期一”;break;breakcase2:day=”星期二”;break;上一页下一页返回8.3JavaScript内置对象

case3:day=”星期二”;break;case4:day=”星期四”;break;Case5:day=”星期五.";break;case6:day=”星期六”;break;default:day=”没有这个星期数！"}return(day);}上一页下一页返回8.3JavaScript内置对象

Dtotype.getDayString=getDayString;//指定新方法。today=newDate();dooument.write}”今天是”+today.getDayBtringU+"<p>");//--></script></body></html>在浏览器中打开该文件，效果如图8.6所示。5.Date对象实例三假设2008年北京的奥运会是在9月12日开慕，我们现在制作一个倒记时的时钟，源代码如下所示(有关Math对象的说明，请参见8.3.4节;有关form对象和setTimeout函数的说明，清参见第9章):上一页下一页返回8.3JavaScript内置对象

<html><head><title>Date对象实例之三一2008北京奥运会倒计时</title></head><scriptlanguage="JavaScript"type="text/javascript"><！--VarDifferenceDay=-1VarDifferenceHour=-1varDifferenceMinute=-1varTday=newDate("Sep12,200823:59:59")Vardaysms=24*60*60*1000Varhoursms=60*60*1000上一页下一页返回8.3JavaScript内置对象

varSecondms=f60*1000varmicrosecond=1000functionclock(){vartime=newDate()varhour=time.getHours()varminute=time.getMinutes()varsecond=time.getSeconds()vartimevalue=""+((hour>12)?hour-12:hour)//此语句将小时数用字符串表示timevalue+=((minute<10)?":0":":")+minute//把分钟添加到字符串中。timevalue+=((second<10)?":0":":")+second//把秒添加到字符串中。上一页下一页返回8.3JavaScript内置对象

VarconvertDay=DifferenceDayVarconvertHour=DifferenceHourvarconvertMinute=DifferenceMinutevarDiffms=Tday.getTime()-time.getTime()//获得时间的差值。DifferenceDay=Math.floor(Diffms/daysms)//获得剩余天数。Diffms-=DifferenceDay*daysmsDifferenceHour=Math.floor(Diffms/hoursms)//获得剩余小时数。Diffms-=DifferenceHour*hoursmsDifferenceMinute=Math.floor(Diffms/Secondms)//获得剩余分钟数。Diffms-=DifferenceMinute*SecondmsvardSecs=Math.floor(Diffms/microsecond)//获得剩余秒数。上一页下一页返回8.3JavaScript内置对象

if(convertDay!=DifferenceDay)document.formnow.dd.value=DifferenceDayif(convertHour!=DifferenceHour)document.formnow.hh.value=DifferenceHourif(convertMinute!=DifferenceMinute)document.formnow.mm.value=DifferenceMinutedocument.formnow.ss.value=dSecssetTimeout("clock()",1000)}//--></script><bodyonload="clock();returntrue"><divalign="center">上一页下一页返回8.3JavaScript内置对象

<fontface="黑体”size="5">距离2008年9月12日还剩</font><formname="formnow"><inputname="dd"size="5">天<inputname="hh"size="2">小时<inputname="mm"size="2">分<inputname="ss"size="2">秒</form></div></body></html>在浏览器中打开该文件，效果如图8.7所示。上一页下一页返回8.3JavaScript内置对象

8.3.3Global对象Global对象定义了JavaScript中的全局变量和函数。1.Global对象的属性和方法Global对象的属性和方法如表8.3所示。2.Global对象实例下面是一个使用Global对象的例子，其源代码如下所小:<html><head><title>Global对象实例</title></head><body><scriptlanguage="JavaScript"type="text/javascript">上一页下一页返回8.3JavaScript内置对象

<!--myballl=newArray(”篮球”,"$150");myba112=newArray(”足球”，"$120");myba113=newArray(”排球”，"$100");for(i=l;i<4;i++)document.write(escape("myball"+i)+"<br>")document.write(isFinite("myball"+i)+"<br>")document.write(eval("myball"+i)+"<p>")//将“myball"+E作为条JavaScriptt}-句执行，所以显示变量值，也就是数组内容。上一页下一页返回8.3JavaScript内置对象

}--></script></body></html>在浏览器中打开该文件，效果如图8.8所示。上一页下一页返回8.3JavaScript内置对象

8.3.4Math对象

Math对象包含用来进行数学计算的属性和方法。Math属性就是标准的数学常量，Math方法则构成了数学函数库。Math对象可以在不使用构造函数的情况下使用，并且所有的属性和方法都是静态的。1.Math对象的属性和方法Math对象的属性和方法如表8.4所示。2.Math对象实例下面的例子中使用了Math对象的多种属性和方法，其源代码如下所示:上一页下一页返回8.3JavaScript内置对象

<html><head><title>Math对象实例</title></head><body><scriptlanguage="JavaScript"type="text/javascript"><!--dooument.write(”以下是齐种数学常数的值:<P>");document.write("<table>")document.write(“<tr><td>E<td>=”+Math.E);//“+”为字符串加document.write("<tr><td>LN10<td>="+Math.LN10);document.write("<tr><td>LN2<td>="+Math.LN2);上一页下一页返回8.3JavaScript内置对象

document.write("<tr><td>LOG10E<td>="+Math.LOG10E);document.write("<tr><td>LOG2E<td>="+Math.LOG2E);document.write("<tr><td>PI<td>="+Math.PI);document.write("<tr><td>SQRT1_2<td>="+Math.SQRT1_2);document.write("<tr><td>SQRT2<td>="+Math.SQRT2);document.write("</table></p>")dooument.write（”以下是此简单的运算:<p>）.document.write("<table>")document.write("<tr><td>取0与1之间的随机为:<td>"+Math.random());上一页下一页返回8.3JavaScript内置对象

document.write("<tr><td>2的4次方为:<td>"+Math.pow(2,4));document.write("<tr><td>比较两个数(5和8)I均大小，其中大I均数为:<td>"+Math.max(5,8));document.write("<tr><td>210I均对数为:<td>"+Math.log(210));document.write("</table>")//--></script></body></html>在浏览器中打开该文件，效果如图8.9所示。上一页下一页返回8.3JavaScript内置对象

8.3.5String对象

String对象就是字符串对象。创建字符串对象时，既可以使用对象的构造函数，如:myStr=newString("Ilovethisgame.")，也可以直接将字符串值赋予变量，如:mySti="Ilovethisgame."。1.String对象的属性字符串对象包含以下两个属性:length:表示字符串的长度。prototype:使用该属性可以在字符串对象中添加属性和方法。下面是一个使用String对象的例子，其源代码如下所小<html><head><title>String对象实例</title>上一页下一页返回8.3JavaScript内置对象

</head><body><scriptlanguage="JavaScript"type="text/javascript">上一页下一页返回8.3JavaScript内置对象

</script></body></html>在浏览器中打开该文件，效果如图8.10所示。2.字符串格式设置

String对象中包含一些用于设置字符串格式的方法，相当于为字符串添加格式设置标记符。例如，使用bo1d()方法相当于为字符串添加<b></b>标记符。设置字符串格式的方法如表8.5所示。下面是一个设置字符格式的例子，其源代码如下所示:<html><head><title>String对象_字符串格式设置实例</title></head><body>上一页下一页返回8.3JavaScript内置对象

<scriptlanguage="JavaScript"type="text/javascript"><!--myStr="NewBeijingandNewOlympics!";testStr=newString("请单击此处!”);document.write(myStr.anchor("Hi")+"<p>")//设置个锚点Hidocument.write("<table>")dooument.writes"<tr><td>my8tr.big)<td>="+my8tr.big())dooument.writes"<tr><td>my8tr.boldU<td>="+my8tr.bold())dooument.writes"<tr><td>my8tr.fixedU<td>="+my8tr.fixed())document.write("<tr><td>myStr.fontcolor('#00ff00')<td>="+myStr.fontcolor("#00ff00"))document.write("<tr><td>myStr.fontcolor('red')<td>="+myStr.fontcolor("red"))上一页下一页返回8.3JavaScript内置对象

document.write("<tr><td>myStr.fontsize(5)<td>="+myStr.fontsize(5))document.write("<tr><td>myStr.fontsize('-2')<td>="+myStr.fontsize("-2"))dooument.writes"<tr><td>my8tr.italiosU<td>="+my8tr.italios())dooument.writes"<tr><td>my8tr.smallU<td>="+my8tr.small())dooument.writes"<tr><td>my8tr.strikeU<td>="+my8tr.strike())dooument.writes"<tr><td>my8tr.subU<td>="+my8tr.sub())dooument.writes"<tr><td>my8tr.sup)<td>="+my8tr.sup())document.write("<tr><td>myStr.toLowerCase()<td>="+myStr.toLowerCase())document.write("<tr><td>myStr.toUpperCase()<td>="+myStr.toUpperCase())上一页下一页返回8.3JavaScript内置对象

document.write("</table><p>");document.write(testStr.link("#Hi"));//将字钧一串设置为超链接，目标为前而定义的锚点!//--></script></body></html>在浏览器中打开该文件，效果如图8.11所示。3.通用字符串操作String对象中所包含的用于执行通用字符串操作的方法如表8.6所示。上一页下一页返回8.3JavaScript内置对象

下面是一个使用常用字符串操作方法的例子，其源代码如下所示:<html><head><title>String对象_通用字符串操作实例<</title></head><body><scriptlanguage="JavaScript"type="text/javascript"><!--myStr="ChinesetabletennisteamisaDreamTeam!";document.write('myStr="ChinesetabletennisteamisaDreamTeam!"<P>')上一页下一页返回8.3JavaScript内置对象

document.write("<table>")dooument.writes（"<tr><td>my8tr.oharAt}2)<td>="+my8tr.oharAt(2))dooument.write（"<tr><td>my8tr.oharCiodeAt}2)<td>="+my8tr.oharC}odeAt(

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

教学材料HTML DHTML教程-第八章

文档简介

温馨提示

最新文档

评论

教学材料HTML DHTML教程-第八章

文档简介

温馨提示

最新文档

评论

相关文档