學習JavaScript正確的姿勢-js教程-PHP中文網

不要這樣學習JavaScript

不要一開始就埋頭在成堆的JavaScript線上教學裡，這是最糟糕的學習方法。或許看過無數個教學後會有點成效，但這樣不分層次結構地學習一個東西實在是十分低效，在實際用JavaScript建立網站或web應用時你還是會頻繁的卡住。總的來說，這種學習方法會讓人不知道如何將語言當作工具來使用──當個人工具來使用。

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

還有，不要只從Codecademy等網站學習JavaScript，因為即使知道怎麼寫一大堆JavaScript程式碼小片段，還是不能學會怎麼建立一個web應用程式。即便如此，在後面我還是會建議把Codecademy當作補充的學習資源。

免費註冊Stack Overflow，這是一個程式設計領域的問答論壇。在這裡提問題得到的回答比Codecademy好，即使你的問題非常基礎，看起來很傻（記住，從來沒有愚蠢的問題）。
免費註冊Codecademy，這是一個線上學習平台，你可以直接在瀏覽器裡面寫程式碼。
JavaScriptIsSexy上的一些博文，包括對象，閉包，變數的作用域和提升，函數等等。

JavaSctipt學習路線

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

1～2週(簡介，資料類型，表達式與運算子)

#如果你還不是很了解HTML和CSS，完成Codecademy上的web基礎任務。
閱讀《JavaScript權威指南》或《JavaScript高階程式設計》的前言和第1~2章。
十分重要：在書中遇到的每個範例程式碼都要動手敲出來並且在火狐或Chrome瀏覽器控制台中跑起來、盡量蹂躪它（做各種試驗）。也可以用jsfiddle，但不要用Safari瀏覽器。我建議用火狐搭配Firebug插件去測試和調試程式碼。瀏覽器控制台就是可以讓你寫和執行JavaScript程式碼的地方。
完成Codecademy JavaScript Track上的Introduction to JavaScript部分。
閱讀《JavaScript權威指南》第3~4章。或閱讀《JavaScript高級程式設計》第3~4章。你可以跳過位元操作部分，在你的JavaScript生涯中一般不會用上這個。

再次說明，記得要不時停下來把書本的程式碼敲到瀏覽器控制台裡（或JSFiddle）做各種測試，可以改變幾個變數或是把程式碼結構修改一番。
閱讀《JavaScript權威指南》第5章。至於《JavaScript高級程式設計》則暫時沒有閱讀任務，因為前面已經把相關知識覆蓋了。
完成Codecademy JavaScript Track上的2~5部分。

3~4週(對象，數組，函數，DOM，JQuery)

以下三選一：

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

閱讀我的博文JavaScript 物件詳解.
閱讀《JavaScript權威指南》第6章。
閱讀《JavaScript高階程式設計》第6章。注意：只需要看「理解物件」（Understanding Objects）部分。

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

此時，你應該花很多時間在瀏覽器控制台上寫程式碼，測試if-else語句，for循環，數組，函數，物件等等。更重要的是，你要鍛鍊和掌握獨立寫程式碼，不用借助Codecademy。在Codecademy上做題時，每個任務對你來說應該都很簡單，不需要點幫助和提示。如果你還卡在Codecademy上，繼續回到瀏覽器上練習，這是最好的學習方法。就像詹姆斯年輕時在鄰居的籃球場上練球，比爾蓋茲在地下室學習程式設計。

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

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

但目前為止，Codecademy依然是學習程式設計的好幫手。特別是從一些基本的程式碼結構如if語句，for循環，函數和變數去引導你了解小專案和小應用的開發過程。

回到Codecademy完成JavaScript路線。做完6~8部分（資料結構做到Object 2）。

實作Codecademy上Projects路線的5個基礎小專案（Basic Projects）。做完之後，你已不再需要Codecademy了。這是一件好事，因為自己做的越多，學得就越快，就能更好準備開始獨立程式設計。

閱讀《JavaScript權威指南》第13，15，16和19章。或閱讀《JavaScript高級程式設計》第8，9，10，11，13和14章。這本書沒有涉及到jQuery，而Codecademy上的jQuery知識也涵蓋得不夠。可以看看jQuery的官方教程，免費的：http://try.jquery.com/

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

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

JavaScript終極編輯器：WebStorm

