課堂筆記web apis五天

WebAPIs第五天Bom操作依托BOM對(duì)象實(shí)現(xiàn)對(duì)歷史、地址、瀏覽器信息的操作或獲取具備利用本地存儲(chǔ)實(shí)現(xiàn)學(xué)生信息表案例的能力Window對(duì)象本地存儲(chǔ)綜合案例Window對(duì)象BOM(瀏覽器對(duì)象模型)定時(shí)器-延時(shí)函數(shù)JS執(zhí)行機(jī)制location對(duì)象navigator對(duì)象histroy對(duì)象01目標(biāo)：學(xué)習(xí)window對(duì)象的常見屬性，知道各個(gè)BOM對(duì)象的功能含義1.1BOMBOM(BrowserObjectModel)是瀏覽器對(duì)象模型window對(duì)象是一個(gè)全局對(duì)象，也可以說是JavaScript中的頂級(jí)對(duì)象像document、alert()、console.log()這些都是window的屬性，基本BOM的屬性和方法都是window的。所有通過var定義在全局作用域中的變量、函數(shù)都會(huì)變成window對(duì)象的屬性和方法window對(duì)象下的屬性和方法調(diào)用的時(shí)候可以省略windowWindow對(duì)象BOM(瀏覽器對(duì)象模型)定時(shí)器-延時(shí)函數(shù)JS執(zhí)行機(jī)制location對(duì)象navigator對(duì)象histroy對(duì)象01目標(biāo)：學(xué)習(xí)window對(duì)象的常見屬性，知道各個(gè)BOM對(duì)象的功能含義1.2定時(shí)器-延時(shí)函數(shù)JavaScript內(nèi)置的一個(gè)用來讓代碼延遲執(zhí)行的函數(shù)，叫setTimeout語法：setTimeout僅僅只執(zhí)行一次，所以可以理解為就是把一段代碼延遲執(zhí)行,平時(shí)省略window清除延時(shí)函數(shù)：注意點(diǎn)延時(shí)器需要等待,所以后面的代碼先執(zhí)行每一次調(diào)用延時(shí)器都會(huì)產(chǎn)生一個(gè)新的延時(shí)器1.2定時(shí)器-延時(shí)函數(shù)兩種定時(shí)器對(duì)比：執(zhí)行的次數(shù)延時(shí)函數(shù):執(zhí)行一次間歇函數(shù):每隔一段時(shí)間就執(zhí)行一次,除非手動(dòng)清除5秒鐘之后消失的廣告需求：5秒鐘之后，廣告自動(dòng)消失分析：①：設(shè)置延時(shí)函數(shù)②：隱藏元素Window對(duì)象BOM(瀏覽器對(duì)象模型)定時(shí)器-延時(shí)函數(shù)JS執(zhí)行機(jī)制location對(duì)象navigator對(duì)象histroy對(duì)象01目標(biāo)：學(xué)習(xí)window對(duì)象的常見屬性，知道各個(gè)BOM對(duì)象的功能含義經(jīng)典面試題JavaScript語言的一大特點(diǎn)就是單線程，也就是說，同一個(gè)時(shí)間只能做一件事。這是因?yàn)镴avascript這門腳本語言誕生的使命所致——JavaScript是為處理頁面中用戶的交互，以及操作DOM而誕生的。比如我們對(duì)某個(gè)DOM元素進(jìn)行添加和刪除操作，不能同時(shí)進(jìn)行。應(yīng)該先進(jìn)行添加，之后再刪除。單線程就意味著，所有任務(wù)需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，才會(huì)執(zhí)行后一個(gè)任務(wù)。這樣所導(dǎo)致的問題是：如果JS執(zhí)行的時(shí)間過長(zhǎng)，這樣就會(huì)造成頁面的渲染不連貫，導(dǎo)致頁面渲染加載阻塞的感覺。1.3JS執(zhí)行機(jī)制為了解決這個(gè)問題，利用多核CPU的計(jì)算能力，HTML5提出WebWorker標(biāo)準(zhǔn)，允許JavaScript腳本創(chuàng)建多個(gè)線程。于是，JS中出現(xiàn)了同步和異步。同步前一個(gè)任務(wù)結(jié)束后再執(zhí)行后一個(gè)任務(wù)，程序的執(zhí)行順序與任務(wù)的排列順序是一致的、同步的。比如做飯的同步做法：我們要燒水煮飯，等水開了（10分鐘之后），再去切菜，炒菜。異步你在做一件事情時(shí)，因?yàn)檫@件事情會(huì)花費(fèi)很長(zhǎng)時(shí)間，在做這件事的同時(shí)，你還可以去處理其他事情。比如做飯的異步做法，我們?cè)跓耐瑫r(shí)，利用這10分鐘，去切菜，炒菜。他們的本質(zhì)區(qū)別：這條流水線上各個(gè)流程的執(zhí)行順序不同。1.3JS執(zhí)行機(jī)制同步任務(wù)同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧。異步任務(wù)JS的異步是通過回調(diào)函數(shù)實(shí)現(xiàn)的。一般而言，異步任務(wù)有以下三種類型:1、普通事件，如click、resize等2、資源加載，如load、error等3、定時(shí)器，包括setInterval、setTimeout等異步任務(wù)相關(guān)添加到任務(wù)隊(duì)列中（任務(wù)隊(duì)列也稱為消息隊(duì)列）。

