本人從事JavaWeb開發，應別人要求，思考再三，終決定專門開一貼來總結一下我個人目前推薦的學習路線。從啥也不會到能夠從事JavaWeb開發，究竟要學習哪些東西？很多人都會迷茫這個地方。所以我打算隨便談談我的看法。

我之前一直不想寫，因為我知道一旦寫了就要承擔壓力。必然會有一大波人來指責我，說什麼什麼你這樣講是毒雞湯，怎能不管演算法，不管計算機原理！你這樣是誤導新人！然後舉出一大堆例子，說基礎怎麼怎麼重要，你這樣速成將來會有大問題！你這是在瞎扯，一看就知道你不懂得Java的精髓！

我大概能預見這些情況，但我無所謂，因為我所說的，不代表就是正確的，錯了又如何呢？我畢竟只是普通人。

我只能說，到目前為止，我所看到的情況即是如此。也許的確是我目光短淺吧，沒有達到網上大神說的那種境界。很多人給我的感覺就是，敲一個HelloWorld，都需要把計算機的二進位制編碼，以及計算機怎麼誕生的這些完全搞明白才可以。否則我就不配敲HelloWorld，因為我不懂得原理。

所以，這些東西我一直不想寫，反正總歸會被罵，還不如清閒點算了。

可是隨著群裡問我這個問題的人越來越多，而且這個事情也不是我隨隨便便就能講清楚的。最終，思量再三，我還是決定專門寫幾篇文章，就我個人的看法來簡單說說，從啥也不會到能夠從事JavaWeb開發的一個最直接的學習路線。

因為現在大部分公司還是沒有明確的前後端之分，比如我經歷的幾個公司都是如此，前後臺都是一個人包了。稍微小一點的專案，一個人抖擻抖擻精神，也就直接扛下來了。

所以，在我的推薦路線中，前端肯定也是要包括的。如果你只學Java，在目前的大趨勢中，還是比較懸的。除非你找到那種前後端完全分開的公司。

那麼，開始吧。

1.第一階段 - JavaScript

為什麼我推薦先從JavaScript學起來，原因有兩個。其一，JavaScript不需要你搭建什麼環境，比如Java你就得先安裝JVM，配置環境變數。可能對已經工作的你而言，這真的沒什麼，因為太簡單了。可是，對於一個完全沒有程式設計經驗的人而言，往往就會被卡死在第一步。連環境都不會搭建，後續的學習也就無從談起了。JavaScript就完全沒有這一顧慮，你隨便網上下載一個IDE（比如Sublime，HBuilder，Editplus），就可以開始寫程式碼了。然後，你的電腦上總該有瀏覽器吧，那麼，你寫的程式碼就能立即看到效果。俗話說，興趣是最好的老師，當你看到自己編寫的網頁栩栩如生地展現在你的眼前的時候，那種喜悅的感覺會給你帶來繼續學下去的勇氣。

第二個原因，JavaScript是一門比較優秀的語言，一般來說，其他面向物件的語言特點，它也有。要談演算法，JavaScript也能夠鍛鍊你的演算法水平。有興趣的可以去學習一下canvas，也就是畫布，自己嘗試著做一些特效，裡面會大量用到三角函式，物理上的摩擦力，以及數學的幾何模型等等。

很多東西，都可以用JavaScript模擬出來。

總的來說，從JavaScript入手，免去了環境搭建的麻煩，你還能從中獲得很多學習的樂趣，你一定想不到，當我第一次封裝了一個原生態的彈窗元件，和Grid元件的時候，我興奮得一晚上睡不著覺吧。

當我第一次用純粹的JavaScript做出輪播圖，雪花飄落，瀑布流，等等的特效，我看著自己的作品，一種無與倫比的喜悅充斥著我的內心。

正是JavaScript，給了我學習程式設計的樂趣！

可以說，當你真正精通了JavaScript這門語言，也就學會了一切的程式語言（面向過程的除外）。因為都差不多的，比如我後來重新學習Java，每看到一個地方，腦子裡立馬就聯想到：“咦，這和JavaScript中的XXX不是一個意思嗎？”

記得清華大學的華成英教授曾經說過，最好的學習方法就是類比。就是說，當你遇到一個陌生的技術，如果能將它和你已經熟悉的東西類比起來，比較他們的異同點，那麼，你學習的效率會像坐火箭一樣蹭蹭蹭上漲！

好了，說了這麼多，現在我給出我推薦的學習列表：

預備知識：

1.html + css （瞭解一下基本的標籤即可，最起碼要知道div，類選擇器是什麼，怎麼引入css檔案？還有那些常用的css屬性，background，width,height等等）

推薦方法：這個階段，有一個很好的辦法能迅速培養起來自己在該方面的程式設計意識，就是你隨便找一個生活中的東西，比如桌子，然後，強迫自己在一天之內想出它的50個屬性。

比如，一張桌子，什麼顏色、材質是啥、高度多少、寬度多少？等等。

