TP10JavaScript對象

1、JavaScript對象第十章回顧與作業(yè)點評回顧與作業(yè)點評在在HTML頁面中如何引用頁面中如何引用JavaScript？簡述簡述prompt() 和和alert()方法的區(qū)別及應(yīng)用場合。方法的區(qū)別及應(yīng)用場合。如何定義和使用函數(shù)？如何定義和使用函數(shù)？2/45本章任務(wù)本章任務(wù)制作簡易購物車頁面制作簡易購物車頁面查看一年四季的變化查看一年四季的變化制作復(fù)選框的全選制作復(fù)選框的全選/全不選效果全不選效果制作制作12進制的時鐘特效進制的時鐘特效3/45本章目標(biāo)本章目標(biāo)會使用會使用window對象的對象的open()方法制作廣告窗方法制作廣告窗口口會使用會使用getElement系列方法訪問系列方法訪問D

2、OM元素元素會使用定時函數(shù)和會使用定時函數(shù)和Date對象制作時鐘特效對象制作時鐘特效4/45http:/window 窗口對象窗口對象location地址對象地址對象FORM表單對象表單對象瀏覽器對象的分層結(jié)構(gòu)瀏覽器對象的分層結(jié)構(gòu)window.document.myform.text1 document文檔對象文檔對象BOM模型模型瀏覽器對象模型瀏覽器對象模型 (Browser Object Model (BOM) 使使 JavaScript 有能力與瀏覽有能力與瀏覽器對話器對話BOM模型模型BOM可實現(xiàn)功能可實現(xiàn)功能彈出新的瀏覽器窗口彈出新的瀏覽器窗口移動、關(guān)閉瀏覽器窗口以及調(diào)整窗口的大小移

3、動、關(guān)閉瀏覽器窗口以及調(diào)整窗口的大小頁面的前進、后退頁面的前進、后退整個整個BOM的核心的核心6/45Window對象對象常用屬性常用屬性常用方法常用方法常用事件常用事件7/45Window對象的對象的常用屬性常用屬性屬性名稱屬性名稱說說 明明history 有關(guān)客戶訪問過的有關(guān)客戶訪問過的URL的信息的信息location有關(guān)當(dāng)前有關(guān)當(dāng)前 URL 的信息的信息常用的屬性常用的屬性語法語法window.屬性名屬性名= 屬性值屬性值 window.location=http:/ ; 示例示例表示跳轉(zhuǎn)到搜狐主頁表示跳轉(zhuǎn)到搜狐主頁8/45Window對象的對象的常用方法常用方法常用的方法常用的方法方

4、法名稱方法名稱說說 明明prompt( )顯示可提示用戶輸入的對話框顯示可提示用戶輸入的對話框alert( )顯示帶有一個提示信息和顯示帶有一個提示信息和一個一個確定按鈕的警示框確定按鈕的警示框 confirm( )顯示一個顯示一個帶有提示信息、確定和取消按鈕的對話框帶有提示信息、確定和取消按鈕的對話框 close( )關(guān)閉瀏覽器窗口關(guān)閉瀏覽器窗口open( )打開一個新的瀏覽器窗口，加載給定打開一個新的瀏覽器窗口，加載給定 URL 所指定的所指定的文檔文檔setTimeout( )在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式setInterval( )間隔指定的毫

5、秒數(shù)不停地執(zhí)行指定的代碼間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼9/45confirm()方法方法confirm()與與alert ()、 prompt()區(qū)別區(qū)別confirm( 對話框?qū)υ捒蛑酗@示的純中顯示的純文本文本 )語法語法示例示例 var flag=confirm(確認要刪除此條信息嗎？確認要刪除此條信息嗎？); if(flag=true) alert(刪除成功！刪除成功！); else alert(你取消了刪除你取消了刪除);10/45open()方法方法 window.open(彈出窗口的彈出窗口的url,窗口名稱窗口名稱,窗口特征窗口特征”)窗口特征窗口特征語法語法屬性名稱屬性名

