第3章 JavaScript對象編程

第3章JavaScript對象編程學(xué)會使用Date對象學(xué)會使用Math對象學(xué)會使用數(shù)組對象學(xué)會使用字符串對象學(xué)會使用正則表達式對象學(xué)習(xí)目標本章任務(wù)任務(wù)一：制作動態(tài)時鐘效果任務(wù)二：制作隨機選號頁面本章任務(wù)任務(wù)三：制作簡單的焦點圖效果任務(wù)四：驗證注冊頁面信息本章任務(wù)任務(wù)五：使用正則表達式驗證注冊頁面信息什么是對象屬性HeightSexAgeCareer……方法Eat()Speak()Breath()Think()Sleep()……屬性bgColorLocationCookieHeight……方法Open()Close()Focus()Write()……什么是對象對象由兩部分組成：一組包含各種類型數(shù)據(jù)的屬性對屬性中的數(shù)據(jù)進行操作的方法JavaScript的對象JavaScript支持的對象包括以下幾種：內(nèi)置對象Date、Math、String、Array、Number等瀏覽器對象Window、Location、History、Navigator、Screen、Document、Frame等自定義對象任務(wù)1:在頁面動態(tài)顯示系統(tǒng)時間任務(wù)描述：

在“我的博客”首頁動態(tài)顯示客戶端系統(tǒng)時間。任務(wù)分析：在頁面動態(tài)顯示系統(tǒng)時間，可以采用以下步驟：1.完成靜態(tài)頁面設(shè)計，標識要顯示系統(tǒng)時間的位置，此例已完成該步驟。2.定義函數(shù)，使用日期和時間對象，獲取客戶端系統(tǒng)時間。3.為id為time的標簽賦值。4.使用定時函數(shù)，每隔一秒重新調(diào)用一次函數(shù)。時鐘顯示如何實現(xiàn)如時鐘效果？由于涉及到時間的顯示問題，所以要用到日期對象Date。Date對象var日期對象=newDate(年、月、日等參數(shù))首先創(chuàng)建對象實例：

var日期對象=newDate()var日期對象=newDate(毫秒數(shù))var日期對象=newDate(字符串)Date對象存儲的日期為自1970年1月1日

00:00:00以來的毫秒數(shù)例如：varmydate=newDate("July29,2007,10:30:00")document.write(mydate);var日期對象=newDate()無參數(shù)表示當前日期和時間varmydate=newDate()document.write(mydate);例如：varmydate=newDate(3580)document.write(mydate);時間標準UTC：全球標準時間(CoordinatedUniversalTime),由世界時間標準設(shè)定的時間，原先也被稱為格林威治標準時間（GMT）。

