學(xué)習(xí)單元5

JavaScript中的BOM操作任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用任務(wù)5.2完善注冊按鈕響應(yīng)事件——BOM對象的使用JavaScript中的BOM操作任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用BOM的構(gòu)成任務(wù)5.2完善注冊按鈕響應(yīng)事件——BOM對象的使用什么是BOMwindow對象history對象location對象screen對象navigate對象

瀏覽器提供了一系列內(nèi)置對象，各內(nèi)置對象之間按照某種層次組織起來的模型統(tǒng)稱為BOM。BOM提供了獨立于內(nèi)容而與瀏覽器窗口進行交互的對象，其核心對象是window。什么是BOM

BOM由一系列相關(guān)的對象構(gòu)成，并且每個對象都提供了很多方法和屬性。JavaScript語法的標(biāo)準(zhǔn)化組織是ECMA（EuropeanComputerManufacturesAssociation，歐洲計算機制造聯(lián)合會），DOM的標(biāo)準(zhǔn)化組織是W3C，但是BOM還沒有統(tǒng)一的標(biāo)準(zhǔn)，導(dǎo)致每種瀏覽器都有自己對BOM的實現(xiàn)方式。W3C組織目前正在致力于促進BOM的標(biāo)準(zhǔn)化。任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用BOM最直接的作用之一是將相關(guān)的元素組織和包裝起來，提供給開發(fā)者使用，從而減少開發(fā)者的代碼編寫量，提高他們設(shè)計Web頁面的能力。BOM采用了分層結(jié)構(gòu)，BOM和DOM的結(jié)構(gòu)如下圖所示。windowdocumentframeshistorylocationnavigatorscreenanchorsformsimageslinkslocationBOMDOMBOM的構(gòu)成任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用BOM最直接的作用之一是將相關(guān)的元素組織和包裝起來，提供給開發(fā)者使用，從而減少開發(fā)者的代碼編寫量，提高他們設(shè)計Web頁面的能力。BOM采用了分層結(jié)構(gòu)，BOM和DOM的結(jié)構(gòu)如下圖所示。windowdocumentframeshistorylocationnavigatorscreenanchorsformsimageslinkslocationBOMDOMBOM的構(gòu)成任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用（1）作用域不同：BOM是全局的，與瀏覽器窗口相關(guān)，而DOM是針對單個文檔的。（2）核心對象不同：BOM的核心對象是window，DOM的核心對象是document。（3）功能不同：BOM提供了與瀏覽器窗口交互的功能，如窗口控制、歷史記錄管理等；DOM提供了與文檔內(nèi)容交互的功能，如元素操作、樣式修改等。（4）目的不同：BOM的目的是與瀏覽器環(huán)境交互，而DOM的目的是與文檔內(nèi)容進行交互。BOM與DOM的不同任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用

window對象也稱為瀏覽器對象，常用于獲取瀏覽器窗口的大小、位置或設(shè)置定時器等。當(dāng)在瀏覽器中打開一個HTML文檔時，通常會創(chuàng)建一個window對象。如果定義了一個或多個框架，瀏覽器將為原始文檔創(chuàng)建一個window對象，同時為每個框架創(chuàng)建一個window對象。

window對象是BOM的核心，其他對象都是以屬性的方式添加到window對象中的。windows對象任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用window對象也稱為瀏覽器對象，常用于獲取瀏覽器窗口的大小、位置或設(shè)置定時器等。

