[譯] 如何恰當地學習 JavaScript

原文連接：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 （How NOT To Learn 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 。

這個教程用到的資源 （Resources For This Course）

更新：Reddit 用戶 d0gsbody 剛在（4月8日） Reddit 爲這個路線圖建立了一個學習小組。他和這個小組的成員熱心助人而且很是活躍。我推薦你參加這個小組，他們會保持你的積極性和幫助你按本身的方式學習 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 更加有用，甚至是很是基礎，看起來彷佛很愚蠢的問題（記住，歷來沒有愚蠢的問題）。

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

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

學成 JavaScript 的路線圖

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

第 1 和 2 周（介紹，數據類型，表達式和操做符）

1. 若是你沒有很好地瞭解 HTML 和 CSS，那麼就去 Codecademy 完成 Web 基礎的歷程（Track）。

2. 閱讀《JavaScript 權威指南》的前言和第 一、2 章。或者《JavaScript 高級程序設計》的介紹，第 一、2 章。

3. • 很是重要：你在書裏碰到的每一個代碼示例，在 Firefox 或者 Chrome 瀏覽器的控制檯或者 使用JSFiddle敲出來，測試下，作些修改（實驗下）。不要使用 Safari。我推薦 Firefox —— 添加上 Firebug 組件來使用它測試和調試你的代碼。瀏覽器的控制檯是你寫和運行 JavaScript 代碼的地方。
   • JSFiddle 是可以讓你在線編寫和測試代碼的 Web 應用，方便在你的瀏覽器使用。你能測試各類代碼，包括 HTML，CSS 和 JavaScript（和 jQuery）的組合。

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

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

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

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

第 三、4 周（對象，數組，函數，DOM，jQuery）

1. 看個人這篇文章《JavaScript Objects in Detail》。或者《JavaScript 權威指南》的第 6 章，或者《JavaScript 高級程序設計》的第 6 章。注意：只閱讀 「理解對象（Understanding Objects）」 章節。這三個裏哪一個都行，儘管這兩本教材深刻更多的細節，若是你閱讀並徹底地理解個人文章，能夠自信地跳過額外的細節。

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

3. • 此時，你應該花費大量的時間在你的瀏覽器控制檯編寫代碼，並測試 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 循環和變量構造的很是基本的代碼。

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

5. 當你在 Codecademy，開始構建在Projects track 5個小的基本項目。以後，就完成了 Codecademy。這是件好事，由於你本身實踐得越多，學得就越快，爲開始本身獨立編程準備得就越多。

6. • 閱讀《JavaScript 權威指南》的 13，15，16 和 19 章。
   • 或者閱讀《JavaScript 高級程序設計》的 8，9，10，11，13 和 14 章。這本書沒有涉及到 jQuery，Codecademy 設計到的 jQuery 不充足。參加這個 jQuery 課程，這是免費的 ———— http://try.jquery.com/。
   • 若是你有《JavaScript 權威指南》這本書，閱讀第 19 章，更多關於 jQuery 的內容。

7. 在http://try.jquery.com/完成所有的jQuery 課程。

使用終極 JavaScript 編輯器：WebStorm

在你創建第一個項目以前，若是你打算成爲 JavaScript 開發者或者常用 JavaScript，你如今應該休息下，下載 WebStorm 的試用版。在這裏（特別爲這個教程而寫）學習如何着手。

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

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

你的第一個項目 ————— 動態提問（A Dynamic Quiz）

此時，你已經學習足夠的知識來構建一個可靠的易管理的 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 獲得一個提示或者準確的回答。

第 5 和 第 6 周（正則表達式，窗口對象（Window Object），事件，jQuery）

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

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

3. 這時，你應該以爲 JavaScript 很是舒服，極可能以爲像是絕地武士。你還不是一個絕地武士，必須持續使用你最新學到的知識和技能，儘量地常常持續學習和提升。

4. 改進以前你的 quiz 程序：
   
   
   • 添加客戶端的數據驗證（client-side data validation）：確保在進行到下個問題以前，用戶回答了每一個問題。
   • 添加「返回」按鈕，容許用戶返回並修改答案，用戶可以回到第一個問題。用戶已經回答的問題，確保顯示單選按鈕的選項，這樣用戶不會被迫再次回答她已經完成的問題。
   • 使用 jQurey 添加 animation（動畫），淡出目前的問題，淡入下個問題。
   • 在 IE 8 和 IE 9 測試這個 quiz，修正任何的 bug。這是個很好的鍛鍊。
   • 在外部的 JSON 文件存儲 quiz 問題。
   • 添加用戶認證：容許用戶登陸，並保存他們的登陸證書到本地存儲器（HTML5 瀏覽器存儲(storage)）。
   • 使用 cookies 記住用戶，並當用戶回到 quiz 時顯示「Welcome，名字」信息。

第 7 周，若是須要到第 8 周（類，繼承，更多 HTML5）

1. • 閱讀《JavaScript 權威指南》的第 9，18，21 章。
   • 或者閱讀個人博客文章 OOP In JavaScript: What You NEED to Know。
   • 或者閱讀《JavaScript 高級程序設計》的第 6 章（此次只閱讀「對象建立」和「繼承」小節） 和 16，22，24 章。注意：在整個路線圖裏，本書的這個章節是你碰到的技術含量最多的。你本身決定是否打算閱讀完這些內容。你應該至少學會原型模式（Prototype Pattern），工廠模式（Factory Pattern）和原型的繼承（Prototypal Inheritance），你沒必要知道全部其餘的模式。

2. 進一步改進你的 Quiz 應用：

   • 使用 Twitter Bootstrap爲整個頁面佈局，包括把 quiz 的元素弄得看起來更專業。做爲額外的好處（As an added bonus），使用 Twitter Bootstrap 用戶界面組件的標籤頁，展現 4 個不一樣的提問，一個標籤放一個。
   • 學習 Handlebars.js，添加 Handlebars.js 模板到 quiz。你應該再也不把 HTML 放進你的 JavaScript 代碼裏。你的 quiz 一點一點地變得更高級。
   • 保留全部作完 quiz 的用戶記錄，並顯示跟其餘測驗者相比的得分排名。

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

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

繼續提升

1. 完整地學習 Backbone.js
2. 學習中級和高級的 JavaScript
3. 閱讀我即將完成的文章 Getting Started with Meteor.js
4. 閱讀我即將完成的文章 the Three Best Front-end JavaScript Frameworks

鼓勵的話

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

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

可是在青少年時期以後，你想快速獲得結果，由於沒有充足的時間花費大量的時間在看似可有可無的小事上。可是你必須深刻了解這些東西，而且不要泄氣。只是繼續並堅持這個任務或者尋找 bug 直到搞定它。由於值得的獎勵在最後成功的時候等着你 ————編程頗有趣而且有利益回報的（lucrative）。

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

這一刻將會來臨，當意識到忍耐全部的困難是值得的，由於你成爲了程序員而且你知道做爲 JavaScript 開發者的前途是光明的。就像你以前經歷過成千上萬的：你在最難（toughest）的 bugs，妥協與放棄中存活了，你打敗了退出的找藉口。

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