《移动应用设计与开发-前端开发》课件-5 对象

JavaScript脚本语言--对象目录5.1内置对象-Date5.2内置对象-Math5.3内置对象-String5.4最定义对象5.5案例-时钟JavaScript脚本语言--5.1内置对象-Date什么是对象？对象的属性和方法内置对象-Date导入讲解演练总结实践对象：对象就是事物存在的实体，如人类、书桌、计算机、高楼大厦等。导入讲解演练总结实践内置对象-Date对象的属性和方法：作为一个实体，对象包含两个要素，即属性和方法。（1）属性是指用来描述对象特征的一组数据，以变量的形式存在，也叫成员变量。（2）方法是指用来描述对象的动作，表现为函数。自定义对象内置对象行内式对象：在JavaScript中，包括两种对象，即自定义对象和内置对象导入讲解演练总结实践内置对象-Date内置对象内置对象是JavaScript提供的已经定义好的对象，用户可以直接使用。内置对象-Date导入讲解演练总结实践Date对象类String对象类Math对象类Date对象主要用于管理和操作日期和时间数据，提供用来获取和设置日期与时间的方法。内置对象-Date导入讲解演练总结实践成员作用getFullYear()获取表示年份的4位数字，如2020setFullYear(value)设置年份getMonth()获取月份，范围0~11（0表示一月，1表示二月，依次类推）setMonth(value)设置月份getDate()获取月份中的某一天，范围1~31setDate(value)设置月份中的某一天getDay()获取星期，范围0~6（0表示星期日，1表示星期一，依次类推）getHours()获取小时数，返回0~23setHours(value)设置小时数Date对象主要用于管理和操作日期和时间数据，提供用来获取和设置日期与时间的方法。内置对象-Date导入讲解演练总结实践成员作用getMinutes()获取分钟数，范围0~59setMinutes(value)设置分钟数getSeconds()获取秒数，范围0~59setSeconds(value)设置秒数getMilliseconds()获取毫秒数，范围0~999setMilliseconds(value)设置毫秒数getTime()获取从1970-01-0100:00:00距离Date对象所代表时间的毫秒数setTime(value)通过从1970-01-0100:00:00计时的毫秒数来设置时间创建Date对象内置对象-Date导入讲解演练总结实践在使用Date对象类时，必须先使用new运算符创建它。创建Date对象的常见方式有以下3种：（1）创建一个不带参数的Date对象：vartoday=newDate();//将创建一个含有系统当前日期和时间的Date对象。（2）创建一个指定日期的Date对象：vardate=newDate(2021,3,1);//将创建一个日期值是2021年3月1日的Date对象，而且这个对象的小时、分钟、秒、毫秒值都为0。vartime=newDate("2021-3-1");vartime=newDate("2021/3/1");vartime=newDate("3-1,2021");创建Date对象内置对象-Date导入讲解演练总结实践在使用Date对象类时，必须先使用new运算符创建它。创建Date对象的常见方式有以下3种：（3）创建一个指定时间的Date对象：vartime=newDate(2021,3,1,10,20,30,50);//将创建一个含有确切日期和时间的日期对象，具体为年、月、日、时、分、秒、毫秒。如上例即为：2021年3月1日10点20分30秒50毫秒。Date对象的使用内置对象-Date导入讲解演练总结实践vardate=newDate(); //基于当前时间创建Date对象//示例结果：FriOct20202111:53:04GMT+0800(中国标准时间)date.toString();date.getFullYear(); //示例结果：2021date.getMonth(); //示例结果：4date.getDate(); //示例结果：20根据Date对象获取时间日期Date对象的使用内置对象-Date导入讲解演练总结实践//方式1：分别传入年、月、日、时、分、秒（月的范围是0~11，即真实月份-1）vardate1=newDate(2021,4,25,11,53,4);date1.toString(); //返回结果：SunFri04202111:53:04GMT+0800(中国标准时间)//方式2：通过字符串传入日期和时间vardate2=newDate('2021-04-2511:53:04');date2.toString(); //返回结果：SunFri04202111:53:04GMT+0800(中国标准时间)根据Date对象指定一个日期对策一内置对象-Date导入讲解演练总结实践任务：今天的日期和时间在页面上显示当前的日期和时间。对策一内置对象-Date导入讲解演练总结实践任务分析：今天的日期和时间（1）newDate()方法创建日期对象。（2）使用Date对象中的方法，getFullYear()获取年份，getMonth()获取月份，getDate()获取日期。（3）利用document.write()实现输出任务要求的结果。内置对象是JavaScript提供的已经定义好的对象，用户可以直接使用。内置对象主要用于管理和操作日期和时间数据，提供用来获取和设置日期与时间的方法。Date对象内置对象-Date导入讲解演练总结实践对策一内置对象-Date导入讲解演练总结实践课后练习使用Date对象完成在页面上输出“今天是XXXX年XX月XX日”。JavaScript脚本语言--5.2内置对象-MathJS中有数学类对象吗？有哪些呢？内置对象-Math导入讲解演练总结实践Math对象：

