從啥也不會到能夠勝任最基本的JavaWeb工做，推薦給新人的學習路線（一）

本人從事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學習的初步階段，可是學習這個事情，原本就須要在工做中慢慢體會，本身主動去學的。難以經過一篇文章就說得清。最後，但願本文對諸位有所幫助，謝謝。