摘要：然而，雖然先生對無所不知，被譽為世界的愛因斯坦，但他的語言精粹并不適合初學者學習。即便如此，在后面我還是會建議把當做補充的學習資源。但目前為止，依然是學習編程的好幫手。周正則表達式，對象，事件，閱讀權威指南第，，，章。

既然你找到這篇文章來，說明你是真心想學好JavaScript的。你沒有想錯，當今如果要開發(fā)現(xiàn)代網(wǎng)站或web應用（包括互聯(lián)網(wǎng)創(chuàng)業(yè)），都要學會JavaScript。而面對泛濫的JavaScript在線學習資源，卻是很難找到一份高效而實用的方法去學習這個“web時代的語言”。

有一點需要注意，幾年前我們需要知道一個真正的服務器端語言（比如PHP，Rails，Java，Python 或者 Perl）去開發(fā)可擴展，動態(tài)的，數(shù)據(jù)庫驅動的web應用，而現(xiàn)在只用JavaScript就可以實現(xiàn)了。

學習時長：6～8周

學習前提：中學水平，無需編程經(jīng)驗

在Reddit上創(chuàng)建了一個學習小組
January 2014， “Learn JavaScript” Study Group on Reddit

不要這樣學習JavaScript

本課程資源

1～2周(簡介，數(shù)據(jù)類型，表達式和操作符)

3~4周(對象，數(shù)組，函數(shù)，DOM，jQuery)

JavaScript終極編輯器：WebStorm

第一個項目-動態(tài)問答應用

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

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

繼續(xù)提升

一些鼓勵的話

上面的課程大綱提供了一個結構化和富有啟發(fā)性的學習線路，從初學者到有所建樹，把JavaScript學對學透。

不要一開始就埋頭在成堆的JavaScript在線教程里 ，這是最糟糕的學習方法?；蛟S在看過無數(shù)個教程后會有點成效，但這樣不分層次結構地學習一個東西實在是十分低效，在實際用JavaScript建立網(wǎng)站或web應用時你還是會頻繁的卡住?？偟膩碚f，這種學習方法會讓人不知道如何將語言當做工具來使用——當做個人工具來用。

另外，也許有人會建議從尊敬的JavaScript教父Douglas Crockford寫的《JavaScript語言精粹》開始學習JavaScript。然而，雖然Crockford先生對JavaScript無所不知，被譽為JavaScript世界的愛因斯坦，但他的《JavaScript語言精粹》并不適合初學者學習。這本書沒有通透、清晰、明了的闡述JavaScript的核心概念。但對于更高級的學習路線，我倒會建議你看看Crockford先生的視頻。

還有，不要只從Codecademy等網(wǎng)站學習JavaScript，因為即使知道怎么編寫一大堆JavaScript代碼小片段，還是不能學會怎么建立一個web應用程序。即便如此，在后面我還是會建議把Codecademy當做補充的學習資源。

更新：Reddit用戶d0gsbody4月8號在Reddit上建立了一個學習小組。他和其他組員都非常積極和樂于助人。我建議你加入這個小組，他們會讓你保持積極性且?guī)椭愀玫膶W習JavaScript。畢竟獨自折騰JavaScript還是有點難度的。鏈接：Learning JS Properly – Study Group on Reddit

請在以下兩本書中選一本，第一本比較適合有編程經(jīng)驗的人，而另一本則適合完全沒有編程經(jīng)驗的初學者。我個人推薦第一本書，因為作者對各個知識點都闡述得非常好且涵蓋了一些高級JavaScript知識點。但是，要看懂這本書你至少要對web開發(fā)有一定的基本了解。所以，如果你有一點點編程經(jīng)驗或者web開發(fā)經(jīng)驗（不一定是JavaScript），那就買這本書吧。

紙質版（英文） ：Professional JavaScript for Web Developers

紙質版（中文） ：JavaScript高級程序設計(第3版)

Kindle版（英文）：Professional JavaScript for Web Developers

Kindle版（中文）：JavaScript高級程序設計(第3版)

如果你沒有編程經(jīng)驗，可以買這本：

紙質版（英文） ：JavaScript: The Definitive Guide

紙質版（中文） ：JavaScript權威指南(第6版)

