摘要：原文鏈接恰當(dāng)?shù)貙W(xué)習(xí)適合第一次編程和非的程序員持續(xù)時(shí)間到周前提無需編程經(jīng)驗(yàn)繼續(xù)下面的課程。如果你沒有足夠的時(shí)間在周內(nèi)完成全部的章節(jié)，學(xué)習(xí)時(shí)間盡力不要超過周。你還不是一個(gè)絕地武士，必須持續(xù)使用你最新學(xué)到的知識(shí)和技能，盡可能地經(jīng)常持續(xù)學(xué)習(xí)和提高。

原文鏈接：How to Learn JavaScript Properly

恰當(dāng)?shù)貙W(xué)習(xí) JavaScript （適合第一次編程和非 JavaScript 的程序員）

持續(xù)時(shí)間：6 到 8 周

前提：無需編程經(jīng)驗(yàn)

繼續(xù)下面的課程。

更新（2013年 9月 16日）：

幾天前成立了剛剛開始這個(gè)路線圖的學(xué)習(xí)小組，所以此時(shí)加入他們是個(gè)好時(shí)機(jī)。這個(gè)過程里你將會(huì)得到很多的支持和鼓勵(lì)。更多訪問下面的鏈接（由Felicia O’Garro組織）：
CodeCrew JavaScript Study Group

注意下還有個(gè)基于 Reddit 的學(xué)習(xí)小組，其他的大部分小組在記在下面的評(píng)論里。但這些小組已經(jīng)從幾個(gè)月前就開始了。

這個(gè)課程的概要給出了有結(jié)構(gòu)性和啟發(fā)性的路線圖，如何恰當(dāng)完整地學(xué)習(xí) JavaScript 從純粹的初學(xué)者到達(dá)到新的階段.

你確實(shí)打算學(xué)習(xí) JavaScript，這是在這里的原因，如果你打算開發(fā)現(xiàn)代的網(wǎng)站和 Web 應(yīng)用（包括互聯(lián)網(wǎng)創(chuàng)業(yè)），這是明智的選擇。盡管網(wǎng)上有大量教你 JavaScript 的資源，但是找到學(xué)習(xí)“Web 的語言”最高效和最有益的方法并不容易并且會(huì)令人沮喪。

值得注意的是，不像前幾年那樣，你需要知道真正服務(wù)端的語言（例如 PHP，Rails，Java，Python，或者 Perl）才能開發(fā)可擴(kuò)展的，動(dòng)態(tài)的，數(shù)據(jù)庫驅(qū)動(dòng)的（database-driven）Web 應(yīng)用程序，現(xiàn)在你可以多帶帶使用 JavaScript 做到同樣的甚至更好的效果。

初學(xué) JavaScript 時(shí)，不要嘗試那些一小段（bits of）跟 JavaScript 無關(guān)或者相關(guān)的在線教程。這是學(xué)習(xí)編程語言最糟糕的方式。無數(shù)次地學(xué)習(xí)這樣的教程會(huì)有些用，但這個(gè)過程效率底下，缺乏徹底學(xué)習(xí)主旨所需的恰當(dāng)?shù)膶哟谓Y(jié)構(gòu)。這導(dǎo)致在開始建立網(wǎng)站和 Web 應(yīng)用程序時(shí)，你會(huì)經(jīng)常不知所措。總之，你不會(huì)學(xué)到，把這語言當(dāng)成工具——你的工具來使用的實(shí)際知識(shí)。

此外，有些人會(huì)推薦你看《JavaScript 語言精粹》（JavaScript: The Good Parts）來學(xué)習(xí) JavaScript，這本書是德高望重的 JavaScript 教父 Douglas Crockford 寫的。盡管 Mr. Crockford 在 JavaScript 方面知識(shí)淵博，被視為 JavaScript 界的愛因斯坦，但是他的書《JavaScript 語言精粹》對(duì)初學(xué)者來說用處并不大。這本書沒有以透徹清晰和容易理解的方式解釋 JavaScript 的核心概念。我推薦你看下 Crockford 的高級(jí)視頻。不過這本書可以做為高級(jí)路線圖的一部分。

不要嘗試只用 Codecademy 來學(xué)習(xí)這門語言，因?yàn)楸M管你知道如何編寫非常小的 JavaScript 程序片段，卻絕對(duì)沒有學(xué)會(huì)足夠的知識(shí)去構(gòu)建一個(gè) Web 應(yīng)用程序的。不過我在下面補(bǔ)充的學(xué)習(xí)資源里推薦 Codecademy 。