UTC+800：UTC是零時區(qū)，即格林威治標準時間；800的含義是8:00即8個小時0分；UTC+800是指比格林威治標準時間提前8個小時，應(yīng)當是東八區(qū)的時間，也就是北京時間。var日期對象=newDate()無參數(shù)表示當前日期和時間varmydate=newDate(2011,3,20,6,7,8)document.write(mydate);Date對象的方法Data方法的分組：方法分組說明setxxx這些方法用于設(shè)置時間和日期值getxxx這些方法用于獲取時間和日期值Toxxx這些方法用于從Date對象返回字符串值parsexxx&UTCxx這些方法用于解析字符串Date對象方法的參數(shù)用作Date方法的參數(shù)的整數(shù)：值整數(shù)Seconds和minutes0至59Hours0至23Day0至6（星期幾）Date1至31（月份中的天數(shù)）Months0至11（一月至十二月）Date對象方法Set方法：方法說明setDate設(shè)置Date對象中月份中的天數(shù)，其值介于1至31之間。setHours設(shè)置Date對象中的小時數(shù)，其值介于0至23之間。setMinutes設(shè)置Date對象中的分鐘數(shù)，其值介于0至59之間。setSeconds設(shè)置Date對象中的秒數(shù)，其值介于0至59之間。setTime設(shè)置Date對象中的時間值。setMonth設(shè)置Date對象中的月份，其值介于1至12之間。Date對象方法Get方法：方法說明getDate返回Date對象中月份中的天數(shù)，其值介于1至31之間getDay返回Date對象中的星期幾，其值介于0至6之間getHours返回Date對象中的小時數(shù)，其值介于0至23之間getMinutes返回Date對象中的分鐘數(shù)，其值介于0至59之間getSeconds返回Date對象中的秒數(shù)，其值介于0至59之間getMonth返回Date對象中的月份，其值介于0至11之間getFullYear返回Date對象中的年份，其值為四位數(shù)getTime返回自某一時刻（1970年1月1日）以來的毫秒數(shù)Date對象方法方法說明ToGMTString使用格林尼治標準時間(GMT)數(shù)據(jù)格式將Date對象轉(zhuǎn)換成字符串表示ToLocaleString使用當?shù)貢r間格式將Date對象轉(zhuǎn)換成字符串表示To方法：Parse方法和UTC方法方法說明Date.parse(datestring)用日期字符串表示自1970年1月1日以來的毫秒數(shù)Date.UTC(year,month,day,hours,min.,secs.)Date對象中自1970年1月1日以來的毫秒數(shù)Date對象做時鐘顯示<SCRIPTlanguage="javaScript">functiondisptime(){varnow=newDate();varhour=now.getHours();if(hour>=0&&hour<=12)document.write("<H2>上午好!</H2>")if(hour>12&&hour<=18)document.write("<H2>下午好!</H2>");if(hour>18&&hour<24)document.write("<H2>晚上好!</H2>");document.write("<H2>今天日期:"+now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日</H2>");document.write("<H2>現(xiàn)在時間:"+now.getHours()+"點"+now.getMinutes()+"分</H2>");}</SCRIPT><BODYonload="disptime()">查看完整代碼獲得當前日期和時間獲得小時，即當前是幾點月份數(shù)字0－11，注意＋1判斷上午、下午還是晚上練習(xí)Date對象做時鐘顯示上一頁PPT示例中時鐘不能動態(tài)改變，怎么辦？由于時間在不停地走，所以應(yīng)該每隔1秒調(diào)用顯示時間的方法。如何解決？使用setTimeout()方法每隔1秒調(diào)用顯示時間的方法setTimeout()的用法vartimer=window.setTimeout（“調(diào)用的函數(shù)”,”定時的毫秒數(shù)”）返回值timer為該事件超時的引用變量名。提供clearTimeout()方法清除定時操作，該方法唯一參數(shù)就是事件超時的引用變量名。例：vartimer＝setTimeout(“disptime()”,1000);clearTimeout(timer);該方法在設(shè)定的時間到來時觸發(fā)某指定的事件。設(shè)定時間間隔setInterval()：用于設(shè)定時間間隔，用于按某個指定時間間隔去周期觸發(fā)某個事件。激活后就會重復(fù)執(zhí)行，直到關(guān)閉為止（clearInterval),所以一般放在函數(shù)體外。setTimeout()：用于設(shè)置某事件的超時，即在設(shè)定的時間來到時觸發(fā)某指定的事件。激活后只會執(zhí)行一次，所以一般放在函數(shù)體內(nèi)。Date對象做時鐘顯示<SCRIPTlanguage="JavaScript">functiondisptime(){vartime=newDate();//獲得當前時間

varhour=time.getHours();//獲得小時、分鐘、秒

varminute=time.getMinutes();varsecond=time.getSeconds();document.myform.myclock.value=hour+":"+minute+":"+second+"";varmyTime=setTimeout("disptime()",1000);}</SCRIPT><BODYonLoad="disptime()"><FORMNAME="myform">H2>當前時間：

<INPUTname="myclock"type="text"value=""size="10"></H2></FORM></BODY>查看完整代碼設(shè)置文本框的內(nèi)容為當前時間設(shè)置定時器每隔1秒(1000毫秒),調(diào)用函數(shù)disptime()執(zhí)行小結(jié)編寫如左圖所示，具有在網(wǎng)頁中指定位置顯示動態(tài)時鐘效果的頁面。練習(xí)答案自動動態(tài)變化的時鐘任務(wù)1:制作隨機選號頁面任務(wù)描述：

假定班上有60名同學(xué)，現(xiàn)制作一個提問選號器，如圖所示。單擊開始按鈕在頁面隨機顯示1-60的學(xué)號，單擊停止按鈕在頁面顯示選中學(xué)號。任務(wù)分析實現(xiàn)隨機選號頁面的制作可以采用以下步驟：1.產(chǎn)生1-60之間的隨機整數(shù)，并在頁面顯示。2.單擊開始按鈕時使用定時函數(shù)隔60毫秒產(chǎn)生一個隨機整數(shù)。3.單擊停止按鈕時清除定時函數(shù)。Math對象Math對象能夠進行比基本數(shù)學(xué)運算更為復(fù)雜的運算。Math對象不需要生成對象的實例，可以直接訪問它的屬性和方法。Math對象常見屬性和方法名稱說明屬性PI∏的值，約等于3.1415LN1010的自然對數(shù)的值，約等于2.302EEuler的常量的值，約等于2.718。Euler的常量用作自然對數(shù)的底數(shù)abs(y)返回y的絕對值sin(y)返回y的正弦，返回值以弧度為單位。cos(y)返回y的余弦，返回值以弧度為單位tan(y)返回y的正切，返回值以弧度為單位min(x,y)返回x和y兩個數(shù)中較小的數(shù)max(x,y)返回x和y兩個數(shù)中較大的數(shù)random返回0-1的隨機數(shù)方法round(y)四舍五入取整sqrt(y)返回y的平方根Math.random()：產(chǎn)生0－1的隨機小數(shù)產(chǎn)生m和n之間的隨機數(shù)Math.random()*(n-m)+mMath.round()：四舍五入取整，如9.34取整為9完成任務(wù)二任務(wù)3:制作簡單的焦點圖效果任務(wù)描述：

焦點圖效果是各大網(wǎng)站常用的效果，效果如圖所示，頁面上5張圖片2秒輪換顯示，單擊向右圖片實現(xiàn)播放下一張圖片，圖片向后繼續(xù)2秒輪換顯示，單擊向左圖片實現(xiàn)播放上一張圖片，圖片向前繼續(xù)2秒輪換顯示。任務(wù)分析1.設(shè)計HTML頁面，應(yīng)用CSS美化頁面。2.定義數(shù)組，將輪換顯示的圖片地址保存到數(shù)組中。3.定義兩個全局變量，一個變量用于控制定時器，另一個變量用于控制數(shù)組下標。4.定義函數(shù)實現(xiàn)圖片的輪換顯示。在函數(shù)中改變圖片的地址，使用定時器函數(shù)，2秒更換圖片地址，實現(xiàn)圖片的輪流顯示。5.單擊上一張或下一張按鈕時將定時器清除，再重新調(diào)用圖片輪換顯示函數(shù)。數(shù)組的創(chuàng)建與初始化第一句聲明一個空數(shù)組第二句聲明一個長度為4的空數(shù)組第三句聲明一個長度為N，并用參數(shù)直接初始化數(shù)組元素。該方法在實際應(yīng)用中最為廣泛。varMyArray=newArray()varMyArray

=newArray

(4)varMyArray=newArray

(arg1,arg2,arg3…,argN)數(shù)組的創(chuàng)建與初始化功能同上一頁的創(chuàng)建與初始化方法相同。varMyArray=[]varMyArray

=[,,,]varMyArray=[arg1,arg2,arg3…,argN]數(shù)組常用屬性和方法常用屬性

length

：返回數(shù)組中元素的個數(shù)常用方法方法說明join將數(shù)組中的元素組合成字符串reverse顛倒數(shù)組元素的順序，使第一個元素成為最后一個，而最后一個元素成為第一個sort對數(shù)組元素進行排序數(shù)組的遍歷通過下標訪問，遍歷數(shù)組。for(vari=0;i<MyArray.length;i++){ document.write(MyArray[i]);}for(variinMyArray){ document.write(MyArray[i]);}像遍歷一個對象一樣遍歷數(shù)組。數(shù)組的排序reverse()方法將數(shù)組中元素完全顛倒，返回顛倒后的數(shù)組。 MyArray.reverse();sort()方法基于某種順序重新排列數(shù)組元素。 MyArray.sort()按照ASCⅡ碼(字母順序)排序 MyArray.sort(function)由參數(shù)指定排序算法數(shù)組轉(zhuǎn)為字符串join()方法將數(shù)組中所有元素轉(zhuǎn)化為字符串，并將各元素由逗號隔開合并成一個字符串作為方法的結(jié)果返回。join(string)由指定的字符串隔開toString()方法無須顯式聲明此方法的調(diào)用<scripttype="text/javascript"> varfruit=newArray(5); fruit[0]="Apple"; fruit[1]="Orange"; fruit[2]="Banner"; fruit[3]="Peach"; fruit[4]="Grape";document.write("<h3>輸出數(shù)組：</h3>"); for(vari=0;i<fruit.length;i++) { document.write("<h5>第"+i+"個元素是："+fruit[i]+"<br/></h5>"); } document.write("<h3>反轉(zhuǎn)后的數(shù)組：</h3>"); fruit.reverse(); for(vari=0;i<fruit.length;i++) { document.write("<h5>第"+i+"個元素是："+fruit[i]+"<br/></h5>"); } document.write("<h3>排序后的數(shù)組：</h3>"); fruit.sort(); for(variinfruit) { document.write("<h5>第"+i+"個元素是："+fruit[i]+"<br/></h5>"); } document.write("<h3>使用連接符連接數(shù)組：</h3>") varstr=fruit.join("-"); document.write(str);</script>數(shù)組方法應(yīng)用數(shù)組的連接concat()方法varmyNewArray=MyArray.concat(arg1,arg2…,argN)該方法將按照參數(shù)的順序?qū)⑺鼈兲砑拥侥繕藬?shù)組MyArray的后面，并將最終的結(jié)果返回新數(shù)組myNewArray多維數(shù)組JavaScript中只有一維數(shù)組實際開發(fā)中需要使用多維數(shù)組，我們可以利用JavaScript數(shù)組存儲在數(shù)據(jù)類型以不同的特性，先將數(shù)據(jù)分別存儲在多個數(shù)組中，然后將所有的數(shù)組存放在一個一維數(shù)組中，即數(shù)組中存放數(shù)組。任務(wù)實現(xiàn)設(shè)計靜態(tài)頁面定義數(shù)組定義向后輪流播放圖片的函數(shù)定義向前輪流播放圖片的函數(shù)定義向前向后“按鈕”效果函數(shù)任務(wù)4：驗證注冊頁面信息String對象創(chuàng)建字符串有兩種不同方法：使用var語句varnewstr=“這是我的字符串"創(chuàng)建String對象varnewstr=newString(“這是我的字符串")