6、稱說說 明明height、width窗口文檔顯示區(qū)的高度、寬度。以像素計。窗口文檔顯示區(qū)的高度、寬度。以像素計。left、top窗口的窗口的x坐標(biāo)、坐標(biāo)、y坐標(biāo)坐標(biāo)。以像素計以像素計toolbar=yes | no |1 | 0是否顯示瀏覽器的工具欄。黙認是是否顯示瀏覽器的工具欄。黙認是yes。scrollbars=yes | no |1 | 0是否顯示滾動條。黙認是是否顯示滾動條。黙認是yes。location=yes | no |1 | 0是否顯示地址地段。黙認是是否顯示地址地段。黙認是yes。status=yes | no |1 | 0是否添加狀態(tài)欄。黙認是是否添加狀態(tài)欄。黙認是yes。

7、menubar=yes | no |1 | 0是否顯示菜單欄。黙認是是否顯示菜單欄。黙認是yes。resizable=yes | no |1 | 0窗口是否可調(diào)節(jié)尺寸。黙認是窗口是否可調(diào)節(jié)尺寸。黙認是yes。titlebar=yes | no |1 | 0是否顯示標(biāo)題欄。黙認是是否顯示標(biāo)題欄。黙認是yes。fullscreen=yes | no |1 | 0是否使用全屏模式顯示瀏覽器。黙認是是否使用全屏模式顯示瀏覽器。黙認是no。處于全屏模式的窗口必須同時處于劇院模式處于全屏模式的窗口必須同時處于劇院模式。window.open(adv.html, height=380,width=320,t

8、oolbar=0,scrollbars=0, location=0,status=0,menubar=0,resizable=0 );彈出固定大小窗口彈出固定大小窗口,并且無菜單欄等并且無菜單欄等11/45Window對象的對象的常用事件常用事件常用的事件常用的事件名稱名稱說說 明明onload一個頁面或一幅圖像完成加載一個頁面或一幅圖像完成加載onmouseover鼠標(biāo)移到某元素之上鼠標(biāo)移到某元素之上onlick當(dāng)用戶單擊某個對象時調(diào)用的事件句柄當(dāng)用戶單擊某個對象時調(diào)用的事件句柄onkeydown某個鍵盤按鍵被某個鍵盤按鍵被 按下按下onchange域的內(nèi)容被改變域的內(nèi)容被改變12/45如何

9、使用如何使用window對象對象彈出窗口、彈出固定大小且無菜單欄的窗口彈出窗口、彈出固定大小且無菜單欄的窗口當(dāng)前頁面全屏顯示當(dāng)前頁面全屏顯示彈出確認窗口彈出確認窗口關(guān)閉窗口關(guān)閉窗口演示演示示例示例1： window對象操作窗口對象操作窗口示例示例13/45學(xué)員操作學(xué)員操作模擬簡易購物車頁面模擬簡易購物車頁面需求說明需求說明打開頁面時，彈出廣告頁面，并且此頁面可實現(xiàn)關(guān)打開頁面時，彈出廣告頁面，并且此頁面可實現(xiàn)關(guān)閉窗口功能閉窗口功能購物車頁面可實現(xiàn)全屏顯示購物車頁面可實現(xiàn)全屏顯示提交訂單頁面時，彈出確認窗口提交訂單頁面時，彈出確認窗口練習(xí)練習(xí)完成時間：完成時間：20分鐘分鐘14/45共性問題集中講

10、解共性問題集中講解常見問題及解決辦法常見問題及解決辦法代碼規(guī)范問題代碼規(guī)范問題調(diào)試技巧調(diào)試技巧15/45history對象對象常用方法常用方法名稱名稱說說 明明back()加載加載 history 對象列表中的前一個對象列表中的前一個URLforward()加載加載 history 對象列表中的下一個對象列表中的下一個URL go()加載加載 history 對象列表中的某個具體對象列表中的某個具體URLhistory.back()history.forward() history.go(-1)history.go(1) 等價等價瀏覽器中的瀏覽器中的“前進前進”瀏覽器中的瀏覽器中的“后退后退”

