《Javascript高級(jí)程序設(shè)計(jì)》課件-項(xiàng)目五 跳水輪播圖-BOM對(duì)象

項(xiàng)目五跳水輪播圖——BOM對(duì)象李強(qiáng)是個(gè)體育迷，十分喜歡跳水運(yùn)動(dòng)，2022年10月23日，德國(guó)柏林跳水世界杯女子單人十米臺(tái)決賽，兩名中國(guó)選手，上演了神仙打架，陳芋汐，表現(xiàn)優(yōu)秀，第三輪完成626C動(dòng)作時(shí)，七位裁判中有四位打出了滿分10分，全紅嬋也在這次比賽中貢獻(xiàn)了自己精彩的表現(xiàn)，攻克207C的心魔，在第四跳207C上得到不俗的94.05分，最終陳芋汐創(chuàng)造個(gè)人職業(yè)生涯得分新高，以449.85分奪冠，全紅嬋收獲銀牌。兩個(gè)運(yùn)動(dòng)員既是對(duì)手，又是搭檔，2022.10.21日晚進(jìn)行的女子雙人十米臺(tái)比賽中，兩人以絕對(duì)優(yōu)勢(shì)，為中國(guó)隊(duì)贏得首金，比美國(guó)隊(duì)高出80多分，陳芋汐，全紅嬋兩名運(yùn)動(dòng)員，李強(qiáng)都很欽佩，覺(jué)得她們技藝精湛，奮勇拼搏，為國(guó)爭(zhēng)光，兩個(gè)人，實(shí)力相當(dāng)，都很優(yōu)秀，既是搭檔，又是對(duì)手，李強(qiáng)感慨的不僅是她們的技術(shù)實(shí)力，賽后的緊緊擁抱，頒獎(jiǎng)儀式上對(duì)對(duì)手的歡呼慶祝，你追我趕，良性競(jìng)爭(zhēng)，共同進(jìn)步的競(jìng)技氛圍，為對(duì)手賀彩，友愛(ài)，尊重，惺惺相惜的團(tuán)結(jié)精神更讓李強(qiáng)感動(dòng)，李強(qiáng)想用一個(gè)網(wǎng)頁(yè)記錄這令人感動(dòng)的點(diǎn)點(diǎn)滴滴，把這瞬間永存，可是情境導(dǎo)入他只會(huì)插入一張圖片，如圖5-1所示，無(wú)法同時(shí)呈現(xiàn)這感動(dòng)的多個(gè)瞬間，于是他向王老師請(qǐng)教，怎么一個(gè)頁(yè)面動(dòng)態(tài)展示多個(gè)畫(huà)面，循環(huán)播放，王老師說(shuō)可以用動(dòng)態(tài)輪播圖來(lái)實(shí)現(xiàn)。情境導(dǎo)入

情境導(dǎo)入

李強(qiáng)向王老師請(qǐng)教，這是什么效果？王老師告訴他，這是輪播圖。隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，網(wǎng)頁(yè)內(nèi)容的呈現(xiàn)越來(lái)越注重用戶(hù)體驗(yàn)和動(dòng)態(tài)效果的藝術(shù)展現(xiàn)，輪播圖就是很好的例子。無(wú)論是購(gòu)物網(wǎng)站，還是新聞網(wǎng)站，輪播圖幾乎是網(wǎng)站的“標(biāo)配”。王老師告訴他，這需要用到BOM的相關(guān)知識(shí)，JavaScript是由ECMAScript、BOM和DOM這3部分組成的。■掌握BOM的概念以及BOM對(duì)象體系的構(gòu)成■掌握Window對(duì)象的屬性和方法■掌握Screen對(duì)象的屬性■掌握Navigator對(duì)象的屬性■掌握Location對(duì)象的屬性和方法■掌握History對(duì)象的屬性和方法■掌握Document對(duì)象的屬性和方法項(xiàng)目目標(biāo)任務(wù)一

認(rèn)識(shí)BOM知識(shí)儲(chǔ)備

使用Screen對(duì)象

