Web前端開發(fā)-交互式設(shè)計(jì)（JavaScript+jQuery） 課件 單元5 JavaScript內(nèi)置對(duì)象

Web前端開發(fā)—交互式設(shè)計(jì)

（JavaScript+jQuery）主編：孫佳帝

孫文江編委：白哲佳張卓2023年電子工業(yè)出版社CONTENTS目錄JavaScript概述01JavaScript語(yǔ)言基礎(chǔ)02JavaScript函數(shù) 03面向?qū)ο缶幊?04JavaScript內(nèi)置對(duì)象05BOM編程06DOM編程07DOM事件08利用JQuery編程09設(shè)計(jì)個(gè)性化網(wǎng)站10Web前端開發(fā)—交互式設(shè)計(jì)05單元5JavaScript內(nèi)置對(duì)象

Web前端開發(fā)—交互式設(shè)計(jì)5.1Object對(duì)象1.創(chuàng)建Object對(duì)象對(duì)象是一組相似數(shù)據(jù)和功能的集合，用它來(lái)模擬現(xiàn)實(shí)世界中的對(duì)象。在JavaScript中，創(chuàng)建對(duì)象的方式通常有兩種方式：構(gòu)造函數(shù)和對(duì)象字面量。（1）構(gòu)造函數(shù)構(gòu)造函數(shù)創(chuàng)建對(duì)象的方式使用new關(guān)鍵字，后面跟著Object構(gòu)造函數(shù)，再給對(duì)象實(shí)例動(dòng)態(tài)添加上不同的屬性。參考【訓(xùn)練5-1】1.創(chuàng)建Object對(duì)象（2）對(duì)象字面量使用對(duì)象字面量的方式{}創(chuàng)建一個(gè)對(duì)象，這種方式相對(duì)比較簡(jiǎn)單、容易理解。創(chuàng)建對(duì)象的語(yǔ)法如下所示：varobj={property_1:value_1,//property_#可能是一個(gè)標(biāo)識(shí)符...property_2:value_2,//或者是一個(gè)數(shù)字……property_n:value_n//或是一個(gè)字符串};1.創(chuàng)建Object對(duì)象（3）object.create通過(guò)Object.create()方法，使用一個(gè)指定的原型對(duì)象和一個(gè)額外的屬性對(duì)象創(chuàng)建一個(gè)新對(duì)象。參考【訓(xùn)練5-2】2.Object對(duì)象屬性JavaScript中的所有對(duì)象都是繼承自O(shè)bject對(duì)象,Object對(duì)象其常見(jiàn)屬性如下表所示。參考【訓(xùn)練5-3】屬性描述constructor屬性是保存當(dāng)前對(duì)象的構(gòu)造函數(shù)3.Object對(duì)象方法JavaScript方法是能夠在對(duì)象上執(zhí)行的動(dòng)作。Object其常用方法如下表所示。方法描述hasOwnProperty(propertyName)返回一個(gè)布爾值，表示某個(gè)對(duì)象是否含有指定的屬性，而且此屬性非原型鏈繼承isPrototypeOf(Object)返回一個(gè)布爾值，表示指定的對(duì)象是否在本對(duì)象的原型鏈中propertyIsEnumerable(prototypeName)用來(lái)判斷給定的屬性是否可以被for..in語(yǔ)句給枚舉出來(lái)toLocaleString()返回對(duì)象的字符串表示，和代碼的執(zhí)行環(huán)境有關(guān)toString()返回對(duì)象的字符串表示valueOf()返回指定對(duì)象的原始值5.2Function對(duì)象1.創(chuàng)建Function對(duì)象

在JavaScript中，所有的函數(shù)也是以對(duì)象的形式存在的。語(yǔ)法格式如下所示： varfunc=newFunction(){

}func(){

}2.Function對(duì)象屬性Function的對(duì)象是JavaScript常用對(duì)象之一,常見(jiàn)的Function對(duì)象屬性如下表所示。屬性說(shuō)明arguments函數(shù)參數(shù)callee引用的是當(dāng)前被調(diào)用的函數(shù)對(duì)象caller調(diào)用當(dāng)前函數(shù)的函數(shù)constructor創(chuàng)建該對(duì)象的構(gòu)造函數(shù)length參數(shù)個(gè)數(shù)3.Function對(duì)象方法Function的對(duì)象方法是JavaScript常用對(duì)象之一,Function的對(duì)象的常用方法如下表所示。方法說(shuō)明call()調(diào)用當(dāng)前Function對(duì)象，可同時(shí)改變函數(shù)內(nèi)的this指針引用，函數(shù)參數(shù)一個(gè)個(gè)分別傳入apply()調(diào)用當(dāng)前Function對(duì)象，可同時(shí)改變函數(shù)內(nèi)的this指針引用，函數(shù)參數(shù)以數(shù)組或arguments對(duì)象的形式傳入toString()返回定義該Function對(duì)象的字符串valueOf()返回Function對(duì)象本身5.3Array對(duì)象1.創(chuàng)建的Array對(duì)象Array對(duì)象用于在變量中存儲(chǔ)多個(gè)值，下標(biāo)從0開始,一直到length-1，創(chuàng)建Array對(duì)象的語(yǔ)法格式如下：newArray();newArray(size);newArray(element0,element1,…,elementn);2.Array對(duì)象屬性Array對(duì)象屬性在JavaScript中應(yīng)用比較廣泛，Array對(duì)象常用的屬性,如下表所示：參考【訓(xùn)練5-6】屬性說(shuō)明constructor返回創(chuàng)建數(shù)組對(duì)象的原型函數(shù)prototype允許你向數(shù)組添加屬性或方法length返回?cái)?shù)組的長(zhǎng)度2.Array對(duì)象屬性在JavaScript對(duì)象中，Prototype是一個(gè)全局屬性，其語(yǔ)法格式如下所示：A=value參考【訓(xùn)練5-7】3.Array對(duì)象方法在JavaScript中，數(shù)組是一種非常重要的數(shù)據(jù)類型，Array對(duì)象的常用方法，如下表所示。參考【訓(xùn)練5-8】方法說(shuō)明concat()連接兩個(gè)或者更多的數(shù)組,并返回結(jié)果copyWithin()從數(shù)組指定位置拷貝元素到數(shù)組另一個(gè)指定位置中every()檢測(cè)數(shù)組中的每個(gè)元素是否都滿足條件fill()用一個(gè)固定值填充數(shù)組filter()檢測(cè)元素,返回?cái)?shù)組中符合條件所有元素的數(shù)組find()返回符合傳入函數(shù)條件的第一個(gè)數(shù)組元素findIndex()返回符合傳入函數(shù)條件的數(shù)組元素下標(biāo)【案例5-1】購(gòu)物車案例【案例分析】某網(wǎng)站想要做一個(gè)簡(jiǎn)易購(gòu)物車，能夠進(jìn)行商品購(gòu)買根據(jù)網(wǎng)頁(yè)中給出的數(shù)據(jù)，來(lái)對(duì)商品進(jìn)行一些商品單選、全選、商品添加、刪除功能等功能?！窘鉀Q方案】根據(jù)網(wǎng)頁(yè)中給出的數(shù)據(jù)，來(lái)對(duì)商品進(jìn)行一些商品單選、全選、商品添加、刪除功能等功能。根據(jù)本案例的描述，把所有的商品信息放在一個(gè)數(shù)組里，通過(guò)對(duì)商品信息的勾選將不同的信息放在表格里，用選擇語(yǔ)句設(shè)計(jì)點(diǎn)擊加號(hào)進(jìn)行商品添加，點(diǎn)擊減號(hào)進(jìn)行商品移除，遍歷數(shù)組進(jìn)行判斷，將已選擇商品添加到顯示隱藏欄里，并以累加的方式計(jì)算出商品總額。參考【shop.html】，【shop.css】，【shop.js】5.4String對(duì)象1.

