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

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

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

學(xué)習(xí)時(shí)長(zhǎng)：6～8周

學(xué)習(xí)前提：中學(xué)水平，無需編程經(jīng)驗(yàn)

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

不要這樣學(xué)習(xí)JavaScript

本課程資源

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

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

JavaScript終極編輯器：WebStorm

第一個(gè)項(xiàng)目-動(dòng)態(tài)問答應(yīng)用

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

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

繼續(xù)提升

一些鼓勵(lì)的話

上面的課程大綱提供了一個(gè)結(jié)構(gòu)化和富有啟發(fā)性的學(xué)習(xí)線路，從初學(xué)者到有所建樹，把JavaScript學(xué)對(duì)學(xué)透。

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

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

還有，不要只從Codecademy等網(wǎng)站學(xué)習(xí)JavaScript，因?yàn)榧词怪涝趺淳帉懸淮蠖袹avaScript代碼小片段，還是不能學(xué)會(huì)怎么建立一個(gè)web應(yīng)用程序。即便如此，在后面我還是會(huì)建議把Codecademy當(dāng)做補(bǔ)充的學(xué)習(xí)資源。

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

請(qǐng)?jiān)谝韵聝杀緯羞x一本，第一本比較適合有編程經(jīng)驗(yàn)的人，而另一本則適合完全沒有編程經(jīng)驗(yàn)的初學(xué)者。我個(gè)人推薦第一本書，因?yàn)樽髡邔?duì)各個(gè)知識(shí)點(diǎn)都闡述得非常好且涵蓋了一些高級(jí)JavaScript知識(shí)點(diǎn)。但是，要看懂這本書你至少要對(duì)web開發(fā)有一定的基本了解。所以，如果你有一點(diǎn)點(diǎn)編程經(jīng)驗(yàn)或者web開發(fā)經(jīng)驗(yàn)（不一定是JavaScript），那就買這本書吧。

紙質(zhì)版（英文） ：Professional JavaScript for Web Developers

紙質(zhì)版（中文） ：JavaScript高級(jí)程序設(shè)計(jì)(第3版)

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

Kindle版（中文）：JavaScript高級(jí)程序設(shè)計(jì)(第3版)

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

紙質(zhì)版（英文） ：JavaScript: The Definitive Guide

紙質(zhì)版（中文） ：JavaScript權(quán)威指南(第6版)

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

Kindle版（中文）：JavaScript權(quán)威指南（原書第6版）

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

免費(fèi)注冊(cè)Codecademy，這是一個(gè)在線學(xué)習(xí)平臺(tái)，你可以直接在瀏覽器里面寫代碼。

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

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

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

閱讀《JavaScript權(quán)威指南》或者《JavaScript高級(jí)程序設(shè)計(jì)》的前言和第1~2章。

十分重要：在書中遇到的每個(gè)樣例代碼都要?jiǎng)邮智贸鰜聿⑶以诨鸷駽hrome瀏覽器控制臺(tái)中跑起來、盡量蹂躪它（做各種試驗(yàn)）。也可以用jsfiddle，但不要用Safari瀏覽器。我建議用火狐搭配Firebug插件去測(cè)試和調(diào)試代碼。瀏覽器控制臺(tái)就是可以讓你編寫和運(yùn)行JavaScript代碼的地方。

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

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

再次說明，記得要不時(shí)停下來把書本的代碼敲到瀏覽器控制臺(tái)里（或者JSFiddle）做各種測(cè)試，可以改變幾個(gè)變量或者把代碼結(jié)構(gòu)修改一番。

閱讀《JavaScript權(quán)威指南》第5章。至于《JavaScript高級(jí)程序設(shè)計(jì)》則暫時(shí)沒有閱讀任務(wù)，因?yàn)榍懊嬉呀?jīng)把相關(guān)知識(shí)覆蓋了。

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

以下三選一：

閱讀我的博文JavaScript 對(duì)象詳解.

閱讀《JavaScript權(quán)威指南》第6章。

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

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

閱讀《JavaScript權(quán)威指南》第7~8章或者《JavaScript高級(jí)程序設(shè)計(jì)》第5和7章。

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

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

**Codecademy會(huì)造成已掌握的錯(cuò)覺。**

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