11、等價等價16/45location對象對象常用屬性常用屬性名稱名稱說說 明明host設(shè)置或返回主機名和當(dāng)前設(shè)置或返回主機名和當(dāng)前URL的端口號的端口號hostname設(shè)置或返回當(dāng)前設(shè)置或返回當(dāng)前URL的主機名的主機名href設(shè)置或返回完整的設(shè)置或返回完整的URL 常用方法常用方法名稱名稱說說 明明reload()重新加載當(dāng)前文檔重新加載當(dāng)前文檔replace()用新的文檔替換當(dāng)前文檔用新的文檔替換當(dāng)前文檔17/45location和和history對象對象的應(yīng)用的應(yīng)用主頁面使用主頁面使用href實現(xiàn)跳轉(zhuǎn)和刷新本頁實現(xiàn)跳轉(zhuǎn)和刷新本頁查看鮮花詳情查看鮮花詳情 刷新本頁刷新本頁返回主頁面返回主頁面演

12、示演示示例示例2：location和和history對象對象18/45學(xué)員操作學(xué)員操作查看一年四季變化查看一年四季變化需求說明需求說明制作查看一年四季變化的主頁面制作查看一年四季變化的主頁面主頁面實現(xiàn)鏈接到其他頁面及刷新本頁功能主頁面實現(xiàn)鏈接到其他頁面及刷新本頁功能其他頁面實現(xiàn)前進、后退和鏈接到其他頁面功能其他頁面實現(xiàn)前進、后退和鏈接到其他頁面功能練習(xí)練習(xí)完成時間：完成時間：20分鐘分鐘19/45共性問題集中講解共性問題集中講解常見問題及解決辦法常見問題及解決辦法代碼規(guī)范問題代碼規(guī)范問題調(diào)試技巧調(diào)試技巧20/45Document對象對象常用屬性常用屬性名稱名稱說說 明明referrer返回載入

13、當(dāng)前文檔返回載入當(dāng)前文檔的文檔的的文檔的URLURL返回當(dāng)前文檔的返回當(dāng)前文檔的URL語法語法document.referrerdocument.URL21/45Document對象應(yīng)用對象應(yīng)用2-1praise.html頁面頁面login.html頁面頁面22/45Document對象應(yīng)用對象應(yīng)用2-2判斷頁面是否是鏈接進入判斷頁面是否是鏈接進入自動跳轉(zhuǎn)到登錄頁面自動跳轉(zhuǎn)到登錄頁面演示演示示例示例3：判斷頁面來源并跳轉(zhuǎn)：判斷頁面來源并跳轉(zhuǎn)var preUrl=document.referrer; /載入本頁面文檔的地址載入本頁面文檔的地址if(preUrl=) document.write(

14、您不是從領(lǐng)獎頁面進入，您不是從領(lǐng)獎頁面進入，5秒后將自動秒后將自動 跳轉(zhuǎn)到登錄頁面跳轉(zhuǎn)到登錄頁面); setTimeout(javascript:location.href=login.html,5000);23/45Document對象的常用方法對象的常用方法2-1Document對象的常用方法對象的常用方法名稱名稱說說 明明getElementById()返回對擁有指定返回對擁有指定idid的第一的第一個對象的引用個對象的引用getElementsByName()返回帶有指定名稱的對象返回帶有指定名稱的對象的集合的集合getElementsByTagName()返回帶有指定標(biāo)簽名的對返回帶

15、有指定標(biāo)簽名的對象的集合象的集合write()向文檔寫文本、向文檔寫文本、HTML表表達式或達式或JavaScript代碼代碼對象的對象的id唯一唯一相同相同name屬性屬性相同的元素相同的元素24/45Document對象對象訪問頁面元素訪問頁面元素動態(tài)改變層、標(biāo)簽中的內(nèi)容動態(tài)改變層、標(biāo)簽中的內(nèi)容訪問相同訪問相同name的元素的元素訪問相同標(biāo)簽的元素訪問相同標(biāo)簽的元素演示演示示例示例4：Document方法方法25/45Document對象的常用方法對象的常用方法2-2動態(tài)改變層、標(biāo)簽中的內(nèi)容動態(tài)改變層、標(biāo)簽中的內(nèi)容訪問相同訪問相同name的元素的元素訪問相同標(biāo)簽的元素訪問相同標(biāo)簽的元素do