更新：Reddit 用戶 d0gsbody 剛在（4月8日） Reddit 為這個(gè)路線圖創(chuàng)建了一個(gè)學(xué)習(xí)小組。他和這個(gè)小組的成員熱心助人并且非常活躍。我推薦你參加這個(gè)小組，他們會(huì)保持你的積極性和幫助你按自己的方式學(xué)習(xí) JavaScript 。自己從頭開始學(xué)習(xí) JavaScript 是很困難的。這是小組的鏈接：[Learning JS Properly – Study Group on Reddit.](Learning JS Properly – Study Group on Reddit.)

我們使用兩本書的其中一本，一本是對(duì)編程初學(xué)者來說非常理想的，如果你只有有點(diǎn)編程經(jīng)驗(yàn)，另一本更好。

你可以使用下面兩本書的其中一本：

我個(gè)人非常喜歡第一本書，因?yàn)樽髡咧v解主題非常棒，涵蓋了高級(jí) JavaScript 主題。不過，如果你至少了解一些非常基礎(chǔ)的 Web 開發(fā)，最好使用這本書。因此，如果你只有點(diǎn)編程或者 Web 開發(fā)（不必是 JavaScript） 經(jīng)驗(yàn)，購買這本書：

平裝版：JavaScript 高級(jí)程序設(shè)計(jì)

Kindle 版：JavaScript 高級(jí)程序設(shè)計(jì)

或者：

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

JavaScript 權(quán)威指南

JavaScript 權(quán)威指南

注冊(cè)一個(gè) Stack Overflow（免費(fèi)服務(wù)）帳號(hào)。這是一個(gè)程序設(shè)計(jì)領(lǐng)域的問答網(wǎng)站。這個(gè)網(wǎng)站回答你的編程問題比 Codecademy 更加有用，甚至是非?；A(chǔ)，看起來似乎很愚蠢的問題（記住，從來沒有愚蠢的問題）。

注冊(cè)一個(gè) Codecademy 帳號(hào)。這是一個(gè)在線學(xué)習(xí)編程的平臺(tái)：你在網(wǎng)站寫代碼，瀏覽器就正確顯示結(jié)果（這同樣也是免費(fèi)服務(wù)）。

JavaScriptIsSexy博客的文章關(guān)注對(duì)象，閉包（Closures），變量范圍，Hoist，函數(shù)還有更多。

如果要完成整個(gè)課程要點(diǎn)，你將會(huì)在 6 到 8 周 里學(xué)習(xí)幾乎全部的 JavaScript 語言（還有 jQuery 和一些 HTML5）。如果你沒有足夠的時(shí)間在 6 周內(nèi)完成全部的章節(jié)，學(xué)習(xí)時(shí)間盡力不要超過 8 周。學(xué)習(xí)的時(shí)間越久，你掌握和記住學(xué)到的東西就越困難。

如果你沒有很好地了解 HTML 和 CSS，那么就去 Codecademy 完成 Web 基礎(chǔ)的歷程（Track）。

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

非常重要：你在書里碰到的每個(gè)代碼示例，在 Firefox 或者 Chrome 瀏覽器的控制臺(tái)或者 使用JSFiddle敲出來，測(cè)試下，做些修改（實(shí)驗(yàn)下）。不要使用 Safari。我推薦 Firefox —— 添加上 Firebug 組件來使用它測(cè)試和調(diào)試你的代碼。瀏覽器的控制臺(tái)是你寫和運(yùn)行 JavaScript 代碼的地方。

JSFiddle 是能夠讓你在線編寫和測(cè)試代碼的 Web 應(yīng)用，方便在你的瀏覽器使用。你能測(cè)試各種代碼，包括 HTML，CSS 和 JavaScript（和 jQuery）的組合。

完成在 Codecademy 上 JavaScript Track（歷程）《介紹 JavaScript》章節(jié)。

閱讀《JavaScript 權(quán)威指南》的第 3、4 章?；蛘摺禞avaScript 高級(jí)程序設(shè)計(jì)》的前言和第 3、4 章。你可以跳過 位操作（Bitwise Operators）這個(gè)章節(jié)。幾乎在你的 JavaScript 生涯用不到這些知識(shí)。再次強(qiáng)調(diào)，務(wù)必停下來在你的瀏覽器控制臺(tái)（或者 JSFiddle）編寫示例代碼，還有做下實(shí)驗(yàn)—— 改變一些變量的值和微調(diào)（tweak）一下代碼。

