資訊專欄INFORMATION COLUMN
摘要：案例每隔毫秒調(diào)用函數(shù)并顯示時間。當(dāng)點擊按鈕時，停止時間代碼如下計時器每隔毫秒調(diào)用函數(shù)，并將返回值賦值給計時器計時器，在載入后延遲指定時間后去執(zhí)行一次表達式僅執(zhí)行一次。該值標(biāo)識要取消的延遲執(zhí)行代碼塊。
簡述
本系列將持續(xù)更新Javascript基礎(chǔ)部分的知識，誰都想掌握高端大氣的技術(shù)，但是我覺得沒有一個扎實的基礎(chǔ)，我認為一切高階技術(shù)對我來講都是過眼云煙，要成為一名及格的前端工程師，必須把基礎(chǔ)打扎實了。我也想展翅高飛，但前提我必須練就一雙會飛的翅膀。
JavaScript（Windows）部分 了解 Javascript & Windows 對象window對象是 BOM 的核心，window對象指當(dāng)前的瀏覽器窗口。
BOM 是什么？ BOM是Browser Object Model的縮寫，簡稱瀏覽器對象模型。
BOM 提供了獨立于內(nèi)容而與瀏覽器窗口進行交互的對象。
由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對象是window。
BOM 由一系列相關(guān)的對象構(gòu)成，并且每個對象都提供了很多方法與屬性。
下圖是windows的一些js操作方法：
在JavaScript中，我們可以在設(shè)定的時間間隔之后來執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行。
js計時器的類型：
1.一次性計時器：僅在指定的延遲時間之后觸發(fā)一次。
2.間隔性觸發(fā)計時器：每隔一定的時間間隔就觸發(fā)一次。
下面著重介紹這些一些js計時器的使用技巧：
計時器setInterval()在執(zhí)行時,從載入頁面后每隔指定的時間執(zhí)行一次代碼。
語法:
參數(shù)說明：
代碼：要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
交互時間：周期性執(zhí)行或調(diào)用表達式之間的時間間隔，以毫秒計（1s=1000ms）。
返回值:
一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執(zhí)行的值。
調(diào)用函數(shù)格式(假設(shè)有一個clock()函數(shù)):
【案例】我們設(shè)置一個計時器，每隔100毫秒調(diào)用clock()函數(shù)，并將時間顯示出來，代碼如下:
計時器
上圖是實現(xiàn)動態(tài)計時器的案例，可以參考參考。
取消計時器clearInterval()clearInterval() 方法可取消由 setInterval() 設(shè)置的交互時間。
語法：
參數(shù)說明:
id_of_setInterval：由 setInterval() 返回的 ID 值。
【案例】每隔 100 毫秒調(diào)用 clock() 函數(shù),并顯示時間。當(dāng)點擊按鈕時，停止時間,代碼如下:
計時器
計時器setTimeout()
setTimeout()計時器，在載入后延遲指定時間后,去執(zhí)行一次表達式,僅執(zhí)行一次。
語法:
參數(shù)說明：
代碼：要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
延時時間：在執(zhí)行代碼前需等待的時間，以毫秒為單位（1s=1000ms)。
【案例】當(dāng)我們打開網(wǎng)頁3秒后，在彈出一個提示框，代碼如下:
【案例】當(dāng)按鈕start被點擊時，setTimeout()調(diào)用函數(shù)，在5秒后彈出一個提示框：
要創(chuàng)建一個運行于無窮循環(huán)中的計數(shù)器，我們需要編寫一個函數(shù)來調(diào)用其自身。
【案例】在下面的代碼，當(dāng)按鈕被點擊后，輸入域便從0開始計數(shù)：
取消計時器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止計時器。
語法:
參數(shù)說明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標(biāo)識要取消的延遲執(zhí)行代碼塊。
【案例】下面的例子和上節(jié)的無窮循環(huán)的例子相似。唯一不同是，現(xiàn)在我們添加了一個 "Stop" 按鈕來停止這個計數(shù)器：
上圖實現(xiàn)：JS利用計時器開啟或關(guān)閉自動計時器。
其它Window方法這里其實就是講一些記住頁面操作的方法，比如跳轉(zhuǎn)返回，histor對象等等
History 對象history對象記錄了用戶曾經(jīng)瀏覽過的頁面(URL)，并可以實現(xiàn)瀏覽器前進與后退相似導(dǎo)航的功能。
注意：history對象是從窗口被打開的那一刻開始記錄的，每個瀏覽器窗口、每個標(biāo)簽頁乃至每個框架，都有自己的history對象與特定的window對象關(guān)聯(lián)。
語法：
注意：window可以省略。
History 對象屬性：
1.length：返回瀏覽器歷史列表中的url數(shù)量。
History 對象方法：
1.back()：加載history列表中的前一個url。 2.forward()：加載history列表中的下一個url。 3.go()：去到history列表中的一個具體的url。
使用length屬性，當(dāng)前窗口的瀏覽歷史總長度，代碼如下：
Location對象
location用于獲取或設(shè)置窗體的URL，并且可以用于解析URL。
語法：
上圖為：location對象屬性圖示。
根據(jù)上圖可以看到一些location對象的屬性：
1.hash：設(shè)置或返回從井號（#）開始的URL錨點。 2.host：設(shè)置或返回當(dāng)前主機名或者當(dāng)前URL的端口號。 3.hostname：設(shè)置或返回當(dāng)前URL的主機名。 4.href：設(shè)置或返回完整的URL。 5.pathname：設(shè)置或返回當(dāng)前URL的路徑部分。 6.port：設(shè)置或返回當(dāng)前URL的端口號。 7.protocol：設(shè)置或返回當(dāng)前URL的協(xié)議。 8.search：設(shè)置或返回當(dāng)前URL從問號（？）開始的URL部分（查詢部分）
location的一些對象方法如下：
1.assign()：加載新文檔。 2.reload()：重新加載當(dāng)前文檔。 3.replace()：用新文檔代替舊文檔。Navigator對象
Navigator 對象包含有關(guān)瀏覽器的信息，通常用于檢測瀏覽器與操作系統(tǒng)的版本。
上圖為Navigate的對象屬性:
查看瀏覽器的名稱和版本，代碼如下：
screen對象
screen對象用于獲取用戶的屏幕信息。
語法：
上圖為：screen的對象屬性
window.screen 對象包含有關(guān)用戶屏幕的信息。
screen.height 返回屏幕分辨率的高
screen.width 返回屏幕分辨率的寬
注意:
1.window.screen 對象的單位以像素計。
2.window.screen 對象在編寫時可以不使用 window 這個前綴。
【案例】我們來獲取屏幕的高和寬，代碼如下:
屏幕可用高和寬度
screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，比如任務(wù)欄。
screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，比如任務(wù)欄。
注意：不同系統(tǒng)的任務(wù)欄默認高度不一樣，及任務(wù)欄的位置可在屏幕上下左右任何位置，所以有可能可用寬度和高度不一樣。
【案例】我們來獲取屏幕的可用高和寬度，代碼如下：
注意:根據(jù)屏幕的不同顯示值不同。
總結(jié)對于菜鳥來講可以這么理解：Window 對象表示瀏覽器中打開的窗口。
瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器（window）“對話”。
全局的window對象：JavaScript中的任何一個全局函數(shù)或變量都是window的屬性。
全局變量是window對象的屬性。
全局函數(shù)是window對象的方法。
甚至HTML-DOM的document也是window對象的屬性之一。
Window 尺寸：有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。
對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 瀏覽器窗口的內(nèi)部高度
window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
對于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
document.body.clientHeight
document.body.clientWidth
// window與self對象：self對象與window對象完全相同，self通常用于確認就是在當(dāng)前的窗體內(nèi)。
注意：window、self、window.self三者是等價的。
雖然總結(jié)有點亂，但是還是值得再看一遍的，我是太困了，總結(jié)亂寫了。。。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78221.html
摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...
摘要：現(xiàn)在回過頭總結(jié)，才又進一步的揭開了閉包的一層后臺管理系統(tǒng)解決方案前端掘金基于系列的后臺管理系統(tǒng)解決方案。什么是繼承大多數(shù)人使用繼承不外乎是為了獲得基于的單頁應(yīng)用項目模板前端掘金小貼士本項目已升級至。 關(guān)于js、jq零碎知識點 - 掘金寫在前面： 本文都是我目前學(xué)到的一些比較零碎的知識點，也是相對偏一點的知識，這是第二篇。前后可能沒有太大的相關(guān)性，需要的朋友可以過來參考下，喜歡的可以點個...
摘要：函數(shù)式編程前端掘金引言面向?qū)ο缶幊桃恢币詠矶际侵械闹鲗?dǎo)范式。函數(shù)式編程是一種強調(diào)減少對程序外部狀態(tài)產(chǎn)生改變的方式。 JavaScript 函數(shù)式編程 - 前端 - 掘金引言 面向?qū)ο缶幊桃恢币詠矶际荍avaScript中的主導(dǎo)范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數(shù)式編程越來越多得受到開發(fā)者的青睞。函數(shù)式編程是一種強調(diào)減少對程序外部狀態(tài)產(chǎn)生改變的方式。因此，...
摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數(shù)式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了，總結(jié)過去的 2017，相信小伙們一定有很多收獲...
摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數(shù)式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了，總結(jié)過去的 2017，相信小伙們一定有很多收獲...
閱讀 2553·2021-10-09 09:44
閱讀 648·2019-08-30 15:44
閱讀 3007·2019-08-29 18:46
閱讀 1144·2019-08-29 18:38
閱讀 566·2019-08-26 10:44
閱讀 2443·2019-08-23 16:07
閱讀 1102·2019-08-23 15:38
閱讀 4129·2019-08-23 14:02