使用Navigator對(duì)象

使用Location對(duì)象

使用History對(duì)象

使用Document對(duì)象任務(wù)一

認(rèn)識(shí)BOM瀏覽器對(duì)象模型（BrowserObjectModel，BOM）主要用于訪問(wèn)和操縱瀏覽器窗口。BOM主要是由一系列的瀏覽器對(duì)象組成的。這一系列的瀏覽器對(duì)象被稱(chēng)為BOM對(duì)象體系如圖5-2所示。BOM主要包括Window、Document、History、Location、Navigator、Screen等對(duì)象，主要用于操縱瀏覽器窗口的行為和特征。本任務(wù)將詳細(xì)介紹BOM對(duì)象。認(rèn)識(shí)BOMBOM對(duì)象的具體功能如表：認(rèn)識(shí)BOM在BOM對(duì)象體系中，Window位于頂層，可以使用標(biāo)識(shí)符window直接訪問(wèn)下層對(duì)象，如下代碼所示。window.document.write(“hello!”);因?yàn)閃indow是頂層對(duì)象，在平時(shí)寫(xiě)代碼時(shí)，window是可以省略的，如上述代碼可以直接寫(xiě)成如下語(yǔ)句。document.write(“hello!”);認(rèn)識(shí)BOMWindow對(duì)象用來(lái)表示瀏覽器中一個(gè)打開(kāi)的窗口。Window對(duì)象的屬性如表所示。認(rèn)識(shí)BOMWindow對(duì)象的方法如表所示：認(rèn)識(shí)BOMsetInterval()方法指按照指定的周期（以ms計(jì)）來(lái)循環(huán)調(diào)用函數(shù)或計(jì)算表達(dá)式。定時(shí)器的語(yǔ)法格式如下。setInterval(code/function,milliseconds);其中code/function是指要執(zhí)行一段JavaScript代碼或者一個(gè)函數(shù)；milliseconds是指周期性執(zhí)行或調(diào)用code/function的時(shí)間間隔，以ms計(jì)。設(shè)置定時(shí)器執(zhí)行一段JavaScript代碼實(shí)現(xiàn)定時(shí)的代碼如下。setInterval(“alert(‘hello’)”,2000);這表示每隔2s彈出“hello”，這里通過(guò)代碼字符串的方式實(shí)現(xiàn)，也可以通過(guò)自定義函數(shù)的方式實(shí)現(xiàn)，具體如下。

functionFunHello(){alert("hello");}setInterval(FunHello,2000);

設(shè)置定時(shí)器通過(guò)執(zhí)行自定義函數(shù)的方式來(lái)設(shè)置定時(shí)器時(shí)，函數(shù)可以帶參數(shù)，然后將參數(shù)輸出。定時(shí)器在調(diào)用帶參數(shù)的函數(shù)時(shí)，需要使用JavaScript代碼字符串來(lái)調(diào)用。

functionalertFunc(str){alert(str);}setInterval("alertFunc('hello')",2000);如果想要在定時(shí)器啟動(dòng)后取消它，我們可以將setInterval()方法的返回值傳遞給clearInterval()方法，具體如下。vartimerId=setInterval(FunHello,2000);clearInterval(timerId);

設(shè)置定時(shí)器延時(shí)器setTimeout()方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。延時(shí)器的語(yǔ)法格式如下。setTimeout(code/function,milliseconds);其中code/function是指要執(zhí)行一段JavaScript代碼或者一個(gè)函數(shù)，milliseconds是指延遲的時(shí)間，以ms計(jì)。

設(shè)置延時(shí)器執(zhí)行一段JavaScript代碼實(shí)現(xiàn)延時(shí)的代碼如下。setTimeout(“alert(‘hello’)”,2000);這段代碼是指2s后彈出“hello”，這里通過(guò)代碼字符串的方式實(shí)現(xiàn)，也可以通過(guò)自定義函數(shù)的方式實(shí)現(xiàn)，具體如下。

functionFunHello(){alert("hello");}setTimeout(FunHello,2000);

