基礎鞏固：JavaScript基礎總結(基本概念篇)

時間 2019-12-08

標籤基礎鞏固 javascript 總結基本概念欄目 JavaScript 简体版

原文原文鏈接

基礎鞏固：JavaScript基礎總結

使用 JavaScript已經好幾年了，因爲工做主要是作服務端開發，在工做中逐漸發現 JavaScript的使用範圍原來越普遍。在以前的幾個項目中，公司配備了一個設計和一個前端，前端人員只會切圖和排版，稍微複雜一點的功能仍是的咱們本身來，畢竟是要和後端交互，因此這個仍是邁步過去的關口。以前只是在每次須要使用 JavaScript的時候去粗略的學習了一下，基本能完成全部的工做需求。不會的地方在 github上面找一些案例修改一下也能完美的運行。
今天， JavaScript已經到了不起不學的地步，從前用戶交互到UI框架，以及今天很是流行的 VUE, jQuery， React， nodejs， H5遊戲， APP等等， JavaScript的身影已經無處不在，因此咱們有必要抽時間來系統的梳理一遍。

如何學習JavaScript？

對於已經掌握一兩門開發語言的同窗都知道，學習任何一門語言不外乎學習這幾個大類：javascript

語言自己的原理，語法，數據類型，數據的操做，控制流程，邏輯判斷，使用技巧
功能函數，系統類庫，擴展類庫
框架，設計模式，不一樣宿主環境編程

咱們根據上面的學習思路來整理和總結JavaScript從最基礎到類庫框架的使用和開發，以及一些該語言的編程思路，算法和技巧。在這裏咱們必定要注意一點，基礎知識很關鍵。在這個浮躁的時代，人人都想着快速掙錢。不少人都是靜不下心來進行一個系統的學習，認爲我用到哪裏就去看哪裏。雖然JavaScript入門是很是容易，後端的同窗花一天時間過一遍就能開始寫出一些簡單的功能。可是想要精通非數年不可及也。你們必定要相信一點，在前端幾百萬從業人羣裏面，真正技術拿得出手的真的不超過15%。我帶過不少徒弟也招過新人入職，在中國的就業競爭壓力下，人人都想着速成，看到某個行業火熱，就想一股腦擠進去，學習編程若是不是興趣驅動，不少人都是沒有辦法堅持到最後的。html

JavaScript基礎篇

ECMAScript是JavaScript的標準規範，咱們在編寫程序的時候一定要按照這個規範來操做。到目前爲止，已經發展到ES6和ES7了，每一次的版本升級都會產生一些新的支持和規範和瀏覽器的兼容解決方案。前端

咱們的學習和續文按照如下流程來進行總結，從而創建一個系統化的知識體系。這裏要注意，務必將基礎部分掌握牢靠，磨刀不誤砍柴功，只有將基礎部分掌握並創建起系統的知識體系，在後面學習JavaScript衍生的其餘模式才能遊刃有餘。在學習JavaScript以前請務必先系統的學習好HTML和CSS知識。java

學習JavaScript主要是學習如下幾個方面：node

JavaScript自己的核心語法(ECMAScript)
瀏覽器對象模型 (BOM)
文檔對象模型（DOM）

你們在這裏應該明白了，ECMAScript實際上是JavaScript的子集，咱們所說的JavaScript實際上是在Web瀏覽器這個宿主環境上，JavaScript包含了基本的核心，也就是ECMAScript來標準化基本的語法，咱們的宿主環境在web瀏覽器，因此在ECMAScript的基礎上有添加了和瀏覽器進行交互的擴展BOM和對文檔節點交互的DOM。不光在JavaScript裏面纔有ECMAScript，好比你們耳熟能詳的Node和Adobe Flash，因此ECMAScript並非參照web瀏覽器的，JavaScript實現了ECMAScript，Adobe ActionScript一樣也實現了ECMAScript。git

ECMAScript主要規定了如下幾個方面的內容的描述：github

語法
類型
語句
關鍵字
保留字
操做符
對象

文檔對象模型（DOM)是針對XML但通過擴展於HTML的應用程序編程接口。DOM把整個頁面映射爲一個多層節點結構。HTML或XML頁面中的每一個組成部分都是某種類型的節點，這些節點又包含着不一樣類型的數據。在DOM中，這個頁面經過分層節點（元素），經過DOM建立表示文檔的樹形圖，開發人員得到了控制頁面內容和結構的主動權。藉助DOM提供的API，開發人員能夠輕鬆自如的刪除、添加、替換或修改任何節點。
瀏覽器對象模型(BOM),開發人員使用BOM能夠控制瀏覽器顯示的頁面之外的部分，可是它做爲JavaScript實現的一部分去沒有相關的標準。這個問題在HTML5中獲得瞭解決，HTML5致力於把不少的BOM功能寫入正是規範。從根本上將，BOM只處理瀏覽器窗口和框架，但人們習慣上也把全部針對瀏覽器的JavaScript擴展算做BOM的一部分，如下就是這樣的擴展：web

彈出新瀏覽器窗口的功能
移動、縮放和關閉瀏覽器窗口的功能
提供瀏覽器詳細信息的navigator對象
提供瀏覽器所加載頁面的詳細信息的location對象
提供用戶顯示器分辨率詳細信息的screen對象
對cookie的支持
想XMLHttpRequest 和 IE的ActiveXobject這樣的自定義對象

因爲沒有BOM標準能夠遵循，所以每一個瀏覽器都有本身的實現。正則表達式

JavaScript在HTML中的使用

// 引入外部腳本
<script type="text/javascript「 src="example.js></script>

// 執行代碼段
<script>
    // 代碼段
</script>

javaScript代碼能夠放在head標籤內，可是因爲JavaScript解析器是自上而下來執行代碼的，因此若是你在head裏面寫的JavaScript代碼裏面包含獲取元素節點，回致使找不到節點而出錯，咱們可使用window.onload = function（）{代碼段}來讓整個文檔解析完成之後再執行JavaScript代碼。最好的辦法就是將外部腳本引入和內部代碼都寫到</body>標籤先後是最好的辦法。固然，咱們除了直接引入外部腳本之外，還能夠動態的從後端來獲取JavaScript執行代碼和須要的Json數據。好比咱們在開發遊戲的時候，對遊戲的每一個玩法能夠進行動態的預加載，在後端來獲取遊戲的配置信息，而後做爲響應數據響應給前臺瀏覽器，來初始化遊戲界面。算法