Web前端開發(fā)（HTML5+CSS3+JavaScript） 課件 第11章 BOM

Web前端基礎(chǔ)技術(shù)CSSJSHTML第10章BOMContents目錄BOM概述Window對象LocationNavigator|HistoryScreenEventWebStorageBOMBOM(BroswerObjectModel):主要控制瀏覽器的行為和特征window對象是BOM的頂層對象，代表瀏覽器窗口。11.1Window對象主要方法應(yīng)用：在新窗口打開頁面：window.open(URL,[,目標(biāo)])示例：11.2Location對象注意：href屬性可讀可寫。當(dāng)為href賦值時，將重定向到目標(biāo)頁面。例如，下面的語句將重定向到index.html頁面：location是window的子對象，該對象的屬性保存了當(dāng)前頁面URL的詳細(xì)信息。此外，location對象還提供了跳轉(zhuǎn)到其他頁面的方法和屬性。假定有以下URL：:80/abc.html#shoe:80/abc.html?id=10&price=190那么，location對象的屬性及其含義如下：

href：該屬性表示當(dāng)前頁面完整的URL，如上面示例語句。

protocol：使用的協(xié)議，如：http和https。

hostname：服務(wù)器域名或IP地址，如：。

post：端口號，如:80。

pathname：服務(wù)器根目錄下的文件名，如:abc.html。

hash：返回#后面的內(nèi)容，如：shoe。

search：表示URL問號后面的查詢字符串，如：?id=10&price=190。該屬性使得我們可以重定向到目標(biāo)頁面時，傳遞一些簡單的數(shù)據(jù)。location.href="index.html"該語句等價于：window.open("index.html","_self")。location對象主要方法包括：

reload（）：重新加載當(dāng)前頁面，相當(dāng)于頁面刷新。

repace（URL）：重定向到指定的頁面，例如replace("index.html")。replace方法和href屬性都可以實(shí)現(xiàn)頁面的重定向。兩者的區(qū)別在于，使用replace方法后，無法使用瀏覽器的回退按鈕返回上一頁，而使用href屬性則可以。

assign（URL）：重定向到指定頁面。使用該方法后，可以使用瀏覽器的回退按鈕返回上一頁，與使用href屬性的作用相同。11.3Navigator對象（了解）navigator是window的子對象，我們可以通過訪問其屬性來獲取與瀏覽器和操作系統(tǒng)相關(guān)的信息。

appCodeName：獲取瀏覽器的內(nèi)部代碼名。

appName：獲取瀏覽器的名稱。

appVersion：獲取瀏覽器的平臺和版本信息。

language：獲取當(dāng)前瀏覽器的語言，例如:zh-CN。

cookieEnabled：瀏覽器中是否啟用cookie，結(jié)果為true或false。

onLine：瀏覽器是否處于在線模式，結(jié)果為true或false。

platform：獲取運(yùn)行瀏覽器的操作系統(tǒng)平臺。

userAgent：返回瀏覽器的廠商和版本信息，即瀏覽器運(yùn)行的操作系統(tǒng)、瀏覽器的版本、名稱。11.4history對象（了解）history是window的子對象，保存有用戶在瀏覽器中訪問過的歷史記錄數(shù)。

length：當(dāng)前歷史記錄條數(shù)。

back()：返回到歷史記錄中的上一條記錄，等同在瀏覽器中單擊“上一頁”按鈕。

forward()：前往歷史記錄中的下一條記錄，等同在瀏覽器中單擊“下一頁”按鈕。

go(n)：打開指定的歷史記錄中指定位置的頁面，n大于0，表示前進(jìn)，n小于0表示回退。例如，在當(dāng)前頁面中，返回上一個頁面。history.go(-1)//或history.back()11.5screen對象（了解）如果要獲取用戶屏幕的信息，可以通過訪問screen對象的屬性來實(shí)現(xiàn)。

width：瀏覽器窗口所在的屏幕的寬度，單位為像素。

availWidth：瀏覽器窗口可用的屏幕寬度，單位為像素。

height：瀏覽器窗口所在的屏幕的高度，單位為像。