console.log(1)console.log(2)setTimeout(fn,0)執(zhí)行棧fn任務(wù)隊(duì)列1.3JS執(zhí)行機(jī)制1.先執(zhí)行執(zhí)行棧中的同步任務(wù)。2.異步任務(wù)放入任務(wù)隊(duì)列中。3.一旦執(zhí)行棧中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會(huì)按次序讀取任務(wù)隊(duì)列中的異步任務(wù)，于是被讀取的異步任務(wù)結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧，開始執(zhí)行。事件循環(huán)主車道應(yīng)急車道

console.log(1)console.log(2)執(zhí)行棧setTimeout(fn,0)任務(wù)隊(duì)列1.3JS執(zhí)行機(jī)制由于主線程不斷的重復(fù)獲得任務(wù)、執(zhí)行任務(wù)、再獲取任務(wù)、再執(zhí)行，所以這種機(jī)制被稱為事件循環(huán)（

eventloop）。1.3JS執(zhí)行機(jī)制console.log(1)

document.addEventListener('click',

function

()

{

console.log(4)

})

console.log(2)

setTimeout(function

()

{

console.log(3)

},

3000)Window對(duì)象BOM(瀏覽器對(duì)象模型)定時(shí)器-延時(shí)函數(shù)JS執(zhí)行機(jī)制location對(duì)象navigator對(duì)象histroy對(duì)象01目標(biāo)：學(xué)習(xí)window對(duì)象的常見屬性，知道各個(gè)BOM對(duì)象的功能含義1.4location對(duì)象

location的數(shù)據(jù)類型是對(duì)象，它拆分并保存了URL地址的各個(gè)組成部分常用屬性和方法：href屬性獲取完整的URL地址，對(duì)其賦值時(shí)用于地址的跳轉(zhuǎn)search屬性獲取地址中攜帶的參數(shù)，符號(hào)？后面部分hash

屬性獲取地址中的啥希值，符號(hào)#后面部分reload方法用來刷新當(dāng)前頁面，傳入?yún)?shù)true時(shí)表示強(qiáng)制刷新

一、Window對(duì)象location的數(shù)據(jù)類型是對(duì)象，它拆分并保存了URL地址的各個(gè)組成部分常用屬性和方法：href屬性獲取完整的URL地址，對(duì)其賦值時(shí)用于地址的跳轉(zhuǎn)

5秒鐘之后跳轉(zhuǎn)的頁面需求：用戶點(diǎn)擊可以跳轉(zhuǎn)，如果不點(diǎn)擊，則5秒之后自動(dòng)跳轉(zhuǎn)，要求里面有秒數(shù)倒計(jì)時(shí)分析：①：目標(biāo)元素是鏈接②：利用定時(shí)器設(shè)置數(shù)字倒計(jì)時(shí)③：時(shí)間到了，自動(dòng)跳轉(zhuǎn)到新的頁面1.4location對(duì)象

