JavaScript+jQuery交互式Web前端開發(fā)（第2版） 課件 第8章 BOM

第8章BOM《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》學習目標/Target

了解BOM的概念，能夠闡述BOM的概念

掌握BOM對象的使用，能夠靈活應用BOM對象實現(xiàn)瀏覽器操作

掌握窗口事件的使用，能夠在窗口加載、窗口卸載或窗口大小改變時運行特定

的代碼

掌握定時器方法的使用，能夠應用定時器延遲一段時間運行代碼或間歇運行代碼熟悉同步和異步的概念，能夠區(qū)分同步和異步章節(jié)概述/Summary在實際開發(fā)中，使用JavaScript開發(fā)網(wǎng)頁交互效果時，經(jīng)常需要獲取瀏覽器的一些信息，控制瀏覽器的刷新和頁面跳轉。為了使JavaScript控制瀏覽器，可以使用BOM。本章將詳細講解BOM。目錄/Contents8.18.28.3BOM簡介BOM對象窗口事件8.4定時器8.5同步和異步BOM簡介8.1了解BOM的概念，能夠闡述BOM的概念

先定一個小目標！8.1BOM簡介8.1BOM簡介BOM（BrowserObjectModel，瀏覽器對象模型）是由瀏覽器提供的一系列對象構成的，它主要用于管理窗口與窗口之間的通信。在BOM中，頂級對象是window，表示瀏覽器窗口，其他對象都是window對象的屬性，當調用window對象下的屬性和方法時，可以省略window。常見的BOM對象如下圖所示。以下5個BOM對象都是window對象的屬性。document對象表示文檔，它既屬于BOM又屬于DOM。location對象用于操作瀏覽器地址。navigator對象用于獲取瀏覽器的基本信息。history對象用于操作瀏覽器的歷史記錄。screen對象用于獲取屏幕信息。BOM沒有統(tǒng)一標準，每個瀏覽器都有對BOM的實現(xiàn)方式，因此，BOM的瀏覽器兼容性較差。8.1BOM簡介BOM對象8.2掌握window對象的使用，能夠靈活應用window對象常用的方法和屬性8.2.1 window對象

先定一個小目標！window對象既是瀏覽器窗口對象，又是全局對象，全局變量在書寫時可以省略，例如，window.document、window.console、window.alert()和mpt()可以寫成document、console、alert()、prompt()，其中document和console是window對象的屬性，alert()和prompt()是window對象的方法。8.2.1 window對象在JavaScript中，定義在全局作用域中的變量是window對象的屬性；定義在全局作用域中的函數(shù)是window對象的方法，示例代碼如下。//全局作用域中的變量是window對象的屬性varnum=10;console.log(window.num);

//輸出結果為：10//全局作用域中的函數(shù)是window對象的方法functionfn(){

return11;}console.log(window.fn());

//輸出結果為：118.2.1 window對象下面列舉window對象常用的方法和屬性，如下表所示。8.2.1 window對象分類名稱說明方法alert()彈出帶有一段消息和一個“確定”按鈕的警告框confirm()彈出帶有一段消息以及“確定”按鈕和“取消”按鈕的警告框prompt()彈出帶有提示信息的輸入框open()打開一個新的瀏覽器窗口或查找一個已命名的窗口close()關閉瀏覽器窗口focus()使窗口獲得焦點scrollBy()按照指定的像素值來滾動內容scrollTo()把內容滾動到指定的坐標>>續(xù)上一頁表8.2.1 window對象分類名稱說明屬性name設置或獲取窗口的名稱opener獲取打開當前窗口的window對象parent獲取當前窗口的父窗口的window對象self獲取當前窗口的window對象，等價于window對象window獲取當前窗口的window對象top獲取頂層窗口的window對象（頁面中有多個框架時）下面通過代碼演示window對象中alert()方法和confirm()方法的使用，示例代碼如下。if(confirm('您確定要運行此操作？')){

alert('用戶確認');}else{

alert('用戶取消');}8.2.1 window對象上述示例代碼中，confirm()方法用于彈出一個具有提示信息的對話框，返回值為true或false，表示用戶單擊了對話框中的“確定”按鈕或“取消”按鈕。掌握location對象的使用，能夠靈活應用location對象常用的方法和屬性