創(chuàng)建String對(duì)象創(chuàng)建對(duì)象使用關(guān)鍵字new字進(jìn)行創(chuàng)建，語(yǔ)法格式：varMyStr=newString();varMyStr=newString(str);2.

String對(duì)象屬性

String對(duì)象提供了檢索元素的屬性，常用的屬性如下表所示。參考【訓(xùn)練5-9】屬性說(shuō)明constructor對(duì)創(chuàng)建該對(duì)象的函數(shù)的引用length字符串的長(zhǎng)度prototype向?qū)ο筇砑訉傩院头椒?.String對(duì)象方法String對(duì)象提供了字符串的檢查、抽取字符串、字符串的鏈接、字符串的分割的字符串相關(guān)的操作，String的常用方法如下表所示。參考【訓(xùn)練5-10】，【訓(xùn)練5-11】方法描述toLowerCase()小寫轉(zhuǎn)換toUpperCase()大寫轉(zhuǎn)換replace()字符串替換match()字符串匹配concat()字符串拼接split()字符串分割indexOf()字符串檢索5.5

Boolean對(duì)象1.

創(chuàng)建Boolean對(duì)象Boolean對(duì)象使用newBoolean()來(lái)創(chuàng)建，下面通過(guò)以下語(yǔ)句來(lái)了解Boolean對(duì)象的使用。newBoolean(value);//構(gòu)造函數(shù)Boolean(value);//轉(zhuǎn)換函數(shù)2.