availHeight：瀏覽器窗口可用的屏幕高度，不包含任務(wù)欄等不可用的高度。單位為像素。11.6瀏覽器事件對象Event在瀏覽器中觸發(fā)事件時，瀏覽器將創(chuàng)建一個名為event事件對象，并將其作為隱式參數(shù)傳遞給事件處理函數(shù)。event對象代表事件的狀態(tài)，例如觸發(fā)事件的目標(biāo)對象、鍵盤按鍵的狀態(tài)以及鼠標(biāo)按鍵和位置等。event對象兩種常見的應(yīng)用場景:事件冒泡和事件捕獲。事件冒泡是指事件從觸發(fā)事件的DOM元素開始，逐級向上傳遞給父元素和祖先元素，直到到達(dá)頂層的document元素。在這個傳遞過程中，任何DOM元素都可以捕獲并響應(yīng)同類型事件。這也是默認(rèn)的事件傳遞方向。而事件捕獲則剛好相反，它是從觸發(fā)事件的DOM元素開始，向下逐級傳遞至位于事件觸發(fā)區(qū)域內(nèi)的子元素和孫子元素應(yīng)用示例：觀察事件傳遞順序。<style>div{display:flex;justify-content:center;align-items:center;}#div1{width:200px;height:100px;border:2pxsolidblack;}#div2{width:100px;height:60px;border:2pxsolidblack;}</style><divid="div1"onclick="getID()"><divid="div2"onclick="getID()"><buttonid="bt"onclick="getID()">查看</button></div></div><script>functiongetID(){alert("事件源id："+event.target.id+",當(dāng)前元素id：“ +event.currentTarget.id)}</script>HTMLCSS：說明：使用彈性布局使元素居中，便于觀察。JavaScript內(nèi)聯(lián)方式的事件傳遞默認(rèn)采用冒泡模式1.如果我們不希望事件逐級傳遞，那么，我么可以在事件處理函數(shù)中，使用event對象的stopPropagation方法來實(shí)現(xiàn)。其用法如下：event.stopPropagation()2.如果我們要改變事件傳遞方向，那么我們需要借助addEventListener方法來實(shí)現(xiàn)。其用法如下：元素.addEventListener(事件名,事件處理函數(shù)，true|false)說明：參數(shù)3默認(rèn)為false，表示使用事件冒泡方式，而取值為true時表示使用事件捕獲方式。注意，在綁定事件處理函數(shù)時，只有使用addEventListener方法，才能改變事件傳遞方向，而無法使用內(nèi)聯(lián)方式和屬性方式來實(shí)現(xiàn)3.如果我們期望阻止這些元素的默認(rèn)行為，可以對他們默認(rèn)事件進(jìn)行監(jiān)聽，并在其相應(yīng)的事件處理函數(shù)中使用event.preventDefault方法來阻止。示例阻止鏈接的默認(rèn)行為，使其僅執(zhí)行我們自定義的操作，而不是跳轉(zhuǎn)到目標(biāo)頁面。<ahref="index.html"onclick="goto()">單擊試試</a>functiongoto(){event.preventDefault()alert("是否重定向到目標(biāo)頁面了？")}討論：示例阻止表單提交<formonsubmit="check()"><input/><button>提交</button></form>functioncheck(){event.preventDefault()alert("模擬驗(yàn)證數(shù)據(jù)，該表單不會執(zhí)行提交操作")}//如果需要在驗(yàn)證數(shù)據(jù)后提交表單，可以執(zhí)行表單的submit方法

event.target.submit()11.7WebStorage實(shí)現(xiàn)本地數(shù)據(jù)存儲,包含兩個具體的實(shí)例：localStorage和sessionStorage。兩者都實(shí)現(xiàn)了Storage接口的所有方法和屬性，并作為window對象的屬性存在。1.保存數(shù)據(jù)localStorage.setItem(key,value)localStorage.setItem("username","張三")varbook={id:1,bookName:"三國演義"，price:12.3}localStorage.setItem("book",JSON.stringify(book))JSON對象的有兩個主要的方法：stringify和parse。stringify方法的功能是將javaScript對象或數(shù)組轉(zhuǎn)換為字符串的形式，而parse方法的功能是字符串解析還原為JavaScript對象或數(shù)組。用法如下：JSON.stringify(對象或數(shù)組)JSON.parse(字符串)2.讀取數(shù)據(jù)localStorage.getItem(key)localStorage.getItem("username")varbook=localStorage.getItem("book")book=JSON.parse(book)3.刪除數(shù)據(jù)localStorage.removeItem(key)localStorage.removeItem("username")localStorage.removeItem("book")4.刪除全部數(shù)據(jù)localStorage.clear()5.列舉數(shù)據(jù)localStorage.length|localStorage.key|localStorage.getItem(key)在localStorage中，length屬性表示當(dāng)前數(shù)據(jù)項的數(shù)量，而其key方法則可以獲取數(shù)據(jù)項中指定索引的關(guān)鍵字。for(vari=0;i<localStorage.length;i++){varkey=localStorage.key(i)varvalue=localStorage.getItem(key)console.log(key,"=",value)}應(yīng)用實(shí)例：登錄,記住賬號和密碼要求實(shí)現(xiàn)如下功能：（1）假定用戶賬號的用戶名和密碼都是123。（2）如果用戶在登錄界面輸入了正確的賬號，且勾選了“記住密碼”復(fù)選框，那么在單擊“登錄”按鈕后，將賬號信息保存在本地，并跳轉(zhuǎn)到index.html頁面。如果用戶從index.html頁面返回或重啟瀏覽器時，自動填寫用戶賬號信息。如果用戶在登錄時沒有勾選“記住密碼”復(fù)選框，則在登錄成功后，清除已經(jīng)保存的賬號信息，并跳轉(zhuǎn)到index.html頁面。（3）如果用戶輸入賬號錯誤，則彈出信息對話框，提示用戶重新輸入。（4）在index.html中，顯示當(dāng)前登錄用戶的歡迎信息。如果用戶未經(jīng)驗(yàn)證直接打開該頁面，則自動跳轉(zhuǎn)到登錄頁面，強(qiáng)制要求用戶進(jìn)行登錄操作。<inputid="user"placeholder="請輸入用戶名"/><br/><inputid="pwd"type="password"placeholder="請輸入密碼"/><br/><inputid="remember"type="checkbox"/>記住密碼<br/><buttononclick="login()">登錄</button><script>varuser=document.getElementById("user")varpwd=document.getElementById("pwd")varrem=document.getElementById("remember")functiongetAccount(){varu=localStorage.getItem("user")varp=localStorage.getItem("pwd")if(u&&p){user.value=upwd.value=prem.checked=true}}functionlogin(){sessionStorage.removeItem('flag')//初始化

if(user.value=='123'&&pwd.value=='123'){if(rem.checked){localStorage.setItem('user',user.value)localStorage.setItem('pwd',pwd.value)}else{localStorage.removeItem('user')