當(dāng)在瀏覽器中打開一個HTML文檔時，通常會創(chuàng)建一個window對象。如果定義了一個或多個框架，瀏覽器將為原始文檔創(chuàng)建一個window對象，同時為每個框架創(chuàng)建一個window對象。windows對象任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用window對象的常用屬性如下表所示。在JavaScript中，window對象屬性的使用方法如下：window.屬性名='屬性值'例如，window.location=':8848/詩歌賞析/index.html';表示跳轉(zhuǎn)到本地詩歌賞析網(wǎng)站的首頁。屬性名說明document返回document對象，也就是DOM對象，是HTML頁面當(dāng)前窗體的內(nèi)容history返回history對象的引用，主要用于記錄瀏覽器的訪問歷史記錄location返回location對象的引用，主要用于獲取當(dāng)前瀏覽器中URL地址欄內(nèi)的相關(guān)數(shù)據(jù)。navigator返回navigator對象的引用，用于獲取瀏覽器的相關(guān)數(shù)據(jù)，如瀏覽器名稱等。screen返回screen對象的引用，可獲取與屏幕相關(guān)的數(shù)據(jù)。windows對象——常用屬性任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用window對象的常用方法如下表所示。在JavaScript中，window對象方法的使用方法如下：window.方法名();因為window對象是全局對象，所以在使用window對象的屬性和方法時，可以省略window。例如，在前面用到的alert()，其完整的寫法是window.alert()。方法名說明prompt()提示用戶輸入信息的對話框alert()顯示帶有提示信息和一個【確定】按鈕的警示對話框confirm()顯示帶有提示信息，【確定】和【取消】按鈕的對話框close()關(guān)閉瀏覽器窗口open()打開一個新的瀏覽器窗口，加載給定URL指定的文檔setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或執(zhí)行一段代碼setInterval()按照指定的周期（以毫秒計）來調(diào)用函數(shù)或執(zhí)行一段代碼windows對象——常用方法任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用（1）confirm()方法在Web開發(fā)中，用戶在提交頁面申請或者刪除某些數(shù)據(jù)時，為防止誤操作，通常會彈出一個確認(rèn)對話框，讓用戶進一步確認(rèn)信息。確認(rèn)對話框通過confirm()方法實現(xiàn)，基本語法格式如下：window.confirm(message);message表示要在窗口上彈出的對話框中顯示的純文本，如果用戶單擊【確定】按鈕則返回true，如果單擊【取消】按鈕則返回false。windows對象——常用方法任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用（2）close()方法該方法主要用于瀏覽器窗口的關(guān)閉，基本語法格式如下：window.close()該方法主要用于打開一個新的瀏覽器窗口或查找一個已命名的瀏覽器窗口，基本語法格式如下：（3）open()方法window.open(URL,name,specs,replace)windows對象——常用方法任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用該函數(shù)各個參數(shù)說明如下。

URL：可選，打開指定的頁面的URL。如果沒有指定URL，打開一個新的空白瀏覽器窗口。

name：可選，指定target屬性或瀏覽器窗口名稱。specs：可選，用于設(shè)置瀏覽器窗口的特征（如大小、滾動條等），多個特征之間用逗號分隔。replace：參數(shù)設(shè)置為true，表示替換瀏覽歷史中的當(dāng)前條目；參數(shù)設(shè)置為false（默認(rèn)值），表示在瀏覽歷史中創(chuàng)建新的條目。windows對象——常用方法任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用用戶在瀏覽網(wǎng)站時，時常會看到商品搶購倒計時計時器、顯示一段時間自動關(guān)閉的廣告。圖片、定時切換的輪播圖片等多種網(wǎng)頁特效，這些特效使得網(wǎng)頁豐富多彩，它們都用到了定時器。定時器用于在指定時間后執(zhí)行特定操作，或者讓程序代碼每隔一段時間執(zhí)行一次，實現(xiàn)間歇操作。window對象提供了setTimeout()和setInterval()兩種方法實現(xiàn)定時器。定時器任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用利用setTimeout()和setInterval()均可實現(xiàn)定時器效果，兩個方法都可用于在一個固定時間段內(nèi)執(zhí)行JavaScript程序代碼，但不同的是setTimeout()只執(zhí)行一次代碼，取消該定時器需要使用clearTimeout()方法；setInterval()會在指定的時間后自動重復(fù)執(zhí)行代碼，取消該定時器需要使用clearInterval()方法。在定時器啟動后，要取消操作可以將setTimeout()的返回值傳遞給clearTimeout()方法，或?qū)etInterval()的返回值傳遞給clearInterval()方法。定時器在網(wǎng)頁中用于控制事件或函數(shù)的延遲執(zhí)行或周期性執(zhí)行，是實現(xiàn)動畫效果、輪播圖、倒計時等功能的關(guān)鍵工具。定時器任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用定時器在網(wǎng)頁中用于控制事件或函數(shù)的延遲執(zhí)行或周期性執(zhí)行，是實現(xiàn)動畫效果、輪播圖、倒計時等功能的關(guān)鍵工具。案例——定時器特效：任務(wù)描述任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用