Boolean對(duì)象屬性Boolean數(shù)據(jù)就是用來(lái)判斷真假的，而Boolean對(duì)象是作為對(duì)象進(jìn)行使用的，Boolean對(duì)象屬性常用的兩種屬性如下表所示。屬性描述constructor返回對(duì)創(chuàng)建此對(duì)象的Boolean函數(shù)的引用prototype向?qū)ο筇砑訉傩院头椒?.Boolean對(duì)象方法Boolean對(duì)象方法，如下表所示。參考【訓(xùn)練5-12】方法描述toString()把布爾值轉(zhuǎn)換為字符串，并返回結(jié)果valueOf()返回Boolean對(duì)象的原始值toSource()返回該對(duì)象的源代碼5.6Number對(duì)象1.

創(chuàng)建Number對(duì)象Number是對(duì)應(yīng)數(shù)值的引用類型。要?jiǎng)?chuàng)建一個(gè)Number對(duì)象，就使用Number構(gòu)造函數(shù)并傳入一個(gè)數(shù)值，如下例所示：letnumberObject=newNumber(10);2.

Boolean對(duì)象屬性Number對(duì)象是原始數(shù)值的包裝對(duì)象，Number對(duì)象提供一些屬性如下表所示。屬性描述constructor返回對(duì)創(chuàng)建此對(duì)象的Number函數(shù)的引用MAX_VALUE可表示的最大的數(shù)MIN_VALUE可表示的最小的數(shù)NEGATIVE_INFINITY負(fù)無(wú)窮大，溢出時(shí)返回該值NaN非數(shù)字值POSITIVE_INFINITY正無(wú)窮大，溢出時(shí)返回該值prototype允許您可以向?qū)ο筇砑訉傩院头椒?.

Number對(duì)象方法

Number對(duì)象方法，如下表所示。參考【訓(xùn)練5-13】方法描述toString（）把數(shù)字轉(zhuǎn)換為字符串，使用指定的基數(shù)toLocaleString（）把數(shù)字轉(zhuǎn)換為字符串，使用本地?cái)?shù)字格式順序toFixed（）把數(shù)字轉(zhuǎn)換為字符串，結(jié)果的小數(shù)點(diǎn)后有指定位數(shù)的數(shù)字valueOf（）返回一個(gè)Number對(duì)象的基本數(shù)字值5.7

Date對(duì)象1.創(chuàng)建Date對(duì)象JavaScript中的日期對(duì)象需要使用newDate()實(shí)例化對(duì)象才能使用，Date()是日期對(duì)象的構(gòu)造函數(shù)。在創(chuàng)建日期對(duì)象時(shí)，可以為構(gòu)造函數(shù)傳入一些參數(shù)，來(lái)表示具體的日期，其創(chuàng)建方式如下:vard1=newDate();vard2=newDate(milliseconds);vard3=newDate(dateString);vard4=newDate(year,month,day,hours,minutes,seconds,milliseconds);2.Date對(duì)象屬性常見(jiàn)的Date對(duì)象屬性，如下表所示。屬性描述constructor返回創(chuàng)建Date對(duì)象原型的函數(shù)prototype向?qū)ο筇砑訉傩院头椒?.Date對(duì)象方法

日期對(duì)象的常用方法分為get和set兩大類。get方法如下表所示。方法描述getFullYear()從Date對(duì)象以四位數(shù)字返回年份getMonth()從Date對(duì)象返回月份(0~11)getDate()根據(jù)世界時(shí)從Date對(duì)象返回月中的一天(1~31)getDay()從Date對(duì)象返回一周中的某一天(0~6)getHours()返回Date對(duì)象的小時(shí)(0~23)getMinutes()返回Date對(duì)象的分鐘(0~59)getSeconds()返回Date對(duì)象的秒數(shù)(0~59)getMilliseconds()根據(jù)世界時(shí)返回Date對(duì)象的毫秒(0~999)getTime()返回1970年1月1日至今的毫秒數(shù)3.Date對(duì)象方法