16、cument.getElementById(node).innerHTML=搜狐搜狐;var aInput=document.getElementsByName(season); var sStr=; for(var i=0;iaInput.length;i+) sStr+=aInputi.value+;document.getElementById(s).innerHTML=sStr;var aInput=document.getElementsByTagName(input);var sStr=;for(var i=0;iaInput.length;i+) sStr+=aInputi.va

17、lue+;document.getElementById(s).innerHTML=sStr;經(jīng)驗經(jīng)驗 document 對象常應(yīng)用于復(fù)選框全選效果對象常應(yīng)用于復(fù)選框全選效果26/45如何實現(xiàn)復(fù)選框的全選效果如何實現(xiàn)復(fù)選框的全選效果問題問題如何實現(xiàn)全選如何實現(xiàn)全選/全不選效果？全不選效果？27/45復(fù)選框的屬性復(fù)選框的屬性checked屬性值屬性值選中：選中：true未選中：未選中：false相同相同namename的復(fù)選框全部被同時的復(fù)選框全部被同時選中，選中，如何設(shè)置？如何設(shè)置？提問提問分析分析使用使用getElementsByName()getElementsByName()方法訪問同名

18、復(fù)選框方法訪問同名復(fù)選框?qū)ⅰ叭x全選”復(fù)選框的復(fù)選框的checkedchecked屬性屬性值賦值給每個復(fù)值賦值給每個復(fù) 選框的選框的checkedchecked屬性屬性演示演示示例示例5：實現(xiàn)全選：實現(xiàn)全選/全不選效果全不選效果28/45學(xué)員操作學(xué)員操作制作復(fù)選框的全選制作復(fù)選框的全選/全不選效果全不選效果需求說明需求說明“全選全選”選中時，所有復(fù)選框被選中選中時，所有復(fù)選框被選中“全選全選”取消選中時，所有復(fù)選框也取消選中取消選中時，所有復(fù)選框也取消選中練習(xí)練習(xí)完成時間：完成時間：20分鐘分鐘29/45共性問題集中講解共性問題集中講解常見問題及解決辦法常見問題及解決辦法代碼規(guī)范問題代碼規(guī)范

19、問題調(diào)試技巧調(diào)試技巧30/45JavaScript內(nèi)置對象內(nèi)置對象Array：用于在單獨的變量名中存儲一系列的：用于在單獨的變量名中存儲一系列的值。值。String：用于支持對字符串的處理。：用于支持對字符串的處理。Math：用于執(zhí)行常用的數(shù)學(xué)任務(wù)，它包含了：用于執(zhí)行常用的數(shù)學(xué)任務(wù)，它包含了若干個數(shù)字常量和函數(shù)。若干個數(shù)字常量和函數(shù)。Date：用于操作日期和時間。：用于操作日期和時間。31/45Math對象對象常用方法常用方法方法方法說說 明明 示例示例ceil()對數(shù)進行上舍入對數(shù)進行上舍入Math.ceil(25.5);返回返回26Math.ceil(-25.5);返回返回-25floor

20、()對數(shù)進行下舍入對數(shù)進行下舍入Math.floor(25.5);返回返回25Math.floor(-25.5);返回返回-26round()把數(shù)四舍五入為最接近的數(shù)把數(shù)四舍五入為最接近的數(shù)Math.round(25.5);返回返回26Math.round(-25.5);返回返回-26random()返回返回01之間的隨機數(shù)之間的隨機數(shù)Math.random();例如：例如：0.6273608814137365var iNum=Math.floor(Math.random()*98+2);提問提問如何實現(xiàn)返回的整數(shù)范圍為如何實現(xiàn)返回的整數(shù)范圍為299？32/45Date對象對象如何在頁面中顯示