JavaScript的Math对象主要用于数字运算，Math对象的属性是数学中常用的常量。该对象的所有属性和方法都是静态的，使用该对象时，不需要对其进行创建。Math对象常用的属性和方法如下表。导入讲解演练总结实践内置对象-Math内置对象-Math导入讲解演练总结实践Math对象常用方法：内置对象-Math导入讲解演练总结实践Math对象常用方法：内置对象-Math导入讲解演练总结实践Math对象：以Math.random()获取指定范围内的随机数为例讲解。公式为Math.random()*(n-m)+m，表示生成大于或等于m且小于n的随机值Math.random()*(3-1)+1; //1≤返回结果<3Math.random()*(20-10)+10; //20≤返回结果<20Math.random()*(99-88)+88; //88≤返回结果<99Math.floor(Math.random()*(3-1+1)+1);//返回结果是1、2、3中的任意一个示例对策一内置对象-Math导入讲解演练总结实践任务：随机点名随机产生规定范围内的整数，然后再产生相同范围内的整数，两者相同时，则暂停。对策一内置对象-Math导入讲解演练总结实践任务分析：随机点名（1）设计界面（2）页面结构布局-HTML（3）页面样式-CSS（4）动态效果-JavaScript对策一内置对象-Math导入讲解演练总结实践任务：随机点名所用知识：Math.random()*num:产生从0到num的随机数Math.floor():向下取整setInterval:定时器简单的DOM操作等对策一内置对象-Math导入讲解演练总结实践录屏主要用于数字运算。Math对象Math对象的所有属性和方法都是静态的，使用该对象时，不需要对其进行创建。Math对象的使用内置对象-Math导入讲解演练总结实践对策一内置对象-Math导入讲解演练总结实践课后练习对圆周率进行4次方运算，结果进行四舍五入整数运算，输出结果。JavaScript脚本语言--5.3内置对象-StringJS如何管理和操作字符串数据呢？内置对象-String导入讲解演练总结实践String对象：

String对象用来管理和操作字符串数据。String对象提供了对字符串进行处理的属性和方法。导入讲解演练总结实践内置对象-String字符串对象是JavaScript最常用的内置对象，当使用字符串对象时，并不一定需要用关键字new。任何一个变量，如果它的值是字符串，那么，该变量就是一个字符串对象。因此，下述两种方法产生的字符串变量效果是一样的。内置对象-String导入讲解演练总结实践String对象的使用：（1）使用new关键字来创建String对象

varmyStr=newString(“字符串对象测试”);

创建String对象时，可以有参数，也可以没有参数，如果有参数，会把参数作为该变量的初始值。varmystring=newString("Iamastudent!");内置对象-String导入讲解演练总结实践String对象的使用：（2）直接使用字符串来进行赋值

varmyStr=“字符串对象测试”;任何一个字符串变量（用单引号或双引号括起来的字符串）都是一个String对象，可以将其直接作为对象来使用，只要在字符变量的后面加“.”，便可以直接调用String对象的属性和方法。字符串与String对象的不同在于返回的typeof值，前者返回的是string类型，后者返回的是object类型。

varmystring=“Iamastudent!";内置对象-String导入讲解演练总结实践String对象常用的属性和方法：成员作用length获取字符串的长度charAt(index)获取index位置的字符，位置从0开始计算indexOf(searchValue)获取searchValue在字符串中首次出现的位置lastIndexOf(searchValue)获取searchValue在字符串中最后出现的位置substring(start[,end])截取从start位置到end位置之间的一个子字符串substr(start[,length])截取从start位置开始到length长度的子字符串toLowerCase()获取字符串的小写形式toUpperCase()获取字符串的大写形式split([separator[,limit])使用separator分隔符将字符串分隔成数组，limit用于限制数量replace(str1,str2)使用str2替换字符串中的str1，返回替换结果内置对象-String导入讲解演练总结实践String对象常用的属性和方法：成员作用big()增大字符串文本与<big></big>效果相同bold()加粗字符串文本与<bold></bold>效果相同fontcolor()确定字体颜色

italics()用斜体显示字符串与<I></I>效果相同small()减小文本的大小与<small></small>效果相同strike()显示带删除线的文本与<strike></strike>效果相同sub()将文本显示为下标与效果相同内置对象-String导入讲解演练总结实践String对象常用的属性和方法：str="jpg|bmp|gif|ico|png";arr=str.split("|");for(vari=0;i<arr.length;i++){

document.write(arr[i]+’<br>’);}