set方法如下表所示。參考【訓(xùn)練5-14】方法描述setFullYear()設(shè)置Date對(duì)象中的年份（四位數(shù)字）setMonth()設(shè)置Date對(duì)象中月份(0~11)setDate()設(shè)置Date對(duì)象中月的某一天(1~31)setDay()設(shè)置Date對(duì)象返回一周中的某一天(0~6)setHours()設(shè)置Date對(duì)象中的小時(shí)(0~23)setMinutes()設(shè)置Date對(duì)象中的分鐘(0~59)setSeconds()設(shè)置Date對(duì)象中的秒鐘(0~59)setMilliseconds()根據(jù)世界時(shí)設(shè)置Date對(duì)象中的毫秒(0~999)setTime()以毫秒設(shè)置Date對(duì)象【案例5-2】在頁(yè)面動(dòng)態(tài)顯示系統(tǒng)時(shí)間【案例分析】某網(wǎng)頁(yè)需要做一個(gè)電子時(shí)鐘，該時(shí)鐘需要根據(jù)當(dāng)前時(shí)間，在網(wǎng)頁(yè)中顯示客戶端系統(tǒng)時(shí)間?！窘鉀Q方案】

在網(wǎng)頁(yè)中，動(dòng)態(tài)顯示當(dāng)前時(shí)間是一種常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)。根據(jù)本案例描述需要定義函數(shù)，使用日期和時(shí)間對(duì)象，通過(guò)date獲取系統(tǒng)時(shí)間和日期，通過(guò)間隔定時(shí)器setTimeout動(dòng)態(tài)獲取時(shí)間，間隔定時(shí)器setTimeout間隔設(shè)置為500毫秒（1秒）獲取一次時(shí)間。參考【time.html】，【time.css】，【time.js】5.7

RegExp對(duì)象1.認(rèn)識(shí)正則表達(dá)式RegExp對(duì)象是RegularExpression(正則表達(dá)式)縮寫，它是對(duì)字符串執(zhí)行模式匹配的強(qiáng)大工具。RegExp對(duì)象使用單個(gè)字符串來(lái)描述、匹配一系列符合某個(gè)句法規(guī)則的字符串。2.創(chuàng)建RegExp對(duì)象（1）正則表達(dá)式字面量正則表達(dá)式字面量可以通過(guò)在一對(duì)分隔符之間放入表達(dá)式模式的各種組件來(lái)構(gòu)造一個(gè)正則表達(dá)式，其語(yǔ)法格式如下：varre=/pattern/flags;參數(shù)說(shuō)明如下：pattern（模式）描述了表達(dá)式的模式flags(修飾符標(biāo)志)決定正則表達(dá)式的動(dòng)作參數(shù)，是一個(gè)可選的修飾性標(biāo)志，主要有一下3個(gè)參數(shù)。詳情如下表所示。修飾符描述i代表不區(qū)分大小寫匹配g代表可以進(jìn)行全局匹配m代表可以進(jìn)行多行匹配2.創(chuàng)建RegExp對(duì)象使用不同模式和修飾符可以創(chuàng)建出各種正則表達(dá)式，以普通方式創(chuàng)建RegExp對(duì)象。例如：varre1=/at/g;//匹配字符串中的所有"at"varre2=/[bc]at/i;//匹配第一個(gè)"bat"或"cat"，忽略大小寫varre3=/.at/gi;//匹配所有以"at"結(jié)尾的三字符組合，忽略大小寫2.創(chuàng)建RegExp對(duì)象（2）構(gòu)造函數(shù)模式構(gòu)造函數(shù)方式語(yǔ)法如下：varre=newRegExp(pattern，flags);其中，模式和修飾符標(biāo)志與上面普通方式中定義的含義相同，如下例所示：varre=newRegExp(“dog”,”i”);3.正則表達(dá)式中的特殊字符正則表達(dá)式中的特殊字符，如下表所示。表達(dá)式描述[abc]查找方括號(hào)之間的任何字符。[^abc]查找任何不在方括號(hào)之間的字符。[0-9]查找任何從0至9的數(shù)字。[a-z]查找任何從小寫a到小寫z的字符。[A-Z]查找任何從大寫A到大寫Z的字符。[A-z]查找任何從大寫A到小寫z的字符。\做為轉(zhuǎn)意，即通常在"\"后面的字符不按原來(lái)意義解釋，如/b/匹配字符"b"，當(dāng)b前面加了反斜桿后/\b/，轉(zhuǎn)意為匹配一個(gè)單詞的邊界。-或-對(duì)正則表達(dá)式功能字符的還原，如"*"匹配它前面元字符0次或多次，/a*/將匹配a,aa,aaa，加了"\"后，/a\*/將只匹配"a*"。3.正則表達(dá)式中的特殊字符表達(dá)式描述^匹配一個(gè)輸入或一行的開頭，/^a/匹配"anA"，而不匹配"Ana"$匹配一個(gè)輸入或一行的結(jié)尾，/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.正則表達(dá)式中的特殊字符表達(dá)式描述[\b]匹配一個(gè)退格符\b匹配一個(gè)單詞的邊界\B匹配一個(gè)單詞的非邊界\cXX是一個(gè)控制符，\cM/匹配Ctrl-M\d匹配一個(gè)字?jǐn)?shù)字符，\d/=/[0-9]/\D匹配一個(gè)非字?jǐn)?shù)字符，\D/=/[^0-9]/\n匹配一個(gè)換行符\r匹配一個(gè)回車符\s匹配一個(gè)空白字符，包括\n,\r,\f,\t,\v等\S匹配一個(gè)非空白字符，等于/[^\n\f\r\t\v]/\t匹配一個(gè)制表符\v匹配一個(gè)重直制表符\w匹配一個(gè)可以組成單詞的字符(alphanumeric，這是我的意譯，含數(shù)字)，包括下劃線，如[\w]匹配"$5.98"中的5，等于[a-zA-Z0-9]\W匹配一個(gè)不可以組成單詞的字符，如[\W]匹配"$5.98"中的$，等于[^a-zA-Z0-9]4.RegExp對(duì)象屬性每個(gè)RegExp實(shí)例都有下列屬性，提供有關(guān)模式的各方面信息。如下表所示。屬性描述constructor返回一個(gè)函數(shù)，該函數(shù)是一個(gè)創(chuàng)建RegExp對(duì)象的原型。global判斷是否設(shè)置了"g"修飾符ignoreCase判斷是否設(shè)置了"i"修飾符lastIndex用于規(guī)定下次匹配的起始位置multiline判斷是否設(shè)置了"m"修飾符source返回正則表達(dá)式的匹配模式4.RegExp對(duì)象方法每個(gè)RegExp實(shí)例都有下列屬性，提供有關(guān)模式的各方面信息。如下表所示。參考【訓(xùn)練5-15】方法描述compile()編譯正則表達(dá)式exec()檢索字符串中指定的值。返回找到的值，并確定其位置test()檢索字符串中指定的值。返回true或falsetoString()返回正則表達(dá)式的字符串【案例5-3】驗(yàn)證注冊(cè)頁(yè)面信息【案例分析】

