《面向对象编程》PPT课件.ppt

《《面向对象编程》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《面向对象编程》PPT课件.ppt（64页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Web编程基础编程基础Chapter6Chapter6：面向对象编程：面向对象编程1/21/20231/21/2023对象对象内置对象内置对象本地对象本地对象Array对象对象用户自定义对象用户自定义对象提提纲纲6.1对象对象对象是属性和方法的组合属性是对象所拥有的一组外观特征，一般为名词 方法是对象可以执行的功能，一般为动词 例如：汽车Ferrari对象：汽车属性：型号：法拉利颜色：绿色方法：前进、刹车、倒车6.1对象对象q三类对象三类对象 宿主对象宿主对象 内置对象内置对象 自定义对象自定义对象 lBOM浏览器对象模型lDOM文档对象模型lString字符串对象lDate日期对象lBool

2、ean对象等l包括定义对象的属性和方法本地对象本地对象 lGloballMath6.2内置对象内置对象Global对象对象Math对象对象6.2内置对象内置对象Global对象对象Math对象对象6.2.1Global对象对象Global对象的属性对象的属性nArray：用于引用Array对象的构造函数。nBoolean：用于引用Boolean对象的构造函数。nDate：用于引用Date对象的构造函数。nEvalError：用于引用EvalError对象的构造函数。nFunction：用于引用Function对象的构造函数。nInfinity：返回Number.POSITIVE_INFINIT

3、Y的初始值。nNaN：返回特殊值NaN，表示表达式不是数字。nNumber：用于引用Number对象的构造函数。nObject：用于引用Object对象的构造函数。nRangeError：用于引用RangeError对象的构造函数。nReferenceError：用于引用ReferenceError对象的构造函数。nRegExp：用于引用RegExp对象的构造函数。nError：用于引用Error对象的构造函数。nString：用于引用String对象的构造函数。nSyntaxError：用于引用SyntaxError对象的构造函数。nTypeError：用于引用TypeError对象的构造函

4、数。nURIError：用于引用URIError对象的构造函数。6.2.1Global对象对象Global对象的方法对象的方法ndecodeURI：对用encodeURI方法编码的字符串进行解码。ndecodeURIComponent：对用encodeURIComponent方法编码的字符串进行解码。nencodeURI：将字符串编码为一个有效的统一资源标识符（URI）。nencodeURIComponent：将字符串编码为URI的一个有效组成部分。nescape：对字符串进行编码以便它们能在所有计算机上可读。neval：解析JavaScript代码并执行。nisFinite：返回一个Bool

5、ean值，指明所提供的数字是否为有限值。nisNaN：返回一个Boolean值，指明提供的值是否为保留值NaN（不是数字）。nparseFloat：返回由字符串转换得到的浮点数。nparseInt：返回由字符串转换得到的整数。nunescape：对用escape进行编码的字符串进行解码。6.2.2Math对象对象Math对象对象:执行常见数学计算执行常见数学计算n使用数学对象的语法规则如下：nMath.属性名nMath.方法名（参数1，参数2，）6.2.2Math对象对象属性数学意义值E欧拉常数，自然对数的底约等于2.7138LN22的自然对数约等于0.6931LN1010的自然对数约等于2.

6、3026LOG2E2为底的e的自然对数约等于1.4427LOG10E10为底的e的自然对数约等于0.4343PI约等于3.14159SQRT1_20.5的平方根约等于0.707SQRT22的平方根约等于1.4146.2.2Math对象对象方法意义示例abs(x)返回x的绝对值abs(2)结果为2,abs(-2)结果为2acos(x)返回某数的反余弦值（以弧度为单位)，x在-1至1范围内acos(1)结果为0asin(x)返回某数的反正弦值（以弧度为单位）asin(0.5)结果约为0.5236atan(x)返回某数的反正切值（以弧度为单位）atan(1)结果约为0.7854ceil(x)返回与某