利用setTimeout()和setInterval()均可實現(xiàn)定時器效果，兩個方法都可用于在一個固定時間段內(nèi)執(zhí)行JavaScript程序代碼，但不同的是setTimeout()只執(zhí)行一次代碼，取消該定時器需要使用clearTimeout()方法；setInterval()會在指定的時間后自動重復(fù)執(zhí)行代碼，取消該定時器需要使用clearInterval()方法。案例——定時器特效：任務(wù)分析任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用1.定義延遲顯示元素2.分別用setTimeout()和setInterval()設(shè)置定時器，比較定時器的異同。3.分別為兩個定時器添加取消函數(shù)。4.測試運行案例——定時器特效：任務(wù)實施任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用

window.onload是窗口（頁面）加載事件，當(dāng)文檔內(nèi)容（包括圖像、腳本文件、CSS文件等）完全加載完成后會觸發(fā)該事件，調(diào)用該事件對應(yīng)的事件處理函數(shù)。JavaScript代碼是從上而下依次執(zhí)行的，如果要在頁面加載完成后執(zhí)行某些代碼，又想要把這些代碼寫到頁面任意的地方，可以把代碼寫到window.onload事件處理函數(shù)中，因為window.onload事件是等頁面內(nèi)容全部加載完畢再執(zhí)行事件處理函數(shù)的。window對象常用事件任務(wù)5.1添加驗證碼發(fā)送特效——BOM對象基本概念及window對象的使用

為注冊頁面添加驗證碼發(fā)送特效，當(dāng)單擊【發(fā)送驗證碼】按鈕時發(fā)送請求短消息，該按鈕在60s

內(nèi)不能再單擊，以防止重復(fù)發(fā)送請求短消息，同時該按鈕上的文字變?yōu)椤斑€剩下**秒再次單擊”。優(yōu)化代碼設(shè)計，實現(xiàn)HTML

與JavaScript

代碼的分離。任務(wù)描述任務(wù)5.1添加驗證碼發(fā)送特效要實現(xiàn)單擊【發(fā)送驗證碼】按鈕后的特效，需要用到window對象中的定時器的倒計時功能。若要優(yōu)化代碼設(shè)計，實現(xiàn)JavaScript函數(shù)定義在要引用的HTML元素前面時，可借助window.onload事件實現(xiàn)該功能。任務(wù)5.1添加驗證碼發(fā)送特效任務(wù)分析1.定義事件源元素2.定義發(fā)送驗證碼特效函數(shù)3.將發(fā)送驗證碼特效函數(shù)與【發(fā)送

驗證碼】按鈕綁定4.利用window對象優(yōu)化代碼設(shè)計5.測試運行文件任務(wù)5.1添加驗證碼發(fā)送特效任務(wù)實施

location對象是window對象的一個屬性，它包含了當(dāng)前頁面的URL信息。盡管document.location提供了對同一location對象的引用，location對象本質(zhì)上屬于window對象。通過location對象，用戶可以獲取當(dāng)前頁面的URL信息，并且可以使用其提供的方法，如assign()、replace()和reload()，來控制瀏覽器的導(dǎo)航行為，包括重新載入頁面或加載新頁面。任務(wù)5.2完善注冊按鈕響應(yīng)事件——BOM對象的使用location對象1．認(rèn)識URL在Internet上訪問的每一個網(wǎng)頁文件都有一個訪問標(biāo)記，用于唯一標(biāo)識它的訪問位置，以便瀏覽器訪問，這個訪問標(biāo)記稱為URL。URL中包含網(wǎng)絡(luò)協(xié)議、服務(wù)器主機名、端口號、路徑、參數(shù)以及錨點，基本組成如下：protocol://host[:port]/path/[?query]#fragment組成部分說明protocol表示網(wǎng)絡(luò)協(xié)議，常用的如HTTP、FTP、mailto等host表示服務(wù)器主機名，如port端口號，可選，省略時使用協(xié)議的默認(rèn)端口，如http默認(rèn)端口為80path表示路徑，如website/index.htmlquery參數(shù)，為鍵值對的形式，通過“&”符號分隔，如“user=admin&newsId=566”fragment錨點，如“#site”，標(biāo)識頁面內(nèi)部的錨點任務(wù)5.2完善注冊按鈕響應(yīng)事件——BOM對象的使用location對象

BOM中l(wèi)ocation對象提供的常用屬性，可用于獲取或者設(shè)置對應(yīng)的URL的組成部分等，具體如下表所示。2．location對象的常用屬性屬性名說明href返回完整的URLprotocol返回一個URL協(xié)議hostname返回URL的主機名host返回一個URL的主機名和端口號port返回一個URL服務(wù)器使用的端口號pathname返回URL的路徑名search返回或設(shè)置當(dāng)前URL的查詢部分（“？”之后的部分）hash返回一個URL的錨點部分（從“#”開始的部分）location對象任務(wù)5.2完善注冊按鈕響應(yīng)事件——BOM對象的使用