String對象常見屬性和方法名稱說明屬性length返回字符串的長度方法big()增大字符串文本split()根據(jù)某個分割符將字符串分離成字符數(shù)組bold()加粗字符串文本fontcolor()確定字體顏色italics()用斜體顯示字符串indexOf(“子字符串”，起始位置

)從前往后查找子字符串的位置lastIndexOf(“子字符串”，起始位置

)從后往前查找子字符串的位置charAt(index)返回指定位置的字符substr()substring()由參數(shù)決定起始和結(jié)束的子符串toLowerCase()將字符串轉(zhuǎn)換成小寫toUpperCase()將字符串轉(zhuǎn)換成大寫語法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位置，如果沒找到，返回－1例如：varxvary=“abcdefg”;x=y.indexOf(“c”,0);//返回結(jié)果為2，起始位置是0檢查電子郵件email是否包含“@”和”.”<SCRIPTLANGUAGE="JavaScript">functioncheckEmail(){varstrEmail=document.myform.txtEmail.value;if(strEmail.length==0){alert("電子郵件不能為空!");returnfalse;}if(strEmail.indexOf("@",0)==-1){alert("電子郵件格式不正確\n必須包含@符號！");returnfalse;}if(strEmail.indexOf(".",0)==-1){alert("電子郵件格式不正確\n必須包含.符號！");returnfalse;}returntrue;}</SCRIPT>……<FORMname=“myform”method=“post”action=“reg_success.htm”onSubmit=“returncheckEmail()”>……<INPUTname="registerButton"type="submit"id="registerButton"value="注冊">……返回結(jié)果-1表示沒找到“@”字符獲取表單元素的值表單的提交事件驗證電子郵件地址合法性練習(xí)：完成簡單的表單驗證檢查上傳的圖片格式<scriptlanguage="javascript"type="text/javascript">functiongetFilepic(){ varstxt;