location的數(shù)據(jù)類型是對(duì)象，它拆分并保存了URL地址的各個(gè)組成部分常用屬性和方法：search屬性獲取地址中攜帶的參數(shù)，符號(hào)？后面部分

1.4location對(duì)象

location的數(shù)據(jù)類型是對(duì)象，它拆分并保存了URL地址的各個(gè)組成部分常用屬性和方法：hash屬性獲取地址中的哈希值，符號(hào)#后面部分后期vue路由的鋪墊，經(jīng)常用于不刷新頁面，顯示不同頁面，比如網(wǎng)易云音樂

1.4location對(duì)象

location的數(shù)據(jù)類型是對(duì)象，它拆分并保存了URL地址的各個(gè)組成部分常用屬性和方法：reload方法用來刷新當(dāng)前頁面，傳入?yún)?shù)true時(shí)表示強(qiáng)制刷新location.href

屬性獲取完整的URL地址，對(duì)其賦值時(shí)用于地址的跳轉(zhuǎn)search屬性獲取地址中攜帶的參數(shù)，符號(hào)？后面部分hash屬性獲取地址中的啥希值，符號(hào)#后面部分reload方法用來刷新當(dāng)前頁面，傳入?yún)?shù)true時(shí)表示強(qiáng)制刷新Window對(duì)象BOM(瀏覽器對(duì)象模型)定時(shí)器-延時(shí)函數(shù)JS執(zhí)行機(jī)制location對(duì)象navigator對(duì)象histroy對(duì)象01目標(biāo)：學(xué)習(xí)window對(duì)象的常見屬性，知道各個(gè)BOM對(duì)象的功能含義1.5navigator對(duì)象navigator的數(shù)據(jù)類型是對(duì)象，該對(duì)象下記錄了瀏覽器自身的相關(guān)信息常用屬性和方法：通過userAgent檢測(cè)瀏覽器的版本及平臺(tái)

//

檢測(cè)

userAgent（瀏覽器信息）

!(function

()

{

const

userAgent

=

navigator.userAgent

//

驗(yàn)證是否為Android或iPhone

const

android

=

userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)

const

iphone

=

userAgent.match(/(iPhone\sOS)\s([\d_]+)/)

//

如果是Android或iPhone，則跳轉(zhuǎn)至移動(dòng)站點(diǎn)

if

(android

||

iphone)

{

location.href

=

''

}

})()Window對(duì)象BOM(瀏覽器對(duì)象模型)定時(shí)器-延時(shí)函數(shù)JS執(zhí)行機(jī)制location對(duì)象navigator對(duì)象histroy對(duì)象01目標(biāo)：學(xué)習(xí)window對(duì)象的常見屬性，知道各個(gè)BOM對(duì)象的功能含義1.6histroy對(duì)象history的數(shù)據(jù)類型是對(duì)象，主要管理歷史記錄，該對(duì)象與瀏覽器地址欄的操作相對(duì)應(yīng)，如前進(jìn)、后退、歷史記錄等常用屬性和方法：

