javascript學習路線圖

 

史上最全的javascript學習路線圖

JavaSctipt學習路線

完成整個課程大綱須要花上6~8周的時間，將學會完整的JavaScript語言（包括jQuery和一些HTML5）。若是你沒有時間在6個星期裏完成全部的課程（確實比較有挑戰性），儘可能不要超過8個星期。花的時間越長，掌握和記憶各類知識點的難度就越大。

1～2周(簡介，數據類型，表達式和操做符)

 

1. 若是你還不是很瞭解HTML和CSS，完成Codecademy上的web基礎任務。

2. 閱讀《JavaScript權威指南》或者《JavaScript高級程序設計》的前言和第1~2章。

3. 十分重要：在書中遇到的每一個樣例代碼都要動手敲出來而且在火狐或Chrome瀏覽器控制檯中跑起來、儘可能蹂躪它（作各類試驗）。也能夠用jsfiddle，但不要用Safari瀏覽器。我建議用火狐搭配Firebug插件去測試和調試代碼。瀏覽器控制檯就是可讓你編寫和運行JavaScript代碼的地方。

4. 完成Codecademy JavaScript 
   Track上的Introduction to JavaScript部分。

5. 閱讀《JavaScript權威指南》第3~4章。或者閱讀《JavaScript高級程序設計》第3~4章。你能夠跳過位操做部分，在你的JavaScript生涯中通常不會用上這個。

   再次說明，記得要不時停下來把書本的代碼敲到瀏覽器控制檯裏（或者JSFiddle）作各類測試，能夠改變幾個變量或者把代碼結構修改一番。

6. 閱讀《JavaScript權威指南》第5章。至於《JavaScript高級程序設計》則暫時沒有閱讀任務，由於前面已經把相關知識覆蓋了。

7. 完成Codecademy JavaScript 
   Track上的2~5部分。

8. JavaScript變量學習路線圖，點擊圖片收藏大圖

9.  

10. JavaScript數據類型學習路線圖，點擊圖片收藏大圖

11.  

12. JavaScript函數學習路線圖，點擊圖片收藏大圖

13.  

14. JavaScript運算符學習路線圖，點擊圖片收藏大圖

15.  

3~4周(對象，數組，函數，DOM，JQuery)

 

1. JavaScript數組學習路線圖，點擊圖片收藏大圖

2.  

3. JavaScript流程控制學習路線圖，點擊圖片收藏大圖

4.  

5. JavaScript字符串函數學習路線圖，點擊圖片收藏大圖

6.  

7. JavaScriptDOM學習路線圖，點擊圖片收藏大圖

8.  

9. 如下三選一：

   兩本書會涉及更多的一些細節，但只要看完個人博文，你能夠徹底放心地跳過這些細節。

   • 閱讀個人博文JavaScript 
     對象詳解.

   • 閱讀《JavaScript權威指南》第6章。

   • 閱讀《JavaScript高級程序設計》第6章。注意：只須要看「理解對象」（Understanding 
     Objects）部分。

10. 閱讀《JavaScript權威指南》第7~8章或者《JavaScript高級程序設計》第5和7章。

11. 此時，你應該花大量時間在瀏覽器控制檯上寫代碼，測試if-else語句，for循環，數組，函數，對象等等。更重要的是，你要鍛鍊和掌握獨立寫代碼，不用藉助Codecademy。在Codecademy上作題時，每一個任務對你來講應該都很簡單，不須要點幫助和提示。若是你還卡在Codecademy上，繼續回到瀏覽器上練習，這是最好的學習方法。就像詹姆斯年輕時在鄰居的籃球場上練球，比爾蓋茨在地下室裏學習編程。

    持續地練習，這一點點的進步積累起來效果會很是驚人。你要看到這個策略的價值，相信它是可行的，全心投入進去。

    Codecademy會形成已掌握的錯覺。
    使用Codecademy最大的問題是，它的提示和代碼小片斷會讓人很容易就把答案作出來，形成一種已經掌握這個知識點的錯覺。你可能一時看不出來，但這樣作你的代碼就不是獨立完成的了。

    但目前爲止，Codecademy依然是學習編程的好幫手。特別是從一些基本的代碼結構如if語句，for循環，函數和變量去指導你瞭解小項目和小應用的開發過程。