設(shè)置延時(shí)器通過(guò)執(zhí)行自定義函數(shù)的方式來(lái)設(shè)置延時(shí)器時(shí)，函數(shù)可以帶參數(shù)，然后將參數(shù)輸出。延時(shí)器在調(diào)用帶參數(shù)的函數(shù)時(shí)，需要使用JavaScript代碼字符串來(lái)調(diào)用。

functionalertFunc(str){alert(str);}setTimeout("alertFunc('hello')",2000);如果想取消延時(shí)器，我們可以將setTimeout()方法的返回值傳遞給clearTimeout()方法，具體如下。

vartimerId=setTimeout(FunHello,2000);clearTimeout(timerId);

設(shè)置延時(shí)器實(shí)時(shí)變化的時(shí)鐘——定時(shí)器任務(wù)二顯示實(shí)時(shí)變化的時(shí)鐘。任務(wù)描述任務(wù)分析根據(jù)任務(wù)描述要求，實(shí)際上要設(shè)置一個(gè)定時(shí)器，因?yàn)橐h(huán)顯示時(shí)間，所以要使用Window對(duì)象的setInterval()方法來(lái)實(shí)現(xiàn)定時(shí)器。自定義一個(gè)函數(shù)showTime()來(lái)顯示當(dāng)前時(shí)間。獲得當(dāng)前時(shí)間，可以通過(guò)內(nèi)置對(duì)象Date來(lái)實(shí)現(xiàn)，再通過(guò)toLocalTimeString()方法來(lái)實(shí)現(xiàn)使用習(xí)慣格式的時(shí)間的顯示。再定義一個(gè)停止顯示時(shí)間的函數(shù)，函數(shù)體主要執(zhí)行Window對(duì)象的clearInterval()方法來(lái)清除定時(shí)器。實(shí)時(shí)變化的時(shí)鐘——定時(shí)器【任務(wù)二】實(shí)時(shí)變化的時(shí)鐘——定時(shí)器【任務(wù)二】open()方法用于打開(kāi)一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口，具體語(yǔ)法格式：window.open(URL,name,specs)其中URL是指要打開(kāi)的指定頁(yè)面的URL，如果沒(méi)有指定URL，則打開(kāi)一個(gè)新的空白窗口；name是指target屬性或窗口的名稱(chēng)；specs是指窗口的特征列表，通過(guò)逗號(hào)分隔，具體如表所示。打開(kāi)和關(guān)閉窗口close()方法用于關(guān)閉瀏覽器窗口，除了關(guān)閉主窗口外，還可以關(guān)閉新創(chuàng)建的窗口，具體用法如下：window.close();myWindow.close();myWindow.close()表示關(guān)閉myWindow窗口，而myWindow是通過(guò)open()方法創(chuàng)建的窗口，也就是前面open()的返回值。打開(kāi)和關(guān)閉窗口打開(kāi)/關(guān)閉新窗口——open()方法【任務(wù)三】通過(guò)Window對(duì)象的open()方法打開(kāi)人郵教育社區(qū)窗口，通過(guò)close()方法關(guān)閉人郵教育社區(qū)窗口和主窗口。任務(wù)描述任務(wù)分析通過(guò)open()方法打開(kāi)新窗口，可以使用自定義函數(shù)的方法來(lái)實(shí)現(xiàn)，定義一個(gè)打開(kāi)窗口的函數(shù)openWin()，通過(guò)超鏈接調(diào)用函數(shù)的方法來(lái)調(diào)用函數(shù)，即javascript:openWin()。通過(guò)close()方法關(guān)閉新窗口，使用自定義函數(shù)的方法來(lái)實(shí)現(xiàn)，定義一個(gè)關(guān)閉窗口的函數(shù)closeWin()，通過(guò)超鏈接調(diào)用函數(shù)的方法來(lái)調(diào)用函數(shù)，即javascript:closeWin()。通過(guò)close()方法直接關(guān)閉主窗口。在演示代碼中，openWin()函數(shù)中的open()的參數(shù)分別為要打開(kāi)窗口的URL，新窗口的名字，新窗口的寬度、高度，左邊距和上邊距等。javascript:openWin()是通過(guò)超鏈接調(diào)用函數(shù)的方法。closeWin()方法通過(guò)使用openWin()方法的返回值來(lái)調(diào)用。代碼分析實(shí)現(xiàn)效果resizeTo(x,y)方法用來(lái)改變窗口的大小，x和y代表改變后的寬度和高度，單位是px；而resizeBy(x,y)方法也用來(lái)改變窗口的大小，但是x和y代表在原來(lái)的基礎(chǔ)上擴(kuò)大或者縮小的數(shù)值，為正數(shù)表示擴(kuò)大，為負(fù)數(shù)表示縮小，具體用法如下所示：window.resizeTo(400,400);//窗口大小調(diào)整為400*400window.resizeBy(-500,-500);//窗口大小在原來(lái)基礎(chǔ)上各縮小500改變窗口大小所有主要瀏覽器都支持resizeTo()方法，但是從火狐瀏覽器7開(kāi)始，不能改變?yōu)g覽器窗口的大小了，要依據(jù)下面的規(guī)則。 不能設(shè)置那些不是通過(guò)window.open()創(chuàng)建的窗口大小。 當(dāng)一個(gè)窗口里面含有一個(gè)以上的Tab時(shí)，無(wú)法設(shè)置窗口的大小。除此之外，如果我們想獲取瀏覽器窗口本身的大小，可以通過(guò)outerWidth和outerHeight屬性來(lái)獲取，還可以通過(guò)innerWidth和innerHeight屬性來(lái)獲取瀏覽器窗口減去瀏覽器自身邊框及菜單欄、地址欄、狀態(tài)欄等的寬度/高度。改變窗口大小改變窗口大小——resizeTo()和resizeBy()方法【任務(wù)四】要求改變窗口的大小，并且獲取當(dāng)前窗口的信息。任務(wù)描述任務(wù)分析根據(jù)任務(wù)描述要求，通過(guò)open()方法打開(kāi)新窗口，使用自定義函數(shù)的方法來(lái)實(shí)現(xiàn)，定義一個(gè)打開(kāi)窗口的函數(shù)openWin()，通過(guò)使用超鏈接調(diào)用函數(shù)的方法來(lái)調(diào)用函數(shù)，即javascript:openWin()。通過(guò)resizeTo()和resizeBy()兩個(gè)方法來(lái)改變窗口大小，同時(shí)通過(guò)兩組屬性來(lái)查看瀏覽器窗口的大小，最后通過(guò)使用超鏈接調(diào)用函數(shù)的方法來(lái)調(diào)用自定義函數(shù)。改變窗口大小——resizeTo()和resizeBy()方法【任務(wù)四】改變窗口大小——resizeTo()和resizeBy()方法【任務(wù)四】MoveTo(x,y)方法用來(lái)移動(dòng)窗口，x和y代表距離屏幕左上角的水平和垂直距離，單位是px；而MoveBy(x,y)方法也用來(lái)移動(dòng)窗口，但是x代表在原來(lái)的基礎(chǔ)上向左移動(dòng)（x<0）或者向右移動(dòng)（x>0）的距離，具體用法如下所示：window.moveTo(100,100);//窗口移動(dòng)到(100,100)window.moveBy(10,-50);//窗口在水平方向上向右移動(dòng)10像素，向上移動(dòng)50像素除此之外，如果我們想獲取窗口當(dāng)前位置，可以通過(guò)screenLeft和screenTop屬性來(lái)獲取，這表示窗口相對(duì)于屏幕左邊和上邊的位置。screenX和screenY屬性也提供相同的位置。改變窗口位置改變窗口位置——moveTo()和moveBy()方法【任務(wù)五】改變窗口的位置，并且獲取當(dāng)前窗口的信息。任務(wù)描述任務(wù)分析根據(jù)任務(wù)描述要求，通過(guò)open()方法打開(kāi)新窗口，使用自定義函數(shù)的方法來(lái)實(shí)現(xiàn)，定義一個(gè)打開(kāi)窗口的函數(shù)openWin()，通過(guò)使用超鏈接調(diào)用函數(shù)的方法來(lái)調(diào)用函數(shù)，即javascript:openWin()。通過(guò)moveTo()和moveBy()兩個(gè)方法來(lái)改變窗口位置，同時(shí)通過(guò)screenLeft和screenTop屬性來(lái)查看瀏覽器窗口的位置，最后通過(guò)使用超鏈接調(diào)用函數(shù)的方法來(lái)調(diào)用自定義函數(shù)。改變窗口位置——moveTo()和moveBy()方法【任務(wù)五】改變窗口位置——moveTo()和moveBy()方法【任務(wù)五】