在你實作第一個專案之前，如果打算以後做JavaScript開發者或常用到JavaScript，最好現在就去下載WebStorm的試用版。這裡可以學習怎麼使用WebStorm（專門為這個課程寫的）。毋庸置疑，WebStorm是JavaScript程式設計最好的編輯器（或IDE）。 30天試用後要付$49.00，但身為JavaScript開發者，這應該是除了買書以外最明智的投資了。
確保在WebStorm中啟用JSHint。 JSHint是一個檢查JavaScript程式碼錯誤和潛在問題的工具，強迫你的團隊按照規格寫程式碼。用WebStorm最爽的地方是JSHint會自動在錯誤的程式碼下顯示紅線，就像文字處理程式中的拼字檢查。 JSHint會顯示一切的程式碼錯誤（包含HTML），促使你養成良好的習慣，成為更好的JavaScript程式設計師。 這很重要，當你真正意識到WebStrom和JSHint對你的巨大幫助時，你會回來感謝我的。
此外，WebStorm是一個世界級，專業人員使用的IDE，用來寫專業的JavaScript web應用，所以你以後會經常用到它。它也結合了Node.js，Git和其它JavaScript框架，所以即使你成為了明星級的JavaScript開發者，你還是會用到它的。除非以後出現了更多的JavaScript IDE。
公平起見，我在這裡提一下Sublime Text 2，這是僅次於WebStorm的JavaScript編輯器。它的功能不如WebStorm豐富完整（即使添加了一堆插件）。做小修改的時候我會用到Sublime Text 2，它支援很多語言，包括JavaScript，但我不會用它來建立完整的JavaScript Web應用程式。

第一個專案-動態問答應用程式

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

接下來開始建立一個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動態的新增下一個問題，並且移去當前問題。在這個版本裡「Next」是唯一的導航按鈕。
你可以在本文下方留言求助，最好是去Stack Overflow提問，在那裡會有及時而準確的回答。

5～6週(正規表達式，Window對象，事件，JQuery)

一些鼓勵的話

祝你學習順利，永不放棄！當你做不下去覺得自己很蠢的時候（你會時不時這麼想的），請記住，世界各地的其他初學者，甚至是有經驗的程式設計師，也會不時產生這種想法的。

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

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

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

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

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

原文：http://javascriptissexy.com/how-to-learn-JavaScript-properly/

新增客戶端資料驗證：確保使用者回答了當前問題才能進入下個問題。
新增「Back」按鈕，允許使用者返回修改答案。最多可以回到第一個問題。注意對於使用者回答過的問題，選擇按鈕要顯示已選取。這樣用戶就不需要重新回答已經答過的問題。
用jQuery加入動畫（淡出目前問題，淡入下個問題）
在IE8和IE9下測試，修改bug，這裡應該會有得你忙了。 ;D
把問題匯出JSON檔案
#新增使用者認證，允許使用者登陸，把使用者認證資訊保存在本地儲存（local storage，HTML5瀏覽器儲存）。
使用cookies記住用戶，當用戶再次登陸時顯示「歡迎用戶名回來」。

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

#繼續提升
頁面佈局使用Twitter Bootstrap，把問答的元素弄得看起來專業一點。而作為額外獎勵，用Twitter Bootstrap的標籤控制項（譯者註：原文位址失效，已改）顯示問題，每個標籤顯示一個問題。
學習Handlebars.js，將Handlebars.js範本用在問答應用程式上。你的JavaScript程式碼中不應該再出現HTML程式碼了。我們的問答應用現在越來越高級啦。
記錄參加問答的使用者成績，顯示使用者在問答應用程式中與其他使用者的排名比較。

精通backbone.js
#中高階JavaScript進階
不側漏精通Node.js
Meteor.js入門（即將出爐）
三個最好的JavaScript前端框架（即將出爐）

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

或閱讀我的博文JavaScript物件導向必知必會

或閱讀《JavaScript高階程式設計》第6，16，22，24章，第6章只讀「建立對象」（Object Creation）和「繼承」（Inheritance）部分。注意：這部分是本課程中技術性強度最大的閱讀，要根據自身的狀況考慮要不要全部讀完。你至少要知道原型模式（Prototype Pattern），工廠模式（Factory Pattern）和原型繼承（Prototypal Inheritance），其它的不作要求。
繼續升級你的問答應用程式：
#在學完Backbone.js和Node.js後，你會用這兩種最新的JavaScript框架重構問答應用程式的程式碼，使之變成複雜的單頁現代web應用程式。你還要把用戶的認證資訊和成績都保存在MongoDB資料庫上。
接下來：構思一個項目，趁熱打鐵迅速的去開發。卡住的時候參考《JavaScript權威指南》或《JavaScript高級程式設計》。當然，也要成為Stack Overflow的活躍用戶，多問問題，也要盡量回答它人的提問。