但目前為止，Codecademy依然是學(xué)習(xí)編程的好幫手。特別是從一些基本的代碼結(jié)構(gòu)如if語(yǔ)句，for循環(huán)，函數(shù)和變量去指導(dǎo)你了解小項(xiàng)目和小應(yīng)用的開發(fā)過程。

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

實(shí)現(xiàn)Codecademy上Projects路線的5個(gè)基礎(chǔ)小項(xiàng)目（Basic Projects）。做完之后，你已不再需要Codecademy了。這是一件好事，因?yàn)樽约鹤龅脑蕉?，學(xué)得就越快，就能更好準(zhǔn)備開始獨(dú)立編程。

閱讀《JavaScript權(quán)威指南》第13，15，16和19章。或者閱讀《JavaScript高級(jí)程序設(shè)計(jì)》第8，9，10，11，13和14章。這本書沒有涉及到j(luò)Query，而Codecademy上的jQuery知識(shí)也覆蓋得不夠。可以看看jQuery的官方教程，免費(fèi)的：http://try.jquery.com/

你也可以在《JavaScript權(quán)威指南》第19章了解更多的jQuery知識(shí)。

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

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

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

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

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

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

接下來開始建立一個(gè)JavaScript問答應(yīng)用（還會(huì)用到HTML和CSS），功能如下：

// 這里只演示一個(gè)問題，你要把所有問題都添加進(jìn)去
   var allQuestions = [
       {
           question: "Who is Prime Minister of the United Kingdom?",
           choices: [
              "David Cameron",
              "Gordon Brown",
              "Winston Churchill",
              "Tony Blair"],
           correctAnswer: 0
       }
   ];

當(dāng)用戶點(diǎn)擊“Next”時(shí)，使用document.getElementById或jQuery動(dòng)態(tài)的添加下一個(gè)問題，并且移去當(dāng)前問題。在這個(gè)版本里“Next”是唯一的導(dǎo)航按鈕。

你可以在本文下方評(píng)論求助，最好是去Stack Overflow提問，在那里會(huì)有及時(shí)而準(zhǔn)確的回答。

閱讀《JavaScript權(quán)威指南》第10，14，17，20章。

或者閱讀《JavaScript高級(jí)程序設(shè)計(jì)》第20，23章。

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

此時(shí)，你用起JavaScript來應(yīng)該很順手，有點(diǎn)像武林高手要出山了。但你還不能成為高手，你要把新學(xué)到的知識(shí)反復(fù)使用，不停的學(xué)習(xí)和提升。

升級(jí)之前做的問答應(yīng)用

添加客戶端數(shù)據(jù)驗(yàn)證：保證用戶回答了當(dāng)前問題才能進(jìn)入下個(gè)問題。

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

用jQuery添加動(dòng)畫（淡出當(dāng)前問題，淡入下個(gè)問題）

在IE8和IE9下測(cè)試，修改bug，這里應(yīng)該會(huì)有得你忙了。 ;D

把問題導(dǎo)出JSON文件

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

使用cookies記住用戶，當(dāng)用戶再次登陸時(shí)顯示“歡迎用戶名回來”。

閱讀《JavaScript權(quán)威指南》第9，18，21，22章。

或者閱讀我的博文JavaScript面向?qū)ο蟊刂貢?huì)

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

繼續(xù)升級(jí)你的問答應(yīng)用：

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

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

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

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

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

精通backbone.js

中高級(jí)JavaScript進(jìn)階

不側(cè)漏精通Node.js

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

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

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

一個(gè)人必須去感受和領(lǐng)悟構(gòu)建程序帶來的強(qiáng)烈快感。當(dāng)你一步步的掌握知識(shí)點(diǎn)，一點(diǎn)點(diǎn)的將程序搭建起來時(shí)，就會(huì)對(duì)自己產(chǎn)生激勵(lì)與肯定，帶來十分美妙的滿足感。

總有一天你會(huì)意識(shí)到之前忍受的所有困難都是值得的。因?yàn)槟銓⒁蔀橐幻鈽s的程序員，你也清楚作為JavaScript開發(fā)者，你的前途一片光明。就像在你之前成千上萬的程序員一樣，你打敗了最難的bug，你沒有退步，你沒有放手，你沒有找任何借口讓自己放棄。

當(dāng)你學(xué)有所成的時(shí)候，放心的將你的成果分享給我們吧，哪怕是個(gè)微不足道的，小到顯微鏡都看不到的小項(xiàng)目。

英文原文
via Jaward華仔