TP10JavaScript對象

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

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

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

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

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

6、稱說說 明明height、width窗口文檔顯示區(qū)的高度、寬度。以像素計。窗口文檔顯示區(qū)的高度、寬度。以像素計。left、top窗口的窗口的x坐標、坐標、y坐標坐標。以像素計以像素計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窗口是否可調節(jié)尺寸。黙認是窗口是否可調節(jié)尺寸。黙認是yes。titlebar=yes | no |1 | 0是否顯示標題欄。黙認是是否顯示標題欄。黙認是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鼠標移到某元素之上鼠標移到某元素之上onlick當用戶單擊某個對象時調用的事件句柄當用戶單擊某個對象時調用的事件句柄onkeydown某個鍵盤按鍵被某個鍵盤按鍵被 按下按下onchange域的內容被改變域的內容被改變12/45如何

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

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

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

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

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

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

15、有指定標簽名的對象的集合象的集合write()向文檔寫文本、向文檔寫文本、HTML表表達式或達式或JavaScript代碼代碼對象的對象的id唯一唯一相同相同name屬性屬性相同的元素相同的元素24/45Document對象對象訪問頁面元素訪問頁面元素動態(tài)改變層、標簽中的內容動態(tài)改變層、標簽中的內容訪問相同訪問相同name的元素的元素訪問相同標簽的元素訪問相同標簽的元素演示演示示例示例4：Document方法方法25/45Document對象的常用方法對象的常用方法2-2動態(tài)改變層、標簽中的內容動態(tài)改變層、標簽中的內容訪問相同訪問相同name的元素的元素訪問相同標簽的元素訪問相同標簽的元素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;經驗經驗 document 對象常應用于復選框全選效果對象常應用于復選框全選效果26/45如何實現復選框的全選效果如何實現復選框的全選效果問題問題如何實現全選如何實現全選/全不選效果？全不選效果？27/45復選框的屬性復選框的屬性checked屬性值屬性值選中：選中：true未選中：未選中：false相同相同namename的復選框全部被同時的復選框全部被同時選中，選中，如何設置？如何設置？提問提問分析分析使用使用getElementsByName()getElementsByName()方法訪問同名

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

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

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

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

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

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

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

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