Javascript學習總結 - JS基礎系列三

zlyBear 發布于2019-08-19 17:07 / 489人閱讀

摘要：案例每隔毫秒調用函數并顯示時間。當點擊按鈕時，停止時間代碼如下計時器每隔毫秒調用函數，并將返回值賦值給計時器計時器，在載入后延遲指定時間后去執行一次表達式僅執行一次。該值標識要取消的延遲執行代碼塊。

簡述

本系列將持續更新Javascript基礎部分的知識，誰都想掌握高端大氣的技術，但是我覺得沒有一個扎實的基礎，我認為一切高階技術對我來講都是過眼云煙，要成為一名及格的前端工程師，必須把基礎打扎實了。我也想展翅高飛，但前提我必須練就一雙會飛的翅膀。

JavaScript（Windows）部分 了解 Javascript & Windows 對象

window對象是 BOM 的核心，window對象指當前的瀏覽器窗口。

BOM 是什么？ BOM是Browser Object Model的縮寫，簡稱瀏覽器對象模型。

BOM 提供了獨立于內容而與瀏覽器窗口進行交互的對象。

由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對象是window。

BOM 由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性。

下圖是windows的一些js操作方法：

JavaScript 計時器（setTimeout）

在JavaScript中，我們可以在設定的時間間隔之后來執行代碼，而不是在函數被調用后立即執行。

js計時器的類型：
1.一次性計時器：僅在指定的延遲時間之后觸發一次。
2.間隔性觸發計時器：每隔一定的時間間隔就觸發一次。

下面著重介紹這些一些js計時器的使用技巧：

計時器setInterval()

在執行時,從載入頁面后每隔指定的時間執行一次代碼。

語法:

參數說明：

代碼：要調用的函數或要執行的代碼串。

交互時間：周期性執行或調用表達式之間的時間間隔，以毫秒計（1s=1000ms）。

返回值:
一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執行的值。

調用函數格式(假設有一個clock()函數):

【案例】我們設置一個計時器，每隔100毫秒調用clock()函數，并將時間顯示出來，代碼如下:

上圖是實現動態計時器的案例，可以參考參考。

取消計時器clearInterval()

clearInterval() 方法可取消由 setInterval() 設置的交互時間。

語法：

參數說明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

【案例】每隔 100 毫秒調用 clock() 函數,并顯示時間。當點擊按鈕時，停止時間,代碼如下:

計時器setTimeout()

setTimeout()計時器，在載入后延遲指定時間后,去執行一次表達式,僅執行一次。

語法:

參數說明：

代碼：要調用的函數或要執行的代碼串。

延時時間：在執行代碼前需等待的時間，以毫秒為單位（1s=1000ms)。

【案例】當我們打開網頁3秒后，在彈出一個提示框，代碼如下:

【案例】當按鈕start被點擊時，setTimeout()調用函數，在5秒后彈出一個提示框：

要創建一個運行于無窮循環中的計數器，我們需要編寫一個函數來調用其自身。

【案例】在下面的代碼，當按鈕被點擊后，輸入域便從0開始計數：

取消計時器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止計時器。

語法:

參數說明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行代碼塊。

【案例】下面的例子和上節的無窮循環的例子相似。唯一不同是，現在我們添加了一個 "Stop" 按鈕來停止這個計數器：

上圖實現：JS利用計時器開啟或關閉自動計時器。

其它Window方法

這里其實就是講一些記住頁面操作的方法，比如跳轉返回，histor對象等等

History 對象

history對象記錄了用戶曾經瀏覽過的頁面(URL)，并可以實現瀏覽器前進與后退相似導航的功能。

注意：history對象是從窗口被打開的那一刻開始記錄的，每個瀏覽器窗口、每個標簽頁乃至每個框架，都有自己的history對象與特定的window對象關聯。
語法：

注意：window可以省略。

History 對象屬性：

1.length：返回瀏覽器歷史列表中的url數量。

