學(xué)習(xí)前端，要從學(xué)習(xí)HTML和CSS開始著手。關(guān)于這部分的學(xué)習(xí)，網(wǎng)上可選擇的資料就太多了，這里不一一列舉，題主百度搜索欄搜索 HTML 教程，或者css 教程，就可找到相關(guān)資料。

　　接著是學(xué)習(xí)前端的一個難點、也是重點，就是JavaScript。

　　首先，初學(xué)一門語言，要秉承一個原則：“能動手的，盡量別吵吵”

　　另外，你需要一個能夠從簡到難的知識體系，一步一步跟下來。

　　下面是干貨。

　　體系：上圖。

　　說明一下這張圖，題主提問如何有效學(xué)習(xí)JS，我這里理解為JS原生，所以關(guān)于框架、工作流的內(nèi)容，沒有具體展開，題主有興趣可以自行搜索。

　　1.文檔資料

　　a) 紅寶書(基礎(chǔ))：https://book.douban.com/subject/10546125/

　　b) 蝴蝶書(進(jìn)階)：https://book.douban.com/subject/11874748/

　　c) 阮一峰老師ES6: http://es6.ruanyifeng.com/

　　d) 權(quán)威官方文檔MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

　　2.學(xué)習(xí)步驟

　　a) 語法和基本類型

　　b) 控制流

　　c) 循環(huán)

　　d) 表達(dá)式和操作符

　　e) 日期對象

　　f) 正則表達(dá)式

　　g) 對象

　　上面這些搞定，就已經(jīng)掌握了ES5的最基本的內(nèi)容了，接著，我們就可以來操作頁面了。畢竟這是一個看臉的社會，我們在搞頁面的同時，還要注意一下頁面的樣式。

　　h)DOM操作

　　i. DOM樹的概念

　　ii. 從DOM樹取節(jié)點

　　iii. 操作這個DOM樹(節(jié)點的添加、刪除、修改)

　　iv. 訪問節(jié)點(parentNode, children, 等等)

　　v. 屬性操作(id, className)

　　i)事件處理

　　i. 鼠標(biāo)事件(mouseove)

　　ii. 鍵盤事件(keyup)

　　iii. 瀏覽器事件(load)

　　好，到這里，基本上靜態(tài)頁面，你就可以隨意玩耍了。這里我們最好降上面思維導(dǎo)圖提到的例子，都擼一遍。一是加深上面知識點印象，二是鍛煉一下編程的邏輯思維能力。具體實現(xiàn)，網(wǎng)上有一堆堆的。(這里讓題主自己搜索，是因為編碼的一項重要能力，就是搜索)一定要謹(jǐn)記，多敲代碼。

　　j) 面向?qū)ο?#xff1a;原型式繼承、原型鏈

　　k) ES6：

　　ES6跟ES5還是有較大的區(qū)別，所以建議你能系統(tǒng)的過一遍，將上面的練習(xí)，改為使用ES6再來一遍

　　3.調(diào)試

　　a) JS編程的調(diào)試非常簡單，打開瀏覽器控制臺(我個人比較鐘愛Chrome)。如圖:

　　i. console標(biāo)簽：這個標(biāo)簽，可以打印我們開發(fā)時，JS引擎為我們拋出的異常。我們可以根據(jù)這個異常的信息，來分析錯誤原因。另外，我們也可以在代碼中使用console.log() 輸出程序運行時的環(huán)境變量信息。

　　ii. 右紅框1：錯誤提示。說明當(dāng)前頁有一個error發(fā)生，點擊他，可以跳轉(zhuǎn)到console來查看錯誤具體信息

　　iii. 右紅框2：警告信息。提示了我們程序潛在的危險。

　　iv. source，我們進(jìn)行單步調(diào)試的地方。具體見下圖

　　4.工作流(跟JS原生關(guān)系不大，不詳細(xì)展開了)

　　a) webpack

　　b) gulp

　　上面的內(nèi)容結(jié)束后，就可以進(jìn)入前端框架的海洋中暢游了。

原文來自知乎用戶：Eric

總結(jié)

以上是生活随笔為你收集整理的web前端自学入门视频教程分享的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。