Kindle版（英文）：JavaScript: The Definitive Guide

Kindle版（中文）：JavaScript權威指南（原書第6版）

免費注冊Stack Overflow，這是一個編程領域的問答論壇。在這里提問題得到的回答比Codecademy要好，哪怕你的問題非?；A，看起來很傻（記住，從來沒有愚蠢的問題）。

免費注冊Codecademy，這是一個在線學習平臺，你可以直接在瀏覽器里面寫代碼。

JavaScriptIsSexy上的一些博文，包括對象，閉包，變量的作用域和提升，函數(shù)等等。

完成整個課程大綱需要花上6~8周的時間，將學會完整的JavaScript語言（包括jQuery和一些HTML5）。如果你沒有時間在6個星期里完成所有的課程（確實比較有挑戰(zhàn)性），盡量不要超過8個星期。花的時間越長，掌握和記憶各種知識點的難度就越大。

如果你還不是很了解HTML和CSS，完成Codecademy上的web基礎任務。

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

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

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

閱讀《JavaScript權威指南》第3~4章?；蛘唛喿x《JavaScript高級程序設計》第3~4章。你可以跳過位操作部分，在你的JavaScript生涯中一般不會用上這個。

再次說明，記得要不時停下來把書本的代碼敲到瀏覽器控制臺里（或者JSFiddle）做各種測試，可以改變幾個變量或者把代碼結構修改一番。

閱讀《JavaScript權威指南》第5章。至于《JavaScript高級程序設計》則暫時沒有閱讀任務，因為前面已經(jīng)把相關知識覆蓋了。

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

以下三選一：

閱讀我的博文JavaScript 對象詳解.

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

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

兩本書會涉及更多的一些細節(jié)，但只要看完我的博文，你可以完全放心地跳過這些細節(jié)。

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

此時，你應該花大量時間在瀏覽器控制臺上寫代碼，測試if-else語句，for循環(huán)，數(shù)組，函數(shù)，對象等等。更重要的是，你要鍛煉和掌握獨立寫代碼，不用借助Codecademy。在Codecademy上做題時，每個任務對你來說應該都很簡單，不需要點幫助和提示。如果你還卡在Codecademy上，繼續(xù)回到瀏覽器上練習，這是最好的學習方法。就像詹姆斯年輕時在鄰居的籃球場上練球，比爾蓋茨在地下室里學習編程。

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

**Codecademy會造成已掌握的錯覺。**

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

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

回到Codecademy完成JavaScript路線。做完6~8部分（數(shù)據(jù)結構做到Object 2）。

實現(xiàn)Codecademy上Projects路線的5個基礎小項目（Basic Projects）。做完之后，你已不再需要Codecademy了。這是一件好事，因為自己做的越多，學得就越快，就能更好準備開始獨立編程。

閱讀《JavaScript權威指南》第13，15，16和19章?；蛘唛喿x《JavaScript高級程序設計》第8，9，10，11，13和14章。這本書沒有涉及到jQuery，而Codecademy上的jQuery知識也覆蓋得不夠?？梢钥纯磈Query的官方教程，免費的：http://try.jquery.com/

你也可以在《JavaScript權威指南》第19章了解更多的jQuery知識。

完成全部的jQuery教程http://try.jquery.com/。

在你實現(xiàn)第一個項目之前，如果打算以后做JavaScript開發(fā)者或者經(jīng)常用到JavaScript，最好現(xiàn)在就去下載WebStorm的試用版。這里可以學習怎么使用WebStorm（專門為這個課程寫的）。毋庸置疑，WebStorm是JavaScript編程最好的編輯器（或IDE）。30天試用后要付$49.00，但作為JavaScript開發(fā)者，這應該是除了買書以外最明智的投資了。

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

此外，WebStorm是一個世界級，專業(yè)人員使用的IDE，用來編寫專業(yè)的JavaScript web應用，所以你以后會經(jīng)常用到它。它還結合了Node.js，Git和其它JavaScript框架，所以即使你成為了明星級的JavaScript開發(fā)者，你還是會用到它的。除非以后出現(xiàn)了更多的JavaScript IDE。

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

