課堂筆記web apis五天

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

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

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

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

document.addEventListener('click',

function

()

{

console.log(4)

})

console.log(2)

setTimeout(function

()

{

console.log(3)

},

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

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

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

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

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

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

1.4location對象

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

1.4location對象

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

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

//

檢測

userAgent（瀏覽器信息）

!(function

()

{

const

userAgent

=

navigator.userAgent

//

驗證是否為Android或iPhone

const

android

=

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

const

iphone

=

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

//

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

if

(android

||

iphone)

{

location.href

=

''

}

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

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

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

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

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

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

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

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

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

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

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

作用：join()

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

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

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

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

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

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

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