使用Screen對(duì)象窗口的screen屬性就會(huì)引用Screen對(duì)象，它包含有關(guān)客戶(hù)端顯示屏的信息，并且每個(gè)瀏覽器的Screen對(duì)象都包含不同的屬性。常用的Screen對(duì)象屬性如表所示。使用Screen對(duì)象顯示當(dāng)前屏幕分辨率和可用區(qū)域——Screen對(duì)象【任務(wù)六】通過(guò)Screen對(duì)象顯示屏幕信息。任務(wù)描述任務(wù)分析根據(jù)要求，可以直接使用Screen對(duì)象的屬性獲得關(guān)于屏幕的信息。為了更好地顯示效果，使用document.write()輸出結(jié)果。代碼分析

使用Navigator對(duì)象窗口的navigator屬性就會(huì)引用Navigator對(duì)象，它是指瀏覽器對(duì)象，包含瀏覽器的信息。常用的屬性如表所示。使用Navigator對(duì)象顯示當(dāng)前瀏覽器和操作系統(tǒng)信息——Navigator對(duì)象【任務(wù)七】通過(guò)Navigator對(duì)象顯示當(dāng)前瀏覽器的信息。任務(wù)描述任務(wù)分析根據(jù)要求，可以直接使用Navigator對(duì)象的屬性獲得關(guān)于瀏覽器的信息。為了更好地顯示效果，使用document.write()輸出結(jié)果。顯示當(dāng)前瀏覽器和操作系統(tǒng)信息——Navigator對(duì)象【任務(wù)七】