50個屬性有點誇張，但是你一定要去努力嘗試，想出來多少是多少？就算想不出50個也無所謂，有多少算多少。然後，把這些屬性用筆記下來。好好思考一下，這樣做的目的是什麼。

當你真的去這麼做以後，你就會發現，哦，原來css就是在做這個事情。

再提示一下，這張桌子在房間的什麼位置？它的旁邊是什麼？等等，這些都可以算作它的屬性。

話不多少，自己體會一下就行了。

這個階段，可以網上找點基礎的視訊來看看，不需要掌握太多，因為css往深了研究還是相當複雜的。我相信，誰也不敢拍著胸脯說自己完全精通css的，大部分人還是處於能夠運用的階段。我也只是略懂。初學者不建議去看那些特別深奧的內容，大概瞭解一下即可。

至於什麼css3，響應式，bootstrap，暫時沒必要去學。

時間：3天

畢業標準：能夠用 html + css 做一個網站的登入介面。

1.JavaScript基本語法

這個階段，主要去看下JavaScript的概念，基礎資料型別，for迴圈。（while迴圈我都不推薦去看，用得很少，工作中基本都是for迴圈）

注：這個階段儘量去網上看視訊，不要去各種百度。經常你會發現，你明明把程式碼原封不動得抄過來了，可為什麼就是沒效果呢？怎麼就是和網上說的不一樣呢？

不管你看的是什麼程式碼，基本上就是兩種可能。第一種，程式碼本身的問題。比如別人隨便在自己專案裡複製了一段程式碼，放到網上，然後說明這個程式碼是用於解決XX問題的。

這個時候，你根本就沒有對方專案的環境，程式碼當然用不了啦！

另一種可能，就是程式碼沒問題，但是有些地方要修改一下，可是你還不會用瀏覽器的除錯工具來除錯，所以效果出不來。

不管怎麼樣，你這樣東找找西找找，除了在浪費時間，根本就達不到學習的目的。因為根本就不繫統啊！為什麼現在培訓機構這麼多，就是因為很多人都不知道怎麼去系統學習，就算想要自學，也不知道從何入手。尤其是初學者，根本不知道怎麼回事，可能就是腦袋一熱，勞資要轉行了，於是就網上到處亂學。

這個階段，你要買書也可以，但是前提你要有那個耐心看下去。其實我是不推薦買書的，因為現在這個階段的你能力還不夠，而且，咱大天朝出的技術書籍你也懂的，都不知道哪裡拼湊來的。

當然，不排除好書，可是畢竟太少了。

即便是我，有的時候翻翻當年憑著一腔熱血買來的Java書籍，偶爾都要皺一下眉頭，心想，這個作者到底想表達什麼？這些案例到底想要說明什麼？

什麼時候該買書，我覺得是你已經可以從事開發了，而且對程式設計有了一些自己的心得，覺得自己在某方面需要再提高一下，那麼，這個時候你可以去買書，因為，這個階段，你買的書，基本上自己都可以看懂了。

新手買書，真的會無語的，除了讓你懷疑人生之外，並沒有太大的益處。

看視訊，敲程式碼！

看視訊，敲程式碼！

看視訊，敲程式碼！

重要的事情說三遍，這個階段還是比較重要的。對於一個完全不懂程式設計的人來說，可能寫一個一層for迴圈，就要花去10分鐘的時間，然後對著程式碼看來看去，看來看去，反覆推敲。這是好現象，這說明你正在開始慢慢培養自己的程式設計思維。不要著急，要循序漸進。

這個階段，主要是學習JavaScript的語法，看視訊，一遍看不懂看兩遍，直到你看懂了位為止。

重點：

for迴圈、if語句。

陣列，字串，function（包括傳參和return），閉包的含義，JavaScript內建函式。

陣列的常用方法，push，slice啥的儘量都要會，如果不會的話，就照著例子寫，多寫幾遍就會了。

時間：3天。

畢業標準：能夠自己寫一個function，知道function是什麼意思，會用alert，conole.log除錯程式，最好能直接通過瀏覽器的F12檢視控制檯，在裡面練習和除錯。陣列要多看看，瞭解陣列的增刪改查怎麼用的，條件允許的話，你可以通過陣列來模擬一下Java中的ArrayList。

2.JSON

在JavaScript中，我感覺json是重中之重！

一般來說，js建立物件有兩種方式，一種是通過建構函式，也就是function的方式，另一種就是直接建立一個json。

這個階段一定要好好理解一下json的概念，然後用json去做一些事情。比如，你寫一個註冊頁面，裡面有使用者名稱，密碼，年齡，郵箱等等的input框。你可以嘗試一下，用json的方式，把這些資料裝起來。

體會一下這樣有什麼好處？

最好能夠體會到，json的作用，其實就是為了中轉資料的。那麼多資料，怎麼才能夠以一種較好的方式裝起來呢？

你用陣列自然可以，但是不夠語義化，用json的話就恰到好處。它這個主要是用於描述一個物件的，而陣列更多用來充當一個容器。

時間：1 ~ 2 天

