1、移动移动web编程技术编程技术任务任务55面向对象编程面向对象编程20232023年年2 2月月1 1日星期三日星期三教学内容与目标知识目标1.掌握对象的概念2.使用Date对象3.使用String对象4.使用Math对象5.使用Array对象技能目标1.实现动态时钟2.对字符串进行操作3.求随机数，求最大值，最小值等数学操作4.能对一组数据进行处理本章重点1.实现动态时钟2.对字符串进行操作3.求随机数，求最大值，最小值等数学操作4.能对一组数据进行处理教学方法案例教学 自主学习 探究训练课时建议4课时对象的基本概念对象：对象：n客观世界：对象用于描述客观世界存在的特定实体，如人，学生，汽车
2、、小狗等；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.属性或
3、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():得到系统日期得到系统日期相关
4、知识点（本地 对象）Date对象的主要方法对象的主要方法ngetSeconds()：返回Date对象中用本地时间表示的秒钟值（059）。ngetTime()：返回Date对象中的时间值。nsetDate()：设置Date对象中用本地时间表示的数字日期。nsetFullYear()：设置Date对象中用本地时间表示的年份值。nsetHours()：设置Date对象中用本地时间表示的小时值。nsetMilliseconds()：设置Date对象中用本地时间表示的毫秒值。nsetMinutes()：设置Date对象中用本地时间表示的分钟值。nsetSeconds()：设置Date对象中用本地时间表示
5、的秒钟值。nsetTime()：设置Date对象的日期和时间值。setTimeout(执行的语句执行的语句,毫秒数毫秒数);/设置计时器设置计时器Date对象任务任务1：实时数字时钟（在页面上实时变化的数字时：实时数字时钟（在页面上实时变化的数字时钟）钟）解决方案取得一个完整日期对象，分别取得时，分，秒取得一个完整日期对象，分别取得时，分，秒每隔每隔1秒中刷新时间显示秒中刷新时间显示对显示的时间进行格式化对显示的时间进行格式化程序清单function tt()var d=new Date();var h=d.getHours();var m=d.getMinutes();var s=d.get
6、Seconds();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对象对象.语法：nvar 对象名=new String(字符串);nvar 对象名=字符串 ;n对象名.属性方法 n字符串.属性|方法2.String对象的属性nlength
7、:返回字符串对象的长度;nconstructor:保存 了对String对象的构造函数的引用nPrototype:返回String对象类型原型 的引用。相关知识（本地对象）3.String对象的属性ncharAt(n)：返回指定索引位置处的字符。ncharCodeAt(n)：返回指定字符的Unicode编码。nindexOf(子字符串,n)：返回String对象内第一次出现子字符串的字符位置。nlastIndexOf(子字符串,n)：返回String对象中子字符串最后出现的位置。nSubstring(n1,n2)：返回n1与n2中较小位置开始至较大位置-1的子串。ntoLowerCase()：
8、返回一个字符串，该字符串中的字母被转换为小写字母。ntoUpperCase()：返回一个字符串，该字符串中的所有字母都被转化为大写字母。nfontcolor(color)：把一个带有color属性的font标记放置在String对象中的文本两端。nfontsize(size)：把一个带有iSize属性的font标记放置在String对象中的文本的两端。nbold()：把b标记放置在String对象中的文本两端。nitalics()：把i标记放置在String对象中的文本两端。nsub()：把sub标记放置到String对象中的文本两端。nsup()：把sup标记放置到String对象中的文本两
9、端。n任务2练习isNaN()函数用于检查其参数是否是非数字值，如果是非数字，返回true。charAt()方法可返回指定位置的字符，name【i】注意indexof()返回的是下标练习2相关知识点（内置对象）Math对象对象n不用new命令创建对象，直接使用Math对象的属性与方法n语法Math.property|method1.Math对象的属性(P124)nMath.E：返回Euler常数（自然对数的底），约等于2.718。nMath.PI：返回圆周率，约等于3.141592653589793。n相关知识点（内置对象）2.Math对象的方法nMath.abs(iNumber)：返回数字参
10、数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次幂b
11、aseexponent。nMath.random()：返回介于0和1之间的伪随机数，首次加载JavaScript时随机数发生器自动产生。nMath.round(iNumber)：返回与数值表达式iNumber最接近的整数（四舍五入）。nMath.sqrt(iNumber)：返回数字参数iNumber的平方根，如果参数iNumber为负数，则返回零。n练习：生成一个练习：生成一个0-100之间的随机数。之间的随机数。任务随机生成随机生成4位验证码位验证码算法：每次都要产生四个算法：每次都要产生四个09之间的数字，而之间的数字，而Math.random()可以产生一个可以产生一个01之间的数，因此
12、需之间的数，因此需要将要将Math.random()*10,然后再用然后再用Math.round()四舍四舍五入获得五入获得010之间的数组，如果是之间的数组，如果是10，就转化为，就转化为0。然后再把四个数字串联到一起。然后再把四个数字串联到一起。函数：函数：这样做，会出现什么问题？这样做，会出现什么问题？Math.floor程序修改为：3.Array对象(一维数组)Array对象对象nvar a=new Array();/定义一个没有指定大小的数组，也是动态数组。nvar b=new Array(n);/定义一个包含n个元素的数组nvar c=new Array(element0,elem
13、ent1,elementN);/定义一个有N+1个元素且每个元素值已经确定的数组。nvar d=element0,element1,elementN ;/同上通过下标引用数组元素，一般通过循环可以给数组元通过下标引用数组元素，一般通过循环可以给数组元素赋值。素赋值。相关知识（本地对象-Array）例如例如nvar a=new Array(2,C,5,8,98.5);2C5898.5a0a1a2a4a3var group=new Array()group0=1;group1=2;group2=3;document.write(group);var group=new Array(1,2,3);d
14、ocument.write(group);var group1=new Array(2,1,3);group1.sort();document.write(group1);/输出1,2,3相关知识（本地对象-Array）Array对象的属性对象的属性nlength:数组元素的个数，是最大下标-1；Array对象的方法对象的方法nconcat(字符串)：把两个数组组合成一个新数组并返回该数组。njoin(字符)：把数组的所有元素连接起来形成一个String对象并返回该对象。npop()：移除数组中的最后一个元素并返回该元素。npush(元素列表)：把新元素添加到数组中并返回数组的新长度值。nre
15、verse()：反转数组的元素顺序并返回反转后的数组。nshift()：移除数组aArray中的第一个元素并返回该元素。nslice()：返回数组的一段。nsort()：返回一个元素已经进行了排序的Array对象。相关知识（本地对象-Array）Array对象的方法对象的方法nsplice(start,n,e1,.,en)：从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。ntoLocaleString：返回由数组aArray的元素构成的字符串，若数组元素为日期对象，则该日期使用当前区域设置转换为字符串。ntoString()：返回数组对象的字符串表示
16、。nunshift：把指定的元素插入数组开始位置并返回该数组。nvalueOf()：返回指定Array对象的原始值。任务4练习1秒杀计时器：填入秒杀事件点击按钮，则开始计时，秒杀计时器：填入秒杀事件点击按钮，则开始计时，显示目前剩余时间显示目前剩余时间 练习2验证用户名和密码框，要求用户名仅仅含数字和字母验证用户名和密码框，要求用户名仅仅含数字和字母，要求密码长度不低于，要求密码长度不低于6位，如果不正确弹出对话框位，如果不正确弹出对话框显示错误。显示错误。练习45猜数游戏，猜猜数游戏，猜0-9之间的数字，如果猜中的话显示猜之间的数字，如果猜中的话显示猜了几次了几次!练习随机生成验证码随机生成验证码(字母或者数字字母或者数字)练习5用数组实现当单击数字时，图片随之改变用数组实现当单击数字时，图片随之改变function change(num)document.getElementById(image1).src=groupnum;