使用Location對(duì)象使用Location對(duì)象窗口的location屬性就會(huì)引用Location對(duì)象，它包含有關(guān)當(dāng)前URL的信息。在網(wǎng)絡(luò)中，統(tǒng)一資源定位符（UniformResourceLocator，URL）是信息資源的一種字符串表示方法，通稱(chēng)網(wǎng)址，格式如下所示：protocol://hostname[:port]/path/[;querystring][?query]#fragment各部分說(shuō)明如下。①Protocol表示通信協(xié)議方法，比如http、https、ftp等。②hostname表示主機(jī)名，指服務(wù)器的域名系統(tǒng)（DomainNameSystem，DNS）主機(jī)名或IP地址。③port表示端口，是一個(gè)整數(shù)，可以省略。當(dāng)省略時(shí)，表示使用對(duì)應(yīng)協(xié)議的默認(rèn)端口，比如http的默認(rèn)端口是80，https的默認(rèn)端口是443。④path代表訪問(wèn)資源的具體路徑，通常表示服務(wù)器的目錄或者文件地址。⑤querystring表示查詢(xún)字符串，通常用于向動(dòng)態(tài)網(wǎng)頁(yè)傳遞參數(shù)，將參數(shù)使用問(wèn)號(hào)連接在訪問(wèn)資源路徑之后，傳遞的參數(shù)使用“名=值”的格式進(jìn)行傳遞，如果有多個(gè)參數(shù)使用“&”連接。⑥fragment代表指定資源中的信息片段，比如我們?cè)阱^點(diǎn)連接時(shí)的連接參數(shù)。使用Location對(duì)象Location對(duì)象常用的屬性如表所示。使用Location對(duì)象Location對(duì)象常用的方法如下表所示：如果我們想設(shè)置瀏覽器的地址欄，可以使用Location對(duì)象的屬性和方法進(jìn)行，具體如下：