history對(duì)象一般在實(shí)際開發(fā)中比較少用，但是會(huì)在一些OA辦公系統(tǒng)中見到。Window對(duì)象本地存儲(chǔ)綜合案例本地存儲(chǔ)本地存儲(chǔ)介紹本地存儲(chǔ)分類存儲(chǔ)復(fù)雜數(shù)據(jù)類型02目標(biāo)：學(xué)習(xí)window對(duì)象的常見屬性，知道各個(gè)BOM對(duì)象的功能含義2.1本地存儲(chǔ)介紹以前我們頁面寫的數(shù)據(jù)一刷新頁面就沒有了，是不是？隨著互聯(lián)網(wǎng)的快速發(fā)展，基于網(wǎng)頁的應(yīng)用越來越普遍，同時(shí)也變的越來越復(fù)雜，為了滿足各種各樣的需求，會(huì)經(jīng)常性在本地存儲(chǔ)大量的數(shù)據(jù)，HTML5規(guī)范提出了相關(guān)解決方案。1、數(shù)據(jù)存儲(chǔ)在用戶瀏覽器中2、設(shè)置、讀取方便、甚至頁面刷新不丟失數(shù)據(jù)3、容量較大，sessionStorage和localStorage約5M左右常見的使用場(chǎng)景：頁面刷新數(shù)據(jù)不丟失本地存儲(chǔ)本地存儲(chǔ)介紹本地存儲(chǔ)分類存儲(chǔ)復(fù)雜數(shù)據(jù)類型022.2本地存儲(chǔ)分類-localStorage目標(biāo)：能夠使用localStorage把數(shù)據(jù)存儲(chǔ)的瀏覽器中作用:可以將數(shù)據(jù)永久存儲(chǔ)在本地(用戶的電腦),除非手動(dòng)刪除，否則關(guān)閉頁面也會(huì)存在特性：可以多窗口（頁面）共享（同一瀏覽器可以共享）以鍵值對(duì)的形式存儲(chǔ)使用2.2本地存儲(chǔ)分類-localStorage語法:localStorage.setItem(key,value)存儲(chǔ)數(shù)據(jù)：localStorage.getItem(key)獲取數(shù)據(jù)：localStorage.removeItem(key)刪除數(shù)據(jù)：2.2本地存儲(chǔ)分類-localStorage瀏覽器查看本地?cái)?shù)據(jù):2.2本地存儲(chǔ)分類-sessionStorage特性：生命周期為關(guān)閉瀏覽器窗口在同一個(gè)窗口(頁面)下數(shù)據(jù)可以共享以鍵值對(duì)的形式存儲(chǔ)使用用法跟localStorage基本相同localStorage作用是什么？

可以將數(shù)據(jù)永久存儲(chǔ)在本地(用戶的電腦),除非手動(dòng)刪除，否則關(guān)閉頁面也會(huì)存在localStorage存儲(chǔ)，獲取，刪除的語法是什么？

存儲(chǔ)：localStorage.setItem(key,value)獲取：localStorage.getItem(key)刪除：localStorage.removeItem(key)本地存儲(chǔ)本地存儲(chǔ)介紹本地存儲(chǔ)分類存儲(chǔ)復(fù)雜數(shù)據(jù)類型022.3存儲(chǔ)復(fù)雜數(shù)據(jù)類型目標(biāo)：能夠存儲(chǔ)復(fù)雜數(shù)據(jù)類型以及取出數(shù)據(jù)本地只能存儲(chǔ)字符串,無法存儲(chǔ)復(fù)雜數(shù)據(jù)類型.2.3存儲(chǔ)復(fù)雜數(shù)據(jù)類型解決：需要將復(fù)雜數(shù)據(jù)類型轉(zhuǎn)換成JSON字符串,在存儲(chǔ)到本地語法：JSON.stringify(復(fù)雜數(shù)據(jù)類型)將復(fù)雜數(shù)據(jù)轉(zhuǎn)換成JSON字符串存儲(chǔ)本地存儲(chǔ)中2.3存儲(chǔ)復(fù)雜數(shù)據(jù)類型問題：因?yàn)楸镜卮鎯?chǔ)里面取出來的是字符串，不是對(duì)象，無法直接使用字符串2.3存儲(chǔ)復(fù)雜數(shù)據(jù)類型解決：把取出來的字符串轉(zhuǎn)換為對(duì)象語法：JSON.parse(JSON字符串)將JSON字符串轉(zhuǎn)換成對(duì)象取出時(shí)候使用Window對(duì)象本地存儲(chǔ)綜合案例學(xué)生就業(yè)信息表需求：錄入學(xué)生信息，頁面刷新數(shù)據(jù)不丟失學(xué)生就業(yè)信息表需求：錄入學(xué)生信息，頁面刷新數(shù)據(jù)不丟失模塊分析：①：新增模塊，輸入學(xué)生信息，數(shù)據(jù)會(huì)存儲(chǔ)到本地存儲(chǔ)中②：渲染模塊，數(shù)據(jù)會(huì)渲染到頁面中③：刪除模塊，點(diǎn)擊刪除按鈕，會(huì)刪除對(duì)應(yīng)的數(shù)據(jù)學(xué)生就業(yè)信息表需求：錄入學(xué)生信息，頁面刷新數(shù)據(jù)不丟失思路分析：①：因?yàn)轫撁嫠⑿虏粊G失數(shù)據(jù)，所以可能存在已有數(shù)據(jù)，所以第一步，我們先找本地存儲(chǔ)里面查找是否有數(shù)據(jù)，如果有數(shù)據(jù)先進(jìn)行渲染頁面，如果沒有數(shù)據(jù)，我們放一個(gè)空數(shù)組，用來存放數(shù)據(jù)②：渲染模塊，數(shù)據(jù)會(huì)渲染到頁面中③：新增模塊，輸入學(xué)生信息，數(shù)據(jù)會(huì)存儲(chǔ)到本地存儲(chǔ)中，然后渲染頁面④：刪除模塊，點(diǎn)擊刪除按鈕，會(huì)刪除對(duì)應(yīng)的數(shù)據(jù)，然后渲染頁面學(xué)生就業(yè)信息表步驟：需求①：讀取本地存儲(chǔ)數(shù)據(jù)