BOM中l(wèi)ocation對象提供的常用方法，可用于更改用戶在瀏覽器中訪問的URL，實現(xiàn)新文檔的載入、重新加載以及替換等功能，具體如下表所示。3．location對象的常用方法方法名說明assign()載入一個新的文檔reload()重新加載當(dāng)前文檔replace()用新的文檔替換當(dāng)前文檔，覆蓋瀏覽器當(dāng)前記錄location對象任務(wù)5.2完善注冊按鈕響應(yīng)事件——BOM對象的使用

history對象包含用戶（在瀏覽器窗口中）訪問過的URL。history對象最初設(shè)計用來表示瀏覽器窗口的瀏覽歷史，但出于隱私方面的考慮，history對象不再允許腳本訪問已經(jīng)訪問過的實際URL，但可以控制瀏覽器實現(xiàn)“后退”和“前進”的功能，history對象相關(guān)的屬性和方法如下表所示。分類名稱說明屬性length返回歷史列表中的網(wǎng)址數(shù)方法back()加載history列表中的前一個URLforward()加載history列表中的下一個URLgo()加載history列表中的某個具體頁面history對象任務(wù)5.2完善注冊按鈕響應(yīng)事件——BOM對象的使用

navigator對象提供了有關(guān)瀏覽器的信息，但是每個瀏覽器中的navigator對象中都有一套自己的屬性和方法。目前一些主流瀏覽器中navigator對象的屬性和方法，如下表所示。分類名稱說明屬性appCodeName返回瀏覽器的內(nèi)部名稱appName返回瀏覽器的名稱appVersion返回瀏覽器的平臺和版本信息cookieEnabled返回指明瀏覽器中是否啟用cookie的布爾值platform返回運行瀏覽器的操作系統(tǒng)平臺userAgent返回由客戶端發(fā)送到服務(wù)器的User-Agent頭部的值方法javaEnabled()指定是否在瀏覽器中啟用javanavigator對象任務(wù)5.2完善注冊按鈕響應(yīng)事件——BOM對象的使用【案例】利用navigator對象的屬性返回瀏覽器User-Agent頭部信息利用Chrome瀏覽器控制臺進行查看，運行結(jié)果如下：瀏覽器User-Agent頭部信息：Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/96.0.4664.110Safari/537.36利用IE控制臺進行查看，運行結(jié)果如下：瀏覽器User-Agent頭部信息：Mozilla/5.0(WindowsNT10.0;WOW64;Trident/7.0;.NET4.0C;.NET4.0E;.NETCLR2.0.50727;.NETCLR3.0.30729;.NETCLR3.5.30729;zhumu4.0.0;rv:11.0)likeGecko利用Firefox瀏覽器控制臺進行查看，運行結(jié)果如下：瀏覽器User-Agent頭部信息：Mozilla/5.0(WindowsNT10.0;Win64;x64;rv:102.0)Gecko/20100101Firefox/102.0navigator對象任務(wù)5.2完善注冊按鈕響應(yīng)事件——BOM對象的使用在日常瀏覽網(wǎng)頁時，細心的讀者可能會發(fā)現(xiàn)有一些網(wǎng)站在PC端和移動端瀏覽時的效果不同，在開發(fā)中可以通過瀏覽器User-Agent頭部信息判斷運行中操作系統(tǒng)的類型，從而實現(xiàn)不同網(wǎng)頁的加載。

【案例】利用navigator對象的userAgent屬性判斷瀏覽器類型，從而實現(xiàn)瀏覽同一個網(wǎng)頁，不同設(shè)備上的瀏覽器顯示不同的效果。navigator對象任務(wù)5.2完善注冊按鈕響應(yīng)事件——BOM對象的使用每個window對象的screen屬性都引用一個screen對象。screen對象中存放著有關(guān)瀏覽器屏幕的信息，JavaScript程序?qū)⒗眠@些信息來優(yōu)化它們的輸出，以滿足用戶的顯示要求。屬性說明height返回整個屏幕的高width返回整個屏幕的寬avaiHeight返回瀏覽器窗口在屏幕上可占用的垂直空間avaiWidth返回瀏覽器窗口在