[译] 如何恰当地学习 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）跟咱们分享你的连接。