7、数相等或大于该数的最小整数ceil(-15)结果为-15,ceil(-15.6)结果为-15,ceil(15.2)结果为-16,ceil(15)结果为15cos(x)返回某数（以弧度为单位）的余弦值cos(Math.PI*2/6)结果为0.5exp(x)返回e的x次方exp(2)结果约为7.389floor(x)与ceil相反，返回与某数相等或小于该数的最小整数floor(-15)结果为-15,floor(-15.6)结果为-16,floor(15.2)结果为15,floor(15)结果为15log(x)返回某数的自然对数(以e为底)Log(Math.E)结果为16.2.2Math对象对象方法

8、意义示例max(x,y)返回两数间的较大值max(1,3)结果为3min(x,y)返回两数间的较小值min(1,3)结果为1pow(x,y)返回x的y次方pow(2,3)结果为8random()返回0和1之间的随机数max(1,3)结果为3round(x)返回某数四舍五入之后的整数round(3.4)结果为3sin(x)返回某数（以弧度为单位）的正弦值sin(Math.PI/6)结果为0.5sqrt(x)返回某数的平方根sqrt(9)结果为3tan(x)返回某书的正切值tax(Math.PI/4)结果为1toFixed(x)返回某数四舍五入之后保留x位小数var num1=1204.238;n

9、um1.toFixed(2)结果为1204.24toPrecision(x)返回某数四舍五入之后保留x位字符var num1=1204.238;num1.toPrecision(5)结果为1204.26.2.2Math对象对象自动刷新document.write(2秒自动刷新，随机显示图片);vari=Math.round(Math.random()*8+1);document.write(“);假定随机产生的数字i=3，上述代码即为：显示第三幅图片（3.jpg）如何实现Math.round(Math.random()*8+1)产生1-9的数字6.3本地本地对象对象Numer对象对象Strin

10、g对象对象Boolean对象对象Array对象对象Date对象对象Object对象对象6.3.1Number对象对象Number对象对象nvar n=new Number(numericValue);ntoString()：返回数值对象的字符串表示nvalueOf()：返回指定数值对象的原始值6.3.2String对象对象String对象对象:封装了一个字符串的属性和行为封装了一个字符串的属性和行为nvar s=new String(“字符串”);nlength属性：返回String对象的长度。charAtcharAtn返回字符串指定位置的字符toLowerCasetoLowerCasen转换

11、成小写字母toUpperCasetoUpperCasen转换成大写字母indexOf(String，index)n 从左开始查找lastIndexOf(String，index)n 从右开始查找6.3.2String对象对象var banana=banana；var index1=banana.indexOf(a);var index2=banana.lastIndexOf(a);var index3=banana.lastIndexOf(h);var index4=banana.indexOf(a,2);var index5=banana.lastIndexOf(a,4);var index