閱讀《JavaScript 權(quán)威指南》的第 5 章。這步不用閱讀《JavaScript 高級(jí)程序設(shè)計(jì)》，你已經(jīng)在這本書的上一節(jié)學(xué)了這些知識(shí)。

完成 Codecademy 上 JavaScript Track（歷程）的第 2 到 5 章節(jié)。

看我的這篇文章《JavaScript Objects in Detail》?；蛘摺禞avaScript 權(quán)威指南》的第 6 章，或者《JavaScript 高級(jí)程序設(shè)計(jì)》的第 6 章。注意：只閱讀 “理解對(duì)象（Understanding Objects）” 章節(jié)。這三個(gè)里哪個(gè)都行，盡管這兩本教材深入更多的細(xì)節(jié)，如果你閱讀并完全地理解我的文章，可以自信地跳過額外的細(xì)節(jié)。

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

此時(shí)，你應(yīng)該花費(fèi)大量的時(shí)間在你的瀏覽器控制臺(tái)編寫代碼，并測(cè)試 if-else 語句，for 循環(huán)，數(shù)組，函數(shù)，對(duì)象 等等。 你知道（并保持練習(xí)）如何獨(dú)立地（不借用 Codecademy 的幫助）在你的瀏覽器編寫代碼。到時(shí)你再回到 Codecademy，你應(yīng)該不需要任何幫助和提示。對(duì)你來說每道作業(yè)（assignment）都很容易。

如果你仍在 Codecademy 奮斗，則回到你的瀏覽器并 keep hacking away.這里是你常用到的。這個(gè)類似勒布朗·詹姆斯（Lebron James）年輕時(shí)在“街上”磨練他的技術(shù)，或者類似比爾蓋茨在地下室 hacking away。

There is tremendous value in your hacking away and learning bit by bit on your own. You have to see the value in this strategy, and you have to embrace it and trust that it will work.

使用 Codecademy 獲得的是虛假的成就感

Codecademy 最大的問題是太多的提示和小代碼片段幫助你，很容易通過練習(xí)進(jìn)步你會(huì)獲得虛假的成就感。此時(shí)你并不了解它，但你大部分正在做的不是靠自己。

現(xiàn)在， Codecademy 仍對(duì)你學(xué)習(xí)如何編寫代碼提供很大的幫助。尤其是指導(dǎo)你完成小項(xiàng)目和小應(yīng)用程序的開發(fā)過程，通過像 if 語句，for 循環(huán)和變量構(gòu)造的非?；镜拇a。

回到 Codecademy 完成 JavaScript track 的 6、7、8 節(jié)（(Data Structures （數(shù)據(jù)結(jié)構(gòu)）到 Object 2（對(duì)象））。

當(dāng)你在 Codecademy，開始構(gòu)建在Projects track 5個(gè)小的基本項(xiàng)目。之后，就完成了 Codecademy。這是件好事，因?yàn)槟阕约簩?shí)踐得越多，學(xué)得就越快，為開始自己獨(dú)立編程準(zhǔn)備得就越多。

閱讀《JavaScript 權(quán)威指南》的 13，15，16 和 19 章。

或者閱讀《JavaScript 高級(jí)程序設(shè)計(jì)》的 8，9，10，11，13 和 14 章。這本書沒有涉及到 jQuery，Codecademy 設(shè)計(jì)到的 jQuery 不充足。參加這個(gè) jQuery 課程，這是免費(fèi)的 ———— http://try.jquery.com/。

如果你有《JavaScript 權(quán)威指南》這本書，閱讀第 19 章，更多關(guān)于 jQuery 的內(nèi)容。

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

在你建立第一個(gè)項(xiàng)目之前，如果你打算成為 JavaScript 開發(fā)者或者經(jīng)常使用 JavaScript，你現(xiàn)在應(yīng)該休息下，下載 WebStorm 的試用版。在這里（特別為這個(gè)教程而寫）學(xué)習(xí)如何著手。

毫無疑問 WebStorm 絕對(duì)是 JavaScript 開發(fā)者最棒的編輯器（IDE）。當(dāng) 30 天的試用期到期之后需要花費(fèi) $49.00 美元，但這很可能是你作為 JavaScript 開發(fā)者，除了購買這個(gè)課程學(xué)習(xí) JavaScript 使用的書之外最好的投資。