21、當(dāng)前時間的小時、分鐘和如何在頁面中顯示當(dāng)前時間的小時、分鐘和秒？秒？問題問題分析分析使用使用Date對象獲得時、分、秒對象獲得時、分、秒33/45Date對象對象 var 日期對象日期對象=new Date(參數(shù)參數(shù)) 參數(shù)格式：參數(shù)格式：MM DD,YYYY,hh:mm:ssvar today=new Date(); /返回當(dāng)前日期和時間返回當(dāng)前日期和時間var tdate=new Date(september 1,2013,14:58:12);語法語法示例示例34/45Date對象的方法對象的方法常用方法常用方法方法方法說說 明明 getDate()返回返回 Date 對象的一個月中的每一

22、天，其值介于對象的一個月中的每一天，其值介于131之間之間getDay()返回返回 Date 對象的星期中的每一天，其值介于對象的星期中的每一天，其值介于06之間之間getHours()返回返回 Date 對象的小時數(shù)，其值介于對象的小時數(shù)，其值介于023之間之間getMinutes()返回返回 Date 對象的分鐘數(shù)，其值介于對象的分鐘數(shù)，其值介于059之間之間getSeconds()返回返回 Date 對象的秒數(shù)，其值介于對象的秒數(shù)，其值介于059之間之間getMonth()返回返回 Date 對象的月份，其值介于對象的月份，其值介于011之間之間getFullYear()返回返回 Dat

23、e 對象的年份，其值為對象的年份，其值為4位數(shù)位數(shù)getTime()返回自某一時刻（返回自某一時刻（1970年年1月月1日）以來的毫秒日）以來的毫秒數(shù)數(shù)35/45function disptime() var today = new Date(); /獲得當(dāng)前時間獲得當(dāng)前時間var hh = today.getHours(); var mm = today.getMinutes();var ss = today.getSeconds();document.getElementById(myclock).innerHTML= hh+:+mm+:+ss;制作時鐘特效制作時鐘特效示例示例使用使用Da

24、te對象的方法顯示當(dāng)前時間的小時、對象的方法顯示當(dāng)前時間的小時、分鐘和秒。分鐘和秒。獲得小時、分鐘、秒數(shù)獲得小時、分鐘、秒數(shù)36/45Date對象對象制作的時鐘特效示例中，時間為什么不改變？制作的時鐘特效示例中，時間為什么不改變？問題問題分析分析由于時間在不停地走，所以應(yīng)該每隔由于時間在不停地走，所以應(yīng)該每隔1秒調(diào)用秒調(diào)用顯示時間的方法顯示時間的方法，如何解決？如何解決？使用使用setTimeout( )方法或方法或setInterval( )37/45定時函數(shù)定時函數(shù)setTimeout()setTimeout(調(diào)用的函數(shù)調(diào)用的函數(shù),等待的毫秒數(shù)等待的毫秒數(shù))如果如果要多次要多次調(diào)用，使用調(diào)

25、用，使用setInterval()或者或者讓讓disptime()自身再次調(diào)自身再次調(diào)用用setTimeout()var myTimesetTimeout(disptime() , 1000 );var myTimesetInterval(disptime() , 1000 );1秒秒(1000毫秒毫秒)之后執(zhí)之后執(zhí)行行函數(shù)函數(shù)disptime()一次一次每隔每隔1秒秒(1000毫秒毫秒)執(zhí)執(zhí)行函數(shù)行函數(shù)disptime()一次一次setInterval()setInterval(調(diào)用的函數(shù)調(diào)用的函數(shù),間隔的毫秒數(shù)間隔的毫秒數(shù))語法語法語法語法38/45清除函數(shù)清除函數(shù)clearTimeout()clearTimeout(setTimeOut()返回的返回的ID值值)var myTimesetTimeout(disptime() , 1000 );clearTimeout(myTime)；