摘要：原文鏈接恰當地學習適合第一次編程和非的程序員持續時間到周前提無需編程經驗繼續下面的課程。如果你沒有足夠的時間在周內完成全部的章節，學習時間盡力不要超過周。你還不是一個絕地武士，必須持續使用你最新學到的知識和技能，盡可能地經常持續學習和提高。

原文鏈接：How to Learn JavaScript Properly

恰當地學習 JavaScript （適合第一次編程和非 JavaScript 的程序員）

持續時間：6 到 8 周

前提：無需編程經驗

繼續下面的課程。

更新（2013年 9月 16日）：

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

注意下還有個基于 Reddit 的學習小組，其他的大部分小組在記在下面的評論里。但這些小組已經從幾個月前就開始了。

這個課程的概要給出了有結構性和啟發性的路線圖，如何恰當完整地學習 JavaScript 從純粹的初學者到達到新的階段.

你確實打算學習 JavaScript，這是在這里的原因，如果你打算開發現代的網站和 Web 應用（包括互聯網創業），這是明智的選擇。盡管網上有大量教你 JavaScript 的資源，但是找到學習“Web 的語言”最高效和最有益的方法并不容易并且會令人沮喪。

值得注意的是，不像前幾年那樣，你需要知道真正服務端的語言（例如 PHP，Rails，Java，Python，或者 Perl）才能開發可擴展的，動態的，數據庫驅動的（database-driven）Web 應用程序，現在你可以多帶帶使用 JavaScript 做到同樣的甚至更好的效果。

初學 JavaScript 時，不要嘗試那些一小段（bits of）跟 JavaScript 無關或者相關的在線教程。這是學習編程語言最糟糕的方式。無數次地學習這樣的教程會有些用，但這個過程效率底下，缺乏徹底學習主旨所需的恰當的層次結構。這導致在開始建立網站和 Web 應用程序時，你會經常不知所措。總之，你不會學到，把這語言當成工具——你的工具來使用的實際知識。

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

不要嘗試只用 Codecademy 來學習這門語言，因為盡管你知道如何編寫非常小的 JavaScript 程序片段，卻絕對沒有學會足夠的知識去構建一個 Web 應用程序的。不過我在下面補充的學習資源里推薦 Codecademy 。

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

我們使用兩本書的其中一本，一本是對編程初學者來說非常理想的，如果你只有有點編程經驗，另一本更好。

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

我個人非常喜歡第一本書，因為作者講解主題非常棒，涵蓋了高級 JavaScript 主題。不過，如果你至少了解一些非常基礎的 Web 開發，最好使用這本書。因此，如果你只有點編程或者 Web 開發（不必是 JavaScript） 經驗，購買這本書：

平裝版：JavaScript 高級程序設計

Kindle 版：JavaScript 高級程序設計

或者：

如果你沒有編程經驗，購買這本書：

JavaScript 權威指南

JavaScript 權威指南

注冊一個 Stack Overflow（免費服務）帳號。這是一個程序設計領域的問答網站。這個網站回答你的編程問題比 Codecademy 更加有用，甚至是非?；A，看起來似乎很愚蠢的問題（記住，從來沒有愚蠢的問題）。

注冊一個 Codecademy 帳號。這是一個在線學習編程的平臺：你在網站寫代碼，瀏覽器就正確顯示結果（這同樣也是免費服務）。

JavaScriptIsSexy博客的文章關注對象，閉包（Closures），變量范圍，Hoist，函數還有更多。

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

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

閱讀《JavaScript 權威指南》的前言和第 1、2 章?；蛘摺禞avaScript 高級程序設計》的介紹，第 1、2 章。

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

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

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

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

閱讀《JavaScript 權威指南》的第 5 章。這步不用閱讀《JavaScript 高級程序設計》，你已經在這本書的上一節學了這些知識。

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

看我的這篇文章《JavaScript Objects in Detail》。或者《JavaScript 權威指南》的第 6 章，或者《JavaScript 高級程序設計》的第 6 章。注意：只閱讀 “理解對象（Understanding Objects）” 章節。這三個里哪個都行，盡管這兩本教材深入更多的細節，如果你閱讀并完全地理解我的文章，可以自信地跳過額外的細節。

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

此時，你應該花費大量的時間在你的瀏覽器控制臺編寫代碼，并測試 if-else 語句，for 循環，數組，函數，對象 等等。 你知道（并保持練習）如何獨立地（不借用 Codecademy 的幫助）在你的瀏覽器編寫代碼。到時你再回到 Codecademy，你應該不需要任何幫助和提示。對你來說每道作業（assignment）都很容易。

如果你仍在 Codecademy 奮斗，則回到你的瀏覽器并 keep hacking away.這里是你常用到的。這個類似勒布朗·詹姆斯（Lebron James）年輕時在“街上”磨練他的技術，或者類似比爾蓋茨在地下室 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 最大的問題是太多的提示和小代碼片段幫助你，很容易通過練習進步你會獲得虛假的成就感。此時你并不了解它，但你大部分正在做的不是靠自己。

