學(xué)習(xí)前端，要從學(xué)習(xí)HTML和CSS開始著手。關(guān)于這部分的學(xué)習(xí)，網(wǎng)上可選擇的資料就太多了，這里不一一列舉，題主百度搜索欄搜索 HTML 教程，或者css 教程，就可找到相關(guān)資料。
接著是學(xué)習(xí)前端的一個(gè)難點(diǎn)、也是重點(diǎn)，就是JavaScript。
首先，初學(xué)一門語言，要秉承一個(gè)原則：“能動(dòng)手的，盡量別吵吵”
另外，你需要一個(gè)能夠從簡(jiǎn)到難的知識(shí)體系，一步一步跟下來。
下面是干貨。
體系：上圖。
說明一下這張圖，題主提問如何有效學(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) 日期對(duì)象
f) 正則表達(dá)式
g) 對(duì)象
上面這些搞定，就已經(jīng)掌握了ES5的最基本的內(nèi)容了，接著，我們就可以來操作頁面了。畢竟這是一個(gè)看臉的社會(huì)，我們?cè)诟沩撁娴耐瑫r(shí)，還要注意一下頁面的樣式。
h)DOM操作
i. DOM樹的概念
ii. 從DOM樹取節(jié)點(diǎn)
iii. 操作這個(gè)DOM樹(節(jié)點(diǎn)的添加、刪除、修改)
iv. 訪問節(jié)點(diǎn)(parentNode, children, 等等)
v. 屬性操作(id, className)
i)事件處理
i. 鼠標(biāo)事件(mouseove)
ii. 鍵盤事件(keyup)
iii. 瀏覽器事件(load)
好，到這里，基本上靜態(tài)頁面，你就可以隨意玩耍了。這里我們最好降上面思維導(dǎo)圖提到的例子，都擼一遍。一是加深上面知識(shí)點(diǎn)印象，二是鍛煉一下編程的邏輯思維能力。具體實(shí)現(xiàn)，網(wǎng)上有一堆堆的。(這里讓題主自己搜索，是因?yàn)榫幋a的一項(xiàng)重要能力，就是搜索)一定要謹(jǐn)記，多敲代碼。
j) 面向?qū)ο螅涸褪嚼^承、原型鏈
k) ES6：
ES6跟ES5還是有較大的區(qū)別，所以建議你能系統(tǒng)的過一遍，將上面的練習(xí)，改為使用ES6再來一遍
3.調(diào)試
a) JS編程的調(diào)試非常簡(jiǎn)單，打開瀏覽器控制臺(tái)(我個(gè)人比較鐘愛Chrome)。如圖:
i. console標(biāo)簽：這個(gè)標(biāo)簽，可以打印我們開發(fā)時(shí)，JS引擎為我們拋出的異常。我們可以根據(jù)這個(gè)異常的信息，來分析錯(cuò)誤原因。另外，我們也可以在代碼中使用console.log() 輸出程序運(yùn)行時(shí)的環(huán)境變量信息。
ii. 右紅框1：錯(cuò)誤提示。說明當(dāng)前頁有一個(gè)error發(fā)生，點(diǎn)擊他，可以跳轉(zhuǎn)到console來查看錯(cuò)誤具體信息
iii. 右紅框2：警告信息。提示了我們程序潛在的危險(xiǎn)。
iv. source，我們進(jìn)行單步調(diào)試的地方。具體見下圖
4.工作流(跟JS原生關(guān)系不大，不詳細(xì)展開了)
a) webpack
b) gulp
上面的內(nèi)容結(jié)束后，就可以進(jìn)入前端框架的海洋中暢游了。
原文來自知乎用戶：Eric
重慶分公司
重慶分公司