location.href="/";//設(shè)置href屬性

location.assign("/");//使用assign()方法

location.replace("/");//使用replace()方法顯示當(dāng)前窗口占據(jù)顯示器的區(qū)域大小——Navigator對(duì)象【任務(wù)八】在頁(yè)面上顯示出當(dāng)前窗口占據(jù)顯示器的區(qū)域大小。任務(wù)描述任務(wù)分析根據(jù)要求，需要用到Window對(duì)象、Navigaor對(duì)象和Screen對(duì)象的屬性和方法。使用navigator.userAgent.indexOf()方法獲得瀏覽器的類(lèi)型。使用window.outerWidth和window.outerHeight獲得窗口的大小，使用screen.width和screen.height獲得屏幕大小使用Math對(duì)象的數(shù)學(xué)運(yùn)算方法得出占據(jù)顯示區(qū)域的百分?jǐn)?shù)，在頁(yè)面上輸出結(jié)果。代碼分析登錄成功，自動(dòng)跳轉(zhuǎn)——Location對(duì)象【任務(wù)九】通過(guò)Location對(duì)象實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn)。任務(wù)描述任務(wù)分析根據(jù)任務(wù)描述要求，首頁(yè)需要獲取顯示秒數(shù)的元素，然后實(shí)現(xiàn)動(dòng)態(tài)倒計(jì)時(shí)顯示。當(dāng)?shù)褂?jì)時(shí)結(jié)束時(shí)，使用Location對(duì)象的屬性和方法實(shí)現(xiàn)頁(yè)面的自動(dòng)跳轉(zhuǎn)。任務(wù)九——Location對(duì)象【任務(wù)九】任務(wù)九——Location對(duì)象【任務(wù)九】

使用History對(duì)象使用History對(duì)象窗口的history屬性就會(huì)引用History對(duì)象，它包含用戶(hù)（在瀏覽器窗口中）訪問(wèn)過(guò)的URL。出于安全方面的考慮，開(kāi)發(fā)人員無(wú)法獲取History對(duì)象中的具體信息，但可以控制瀏覽器實(shí)現(xiàn)“前進(jìn)”和“后退”。History對(duì)象常用的屬性和方法如表所示。登錄成功，自動(dòng)跳轉(zhuǎn)——History對(duì)象【任務(wù)十】在頁(yè)面上實(shí)現(xiàn)“前進(jìn)”和“后退”。任務(wù)描述任務(wù)分析根據(jù)要求，設(shè)計(jì)兩個(gè)頁(yè)面，在第一個(gè)頁(yè)面中通過(guò)超鏈接到第二個(gè)頁(yè)面，單擊第二個(gè)頁(yè)面的“后退”可以返回第一個(gè)頁(yè)面，單擊第一個(gè)頁(yè)面的“前進(jìn)”可以再到第二個(gè)頁(yè)面。使用history.back()方法實(shí)現(xiàn)“后退”。使用history.forword()方法實(shí)現(xiàn)“前進(jìn)”。使用location.assign()方法進(jìn)入新的頁(yè)面。第一個(gè)頁(yè)面實(shí)現(xiàn)代碼【任務(wù)十】第二個(gè)頁(yè)面實(shí)現(xiàn)代碼【任務(wù)十】實(shí)現(xiàn)效果如圖5-19和圖5-20所示，在第二個(gè)頁(yè)面單擊“后退”返回第一個(gè)頁(yè)面，在第一個(gè)頁(yè)面上單擊“前進(jìn)”又可以再跳轉(zhuǎn)到第二個(gè)頁(yè)面?！救蝿?wù)十】

使用Document對(duì)象使用Document對(duì)象

Document對(duì)象是指文檔對(duì)象，表示在瀏覽器窗口中顯示的頁(yè)面文檔。Document對(duì)象既屬于BOM對(duì)象，也屬于DOM對(duì)象