先定一個小目標！8.2.2 location對象location對象用于操作瀏覽器的地址，通過location對象可以獲取當前窗口的URL信息。location對象既是window對象的屬性又是document對象的屬性。8.2.2 location對象下面列舉location對象常用的方法和屬性，如下表所示。分類名稱說明方法assign(url)觸發(fā)窗口加載并顯示指定URL的內容replace(url)使用給定的URL替換當前的資源reload([forcedReload])刷新當前頁面屬性search獲取或設置當前URL的查詢字符串（又稱為URL參數(shù)），即URL中“?”之后的內容hash獲取當前URL的錨點部分（從“#”開始的部分）8.2.2 location對象>>續(xù)上一頁表分類名稱說明屬性host獲取當前URL的主機名和端口hostname獲取當前URL的主機名href獲取當前URLpathname獲取當前URL中的路徑名port獲取當前URL中的端口號protocol獲取當前URL中的協(xié)議8.2.2 location對象reload()方法的可選參數(shù)forcedReload是一個布爾值，當值為true時，表示強制瀏覽器從服務器加載頁面資源，當值為false或未傳參時，瀏覽器則可能從緩存中讀取頁面。search屬性通常用于在向服務器查詢信息時傳入查詢條件，如頁碼、搜索的關鍵字、排序方式等。assign()方法在打開指定URL時，會生成一條新的歷史記錄，而replace()方法不會在瀏覽器歷史記錄中生成新的記錄，并且在調用replace()方法后，用戶不能返回到前一個頁面。8.2.2 location對象下面以如下URL為例，演示location對象常用的屬性的使用。8.2.2 location對象http://:5500/test.html?name=a#data在瀏覽器打開上述URL時，使用location對象常用的屬性的示例代碼如下。console.log(location.search); //輸出結果為：?name=aconsole.log(location.hash);

//輸出結果為：#dataconsole.log(location.host);

//輸出結果為：:5500console.log(location.hostname); //輸出結果為：console.log(location.href); //輸出結果為::5500/test.htmlconsole.log(location.pathname);

//輸出結果為：/test.htmlconsole.log(location.port);

//輸出結果為：5500console.log(tocol);

//輸出結果為：http:掌握navigator對象的使用，能夠靈活應用navigator對象常用的方法和屬性

先定一個小目標！8.2.3 navigator對象navigator對象用于獲取瀏覽器的相關信息，下面列舉navigator對象常用的方法和屬性，如下表所示。分類名稱說明方法javaEnable()是否在瀏覽器中啟動Java屬性appCodeName獲取瀏覽器的內部名稱appName獲取瀏覽器的完整名稱appVersion獲取瀏覽器的平臺和版本信息cookieEnable瀏覽器中是否啟用Cookieplatform獲取運行瀏覽器的操作系統(tǒng)平臺userAgent獲取由瀏覽器發(fā)送到服務器的User-Agent的值8.2.3 navigator對象下面以userAgent屬性為例，演示如何獲取由瀏覽器發(fā)送到服務器的User-Agent的值。8.2.3 navigator對象

varmsg=navigator.userAgent;console.log(msg);在上述示例代碼中，使用navigator對象的userAgent屬性獲取由瀏覽器發(fā)送到服務器的User-Agent的值，其內容主要包含瀏覽器版本、操作系統(tǒng)等信息，每種瀏覽器獲取的信息都不相同。下面以Chrome瀏覽器、Firefox瀏覽器、IE瀏覽器為例演示瀏覽器獲取的信息。8.2.3 navigator對象Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/Safari/537.36Chrome瀏覽器的輸出結果示例如下。Firefox瀏覽器的輸出結果示例如下。Mozilla/5.0(WindowsNT10.0;Win64;x64;rv:109.0)Gecko/20100101Firefox/111.0IE瀏覽器的輸出結果示例如下。Mozilla/5.0(WindowsNT10.0;WOW64;Trident/7.0;.NET4.0C;.NET4.0E;rv:11.0)likeGecko掌握history對象的使用，能夠靈活應用navigator對象常用的方法和屬性

先定一個小目標！8.2.4 history對象history對象可以對用戶在瀏覽器中訪問的歷史記錄進行操作。出于安全方面考慮，history對象不能直接獲取用戶瀏覽過的歷史記錄，但可以控制瀏覽器的“前進”和“后退”功能。8.2.4 history對象8.2.4 history對象下面列舉history對象常用的方法和屬性，如下表所示。分類名稱說明方法back()加載history列表中的上一個URL，即后退一頁forward()加載history列表中的下一個URL，即前進一頁go([delta])加載history列表中的某個具體頁面，可選參數(shù)delta的值是負整數(shù)時，表示后退指定的頁數(shù)；是正整數(shù)時，表示前進指定的頁數(shù)；是0或省略時，表示刷新頁面屬性length返回history列表中的URL數(shù)8.2.4 history對象下面通過代碼演示history對象的back()方法和forward()方法，示例代碼如下。<body>

<buttonid="btn1">后退</button><buttonid="btn2">前進</button>

<script>

varbtn1=document.getElementById('btn1');

varbtn2=document.getElementById('btn2');btn1.onclick=function(){

history.back(); //控制瀏覽器后退一頁

};btn2.onclick=function(){

history.forward(); //控制瀏覽器前進一頁

};