12、6=banana.lastIndexOf(h,2);var index7=banana.indexOf(“an”);var index8=banana.lastIndexOf(“an”);var index9=banana.lastIndexOf(“hh”);6.3.2String对象对象课堂练习var s=“一个任意字符串”;var s1=“任意字符”;编写代码，判断s1是否在s中n在，输出s1的首次出现位置n不在，输出”找不到指定字符：”+s1 var s=一个任意字符串;var s1=任意字符;if(s.indexOf(s1)!=-1)document.writeln(s.indexOf

13、(s1);else document.writeln(找不到字符串：+s1);从字符串中抽取子串从字符串中抽取子串:substring(start)substring(start,end)6.3.2String对象对象举例varmyStr=五岳归来不看山五岳归来不看山;varsubStr=myStr.substring(2);varsubStr=myStr.substring(2,6);split方法用于将一个字符串分割为子字符串，然后将方法用于将一个字符串分割为子字符串，然后将结果作为字符串数组返回。结果作为字符串数组返回。举例：举例：var s=abc edf ab;var a=s.spl

14、it();document.writeln(a.join();输出：abc edf ab6.3.2String对象对象6.3.3Boolean对象对象Boolean对象对象nvar b=new Boolean(booleanValue);n初始值为true：booleanValue为1、true或非空字符串n初始值为false：booleanValue为0、false或空字符串ntoString():返回Boolean对象的字符串表示nvalueOf():返回指定Boolean对象的原始值6.3.4Array对象对象Array对象对象nvar aArray=new Array();nvar a

15、Array=new Array(size);nvar aArray=new Array(element0,element1,.,elementN)6.3.4Array对象对象Array对象的方法对象的方法nconcat：把两个数组组合成一个新数组并返回该数组。njoin：把数组的所有元素连接起来形成一个String对象并返回该对象。npop：移除数组中的最后一个元素并返回该元素。npush：把新元素添加到数组中并返回数组的新长度值。nreverse：反转数组的元素顺序并返回反转后的数组。nshift：移除数组aArray中的第一个元素并返回该元素。nslice：返回数组的一段。nsort：返回

16、一个元素已经进行了排序的Array对象。nsplice：从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。ntoLocaleString：返回由数组aArray的元素构成的字符串，若数组元素为日期对象，则该日期使用当前区域设置转换为字符串。ntoString：返回数组对象的字符串表示。nunshift：把指定的元素插入数组开始位置并返回该数组。nvalueOf：返回指定Array对象的原始值。6.3.5Date对象对象Date对象对象:提供用于处理日期和时间的方法提供用于处理日期和时间的方法nvar d=new Date(DateValue);n四种方

17、式：nnew Date();/当前日期nnew Date(日期字串);nnew Date(年,月,日,时,分,秒,毫秒);nnew Date(毫秒);6.3.5Date对象对象日期对象方法语法规则意义时区日期对象.getDate()返回整数表示日期对象月份中的日期数(131)计算机指定时区日期对象.getDay()返回整数表示日期对象中的星期数，0表示星期日，6表示星期六计算机指定时区日期对象.getMonth()返回整数表示日期对象的月份数，0表示一月计算机指定时区日期对象.getFullYear()返回4位整数表示日期对象中的年，该方法可以代替getYear()方法计算机指定时区日期对象.

18、getYear()返回两位整数表示日期对象中的年。计算机指定时区日期对象.getHours()返回整数表示日期对象中的小时数(023)计算机指定时区日期对象.getMinutes()返回整数表示日期对象中的分钟数(059)计算机指定时区日期对象.getSeconds()返回整数表示日期对象中的秒数(059)计算机指定时区日期对象.getMilliseconds()返回整数表示日期对象中的毫秒数(0999)计算机指定时区6.3.5Date对象对象日期对象方法语法规则意义时区日期对象.getTime()返回整数表示自1970年1月1日0：0：0起的毫秒数计算机指定时区日期对象.getTimezon

19、eOffset()返回整数表示计算机设定时区与格林尼治标准时间相差的分钟数格林尼治标准时间日期对象.getUTCDate()与getDate()意思相同，只是表示的时区不同格林尼治标准时间日期对象.getUTCDay()与getDay()意思相同，只是表示的时区不同格林尼治标准时间日期对象.getUTCMonth()与getMonth()意思相同，只是表示的时区不同格林尼治标准时间日期对象.getUTCFullYear()与getFullYear()意思相同，只是表示的时区不同格林尼治标准时间日期对象.getUTCHours()与getHours()意思相同，只是表示的时区不同格林尼治标准时间

20、日期对象.getUTCMinutes()与getMinutes()意思相同，只是表示的时区不同格林尼治标准时间日期对象.getUTCSeconds()与getSeconds()意思相同，只是表示的时区不同格林尼治标准时间日期对象.getUTCMilliseconds()与getMilliseconds()意思相同，只是表示的时区不同格林尼治标准时间6.3.5Date对象对象日期对象方法语法规格意义时区Date.parse(日期字串)返回整数表示自1970年1月1日0：0：0起的毫秒数计算机指定时区日期对象.setDate(日期数)设置日期对象月份中的日期数131计算机指定时区日期对象.setF

21、ullYear(年,月,日)设置日期对象中的年数，4位整数计算机指定时区日期对象.setHours(小时,分,秒,毫秒)设置日期对象中的小时数计算机指定时区日期对象.setMilliseconds(毫秒)设置日期对象的毫秒数计算机指定时区日期对象.setMinutes(分,秒,毫秒)设置日期对象的分钟数计算机指定时区日期对象.setMonth(月,日)设置日期对象的月份数计算机指定时区日期对象.setSeconds(秒,毫秒)设置日期对象的秒数计算机指定时区日期对象.setTime(总毫秒数)设置日期对象自1970年1月1日0：0：0起的毫秒数计算机指定时区日期对象.setYear()设置日期

22、对象中的年数，如果位数小于等于两位，则年份表示19xx计算机指定时区6.3Date对象对象日期对象方法语法规格意义时区日期对象.setUTCDate()与setDate()意义相同，只是表示的时区不同格林尼治标准时间日期对象.setUTCDay()与setDay()意义相同，只是表示的时区不同格林尼治标准时间日期对象.seUTCMonth()与setMonth()意义相同，只是表示的时区不同格林尼治标准时间日期对象.setUTCFullYear()与setFullYear()意义相同，只是表示的时区不同格林尼治标准时间日期对象.setUTCHours()与setHours()意义相同，只是表示

23、的时区不同格林尼治标准时间日期对象.setUTCMinutes()与setMinutes()意义相同，只是表示的时区不同格林尼治标准时间日期对象.setUTCSeconds()与setSeconds()意义相同，只是表示的时区不同格林尼治标准时间日期对象.setUTCMilliseconds()与setMilliseconds()意义相同，只是表示的时区不同格林尼治标准时间日期对象.toUTCString()将日期对象转换成格林尼治标准时间的日期字串格林尼治标准时间日期对象.toLocaleString()将日期对象转换成当地时区的日期字串计算机指定时间Date.UTC(年,月,日,时,分,秒

24、,毫秒)返回整数表示自1970年1月1日0：0：0起的毫秒数格林尼治标准时间用作 Date 方法的参数的整数：值整 数 Seconds 和 minutes0 至 59 Hours0 至 23 Day0 至 6（星期几）Date1 至 31（月份中的天数）Months0 至 11（一月至十二月）6.3.5Date对象对象6.3.5Date对象对象varnow=newDate();varhour=now.getHours();if(hour=0&hour12&hour18&hour24)document.write(晚上好!);document.write(今天日期:+now.getYear()+

25、年“+(now.getMonth()+1)+月+now.getDate()+日);document.write(现在时间:+now.getHours()+点+now.getMinutes()+分);获得当前日期和时间获得小时，即当前是几点判断上午、下午还是晚上月份数字011，注意1setTimeout的用法：的用法：setTimeout（“调用的函数调用的函数”,”定时的时间定时的时间”）例：例：varmyTimesetTimeout（”disptime()”,1000）;clearTimeout（myTime）;1000毫秒后调用函数disptime()执行关闭定时器6.3.5Date对象对

26、象6.3.5Date对象对象JavaScript 代码functiondisptime()vartime=newDate();/获得当前时间varhour=time.getHours();/获得小时、分钟、秒varminute=time.getMinutes();varsecond=time.getSeconds();varapm=AM;/默认显示上午:AMif(hour12)/按12小时制显示hour=hour-12;apm=PM;if(minute10)/如果分钟只有1位，补0显示minute=0+minute;if(second10)/如果秒数只有1位，补0显示second=0+seco

27、nd;document.myform.myclock.value=hour+:+minute+:+second+apm;varmyTime=setTimeout(disptime(),1000);无边框的文本框myclock使用定时器函数，每隔1秒调用disptime()函数刷新显示获得小时、分钟、秒根据12小时制调整时间和AM/PM标志确保分钟和秒显示位数为2位设置样式：无边框的文本框Onload()事件，页面加载就调用函数：disptime（显示时间）6.3.5Date对象对象数组：由具有同一名字的一组连续内存单元构数组：由具有同一名字的一组连续内存单元构成。成。数组元素：访问数组元素应指

28、定数组名和数组数组元素：访问数组元素应指定数组名和数组元素的下标。元素的下标。数组的下标：从数组的下标：从0开始开始6.4Array对象对象数组的定义：数组的定义：varc=newArray(10);下标从下标从09数组的长度为数组的长度为10，c.length6.4Array对象对象c 6-4560721543-89062-31645378数组名cc 0 c 1 c 2 c 3 c 11 c 10 c 9 c 8 c 7 c 5 c 4 数组元素下标6.4Array对象对象数组要占据内存空间，在数组要占据内存空间，在JavaScript中，数组必须由中，数组必须由new运算符动态分配内存。运

29、算符动态分配内存。数组定义：数组定义：varc=newArray(12);也可分为两步：也可分为两步：varc;c=newArray(12);注意：当分配数组时，其中的元素还没有被初始化。注意：当分配数组时，其中的元素还没有被初始化。6.4.2声明与分配数组声明与分配数组初始化数组元素初始化数组元素c1=10;c1=10;若给数组中所有元素赋值，结合使用循环结构若给数组中所有元素赋值，结合使用循环结构 var c=new Array(5);var c=new Array(5);for(var i=0;ic.length;i+)for(var i=0;ic.length;i+)ci=i;ci=i

30、;也可以使用也可以使用newnew分配空数组，动态增大数组：分配空数组，动态增大数组：var n=new Array();var n=new Array();for(var i=0;i5;i+)for(var i=0;i5;i+)ni=i;ni=i;6.4.3数组使用示例数组使用示例用初始化列表对数组进行初始化用初始化列表对数组进行初始化var n=10,20,30,40,50;var n=new Array(10,20,30,40,50);初始化部分值初始化部分值var n=10,20,40,50;编译器遇到包含初始值列表的数组声明时，它会计算出数组的长度并为数组中的元素分配存储空间。6.4

31、.3数组使用示例数组使用示例forin控制结构控制结构n对数组中的每个元素执行一个任务n忽略数组中未定义的元素 for(var element in theArray)total+=theArrayelement;6.4.3数组使用示例数组使用示例课堂练习课堂练习编写程序：编写程序：创建数组创建数组array1，长度为，长度为10，每个元素的，每个元素的值下标值值下标值22，输出数组元素值。，输出数组元素值。利用数组简化掷骰子程序中的利用数组简化掷骰子程序中的switch结构结构n每个数组元素代表一种情况6.4.3数组使用示例数组使用示例6.4.3数组使用示例RollDie.html(1of2

32、)6.4.3数组使用示例RollDie.html(2of2)参数传递的两种方法参数传递的两种方法n值传递n将产生参数值的一个拷贝并把它传递给被调用的函数；n不能修改调用者的数据；n数值和布尔值。n引用传递n调用者可以让被调用的函数直接访问和修改调用者的数据；n对象和数组6.4.4引用与引用参数引用与引用参数把数组名作为参数把数组名作为参数例如：例如：n数组的定义：var a=new Array(10);n函数的调用：modifyarray(a);Array.joinn方法join将其参数视为字符串，指定分隔符。6.4.5将数组传递给函数将数组传递给函数6.4.5将数组传递给函数PassArra

33、y.html(1of3)6.4.5将数组传递给函数将数组传递给函数a 1 0 a 1 1 a 1 2 a 1 3 Row0Row1Row2Column0Column1Column2Column3Rowsubscript(orindex)ArraynameColumnsubscript(orindex)a 0 0 a 0 1 a 0 2 a 0 3 a 2 0 a 2 1 a 2 2 a 2 3 6.4.6二维数组二维数组声明和初始化声明和初始化nvar b=1,2,3,4,5 ;也可以如下声明也可以如下声明n创建一个两行的数组，第一行有5列，第二行有3列:varvar b;b;b=b=newn

34、ew Array(Array(2 2););b b 0 0 =newnew Array(Array(5 5););b b 1 1 =newnew Array(Array(3 3););6.4.6二维数组二维数组二维数组元素的访问是通过行下标与列下标共同来实二维数组元素的访问是通过行下标与列下标共同来实现的，如现的，如：数组名数组名行行列列。因为是二维数组，所以在循环显示时，需要两层循环，因为是二维数组，所以在循环显示时，需要两层循环，外层循环控制行，内层循环控制列。外层循环控制行，内层循环控制列。for(vari=0;i行数行数;i+)for(varj=0;j列数列数;j+)6.4.6二维数组

35、二维数组在在JavaScriptJavaScript程序中：程序中：n创建一个具有5个元素的一维数组，数组元素为1，2，3，4，5。n输出数组中所有值。n调用doublearray函数，将数组的元素进行平方。n再次输出数组中所有值。创建一个名为创建一个名为doublearraydoublearray的函数的函数n参数为一个数组，无返回值。n功能是将数组中的所有元素进行平方运算。课堂练习课堂练习6.4.6二维数组二维数组splicen在数组中插入或移除元素slicen分割数组concatn连接不同的数组joinn使用指定分隔符生成新的字符串reversen对数组执行倒序排列6.4.6二维数组二维

36、数组var fruitArray=new Array(apple,peach,orange,lemon,lime,cherry);var removed=fruitArray.splice(2,2,melon,banana);document.writeln(removed+);document.writeln(fruitArray+);var newFruit1=fruitArray.slice(2,4);document.writeln(newFruit1+);document.writeln(fruitArray+);var newFruit2=fruitArray.concat(rem

37、oved);document.writeln(newFruit2+);document.writeln(fruitArray+);var string=fruitArray.join();document.writeln(string+);fruitArray.reverse();document.writeln(fruitArray);6.5Object对象对象Object对象是其他本地对象（如对象是其他本地对象（如Array、Date、String等）的根对等）的根对象，并提供了创建自定义对象的基础象，并提供了创建自定义对象的基础可以利用可以利用new运算符和运算符和Object类来创建一

38、个对象，然后为该对象类来创建一个对象，然后为该对象一些添加属性和方法：一些添加属性和方法：var oObject=new Object();/创建一个新对象 oObject.propertyName=value;/为该对象定义属性 oObject.methodName=function()/为该对象定义方法 statements;6.5Object对象对象 oCircle=new Object();oCircle.radius=3;oCircle.getArea=function()return this.radius*this.radius*Math.PI;document.writeln(

39、设圆半径为设圆半径为+oCircle.radius+，则，则);document.writeln(圆面积为圆面积为+oCircle.getArea()+);oCircle.radius=5;document.writeln(设圆半径为设圆半径为+oCircle.radius+，则，则);document.writeln(圆面积为圆面积为+oCircle.getArea()+);oCircle.radius=18;document.writeln(设圆半径为设圆半径为+oCircle.radius+，则，则);document.writeln(圆面积为圆面积为+oCircle.getArea()

40、+);课堂练习课堂练习任务：设计一个网页，求两位数的加法运算。任务：设计一个网页，求两位数的加法运算。任务：解决方案任务：解决方案设计一个表单，含有元素如下：n“标签”显示题目n“文本框”输入结果n“确定按钮”判断对错n“重新出题按钮”出另一题n最后“标签”显示对错消息程序设计n页面加载时题目就显示好了n“确定”按钮：判断文本框中的结果是否与题目的正确结果相等，并根据答题情况，在最后一个标签处给出相应消息n“重新出题”按钮：产生两个两位数的随机整数，并把题目显示在第一个标签处。任务：程序清单（任务：程序清单（liti6-01.html）var x,y;/全局变量 var msg=documen

41、t.getElementById(mes);regen();function gen()x=Math.floor(Math.random()*90+10);y=Math.floor(Math.random()*90+10);document.getElementById(tm).innerHTML=x+y+=;With(Math)x=floor(random()*90+10);y=floor(random()*90+10):任务：程序清单（任务：程序清单（liti6-01.html）function cal()var k=parseInt(document.form1.key.value);if(x+y)=k)msg.innerHTML=答对了;else msg.innerHTML=答错了;function regen()gen();document.form1.key.value=;msg.innerHTML=;