stxt=form1.pic.value.substring(form1.pic.value.lastIndexOf(".")+1,form1.pic.value.length); stxt=stxt.toUpperCase(); switch(stxt) { case"GIF":alert("你輸入的是GIF文件");break; case"JPG":alert("你輸入的是JPG文件");break; case"BMP":alert("你輸入的是BMP文件");break; case"PNG":alert("你輸入的是PNG文件");break; default:alert("你必須輸入GIF,JPG,BMP,PNG等格式的圖片!");break; }}</script>…<formaction=""method="post"enctype="multipart/form-data"name="form1"id="form1"><palign="center">選擇圖片:<inputtype="file"name="pic"/></p><palign="center"><inputtype="button"value="上傳"onclick="getFilepic()"/></p></form>返回結(jié)果-1表示沒找到“@”字符獲取表單元素的值限制上傳圖片類型將字符轉(zhuǎn)化為大寫練習(xí)：實現(xiàn)限制上傳文件類型限制上傳文件只能為doc或txt文件練習(xí)：使用String對象方法和Array對象方法完成如下圖所示效果任務(wù)5：制作嚴謹?shù)谋韱悟炞C頁面正則表達式為什么需要正則表達式簡潔的代碼嚴謹?shù)尿炞C文本框中的內(nèi)容正則表達式在JavaScript腳本中，利用正則表達式可以很容易的實現(xiàn)文本字符串的檢測、替換等功能。正則表達式是字符串，它定義了一個用來搜索匹配字符串的模式。在WEB開發(fā)時，常會判斷一個字符串有效性，如一個字符串是否是數(shù)字、是否為合法的E-MAIL地址等定義正則表達式普通方式varreg=newRegExp("white");varreg=newRegExp("white","g");構(gòu)造函數(shù)varreg=/表達式/附加參數(shù)varreg=newRegExp("表達式","附加參數(shù)")varreg=/white/;varreg=/white/g;RegExp對象的屬性RegExp對象的屬性屬性描述globalRegExp對象是否具有標志gignoreCaseRegExp對象是否具有標志imultilineRegExp對象是否具有標志mRegExp對象RegExp對象的方法方法描述exec檢索字符中是正則表達式的區(qū)配，返回找到的值，并確定其位置test檢索字符串中指定的值，返回true或false如何使用正則表達式？從指定字符串中搜索子字符串“abc”<scriptlanguage=“javascript”type=“text/javascript”>functiontest1(){varmystr=doucument.form1.test.value;varmyreg=newRegExp(“abc”);if(myreg.test(mystr));alert(“目標字符串中存在子串‘a(chǎn)bc’”);elsealert(“目標字符串中不存在子串‘a(chǎn)bc’”);</script>……<formonsubmit=“returntest1();”><inputtype=“text”name=“test”value=“輸入檢測的字符串”>……創(chuàng)建正則表達式調(diào)用正則表達式的test方法使用正則表達式的大致步驟：創(chuàng)建正則表達式調(diào)用相關(guān)對象的方法，得到匹配結(jié)果如何構(gòu)造正則表達式要精確構(gòu)造所需的正則表達式不是容易的事，要運用好正則表達式，則須充分了解正則表達式的構(gòu)造語法。正則表達式的語法主要是對正則表達式各個元字符功能的描述。正則表達式分為簡單模式和復(fù)雜模式。表達式的模式簡單模式復(fù)合模式varreg=/china/;varreg=/abc8/;varreg=/^\w+$/;varreg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;簡單模式簡單模式包括普通字符、特殊字符、字符類及量詞等。字符類：包括簡單類、反向類、范圍類、組合類及預(yù)定義類簡單類：用方括號“[]”表示單個字符的“或”的關(guān)系，匹配方括號內(nèi)任意一個字符。如：/[abc]/可以匹配a、b、c中任意一個字符反向類：[^]用來匹配不在括號內(nèi)的任意字符。如：/[^abc]/可匹配除a、b、c外的其他任意字符范圍類：[0-9]表示匹配從0-9任意的數(shù)字簡單模式字符類：包括簡單類、反向類、范圍類、組合類及預(yù)定義類組合類：即簡單類、反向類和范圍類的組合。如：/[a-z0-9\.]/可以匹配a-z、0-9和.中任意一個字符預(yù)定義類：用某些特別的表示來表示某些組合類。正則表達式符號正則表達式常用符號正則表達式重復(fù)字符符號描述/…/代表一個模式的開始和結(jié)束^匹配字符串的開始$匹配字符串的結(jié)束\s任何空白字符\S任何非空白字符\d匹配一個數(shù)字字符，等價于[0-9]\D除了數(shù)字之外的任何字符，等價于[^0-9]\w匹配一個數(shù)字、下劃線或字母字符，等價于[A-Za-z0-9_]\W任何非單字字符，等價于[^a-zA-z0-9_].除了換行符之外的任意字符限定符作用說明*出現(xiàn)0次或連續(xù)多次/a*b/可匹配b,aab,aaaab……+出現(xiàn)至少一次/a+b/可匹配ab,aaab,aaaab……？出現(xiàn)0次或者一次/a[cd]?/可匹配a,ac,ad{n}連續(xù)出現(xiàn)n次/a{3}/相當于aaa{n,}連續(xù)出現(xiàn)至少n次/a{3,}/可匹配aaa,aaaa,……{n,m}連續(xù)出現(xiàn)至少n次，至多m次/ba{1,3}/可匹配ba,baa,baaa子匹配子匹配是正則表達式語法中的分組概念，在正則表達