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

移动移动web编程技术编程技术任务任务55面向对象编程面向对象编程15 15 六月六月 2024 2024移动web编程技术任务5面向对象编程09 八月 2023教学内容与目标教学内容与目标对象的基本概念对象：对象：n客观世界：对象用于描述客观世界存在的特定实体，如人，学生，汽车、小狗等；n信息世界：就是一组包含数据的属性和对属性中数据进行操作 的方法 的实体。对象类型：对象类型：n本地对象（Number,String,Boolean,Array,Date,Object,Function等）n内置对象（Global 和Math），不能new创建，直接使用n宿主对象（document,window,location,screen,navigagor）n用户自定义对象对象的基本概念对象：对象的基本概念对象的使用对象的使用nnew 创建对象：new object(参数)nvar ob1=new Date();n var arr=new Array();nthis 引用当前对象:this.属性或this.方法()nfor in n for (变量名 in 对象名)访问对象属性和方法访问对象属性和方法n对象.属性名方法名（）对象的基本概念对象的使用Date对象Date对象对象n封装了日期和时间的操作，它有设置、获得和处理日期和时间的方法，只有两个属性。Date对象要创建实例才能使用。var date对象名=new Date(parameters);nParameters:可以省略，也可以是以下任一种格式nmonth dd,yyyy hh:mm:ss nmonth dd,yyyynyy,mm,dd,hh,mm,ss nyy,mm,ddnMilliseconds New Date():得到系统日期得到系统日期Date对象Date对象New Date():相关知识点（本地 对象）Date对象的主要方法对象的主要方法ngetSeconds()：返回Date对象中用本地时间表示的秒钟值（059）。ngetTime()：返回Date对象中的时间值。nsetDate()：设置Date对象中用本地时间表示的数字日期。nsetFullYear()：设置Date对象中用本地时间表示的年份值。nsetHours()：设置Date对象中用本地时间表示的小时值。nsetMilliseconds()：设置Date对象中用本地时间表示的毫秒值。nsetMinutes()：设置Date对象中用本地时间表示的分钟值。nsetSeconds()：设置Date对象中用本地时间表示的秒钟值。nsetTime()：设置Date对象的日期和时间值。setTimeout(执行的语句执行的语句,毫秒数毫秒数);/设置计时器设置计时器相关知识点（本地 对象）Date对象的主要方法setTimeDate对象任务任务1：实时数字时钟（在页面上实时变化的数字时：实时数字时钟（在页面上实时变化的数字时钟）钟）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()程序清单script language=javascri练 习加上年月日加上年月日练 习加上年月日.toLocaleDateString().toLocaleFormat(%Y-%m-%d%p%H:%M:%S%a)这种这种只有只有Firefox支持支持.toLocaleDateString()2.String对象String对象对象.语法：nvar 对象名=new String(字符串);nvar 对象名=字符串 ;n对象名.属性方法 n字符串.属性|方法2.String对象的属性nlength:返回字符串对象的长度;nconstructor:保存 了对String对象的构造函数的引用nPrototype:返回String对象类型原型 的引用。2.String对象String对象相关知识（本地对象）3.String对象的属性ncharAt(n)：返回指定索引位置处的字符。ncharCodeAt(n)：返回指定字符的Unicode编码。nindexOf(子字符串,n)：返回String对象内第一次出现子字符串的字符位置。nlastIndexOf(子字符串,n)：返回String对象中子字符串最后出现的位置。nSubstring(n1,n2)：返回n1与n2中较小位置开始至较大位置-1的子串。ntoLowerCase()：返回一个字符串，该字符串中的字母被转换为小写字母。ntoUpperCase()：返回一个字符串，该字符串中的所有字母都被转化为大写字母。nfontcolor(color)：把一个带有color属性的font标记放置在String对象中的文本两端。nfontsize(size)：把一个带有iSize属性的font标记放置在String对象中的文本的两端。nbold()：把b标记放置在String对象中的文本两端。nitalics()：把i标记放置在String对象中的文本两端。nsub()：把sub标记放置到String对象中的文本两端。nsup()：把sup标记放置到String对象中的文本两端。n相关知识（本地对象）3.String对象的属性任务2任务2任务5-面向对象编程解析课件练习练习isNaN()函数用于检查其参数是否是非数字值，如果是非数字，返回true。charAt()方法可返回指定位置的字符，name【i】注意indexof()返回的是下标isNaN()函数用于检查其参数是否是非数字值，如果是非数练习2练习2相关知识点（内置对象）Math对象对象n不用new命令创建对象，直接使用Math对象的属性与方法n语法Math.property|method1.Math对象的属性(P124)nMath.E：返回Euler常数（自然对数的底），约等于2.718。nMath.PI：返回圆周率，约等于3.141592653589793。n相关知识点（内置对象）Math对象相关知识点（内置对象）2.Math对象的方法nMath.abs(iNumber)：返回数字参数iNumber的绝对值。nMath.ceil(iNumber)：返回大于等于其数字参数iNumber的最小整数。nMath.floor(iNumber)：返回小于等于数字参数iNumber的最大整数。nMath.max(iNumber1,iNumber2)：返回数值表达式iNumber1和iNumber2中的较大者。也可以将更多的参数传入max方法。nMath.min(iNumber1,iNumber2)：返回数值表达式iNumber1和iNumber2中的较小者。也可以将更多的参数传入max方法。nMath.pow(base,exponent)：返回底表达式base的exponent次幂baseexponent。nMath.random()：返回介于0和1之间的伪随机数，首次加载JavaScript时随机数发生器自动产生。nMath.round(iNumber)：返回与数值表达式iNumber最接近的整数（四舍五入）。nMath.sqrt(iNumber)：返回数字参数iNumber的平方根，如果参数iNumber为负数，则返回零。n相关知识点（内置对象）2.Math对象的方法练习：生成一个练习：生成一个0-100之间的随机数。之间的随机数。练习：生成一个0-100之间的随机数。任务随机生成随机生成4位验证码位验证码算法：每次都要产生四个算法：每次都要产生四个09之间的数字，而之间的数字，而Math.random()可以产生一个可以产生一个01之间的数，因此需要将之间的数，因此需要将Math.random()*10,然后再用然后再用Math.round()四舍五入四舍五入获得获得010之间的数组，如果是之间的数组，如果是10，就转化为，就转化为0。然后。然后再把四个数字串联到一起。再把四个数字串联到一起。任务随机生成4位验证码函数：函数：这样做，会出现什么问题？这样做，会出现什么问题？Math.floor函数：Math.floor程序修改为：程序修改为：3.Array对象(一维数组)Array对象对象nvar a=new Array();/定义一个没有指定大小的数组，也是动态数组。nvar b=new Array(n);/定义一个包含n个元素的数组nvar c=new Array(element0,element1,elementN);/定义一个有N+1个元素且每个元素值已经确定的数组。nvar d=element0,element1,elementN ;/同上通过下标引用数组元素，一般通过循环可以给数组元通过下标引用数组元素，一般通过循环可以给数组元素赋值。素赋值。3.Array对象(一维数组)Array对象相关知识（本地对象-Array）例如例如nvar a=new Array(2,C,5,8,98.5);a0a1a2a4a3相关知识（本地对象-Array）例如a0a1a2任务5-面向对象编程解析课件相关知识（本地对象-Array）Array对象的属性对象的属性nlength:数组元素的个数，是最大下标-1；Array对象的方法对象的方法nconcat(字符串)：把两个数组组合成一个新数组并返回该数组。njoin(字符)：把数组的所有元素连接起来形成一个String对象并返回该对象。npop()：移除数组中的最后一个元素并返回该元素。npush(元素列表)：把新元素添加到数组中并返回数组的新长度值。nreverse()：反转数组的元素顺序并返回反转后的数组。nshift()：移除数组aArray中的第一个元素并返回该元素。nslice()：返回数组的一段。nsort()：返回一个元素已经进行了排序的Array对象。相关知识（本地对象-Array）Array对象的属性相关知识（本地对象-Array）Array对象的方法对象的方法nsplice(start,n,e1,.,en)：从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。ntoLocaleString：返回由数组aArray的元素构成的字符串，若数组元素为日期对象，则该日期使用当前区域设置转换为字符串。ntoString()：返回数组对象的字符串表示。nunshift：把指定的元素插入数组开始位置并返回该数组。nvalueOf()：返回指定Array对象的原始值。相关知识（本地对象-Array）Array对象的方法任务4任务4任务5-面向对象编程解析课件任务5-面向对象编程解析课件练习1秒杀计时器：填入秒杀事件点击按钮，则开始计时，秒杀计时器：填入秒杀事件点击按钮，则开始计时，显示目前剩余时间显示目前剩余时间 练习1秒杀计时器：填入秒杀事件点击按钮，则开始计时，练习2验证用户名和密码框，要求用户名仅仅含数字和字母，验证用户名和密码框，要求用户名仅仅含数字和字母，要求密码长度不低于要求密码长度不低于6位，如果不正确弹出对话框显位，如果不正确弹出对话框显示错误。示错误。练习2验证用户名和密码框，要求用户名仅仅含数字和字母，要求密练习45猜数游戏，猜猜数游戏，猜0-9之间的数字，如果猜中的话显示猜之间的数字，如果猜中的话显示猜了几次了几次!练习45猜数游戏，猜0-9之间的数字，如果猜中的话显示猜了几练习随机生成验证码随机生成验证码(字母或者数字字母或者数字)练习随机生成验证码(字母或者数字)练习5用数组实现当单击数字时，图片随之改变用数组实现当单击数字时，图片随之改变function change(num)document.getElementById(image1).src=groupnum;练习5用数组实现当单击数字时，图片随之改变