12. 回到Codecademy完成JavaScript路線。作完6~8部分（數據結構作到Object 
    2）。

13. 實現Codecademy上Projects路線的5個基礎小項目（Basic 
    Projects）。作完以後，你已再也不須要Codecademy了。這是一件好事，由於本身作的越多，學得就越快，就能更好準備開始獨立編程。

14. 閱讀《JavaScript權威指南》第13，15，16和19章。或者閱讀《JavaScript高級程序設計》第8，9，10，11，13和14章。這本書沒有涉及到jQuery，而Codecademy上的jQuery知識也覆蓋得不夠。能夠看看jQuery的官方教程，免費的：網頁連接

    你也能夠在《JavaScript權威指南》第19章瞭解更多的jQuery知識。完成所有的jQuery教程網頁連接。

JavaScript終極編輯器：WebStorm

 

• 在你實現第一個項目以前，若是打算之後作JavaScript開發者或者常常用到JavaScript，最好如今就去下載WebStorm的試用版。這裏能夠學習怎麼使用WebStorm（專門爲這個課程寫的）。毋庸置疑，WebStorm是JavaScript編程最好的編輯器（或IDE）。30天試用後要付$49.00，但做爲JavaScript開發者，這應該是除了買書之外最明智的投資了。

• 確保在WebStorm中啓用JSHint。JSHint是一個檢查JavaScript代碼錯誤和潛在問題的工具，強制你的團隊按照規範寫代碼。用WebStorm最爽的地方是JSHint會自動在錯誤的代碼下顯示紅線，就像文字處理程序中的拼寫檢查。JSHint會顯示一切的代碼錯誤（包括HTML），促使你養成良好的習慣，成爲更好的JavaScript程序員。這很重要，當你真正意識到WebStrom和JSHint對你的巨大幫助時，你會回來感謝個人。

• 此外，WebStorm是一個世界級，專業人員使用的IDE，用來編寫專業的JavaScript 
  web應用，因此你之後會常常用到它。它還結合了Node.js，Git和其它JavaScript框架，因此即便你成爲了明星級的JavaScript開發者，你仍是會用到它的。除非之後出現了更多的JavaScript 
  IDE。

• 公平起見，我在這裏提一下Sublime 
  Text 
  2，這是僅次於WebStorm的JavaScript編輯器。它的功能不及WebStorm豐富和完整（即便添加了一堆插件）。作小修改的時候我會用到Sublime 
  Text 2，它支持不少語言，包括JavaScript，但我不會用它來構建完整的JavaScript Web應用。

第一個項目-動態問答應用

 

此時，你已經掌握了足夠的知識去創建一個穩固的，可維護的web應用。在作完我爲你設計的這個應用以前不要看後面的章節。若是你卡住了，去Stack Overflow提問而且把書上相關的內容從新看一遍直到徹底理解這些概念。

接下來開始創建一個JavaScript問答應用（還會用到HTML和CSS），功能以下：

• • 這是一套單選測試題，完成以後會顯示用戶的成績。

  • 問答應用能夠產生任意多的問題，每一個問題能夠有任意多的選項。

  • 在最後的頁面顯示用戶的成績。這個頁面只顯示成績，因此要把最後一個問題去掉。

  • 用數組存全部的問題。每一個問題包括它的選項和正確答案，都封裝成一個對象。問題數組看起來應該是這樣：

// 這裏只演示一個問題，你要把全部問題都添加進去 var allQuestions = [ { question: "Who is Prime Minister of the United Kingdom?", choices: [ "David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: 0 } ];

• 當用戶點擊「Next」時，使用document.getElementById或jQuery動態的添加下一個問題，而且移去當前問題。在這個版本里「Next」是惟一的導航按鈕。

• 你能夠在本文下方評論求助，最好是去Stack 
  Overflow提問，在那裏會有及時而準確的回答。