驗(yàn)證注冊(cè)頁(yè)面信息通常使用正則表達(dá)式對(duì)象的操作方法。某網(wǎng)站想要做個(gè)網(wǎng)頁(yè)登錄驗(yàn)證界面，需要輸入用戶名、密碼、郵箱進(jìn)行注冊(cè)，登錄注冊(cè)界面需要對(duì)用戶輸入信息進(jìn)行驗(yàn)證?！窘鉀Q方案】在開發(fā)HTML表單時(shí)注冊(cè)頁(yè)面經(jīng)常會(huì)對(duì)用戶輸入的內(nèi)容進(jìn)行驗(yàn)證，用戶名只能有請(qǐng)輸入，6--18位數(shù)字,字母,下劃線_，密碼只能由請(qǐng)輸入6--20位數(shù)字,字母,任意字符，郵箱地址要包含“＠”符號(hào)和“，”符號(hào)，且“，”符號(hào)在“＠”符號(hào)后，兩個(gè)符號(hào)之間至少有一個(gè)字符，郵箱地址以.com或.cn結(jié)束，定義滿足需求的正則表達(dá)式，使用正則的需求驗(yàn)證用戶輸入的信息是否正確，根據(jù)判斷返回相應(yīng)的信息。參考【input.html】，【input.css】，【input.js】5.7

Math對(duì)象1.

Math對(duì)象屬性Math對(duì)象屬性如下表所示。屬性描述E返回歐拉數(shù)（約2.718）LN2返回2的自然對(duì)數(shù)（約0.693）LN10返回10的自然對(duì)數(shù)（約2.302）LOG2E返回E的以2為底的對(duì)數(shù)（約1.442）LOG10E返回E的以10為底的對(duì)數(shù)（約0.434）PI返回PI（約3.14）SQRT1_2返回1/2的平方根（約0.707）SQRT2返回2的平方根（約1.414）1.

Math對(duì)象屬性Math對(duì)象方法如下表所示。方法描述ceil(x)返回x，向上舍入為最接近的整數(shù)。floor(x)返回x，向下舍入為最接近的整數(shù)min(x,?y,