此時，你已經(jīng)掌握了足夠的知識去建立一個穩(wěn)固的，可維護的web應用。在做完我為你設計的這個應用之前不要看后面的章節(jié)。如果你卡住了，去Stack Overflow提問并且把書上相關的內(nèi)容重新看一遍直到完全理解這些概念。

接下來開始建立一個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動態(tài)的添加下一個問題，并且移去當前問題。在這個版本里“Next”是唯一的導航按鈕。

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

閱讀《JavaScript權威指南》第10，14，17，20章。

或者閱讀《JavaScript高級程序設計》第20，23章。

記得要把樣例代碼敲到瀏覽器控制臺上，盡可能蹂躪它，做各種測試，直到完全理解它是怎么工作，它能干些什么。

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

升級之前做的問答應用

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

添加“Back”按鈕，允許用戶返回修改答案。最多可以返回到第一個問題。注意對于用戶回答過的問題，選擇按鈕要顯示被選中。這樣用戶就無需重新回答已經(jīng)答過的問題。

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

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

把問題導出JSON文件

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

使用cookies記住用戶，當用戶再次登陸時顯示“歡迎用戶名回來”。

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

或者閱讀我的博文JavaScript面向對象必知必會

或者閱讀《JavaScript高級程序設計》第6，16，22，24章，第6章只讀“創(chuàng)建對象”（Object Creation）和“繼承”（Inheritance）部分。注意：這部分是本課程中技術性強度最大的閱讀，要根據(jù)自身的狀況考慮要不要全部讀完。你至少要知道原型模式（Prototype Pattern），工廠模式（Factory Pattern）和原型繼承（Prototypal Inheritance），其它的不作要求。

繼續(xù)升級你的問答應用：

頁面布局使用Twitter Bootstrap，把問答的元素弄得看起來專業(yè)一些。而作為額外獎勵，用Twitter Bootstrap的標簽控件（譯者注：原文地址失效，已改）顯示問題，每個標簽顯示一個問題。

學習Handlebars.js，將Handlebars.js模板用在問答應用上。你的JavaScript代碼中不應該再出現(xiàn)HTML代碼了。我們的問答應用現(xiàn)在越來越高級啦。

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

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

接下來：構思一個項目，趁熱打鐵迅速的去開發(fā)?？ㄗ〉臅r候參考《JavaScript權威指南》或者《JavaScript高級程序設計》。當然，還要成為Stack Overflow的活躍用戶，多問問題，也要盡量回答其它人的提問。

精通backbone.js

中高級JavaScript進階

不側漏精通Node.js

祝你學習順利，永不放棄！當你做不下去覺得自己很蠢的時候（你會時不時這么想的），請記住，世界各地的其他初學者，甚至是有經(jīng)驗的程序員，也會不時產(chǎn)生這種想法的。

如果你是完全的初學者，特別是過了青少年時期的人，開始寫代碼的時候也許很困難。年輕人無所畏懼，也沒有什么負擔，他們可以花大量的時間在喜歡的東西上。所以各種挑戰(zhàn)對他們來說也不過是短暫的障礙罷了。

但過了青少年期后你會希望快速的見到成效。因為你沒有這么多的時間去花上幾個小時就為了搞清楚一些細節(jié)的東西。但這些東西你必須深入去理解它，不要因此沮喪，堅持完成課程的任務，把bug都找出來，直到你完全理解。當你到達勝利的彼岸時，你會知道這一切都是值得的，你會發(fā)現(xiàn)編程非常有趣而且在上面花的時間都會得到可觀的回報。

一個人必須去感受和領悟構建程序帶來的強烈快感。當你一步步的掌握知識點，一點點的將程序搭建起來時，就會對自己產(chǎn)生激勵與肯定，帶來十分美妙的滿足感。

總有一天你會意識到之前忍受的所有困難都是值得的。因為你將要成為一名光榮的程序員，你也清楚作為JavaScript開發(fā)者，你的前途一片光明。就像在你之前成千上萬的程序員一樣，你打敗了最難的bug，你沒有退步，你沒有放手，你沒有找任何借口讓自己放棄。

當你學有所成的時候，放心的將你的成果分享給我們吧，哪怕是個微不足道的，小到顯微鏡都看不到的小項目。

英文原文
via Jaward華仔