History 對象方法：

1.back()：加載history列表中的前一個url。


2.forward()：加載history列表中的下一個url。


3.go()：去到history列表中的一個具體的url。

使用length屬性，當前窗口的瀏覽歷史總長度，代碼如下：

Location對象

location用于獲取或設置窗體的URL，并且可以用于解析URL。

語法：

上圖為：location對象屬性圖示。

根據上圖可以看到一些location對象的屬性：

1.hash：設置或返回從井號（#）開始的URL錨點。
2.host：設置或返回當前主機名或者當前URL的端口號。
3.hostname：設置或返回當前URL的主機名。
4.href：設置或返回完整的URL。
5.pathname：設置或返回當前URL的路徑部分。
6.port：設置或返回當前URL的端口號。
7.protocol：設置或返回當前URL的協議。
8.search：設置或返回當前URL從問號（？）開始的URL部分（查詢部分）

location的一些對象方法如下：

1.assign()：加載新文檔。
2.reload()：重新加載當前文檔。
3.replace()：用新文檔代替舊文檔。

Navigator對象

Navigator 對象包含有關瀏覽器的信息，通常用于檢測瀏覽器與操作系統的版本。

上圖為Navigate的對象屬性:
查看瀏覽器的名稱和版本，代碼如下：

screen對象

screen對象用于獲取用戶的屏幕信息。

語法：

上圖為：screen的對象屬性

window.screen 對象包含有關用戶屏幕的信息。

screen.height 返回屏幕分辨率的高

screen.width 返回屏幕分辨率的寬

注意:

1.window.screen 對象的單位以像素計。
2.window.screen 對象在編寫時可以不使用 window 這個前綴。

【案例】我們來獲取屏幕的高和寬，代碼如下:

屏幕可用高和寬度

screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，比如任務欄。

screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，比如任務欄。

注意：不同系統的任務欄默認高度不一樣，及任務欄的位置可在屏幕上下左右任何位置，所以有可能可用寬度和高度不一樣。

【案例】我們來獲取屏幕的可用高和寬度，代碼如下：

注意:根據屏幕的不同顯示值不同。

總結

對于菜鳥來講可以這么理解：Window 對象表示瀏覽器中打開的窗口。

瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器（window）“對話”。

全局的window對象：JavaScript中的任何一個全局函數或變量都是window的屬性。
全局變量是window對象的屬性。
全局函數是window對象的方法。
甚至HTML-DOM的document也是window對象的屬性之一。

Window 尺寸：有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。

對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度

對于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth

document.body.clientHeight
document.body.clientWidth

// window與self對象：self對象與window對象完全相同，self通常用于確認就是在當前的窗體內。

注意：window、self、window.self三者是等價的。

雖然總結有點亂，但是還是值得再看一遍的，我是太困了，總結亂寫了。。。

GPU云服務器云服務器 javascript學習總結 javascript基礎學習 javascript基礎學習博客 javascript零基礎學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78221.html

前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
JS框架 - 收藏集 - 掘金

摘要：現在回過頭總結，才又進一步的揭開了閉包的一層后臺管理系統解決方案前端掘金基于系列的后臺管理系統解決方案。什么是繼承大多數人使用繼承不外乎是為了獲得基于的單頁應用項目模板前端掘金小貼士本項目已升級至。關于js、jq零碎知識點 - 掘金寫在前面：本文都是我目前學到的一些比較零碎的知識點，也是相對偏一點的知識，這是第二篇。前后可能沒有太大的相關性，需要的朋友可以過來參考下，喜歡的可以點個...

wenyiweb 2019-08-20 16:27 評論0 收藏0
JavaScript系列（四） - 收藏集 - 掘金

摘要：函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此，...

cfanr 2019-08-20 16:33 評論0 收藏0
SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...

caspar 2019-08-15 13:33 評論0 收藏0
SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...

nihao 2019-08-21 18:39 評論0 收藏0