5～6周(正則表達式，Window對象，事件，JQuery)

JavaScript正則表達式學習路線圖，點擊圖片收藏大圖

 

JavaScriptwindow對象學習路線圖，點擊圖片收藏大圖

 

1. 閱讀《JavaScript權威指南》第10，14，17，20章。或者閱讀《JavaScript高級程序設計》第20，23章。

2. 記得要把樣例代碼敲到瀏覽器控制檯上，儘量蹂躪它，作各類測試，直到徹底理解它是怎麼工做，它能幹些什麼。

3. 此時，你用起JavaScript來應該很順手，有點像武林高手要出山了。但你還不能成爲高手，你要把新學到的知識反覆使用，不停的學習和提高。

4. 升級以前作的問答應用

   • 添加客戶端數據驗證：保證用戶回答了當前問題才能進入下個問題。

   • 添加「Back」按鈕，容許用戶返回修改答案。最多能夠返回到第一個問題。注意對於用戶回答過的問題，選擇按鈕要顯示被選中。這樣用戶就無需從新回答已經答過的問題。

   • 用jQuery添加動畫（淡出當前問題，淡入下個問題）

   • 在IE8和IE9下測試，修改bug，這裏應該會有得你忙了。 
     ;D

   • 把問題導出JSON文件

   • 添加用戶認證，容許用戶登錄，把用戶認證信息保存在本地存儲（local 
     storage，HTML5瀏覽器存儲）。

   • 使用cookies記住用戶，當用戶再次登錄時顯示「歡迎用戶名回來」。

7周，可延長到8周(類，繼承，HTML5)

 

1. 閱讀《JavaScript權威指南》第9，18，21，22章。

   或者閱讀個人博文JavaScript面向對象必知必會

   或者閱讀《JavaScript高級程序設計》第6，16，22，24章，第6章只讀「建立對象」（Object 
   Creation）和「繼承」（Inheritance）部分。注意：這部分是本課程中技術性強度最大的閱讀，要根據自身的情況考慮要不要所有讀完。你至少要知道原型模式（Prototype 
   Pattern），工廠模式（Factory Pattern）和原型繼承（Prototypal Inheritance），其它的不做要求。

2. 繼續升級你的問答應用：

   • 頁面佈局使用Twitter 
     Bootstrap，把問答的元素弄得看起來專業一些。而做爲額外獎勵，用Twitter 
     Bootstrap的標籤控件（譯者注：原文地址失效，已改）顯示問題，每一個標籤顯示一個問題。

   • 學習Handlebars.js，將Handlebars.js模板用在問答應用上。你的JavaScript代碼中不該該再出現HTML代碼了。咱們的問答應用如今愈來愈高級啦。

   • 記錄參加問答的用戶成績，展現用戶在問答應用中與其餘用戶的排名比較。

3. 在學完Backbone.js和Node.js後，你會用這兩種最新的JavaScript框架重構問答應用的代碼，使之變成複雜的單頁面現代web應用。你還要把用戶的認證信息和成績保存在MongoDB數據庫上。

4. 接下來：構思一個項目，趁熱打鐵迅速的去開發。卡住的時候參考《JavaScript權威指南》或者《JavaScript高級程序設計》。固然，還要成爲Stack 
   Overflow的活躍用戶，多問問題，也要儘可能回答其它人的提問。

繼續提高

 From https://blog.csdn.net/centaury32/article/details/52787508

1. 精通backbone.js

2. 中高級JavaScript進階

3. 不側漏精通Node.js

4. Meteor.js入門（即將出爐）

5. 三個最好的JavaScript前端框架（即將出爐）

一些鼓勵的話

 

祝你學習順利，永不放棄！當你作不下去以爲本身很蠢的時候（你會時不時這麼想的），請記住，世界各地的其餘初學者，甚至是有經驗的程序員，也會不時產生這種想法的。當你學有所成的時候，放心的將你的成果分享給咱們吧，哪怕是個微不足道的，小到顯微鏡都看不到的小項目。