現在， Codecademy 仍對你學習如何編寫代碼提供很大的幫助。尤其是指導你完成小項目和小應用程序的開發過程，通過像 if 語句，for 循環和變量構造的非常基本的代碼。

回到 Codecademy 完成 JavaScript track 的 6、7、8 節（(Data Structures （數據結構）到 Object 2（對象））。

當你在 Codecademy，開始構建在Projects track 5個小的基本項目。之后，就完成了 Codecademy。這是件好事，因為你自己實踐得越多，學得就越快，為開始自己獨立編程準備得就越多。

閱讀《JavaScript 權威指南》的 13，15，16 和 19 章。

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

如果你有《JavaScript 權威指南》這本書，閱讀第 19 章，更多關于 jQuery 的內容。

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

在你建立第一個項目之前，如果你打算成為 JavaScript 開發者或者經常使用 JavaScript，你現在應該休息下，下載 WebStorm 的試用版。在這里（特別為這個教程而寫）學習如何著手。

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

確保你設置了 WebStorm 使用了 ** JSHint**。 JSHint 是

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

你正在構建一個 JavaScript 提問應用（你也會用到 HTML 和 CSS），具備的功能如下：

這是一個簡單的提問，有單選按鈕的各種選項（radio button choices），在用戶完成之后顯示他/她的分數。（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.）

用一個數組存儲所有的問題。每個問題，連同它的選項和正確的答案，應該存儲在一個對象里。存儲問題的數組應該跟下面的類似：

// 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}];

當用戶點擊“下一個”按鈕時，動態地（使用 document.getElementById 或者 jQuery）添加下個問題和從屏幕移除目前的問題?！跋乱粋€”按鈕是導航此版本的提問（quiz）的唯一導航。

你可以在下面的評論里或者最好在 Stack Overflow 尋求幫助。你很有可能在 Stack Overflow 得到一個提示或者準確的回答。

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

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

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

這時，你應該覺得 JavaScript 非常舒服，很可能覺得像是絕地武士。你還不是一個絕地武士，必須持續使用你最新學到的知識和技能，盡可能地經常持續學習和提高。

改進之前你的 quiz 程序：

添加客戶端的數據驗證（client-side data validation）：確保在進行到下個問題之前，用戶回答了每個問題。

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

使用 jQurey 添加 animation（動畫），淡出目前的問題，淡入下個問題。

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

在外部的 JSON 文件存儲 quiz 問題。

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

使用 cookies 記住用戶，并當用戶回到 quiz 時顯示“Welcome，名字”信息。

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

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

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

進一步改進你的 Quiz 應用：

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

學習 Handlebars.js，添加 Handlebars.js 模板到 quiz。你應該不再把 HTML 放進你的 JavaScript 代碼里。你的 quiz 一點一點地變得更高級。

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

稍后（在你學了 Backbone.js 和 Node.js），你將會使用這兩種技術重構你的 quiz 代碼，使用最新的 JavaScript 框架把同樣的 quiz 變成精致（sophisticated)，單頁面（single-page）的現代 Web 應用。你可以存儲用戶的認證證書和得分在一個 MongoDB 數據庫里。

下一步：選定構建一個個人項目，開始快速構建你的項目（當你頭腦里一切都還是新的時候）。當你困惑時，使用《JavaScript 權威指南》（或者《JavaScript 高級程序設計》，如果你擁有它）作為參考書。當然做個 Stack Overflow 活躍的成員：問問題和回答別人程序員的問題。

完整地學習 Backbone.js

學習中級和高級的 JavaScript

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

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

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

當你第一次學習編程時，尤其是過了青少年時期（pass your teenage years），剛開始都是很困難的。青少年沒有恐懼，沒有失去的東西，并且可以在充滿熱情的東西投入大量的時間。所以對他們來說，只有簡短的障礙才會出現挑戰。

但是在青少年時期之后，你想快速得到結果，因為沒有充足的時間花費大量的時間在看似無關緊要的小事上。但是你必須深入了解這些東西，并且不要泄氣。只是繼續并堅持這個任務或者尋找 bug 直到搞定它。因為值得的獎勵在最后成功的時候等著你 ————編程很有趣并且有利益回報的（lucrative）。

從構建應用程序得到的令人滿意的樂趣和熱情，是種美妙的感覺，這種感覺必須體會過才能理解。不過更令人滿意的是，當你意識到你已經學到了從頭開始構建應用程序的技能和知識，就會體會到的認可（empowerment）。

這一刻將會來臨，當意識到忍耐所有的困難是值得的，因為你成為了程序員并且你知道作為 JavaScript 開發者的前途是光明的。就像你之前經歷過成千上萬的：你在最難（toughest）的 bugs，妥協與放棄中存活了，你戰勝了退出的找借口。

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