分隔字符串，并在文档页面中输出各子字符串。内置对象-String导入讲解演练总结实践String对象：字符串相加字符串中最常用的操作是字符串相加，只要直接使用加号“+”就可以了，例如：varmystring=“Iam"+"astudent!";

也可以使用“+=”进行连续相加，即：mystring+="<br>";

等效于：mystring=mystring+"<br>";如果字符串与变量或者数字相加时，需要考虑字符串与整数、浮点数之间的转换。如果要将字符串转换为整数或者为浮点数，只要使用函数parseInt(s,b)或parseFloat(s)就可以了，其中s表示所要转换的字符串，b表示要转换成几进制的整数。内置对象-String导入讲解演练总结实践String对象的使用：比较字符串是否相等

比较两个字符串是否相等，只要直接使用逻辑比较符“==”就可以了。例如下述的函数用于判断字符串变量是否为空字符串或null，如果是，则返回true，否则，返回false。functionisEmpty（myString）{if(myString==null||myString=="")retruntrue;elsereturnfalse;}

内置对象-String导入讲解演练总结实践String对象：在字符串中使用特殊字符

JavaScript的字符串既可以使用单引号，也可以使用双引号，但是，前后必须一致。前后不一致则会导致运算时出错：varmystring=‘Iamsstudent!";

如果字符串中需要加入引号，可以使用与字符串的引号不同的引号，例如：varmystring='Iama"student"!';也可以使用反斜杠“\”，例如：varmystring="Iama\“student!\"";如果要在字符串中加入回车符，可以使用“\n”。

对策一内置对象-String导入讲解演练总结实践任务：验证用户名是否满足需求要求：限制用户名长度在3~10范围内，不允许出现admin（字符不区分大小写）字符串数据。假设用户输入的内容是Administrator。所需知识点：

1.字符串长度length

2.查找字符串indexOf。字符串对象.indexOf("查找的字符或字符串"，查找的起始位置)，如果找到了，则返回找到的位置，如果没找到，返回-1。varname='Administrator';if(name.length<3||name.length>10){alert('用户名长度必须在3~10之间。');}if(name.toLowerCase().indexOf('admin')!==-1){alert('用户名中不能包含敏感词：admin。');}用来管理和操作字符串数据。String对象使用new关键字来创建String对象直接使用字符串来进行赋值String对象的使用内置对象-String导入讲解演练总结实践内置对象-String导入讲解演练总结实践课后练习设计一个函数，实现从含有数字的字符串中取出所有数字的功能。JavaScript脚本语言--5.4自定义对象如何创建和访问自定义对象？自定义对象导入讲解演练总结实践自定义对象：在Javascript中，除了js本身提供的自定义对象外（如Array、Date、Number等），用户还可以自己创建对象，这种由用户自己创建的对象就被称为自定义对象。导入讲解演练总结实践自定义对象

在JavaScript中，除了内置对象外，还可以根据需求自己创建对象即自定义对象。对象是由属性和方法组成的，所以在创建自定义对象时主要就是声明对象的属性和方法。

创建对象时一般使用new运算符来创建对象。

语法如下所示：变量=new对象类（）；

导入讲解演练总结实践自定义对象将创建的对象赋值给一个变量后，这个变量就是引用类型的变量，简称引用变量。通过引用变量就可以访问对象的属性和方法。如获取当前年份，可以用如下代码来实现。vardate=newDate();varyear=date.getFullYear();document.write(year);上面的代码实现后，就可以输出当前的年份了。自定义对象的创建主要有三种方式：

直接创建自定义对象

通过自定义构造函数创建对象通过系统内置的object对象创建自定义对象

1.直接创建自定义对象语法格式如下：var对象名={属性名1：属性值1，属性名2：属性值2，属性名3：属性值3......}

自定义对象导入讲解演练总结实践2.通过系统内置的object对象创建自定义对象自定义对象导入讲解演练总结实践Object对象类是所有对象的基类，为所有的JavaScript对象提供通用的功能。实际上，JavaScript的所有对象都是Object对象类的实例，任何对象都可以使用Object对象的属性和方法。（1）通过Object对象创建新的对象，方法是先创建Object对象，再为该对象添加新型对象的属性和方法。基本语法如下所示。变量=newObject();

2.通过系统内置的object对象创建自定义对象自定义对象导入讲解演练总结实践（2）创建好新对象后，就可以为对象创建属性，对象的属性包含从Object继承的预定义的属性，也可以自己为新对象定义属性。定义属性的方法就是直接为新对象的属性赋值。如下代码所示。obj.new_attr=attr_valueobj.new_attr：对象的新属性名。attr_value：属性值。3.通过