</script></body>掌握screen對象的使用，能夠靈活應用screen對象常用的方法和屬性

先定一個小目標！8.2.5 screen對象screen對象用于獲取屏幕相關的信息，例如，屏幕的寬度、屏幕的高度等。下面列舉screen對象常用的屬性，如下表所示。屬性作用width獲取整個屏幕的寬度height獲取整個屏幕的高度availWidth獲取瀏覽器窗口在屏幕上可占用的水平空間availHeight獲取瀏覽器窗口在屏幕上可占用的垂直空間8.2.5 screen對象上述表中的屬性的獲取結果都是數(shù)字型像素值。下面通過代碼進行演示。8.2.5 screen對象console.log(screen.width);

//輸出結果為：1920console.log(screen.height);

//輸出結果為：1080console.log(screen.availWidth);

//輸出結果為：1920console.log(screen.availHeight);

//輸出結果為：1040窗口事件8.3掌握窗口加載與卸載事件，能夠在窗口加載、窗口卸載時運行特定的代碼

先定一個小目標！8.3.1 窗口加載與卸載事件當需要在窗口加載完成后運行某些代碼，或在窗口關閉時運行某些代碼，可以使用window對象提供的窗口加載與卸載事件。下面列舉window對象提供的窗口加載與卸載事件，如下表所示。8.3.1 窗口加載與卸載事件屬性作用load窗口加載事件，當頁面加載完畢后觸發(fā)unload窗口卸載事件，當頁面關閉時觸發(fā)窗口加載事件在網(wǎng)頁文檔以及外鏈的文件（包括圖像文件、JavaScript文件、CSS文件等）全部加載完成后才會觸發(fā)；窗口卸載事件會在用戶關閉網(wǎng)頁時觸發(fā)。窗口加載與卸載事件有兩種注冊方式，第1種注冊方式的示例代碼如下。8.3.1 窗口加載與卸載事件window.onload=function(){}; //窗口加載事件window.onunload=function(){}; //窗口卸載事件在上述示例代碼中，只能注冊一個事件處理函數(shù)。窗口加載與卸載事件的第2種注冊方式的示例代碼如下。8.3.1 窗口加載與卸載事件window.addEventListener('load',function(){});

//窗口加載事件window.addEventListener('unload',function(){});//窗口卸載事件在上述示例代碼中，當多次調用window.addEventListener()時，可以注冊多個事件處理函數(shù)。下面通過代碼進行演示。首先演示不使用窗口加載事件時代碼運行出錯的情況。由于程序中的代碼是從上往下運行的，當JavaScript代碼寫在需要操作的HTML標簽前面時，獲取元素的操作會失敗，示例代碼如下。8.3.1 窗口加載與卸載事件<body>

<script>

document.getElementById('demo').onclick=function(){

console.log('被單擊了');

};

</script>

<divid="demo">持之以恒</div></body>保存代碼，在瀏覽器中進行測試，運行結果如下圖所示。8.3.1 窗口加載與卸載事件下面通過窗口加載事件解決示例代碼中出現(xiàn)的問題。8.3.1 窗口加載與卸載事件<script>

window.onload=function(){

document.getElementById('demo').onclick=function(){

console.log('被單擊了');

};

};</script>document.DOMContentLoaded事件多學一招當網(wǎng)頁中的圖片較多時，如果圖片加載速度慢，窗口加載事件的觸發(fā)可能需要較長的時間，這樣會影響到用戶的體驗，此時，可以使用document.DOMContentLoaded事件，該事件會在文檔加載完成時觸發(fā)，與圖片文件、JavaScript文件、CSS文件等外部文件是否加載完成無關，適用于頁面中有很多外部文件的情況。8.3.1 窗口加載與卸載事件注意document.DOMContentLoaded事件不兼容IE9之前的瀏覽器。

先定一個小目標！8.3.2 窗口大小改變事件掌握窗口大小改變事件，能夠靈活應用兩種方式注冊窗口大小改變事件在實際開發(fā)中，為了能夠響應用戶調整瀏覽器窗口大小的操作，可以使用窗口大小改變事件resize，該事件有兩種注冊方式，第1種注冊方式的示例代碼如下。8.3.2 窗口大小改變事件window.onresize=function(){};第2種注冊方式的示例代碼如下。window.addEventListener('resize',function(){});下面通過代碼進行演示。要求當用戶調整窗口大小時，在控制臺輸出當前頁面的寬度。8.3.2 窗口大小改變事件<script>

window.addEventListener('resize',function(){

console.log(document.body.clientWidth);

});</script>定時器8.4掌握定時器方法的使用，能夠應用定時器延遲一段時間運行代碼或間歇運行代碼

