任务5-面向对象编程解析课件

,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,移动web编程技术,任务5面向对象编程,19 十一月 2024,教学内容与目标,对象的基本概念,对象：,客观世界：对象用于描述客观世界存在的特定实体，如人，学生，汽车、小狗等；,信息世界：就是一组包含,数据的属性,和对属性中数据进行操作 的,方法,的实体。,对象类型：,本地对象,（,Number,String, Boolean ,Array, Date, Object, Function等）,内置对象,（Global 和,Math,），,不能new创建，直接使用,宿主对象,（,document,window,location, screen ,navigagor）,用户自定义对象,对象的基本概念,对象的使用,new,创建对象,： new object(参数),var ob1 = new Date() ;,var arr = new Array();,this,引用当前对象:,this.属性,或,this.方法(),for in,for (变量名 in 对象名),访问对象属性和方法,对象.,属性名方法名（）,Date,对象,Date对象,封装了日期和时间的操作，它有设置、获得和处理日期和时间的方法，只有两个属性。Date对象要创建实例才能使用。,var date对象名 = new Date(parameters) ;,Parameters : 可以省略，也可以是以下任一种格式,month dd , yyyy hh : mm : ss,month dd, yyyy,yy , mm , dd , hh , mm , ss,yy , mm , dd,Milliseconds,New Date() :,得到系统日期,相关知识点（本地 对象）,Date对象的主要方法,getSeconds()：,返回Date对象中用本地时间表示的秒钟值（059）。,getTime()：返回Date对象中的时间值。,setDate()：设置Date对象中用本地时间表示的数字日期。,setFullYear()：设置Date对象中用本地时间表示的年份值。,setHours()：设置Date对象中用本地时间表示的小时值。,setMilliseconds()：设置Date对象中用本地时间表示的毫秒值。,setMinutes()：设置Date对象中用本地时间表示的分钟值。,setSeconds()：设置Date对象中用本地时间表示的秒钟值。,setTime()：设置Date对象的日期和时间值。,setTimeout(,执行的语句,毫秒数,); /,设置计时器,Date,对象,任务,1,：实时数字时钟（在页面上实时变化的数字时钟）,解决方案,取得一个完整日期对象，分别取得时，分，秒,每隔,1,秒中刷新时间显示,对显示的时间进行格式化,程序清单,function tt(),var d = new Date();,var h = d.getHours();,var m = d.getMinutes();,var s = d.getSeconds();,var t = h + : + m + : + s ;,document.getElementById(clock).innerHTML=t;,setTimeout(tt(),1000);,/1秒后再执行tt(), ,练 习,加上年月日,.toLocaleDateString(),.toLocaleFormat(%Y-%m-%d %p %H:%M:%S %a)这种只有Firefox支持,2.String,对象,String对象,.语法：,var 对象名= new String(字符串) ;,var 对象名= 字符串 ;,对象名.属性方法,字符串.属性 | 方法,2.String对象的属性,length : 返回字符串对象的长度;,constructor :保存 了对String对象的构造函数的引用,Prototype : 返回String对象类型原型 的引用。,相关知识（本地对象）,3.String,对象的属性,charAt(n),：返回指定索引位置处的字符。,charCodeAt(n),：返回指定字符的,Unicode,编码。,indexOf(,子字符串,n),：返回,String,对象内第一次出现子字符串的字符位置。,lastIndexOf (,子字符串,n),： ：返回,String,对象中子字符串最后出现的位置。,Substring(n1, n2),：返回,n1,与,n2,中较小位置开始至较大位置,-1,的子串。,toLowerCase(),：返回一个字符串，该字符串中的字母被转换为小写字母。,toUpperCase(),：返回一个字符串，该字符串中的所有字母都被转化为大写字母。,fontcolor(color),：把一个带有,color,属性的,font,标记放置在,String,对象中的文本两端。,fontsize(size),：把一个带有,iSize,属性的,font,标记放置在,String,对象中的文本的两端。,bold(),：把,b,标记放置在,String,对象中的文本两端。,italics(),：把,i,标记放置在,String,对象中的文本两端。,sub(),：把,sub,标记放置到,String,对象中的文本两端。,sup(),：把,sup,标记放置到,String,对象中的文本两端。,任务,2,练习,isNaN() 函数用于检查其参数是否是非数字值，如果是非数字，返回true。,charAt() 方法可返回指定位置的字符，name【i】注意indexof()返回的是下标,练习2,相关知识点（内置对象）,Math对象,不用new命令创建对象，直接使用Math对象的属性与方法,语法,Math.property|method,1. Math对象的属性(P124),Math.E：返回Euler常数（自然对数的底），约等于2.718。,Math.PI：返回圆周率，约等于3.141592653589793。,相关知识点（内置对象）,2. Math对象的方法,Math.abs(iNumber)：返回数字参数iNumber的绝对值。,Math.ceil(iNumber)：返回大于等于其数字参数iNumber的最小整数。,Math.floor(iNumber)：,返回小于等于数字参数iNumber的最大整数。,Math.max(iNumber1, iNumber2)：返回数值表达式iNumber1和iNumber2中的较大者。也可以将更多的参数传入max方法。,Math.min(iNumber1, iNumber2)：返回数值表达式iNumber1和iNumber2中的较小者。也可以将更多的参数传入max方法。,Math.pow(base, exponent)：返回底表达式base的exponent次幂baseexponent。,Math.random()：,返回介于0和1之间的伪随机数，首次加载JavaScript时随机数发生器自动产生。,Math.round(iNumber)：返回与数值表达式iNumber最接近的整数（四舍五入）。,Math.sqrt(iNumber)：返回数字参数iNumber的平方根，如果参数iNumber为负数，则返回零。,练习：生成一个0-100之间的随机数。,任务,随机生成,4,位验证码,算法：每次都要产生四个,09,之间的数字，而,Math.random(),可以产生一个,01,之间的数，因此需要将,Math.random()*10,然后再用,Math.round(),四舍五入获得,010,之间的数组，如果是,10,，就转化为,0,。然后再把四个数字串联到一起。,函数：,这样做，会出现什么问题？,Math.floor,程序修改为：,3.,Arra,y,对象,(,一维数组,),Array对象,var a = new Array() ; /,定义一个没有指定大小的数组，也是动态数组。,var b = new Array(n) ; /定义一个包含n个元素的数组,var c = new Array(element0,element1,elementN) ;,/定义一个有N+1个元素且每个元素值已经确定的数组。,var d = element0 , element1, , elementN ; /同上,通过下标引用数组元素，一般通过循环可以给数组元素赋值。,相关知识（本地对象,-Array,）,例如,var a = new Array(2 , C , 5 , 8 , 98.5 ) ;,a0,a1,a2,a4,a3,相关知识（本地对象,-Array,）,Array对象的属性,length :,数组元素的个数，是最大下标-1；,Array,对象的方法,concat(,字符串)：把两个数组组合成一个新数组并返回该数组。,join(字符)：把数组的所有元素连接起来形成一个String对象并返回该对象。,pop()：移除数组中的最后一个元素并返回该元素。,push(元素列表)：把新元素添加到数组中并返回数组的新长度值。,reverse()：反转数组的元素顺序并返回反转后的数组。,shift()：移除数组aArray中的第一个元素并返回该元素。,slice()：返回数组的一段。,sort()：返回一个元素已经进行了排序的Array对象。,相关知识（本地对象,-Array,）,Array对象的方法,splice(start,n,e1,.,en)：,从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。,toLocaleString：返回由数组aArray的元素构成的字符串，若数组元素为日期对象，则该日期使用当前区域设置转换为字符串。,toString()：返回数组对象的字符串表示。,unshift：把指定的元素插入数组开始位置并返回该数组。,valueOf()：返回指定Array对象的原始值。,任务,4,练习,1,秒杀计时器：填入秒杀事件点击按钮，则开始计时，,显示目前剩余时间,练习2,验证用户名和密码框，要求用户名仅仅含数字和字母，要求密码长度不低于,6,位，如果不正确弹出对话框显示错误。,练习,45,猜数游戏，猜,0-9,之间的数字，如果猜中的话显示猜了几次,!,练习,随机生成验证码(字母或者数字),练习,5,用数组实现当单击数字时，图片随之改变,function change(num),document.getElementById(image1).src=groupnum;,