Web前端开发-交互式设计（JavaScript+jQuery） 课件 单元5 JavaScript内置对象

Web前端开发—交互式设计

（JavaScript+jQuery）主编：孙佳帝

孙文江编委：白哲佳张卓2023年电子工业出版社CONTENTS目录JavaScript概述01JavaScript语言基础02JavaScript函数 03面向对象编程 04JavaScript内置对象05BOM编程06DOM编程07DOM事件08利用JQuery编程09设计个性化网站10Web前端开发—交互式设计05单元5JavaScript内置对象

Web前端开发—交互式设计5.1Object对象1.创建Object对象对象是一组相似数据和功能的集合，用它来模拟现实世界中的对象。在JavaScript中，创建对象的方式通常有两种方式：构造函数和对象字面量。（1）构造函数构造函数创建对象的方式使用new关键字，后面跟着Object构造函数，再给对象实例动态添加上不同的属性。参考【训练5-1】1.创建Object对象（2）对象字面量使用对象字面量的方式{}创建一个对象，这种方式相对比较简单、容易理解。创建对象的语法如下所示：varobj={property_1:value_1,//property_#可能是一个标识符...property_2:value_2,//或者是一个数字……property_n:value_n//或是一个字符串};1.创建Object对象（3）object.create通过Object.create()方法，使用一个指定的原型对象和一个额外的属性对象创建一个新对象。参考【训练5-2】2.Object对象属性JavaScript中的所有对象都是继承自Object对象,Object对象其常见属性如下表所示。参考【训练5-3】属性描述constructor属性是保存当前对象的构造函数3.Object对象方法JavaScript方法是能够在对象上执行的动作。Object其常用方法如下表所示。方法描述hasOwnProperty(propertyName)返回一个布尔值，表示某个对象是否含有指定的属性，而且此属性非原型链继承isPrototypeOf(Object)返回一个布尔值，表示指定的对象是否在本对象的原型链中propertyIsEnumerable(prototypeName)用来判断给定的属性是否可以被for..in语句给枚举出来toLocaleString()返回对象的字符串表示，和代码的执行环境有关toString()返回对象的字符串表示valueOf()返回指定对象的原始值5.2Function对象1.创建Function对象

在JavaScript中，所有的函数也是以对象的形式存在的。语法格式如下所示： varfunc=newFunction(){

}func(){

}2.Function对象属性Function的对象是JavaScript常用对象之一,常见的Function对象属性如下表所示。属性说明arguments函数参数callee引用的是当前被调用的函数对象caller调用当前函数的函数constructor创建该对象的构造函数length参数个数3.Function对象方法Function的对象方法是JavaScript常用对象之一,Function的对象的常用方法如下表所示。方法说明call()调用当前Function对象，可同时改变函数内的this指针引用，函数参数一个个分别传入apply()调用当前Function对象，可同时改变函数内的this指针引用，函数参数以数组或arguments对象的形式传入toString()返回定义该Function对象的字符串valueOf()返回Function对象本身5.3Array对象1.创建的Array对象Array对象用于在变量中存储多个值，下标从0开始,一直到length-1，创建Array对象的语法格式如下：newArray();newArray(size);newArray(element0,element1,…,elementn);2.Array对象属性Array对象属性在JavaScript中应用比较广泛，Array对象常用的属性,如下表所示：参考【训练5-6】属性说明constructor返回创建数组对象的原型函数prototype允许你向数组添加属性或方法length返回数组的长度2.Array对象属性在JavaScript对象中，Prototype是一个全局属性，其语法格式如下所示：A=value参考【训练5-7】3.Array对象方法在JavaScript中，数组是一种非常重要的数据类型，Array对象的常用方法，如下表所示。参考【训练5-8】方法说明concat()连接两个或者更多的数组,并返回结果copyWithin()从数组指定位置拷贝元素到数组另一个指定位置中every()检测数组中的每个元素是否都满足条件fill()用一个固定值填充数组filter()检测元素,返回数组中符合条件所有元素的数组find()返回符合传入函数条件的第一个数组元素findIndex()返回符合传入函数条件的数组元素下标【案例5-1】购物车案例【案例分析】某网站想要做一个简易购物车，能够进行商品购买根据网页中给出的数据，来对商品进行一些商品单选、全选、商品添加、删除功能等功能。【解决方案】根据网页中给出的数据，来对商品进行一些商品单选、全选、商品添加、删除功能等功能。根据本案例的描述，把所有的商品信息放在一个数组里，通过对商品信息的勾选将不同的信息放在表格里，用选择语句设计点击加号进行商品添加，点击减号进行商品移除，遍历数组进行判断，将已选择商品添加到显示隐藏栏里，并以累加的方式计算出商品总额。参考【shop.html】，【shop.css】，【shop.js】5.4String对象1.

创建String对象创建对象使用关键字new字进行创建，语法格式：varMyStr=newString();varMyStr=newString(str);2.

String对象属性

String对象提供了检索元素的属性，常用的属性如下表所示。参考【训练5-9】属性说明constructor对创建该对象的函数的引用length字符串的长度prototype向对象添加属性和方法3.String对象方法String对象提供了字符串的检查、抽取字符串、字符串的链接、字符串的分割的字符串相关的操作，String的常用方法如下表所示。参考【训练5-10】，【训练5-11】方法描述toLowerCase()小写转换toUpperCase()大写转换replace()字符串替换match()字符串匹配concat()字符串拼接split()字符串分割indexOf()字符串检索5.5

Boolean对象1.

创建Boolean对象Boolean对象使用newBoolean()来创建，下面通过以下语句来了解Boolean对象的使用。newBoolean(value);//构造函数Boolean(value);//转换函数2.

Boolean对象属性Boolean数据就是用来判断真假的，而Boolean对象是作为对象进行使用的，Boolean对象属性常用的两种属性如下表所示。属性描述constructor返回对创建此对象的Boolean函数的引用prototype向对象添加属性和方法3.Boolean对象方法Boolean对象方法，如下表所示。参考【训练5-12】方法描述toString()把布尔值转换为字符串，并返回结果valueOf()返回Boolean对象的原始值toSource()返回该对象的源代码5.6Number对象1.

创建Number对象Number是对应数值的引用类型。要创建一个Number对象，就使用Number构造函数并传入一个数值，如下例所示：letnumberObject=newNumber(10);2.

Boolean对象属性Number对象是原始数值的包装对象，Number对象提供一些属性如下表所示。属性描述constructor返回对创建此对象的Number函数的引用MAX_VALUE可表示的最大的数MIN_VALUE可表示的最小的数NEGATIVE_INFINITY负无穷大，溢出时返回该值NaN非数字值POSITIVE_INFINITY正无穷大，溢出时返回该值prototype允许您可以向对象添加属性和方法3.

Number对象方法

Number对象方法，如下表所示。参考【训练5-13】方法描述toString（）把数字转换为字符串，使用指定的基数toLocaleString（）把数字转换为字符串，使用本地数字格式顺序toFixed（）把数字转换为字符串，结果的小数点后有指定位数的数字valueOf（）返回一个Number对象的基本数字值5.7

Date对象1.创建Date对象JavaScript中的日期对象需要使用newDate()实例化对象才能使用，Date()是日期对象的构造函数。在创建日期对象时，可以为构造函数传入一些参数，来表示具体的日期，其创建方式如下:vard1=newDate();vard2=newDate(milliseconds);vard3=newDate(dateString);vard4=newDate(year,month,day,hours,minutes,seconds,milliseconds);2.Date对象属性常见的Date对象属性，如下表所示。属性描述constructor返回创建Date对象原型的函数prototype向对象添加属性和方法3.Date对象方法

日期对象的常用方法分为get和set两大类。get方法如下表所示。方法描述getFullYear()从Date对象以四位数字返回年份getMonth()从Date对象返回月份(0~11)getDate()根据世界时从Date对象返回月中的一天(1~31)getDay()从Date对象返回一周中的某一天(0~6)getHours()返回Date对象的小时(0~23)getMinutes()返回Date对象的分钟(0~59)getSeconds()返回Date对象的秒数(0~59)getMilliseconds()根据世界时返回Date对象的毫秒(0~999)getTime()返回1970年1月1日至今的毫秒数3.Date对象方法

set方法如下表所示。参考【训练5-14】方法描述setFullYear()设置Date对象中的年份（四位数字）setMonth()设置Date对象中月份(0~11)setDate()设置Date对象中月的某一天(1~31)setDay()设置Date对象返回一周中的某一天(0~6)setHours()设置Date对象中的小时(0~23)setMinutes()设置Date对象中的分钟(0~59)setSeconds()设置Date对象中的秒钟(0~59)setMilliseconds()根据世界时设置Date对象中的毫秒(0~999)setTime()以毫秒设置Date对象【案例5-2】在页面动态显示系统时间【案例分析】某网页需要做一个电子时钟，该时钟需要根据当前时间，在网页中显示客户端系统时间。【解决方案】

在网页中，动态显示当前时间是一种常见的网页设计。根据本案例描述需要定义函数，使用日期和时间对象，通过date获取系统时间和日期，通过间隔定时器setTimeout动态获取时间，间隔定时器setTimeout间隔设置为500毫秒（1秒）获取一次时间。参考【time.html】，【time.css】，【time.js】5.7

RegExp对象1.认识正则表达式RegExp对象是RegularExpression(正则表达式)缩写，它是对字符串执行模式匹配的强大工具。RegExp对象使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。2.创建RegExp对象（1）正则表达式字面量正则表达式字面量可以通过在一对分隔符之间放入表达式模式的各种组件来构造一个正则表达式，其语法格式如下：varre=/pattern/flags;参数说明如下：pattern（模式）描述了表达式的模式flags(修饰符标志)决定正则表达式的动作参数，是一个可选的修饰性标志，主要有一下3个参数。详情如下表所示。修饰符描述i代表不区分大小写匹配g代表可以进行全局匹配m代表可以进行多行匹配2.创建RegExp对象使用不同模式和修饰符可以创建出各种正则表达式，以普通方式创建RegExp对象。例如：varre1=/at/g;//匹配字符串中的所有"at"varre2=/[bc]at/i;//匹配第一个"bat"或"cat"，忽略大小写varre3=/.at/gi;//匹配所有以"at"结尾的三字符组合，忽略大小写2.创建RegExp对象（2）构造函数模式构造函数方式语法如下：varre=newRegExp(pattern，flags);其中，模式和修饰符标志与上面普通方式中定义的含义相同，如下例所示：varre=newRegExp(“dog”,”i”);3.正则表达式中的特殊字符正则表达式中的特殊字符，如下表所示。表达式描述[abc]查找方括号之间的任何字符。[^abc]查找任何不在方括号之间的字符。[0-9]查找任何从0至9的数字。[a-z]查找任何从小写a到小写z的字符。[A-Z]查找任何从大写A到大写Z的字符。[A-z]查找任何从大写A到小写z的字符。\做为转意，即通常在"\"后面的字符不按原来意义解释，如/b/匹配字符"b"，当b前面加了反斜杆后/\b/，转意为匹配一个单词的边界。-或-对正则表达式功能字符的还原，如"*"匹配它前面元字符0次或多次，/a*/将匹配a,aa,aaa，加了"\"后，/a\*/将只匹配"a*"。3.正则表达式中的特殊字符表达式描述^匹配一个输入或一行的开头，/^a/匹配"anA"，而不匹配"Ana"$匹配一个输入或一行的结尾，/a$/匹配"Ana"，而不匹配"anA"*匹配前面元字符0次或多次，/ba*/将匹配b,ba,baa,baaa+匹配前面元字符1次或多次，/ba*/将匹配ba,baa,baaa?匹配前面元字符0次或1次，/ba*/将匹配b,ba(x)匹配x保存x在名为$1...$9的变量中x|y匹配x或y{n}精确匹配n次{n,}匹配n次以上{n,m}匹配n-m次3.正则表达式中的特殊字符表达式描述[\b]匹配一个退格符\b匹配一个单词的边界\B匹配一个单词的非边界\cXX是一个控制符，\cM/匹配Ctrl-M\d匹配一个字数字符，\d/=/[0-9]/\D匹配一个非字数字符，\D/=/[^0-9]/\n匹配一个换行符\r匹配一个回车符\s匹配一个空白字符，包括\n,\r,\f,\t,\v等\S匹配一个非空白字符，等于/[^\n\f\r\t\v]/\t匹配一个制表符\v匹配一个重直制表符\w匹配一个可以组成单词的字符(alphanumeric，这是我的意译，含数字)，包括下划线，如[\w]匹配"$5.98"中的5，等于[a-zA-Z0-9]\W匹配一个不可以组成单词的字符，如[\W]匹配"$5.98"中的$，等于[^a-zA-Z0-9]4.RegExp对象属性每个RegExp实例都有下列属性，提供有关模式的各方面信息。如下表所示。属性描述constructor返回一个函数，该函数是一个创建RegExp对象的原型。global判断是否设置了"g"修饰符ignoreCase判断是否设置了"i"修饰符lastIndex用于规定下次匹配的起始位置multiline判断是否设置了"m"修饰符source返回正则表达式的匹配模式4.RegExp对象方法每个RegExp实例都有下列属性，提供有关模式的各方面信息。如下表所示。参考【训练5-15】方法描述compile()编译正则表达式exec()检索字符串中指定的值。返回找到的值，并确定其位置test()检索字符串中指定的值。返回true或falsetoString()返回正则表达式的字符串【案例5-3】验证注册页面信息【案例分析】

验证注册页面信息通常使用正则表达式对象的操作方法。某网站想要做个网页登录验证界面，需要输入用户名、密码、邮箱进行注册，登录注册界面需要对用户输入信息进行验证。【解决方案】在开发HTML表单时注册页面经常会对用户输入的内容进行验证，用户名只能有请输入，6--18位数字,字母,下划线_，密码只能由请输入6--20位数字,字母,任意字符，邮箱地址要包含“＠”符号和“，”符号，且“，”符号在“＠”符号后，两个符号之间至少有一个字符，邮箱地址以.com或.cn结束，定义满足需求的正则表达式，使用正则的需求验证用户输入的信息是否正确，根据判断返回相应的信息。参考【input.html】，【input.css】，【input.js】5.7

Math对象1.

Math对象属性Math对象属性如下表所示。属性描述E返回欧拉数（约2.718）LN2返回2的自然对数（约0.693）LN10返回10的自然对数（约2.302）LOG2E返回E的以2为底的对数（约1.442）LOG10E返回E的以10为底的对数（约0.434）PI返回PI（约3.14）SQRT1_2返回1/2的平方根（约0.707）SQRT2返回2的平方根（约1.414）1.

Math对象属性Math对象方法如下表所示。方法描述ceil(x)返回x，向上舍入为最接近的整数。floor(x)返回x，向下舍入为最接近的整数min(x, y,