先定一個小目標！8.4.1 設置定時器方法window對象提供了兩種用于設置定時器的方法，分別是setTimeout()方法和setInterval()方法，此外，還提供了兩種用于清除定時器的方法，分別是clearTimeout()方法和clearInterval()方法。關于設置和清除定時器的方法說明如下。8.4.1 設置定時器方法方法說明setTimeout(fn,delay)在達到指定時間（以毫秒計）后調用函數(shù)或運行一段代碼setInterval(fn,delay)按照指定的周期（以毫秒計）來調用函數(shù)或運行一段代碼clearTimeout(定時器ID)清除由setTimeout()方法設置的定時器clearInterval(定時器ID)清除由setInterval()方法設置的定時器setTimeout()方法和setInterval()方法都可以在固定時間段內運行代碼，二者的區(qū)別是，使用setTimeout()方法時只運行一次代碼，使用setInterval()方法時會在指定的時間后自動重復運行代碼。8.4.1 設置定時器方法8.4.1 設置定時器方法setTimeout()方法和setInterval()方法都有兩個參數(shù)，第1個參數(shù)fn表示到達延遲時間后運行的代碼，可以傳入普通函數(shù)、匿名函數(shù)或字符串代碼，第2個參數(shù)delay表示延遲時間的毫秒值。8.4.1 設置定時器方法setTimeout()方法和setInterval()方法的返回值為定時器ID（定時器的唯一標識），將定時器ID作為參數(shù)傳給clearTimeout()方法或clearInterval()方法可以清除定時器。8.4.1 設置定時器方法下面以setTimeout()方法為例，演示使用3種傳參方式實現(xiàn)定時器的設置。（1）傳入普通函數(shù)的方式setTimeout(fn,2000);functionfn(){

alert('爭分奪秒');}8.4.1 設置定時器方法（2）傳入匿名函數(shù)的方式setTimeout(function(){

alert('爭分奪秒');},2000);（3）傳入字符串代碼的方式setTimeout('alert("爭分奪秒");',2000);8.4.1 設置定時器方法//設置定時器時保存定時器IDvartimer=setTimeout(function(){

alert('爭分奪秒');},2000);//清除定時器時傳入需要清除的定時器IDclearTimeout(timer);下面以clearTimeout()方法為例，演示定時器的清除，示例代碼如下。掌握3秒后自動關閉廣告的案例，能夠編寫代碼實現(xiàn)案例

先定一個小目標！8.4.2 【案例】3秒后自動關閉廣告在瀏覽網(wǎng)站的過程中，經(jīng)常會在頁面中看到廣告，并顯示自動關閉廣告的倒計時。自動關閉廣告的倒計時效果可以使用定時器實現(xiàn)。下面將通過一個案例演示如何實現(xiàn)3秒后自動關閉廣告。8.4.2 【案例】3秒后自動關閉廣告掌握60秒內只能發(fā)送一次驗證碼的案例，能夠編寫代碼實現(xiàn)案例

先定一個小目標！8.4.3 【案例】60秒內只能發(fā)送一次驗證碼本案例要求在頁面中設置一個文本框和一個“發(fā)送驗證碼”按鈕，在單擊“發(fā)送驗證碼”按鈕后，該按鈕中的文字會變?yōu)椤?0秒后重新發(fā)送”，并且“60”會每秒減1。在60秒后，才能再次單擊“發(fā)送驗證碼”按鈕，并且按鈕恢復為初始狀態(tài)。8.4.3 【案例】60秒內只能發(fā)送一次驗證碼同步和異步8.5熟悉同步和異步的概念，能夠區(qū)分同步和異步

先定一個小目標！8.5同步和異步同步是指前一個任務結束后再運行后一個任務，程序的運行順序與任務的排列順序一致。例如，做飯時，先煮飯，等飯煮好后再去炒菜。8.5同步和異步異步是指在處理一個任務的同時，可以去處理其他的任務。例如，在煮飯的同時去炒菜。異步代碼通常寫在回調函數(shù)中，例如，注冊事件時傳入的事件處理函數(shù)，以及設置定時器時傳入的函數(shù)，都是回調函數(shù)。8.5同步和異步JavaScript的運行機制是單線程，即同一個時間只能做一件事。假設JavaScript被設計為多線程，一個線程在某個DOM節(jié)點上添加內容，另一個線程要刪除這個節(jié)點，此種情況下瀏覽器將無法確定以哪個線程為準。多線程會讓JavaScript變得復雜，而采用單線程可以避免出現(xiàn)這樣的問題。8.5同步和異步采用單線程意味著所有任務需要排隊，前一個任務結束，才會運行后一個任務，如果其中一個任務運行的時間過長，就會阻塞后面的任務。例如，有3個任務正在排隊，第1