確保你設(shè)置了 WebStorm 使用了 ** JSHint**。 JSHint 是

此時(shí)，你已經(jīng)學(xué)習(xí)足夠的知識(shí)來構(gòu)建一個(gè)可靠的易管理的 Web 應(yīng)用。除非你能夠成功地構(gòu)建我在下面描述的應(yīng)用，否則不要繼續(xù)。如果你有困惑，在 Stack Overflow 提問并重新閱讀書里的章節(jié)，完全理解概念。

你正在構(gòu)建一個(gè) JavaScript 提問應(yīng)用（你也會(huì)用到 HTML 和 CSS），具備的功能如下：

這是一個(gè)簡(jiǎn)單的提問，有單選按鈕的各種選項(xiàng)（radio button choices），在用戶完成之后顯示他/她的分?jǐn)?shù)。（it will show the user her score upon completion.）

能夠顯示多種（any number of）問題和多種選擇。

記錄用戶的得分，并且在最后的頁面顯示最后的得分。最后的頁面只顯示得分，所以把移除最后的問題。（Tally the user’s score and display the final score on the last page. The last page will only show the score, so remove the last question.）

用一個(gè)數(shù)組存儲(chǔ)所有的問題。每個(gè)問題，連同它的選項(xiàng)和正確的答案，應(yīng)該存儲(chǔ)在一個(gè)對(duì)象里。存儲(chǔ)問題的數(shù)組應(yīng)該跟下面的類似：

// Only one question is in this array, 
//but you will add all the questions.
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)擊“下一個(gè)”按鈕時(shí)，動(dòng)態(tài)地（使用 document.getElementById 或者 jQuery）添加下個(gè)問題和從屏幕移除目前的問題?！跋乱粋€(gè)”按鈕是導(dǎo)航此版本的提問（quiz）的唯一導(dǎo)航。

你可以在下面的評(píng)論里或者最好在 Stack Overflow 尋求幫助。你很有可能在 Stack Overflow 得到一個(gè)提示或者準(zhǔn)確的回答。

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

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

記住保持在 Firefox 控制臺(tái)把示例代碼敲出來，并且稍微修改每個(gè)片段的代碼，做下實(shí)驗(yàn)，真正地理解它是怎樣工作和做了什么。

這時(shí)，你應(yīng)該覺得 JavaScript 非常舒服，很可能覺得像是絕地武士。你還不是一個(gè)絕地武士，必須持續(xù)使用你最新學(xué)到的知識(shí)和技能，盡可能地經(jīng)常持續(xù)學(xué)習(xí)和提高。

改進(jìn)之前你的 quiz 程序：

添加客戶端的數(shù)據(jù)驗(yàn)證（client-side data validation）：確保在進(jìn)行到下個(gè)問題之前，用戶回答了每個(gè)問題。

添加“返回”按鈕，允許用戶返回并修改答案，用戶能夠回到第一個(gè)問題。用戶已經(jīng)回答的問題，確保顯示單選按鈕的選項(xiàng)，這樣用戶不會(huì)被迫再次回答她已經(jīng)完成的問題。

使用 jQurey 添加 animation（動(dòng)畫），淡出目前的問題，淡入下個(gè)問題。

在 IE 8 和 IE 9 測(cè)試這個(gè) quiz，修正任何的 bug。這是個(gè)很好的鍛煉。

在外部的 JSON 文件存儲(chǔ) quiz 問題。

添加用戶認(rèn)證：允許用戶登錄，并保存他們的登錄證書到本地存儲(chǔ)器（HTML5 瀏覽器存儲(chǔ)(storage)）。

使用 cookies 記住用戶，并當(dāng)用戶回到 quiz 時(shí)顯示“Welcome，名字”信息。

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

或者閱讀我的博客文章 OOP In JavaScript: What You NEED to Know。

或者閱讀《JavaScript 高級(jí)程序設(shè)計(jì)》的第 6 章（這次只閱讀“對(duì)象創(chuàng)建”和“繼承”小節(jié)） 和 16，22，24 章。注意：在整個(gè)路線圖里，本書的這個(gè)章節(jié)是你碰到的技術(shù)含量最多的。你自己決定是否打算閱讀完這些內(nèi)容。你應(yīng)該至少學(xué)會(huì)原型模式（Prototype Pattern），工廠模式（Factory Pattern）和原型的繼承（Prototypal Inheritance），你不必知道所有其他的模式。