畢業標準：能夠熟練使用json來裝載資料。自己想一個恰當的比喻，來形容一下json像什麼東西？最好自己想，通過這個比喻來更加牢固得記憶 JSON 以及它的用法。別人舉得例子再好，也比不上你自己的例子。

3.dom

所謂的dom，簡單來說就是通過JavaScript來獲取頁面上的一些元素。比如你寫一個div，它的id叫做box，那麼就可以通過document.getElementById('box')的方式獲取這個dom元素。

接下來，你可以給他新增樣式，設定點選事件等等。

具體的話，隨便網上找點資料或者視訊來看就行了。這一塊相對來說還是比較簡單的。

注意：dom和css不是一回事，css是樣式表，而dom是你用JavaScript取到的類似於div一樣的東西，你可以用JavaScript程式碼去操作頁面上的div元素。比如給他加一個樣式。

那些css屬性，不需要去背，只需要記住常用的就好了。用多了你自然會。

重點：

document.getElementById

document.getElementsByTagName

innerHTML，appendChild，

。。。

這個階段，你一定要把瀏覽器的F12用得出神入化，反覆使用，反覆練習。

時間：2天

4.事件

瞭解一下基本的JavaScript事件模型，明白事件冒泡是怎麼回事，什麼時候要阻止冒泡。（事件捕獲幾乎用不到，不要去學了）還有，onclick和addEventListener的區別的是什麼？我能不能自己封裝一個通用的繫結事件函式？

時間：1天

畢業標準：能夠模擬jQuery的on函式，封裝一個自己的方法，達到和jQuery一樣的效果，最好能相容所有瀏覽器。

5.jQuery

學完上面的這些內容，不要猶豫，不要慌張，立馬鑽入jQuery的學習中。這段時間，可以開始自己寫一點小東西了。當然，要是心裡沒底的話， 還是以看視訊為主，最起碼，把jQuery的常用方法都過一遍。過一遍就行了，不要去多看。

然後，第二步，學習常用的jQuery方法，並且自己可以開始嘗試著寫寫看，如何用純粹的JavaScript來達到相同的效果。一些簡單的方法，比如jQuery的css，height，width，addClass，removeClass，這些方法，你完全可以自己用js來模擬一下。

在今後的工作中，你開發前端頁面的絕大多數時間，就是和jQuery打交道。所以，這一塊必須要好好掌握一下。這個時候，可以去買書，也可以不買。但是最好有個自己的知識庫，把常用的方法，和一些你覺得畫得比較好的頁面，特效等等，都儲存下來。

或者，你也完全可以去網上寫一寫自己的部落格，部落格園，簡書，csdn啥的，都可以。通過寫部落格，一來可以自己總結，二來也能幫助別人。

6.案例

這個階段，正常情況下，js水平應該已經達到一定層次了。在接下來的日子，可以考慮來買一點書來看，當然，千萬不要從第一頁看到最後一頁。有選擇性的去看，並且，一定要帶著批判的精神去看書，親自去驗證一下書中所說。為什麼到這個時候，我才推薦去買書來看呢？很簡單，因為到了這個階段，你才能看得懂。如果是一個完全不懂程式設計的新人，直接去買書，看懂的概率很小，除非你真的是天縱奇才，具有極高的天賦。

儘量去買外文翻譯過來的書，國產的書籍不太建議購買（當然，如果你是英語大牛的話，直接看原版，最好！）。至於為什麼，大家都懂的。

我也看過很多很多的書，最後發現，國內的很多書，大都本著一種哪怕你再聰明，我也要把你說糊塗了的宗旨。這也是你為什麼往往看書看不進去的原因。

而國外的書，美國的就挺好，不過我感覺寫的最認真的還是日本的技術書籍。看起來感覺就不一樣，寫的通俗易懂不說，而且我甚至能看到作者為了出這本書，真的是耗費了巨大的精力！這是事實。頗有種哪怕你再笨，我也要把你教會的感覺。

我並不哈日，但說句實在話，人家寫的書真的是一種奉獻精神、值得敬佩。而不像我們國內的技術書籍，一大抄，真正能看看的好書不多。

這個階段，一邊看書，一邊自己動手敲程式碼，寫案例。比如說，你看到一個網站，覺得他的佈局都挺好看的，你就可以思考下，我能不能來仿一個呢？

好了，前臺頁面有了，開始思考，這些資料哪來的？

肯定不可能頁面裡面全部寫死吧，想想也不可能。那麼毫無疑問，肯定是後臺傳過來的。

接下來，就開始思考怎麼傳過來的呢？於是乎，ajax技術又來了，馬上再去學習ajax，帶著疑問去學。

後臺語言，比如說Java，自然而然的，會驅動你去學習。

以上的這些路線，只作為一個參考。當然，這些都還只是JavaScript學習的初步階段，但是學習這個事情，本來就需要在工作中慢慢體會，自己主動去學的。難以通過一篇文章就說得清。最後，希望本文對諸位有所幫助，謝謝。