如果本地存儲(chǔ)有數(shù)據(jù)，則返回JSON.parse()之后的對(duì)象

如果本地存儲(chǔ)沒有數(shù)據(jù)，則聲明一個(gè)空的數(shù)組

學(xué)生就業(yè)信息表步驟：需求②：渲染模塊(1)遍歷數(shù)組，td里面填寫對(duì)應(yīng)td數(shù)據(jù)，并追加給tbody

(2)盡量減少dom操作，所以此處我們不在使用創(chuàng)建節(jié)點(diǎn)，追加節(jié)點(diǎn)方式（后面vue的做法）數(shù)組中map方法

迭代數(shù)組作用：map

迭代數(shù)組語法：數(shù)組中map方法

迭代數(shù)組使用場(chǎng)景：map可以處理數(shù)據(jù)，并且返回新的數(shù)組數(shù)組中join方法

作用：join()

方法用于把數(shù)組中的所有元素轉(zhuǎn)換一個(gè)字符串語法：參數(shù)：數(shù)組元素是通過參數(shù)里面指定的分隔符進(jìn)行分隔的學(xué)生就業(yè)信息表步驟：需求②：渲染模塊(1)遍歷數(shù)組，td里面填寫對(duì)應(yīng)td數(shù)據(jù)，并追加給tbody

(2)盡量減少dom操作，所以此處我們不在使用創(chuàng)建節(jié)點(diǎn)，追加節(jié)點(diǎn)方式（后面vue的做法）(3)我們使用map方法遍歷數(shù)組，直接返回整個(gè)tr，里面包含所有修改后的tr標(biāo)簽，里面更換數(shù)據(jù)(4)但是map方法返回的是一個(gè)修改后的數(shù)組，怎么辦？

所以我們通過join方法轉(zhuǎn)換為字符串(5)把返回的結(jié)果，通過innerHTML賦值給tbody數(shù)組中map方法

迭代數(shù)組使用場(chǎng)景：map可以處理數(shù)據(jù)，并且返回新的數(shù)組[,]join(‘’)字符串追加給tbody數(shù)組中map方法

迭代數(shù)組使用場(chǎng)景：map可以處理數(shù)據(jù)，并且返回新的數(shù)組map也稱為映射。映射是個(gè)術(shù)語，指兩個(gè)元素的集之間元素相互“對(duì)應(yīng)”的關(guān)系學(xué)生就業(yè)信息表步驟：需求③：錄入模塊(1)事件是提交事件，同樣阻止默認(rèn)提交事件(2)非空判斷。

-獲取所有需要填寫的表單，他們共同特點(diǎn)都有name屬性

-遍歷這些表單，如果有一個(gè)值為空，則return返回提示輸入為空中斷程序?qū)W生就業(yè)信息表步驟：需求③：錄入模塊(3)創(chuàng)建新的對(duì)象，里面存儲(chǔ)表單獲取過來的數(shù)據(jù)，格式如右圖-創(chuàng)建一個(gè)空的對(duì)象