進(jìn)一步改進(jìn)你的 Quiz 應(yīng)用：

使用 Twitter Bootstrap為整個(gè)頁面布局，包括把 quiz 的元素弄得看起來更專業(yè)。作為額外的好處（As an added bonus），使用 Twitter Bootstrap 用戶界面組件的標(biāo)簽頁，展示 4 個(gè)不同的提問，一個(gè)標(biāo)簽放一個(gè)。

學(xué)習(xí) Handlebars.js，添加 Handlebars.js 模板到 quiz。你應(yīng)該不再把 HTML 放進(jìn)你的 JavaScript 代碼里。你的 quiz 一點(diǎn)一點(diǎn)地變得更高級(jí)。

保留所有做完 quiz 的用戶記錄，并顯示跟其他測(cè)驗(yàn)者相比的得分排名。

稍后（在你學(xué)了 Backbone.js 和 Node.js），你將會(huì)使用這兩種技術(shù)重構(gòu)你的 quiz 代碼，使用最新的 JavaScript 框架把同樣的 quiz 變成精致（sophisticated)，單頁面（single-page）的現(xiàn)代 Web 應(yīng)用。你可以存儲(chǔ)用戶的認(rèn)證證書和得分在一個(gè) MongoDB 數(shù)據(jù)庫里。

下一步：選定構(gòu)建一個(gè)個(gè)人項(xiàng)目，開始快速構(gòu)建你的項(xiàng)目（當(dāng)你頭腦里一切都還是新的時(shí)候）。當(dāng)你困惑時(shí)，使用《JavaScript 權(quán)威指南》（或者《JavaScript 高級(jí)程序設(shè)計(jì)》，如果你擁有它）作為參考書。當(dāng)然做個(gè) Stack Overflow 活躍的成員：?jiǎn)枂栴}和回答別人程序員的問題。

完整地學(xué)習(xí) Backbone.js

學(xué)習(xí)中級(jí)和高級(jí)的 JavaScript

閱讀我即將完成的文章 Getting Started with Meteor.js

閱讀我即將完成的文章 the Three Best Front-end JavaScript Frameworks

祝你學(xué)習(xí)一切順利。永不言棄！當(dāng)你掙扎并感到無知時(shí)（你可能時(shí)常如此），總要記住，世界上許多（很可能大部分）其他新手，甚至有經(jīng)驗(yàn)的程序員都有可能遇到這樣的情況。

當(dāng)你第一次學(xué)習(xí)編程時(shí)，尤其是過了青少年時(shí)期（pass your teenage years），剛開始都是很困難的。青少年沒有恐懼，沒有失去的東西，并且可以在充滿熱情的東西投入大量的時(shí)間。所以對(duì)他們來說，只有簡(jiǎn)短的障礙才會(huì)出現(xiàn)挑戰(zhàn)。

但是在青少年時(shí)期之后，你想快速得到結(jié)果，因?yàn)闆]有充足的時(shí)間花費(fèi)大量的時(shí)間在看似無關(guān)緊要的小事上。但是你必須深入了解這些東西，并且不要泄氣。只是繼續(xù)并堅(jiān)持這個(gè)任務(wù)或者尋找 bug 直到搞定它。因?yàn)橹档玫莫?jiǎng)勵(lì)在最后成功的時(shí)候等著你 ————編程很有趣并且有利益回報(bào)的（lucrative）。

從構(gòu)建應(yīng)用程序得到的令人滿意的樂趣和熱情，是種美妙的感覺，這種感覺必須體會(huì)過才能理解。不過更令人滿意的是，當(dāng)你意識(shí)到你已經(jīng)學(xué)到了從頭開始構(gòu)建應(yīng)用程序的技能和知識(shí)，就會(huì)體會(huì)到的認(rèn)可（empowerment）。

這一刻將會(huì)來臨，當(dāng)意識(shí)到忍耐所有的困難是值得的，因?yàn)槟愠蔀榱顺绦騿T并且你知道作為 JavaScript 開發(fā)者的前途是光明的。就像你之前經(jīng)歷過成千上萬的：你在最難（toughest）的 bugs，妥協(xié)與放棄中存活了，你戰(zhàn)勝了退出的找借口。

當(dāng)你建立了一些東西，即使是微小，小巧玲瓏的項(xiàng)目，請(qǐng)隨意（Feel free）跟我們分享你的鏈接。