学习JavaScript的最佳方法

译者 雕工天狼

The Best Way to Learn JavaScript

学习JavaScript的最佳方法

Andrew Burgess on Sep 21st 2011

Andrew Burgess 2011年9月21日

Learning something new is scary. For me, the biggest issue with picking up a new skill is that I don’t know what I don’t know. Given that, it’s often useful to find a plan for learning whatever you’re interested in. That’s what this post is: your blueprint, your roadmap, your plan of action for learning JavaScript! You don’t have to worry about finding the best resources, sorting out the bad ones, and figuring out what to learn next. It’s all here. Just follow it, step by step.

       学习新的东西是件可怕的事。对我来说，掌握一项新技能最大的问题是，我不知道自己懂什么。鉴于此，定个计划，学习你感兴趣的东西应该会有用。这篇文章的主旨就是：你为学习JavaScript 制定的蓝图、路线、行动计划！你不必担心找不到最好的资源，先整理些不好的资源，再确定下一步该学什么。遵循它，一步一步来。

Assignment 0: Understand what JavaScript Is and Isn’t

任务0：了解什么是JavaScript

Before you actually begin learning JavaScript, take a minute to understand what it is and does.

      在你真正开始学习JavaScript 之前，花一分钟了解一下什么是JavaScript，它有哪些功能。

JavaScript is not jQuery, Flash, or Java. It’s a programming language separate from all of those.

       JavaScript不是jQuery、Flash或Java。与它们不同，它是一种独立的编程语言。

JavaScript is the language of the browser (not exclusively these days, though). It’s primary purpose is to add interactivity to an otherwise static page. In the browser, it’s not going to replace PHP or Ruby for you. It’s not even going to replace your HTML or CSS; you’ll use it in conjunction to them. Also, it isn’t as terrible to learn as you might have thought or heard.

       JavaScript 是浏览器语言（尽管现在不完全是）。主要目的是给静态页面增加交互性。在浏览器里，它不会为你更换PHP或Ruby，也不会更改你的HTML或CSS；你可以把它们串在一起使用。另外，它没有你想的那么难学。

One more note: you’ve heard about jQuery, which is probably the most widely-used JavaScript library. Or maybe you’ve heard about one of the other popular JavaScript frameworks, like Mootools, YUI, Dojo, and others. Where do these fit into the picture? Consider them a collection of JavaScript helper utilities; you’re still writing JavaScript when using them, but it’s heavily abstracted JavaScript. It saves you a ton of work.

       补充说明：你应该听过jQuery，它可能是被使用最广泛的JavaScript 库。也许你还听说过其他比较流行的JavaScript 框架，比如Mootools,，YUI，Dojo 等等。可以将它们统一看做JavaScript辅助工具集；当你使用它们的时候，你还在写JavaScript，但都是些很抽象的JavaScript。它会让你事半功倍。

"You might even have heard someone say that you should start with jQuery (or another library) and learn JavaScript after. I respectfully yet strongly disagree. Get a good handle on JavaScript first, and then use libraries. You’ll understand what you’re doing much better; and, consequently, you’ll be writing much better JavaScript."

      “你甚至可能听到有人说，你应该先学jQuery（或其他库）再学JavaScript。我很尊重他们但完全不同意这种说法。先把JavaScript 学好再用其他库，你会发现你会做的更好；结果就是，你会编写更好的JavaScript。”

--------------------------------------------------------------------------------

Assignment 1: Work Through the Courses at Codecademy.com

任务1：通过Codecademy.com站点的课程来学习

Codecademy is a relatively new website that bills itself as “the easiest way to learn how to code.” You’ll be the judge of that! Currently, there are only two course: “Getting Started with Programming” and “JavaScript Quick Start Guide.” This is an awesome way to dip your toes in the JavaScript pool. Very similar to the Try Ruby exercises, you’ll follow short lessons, writing code inside the browser and watching the results. All while earning points and unlocking achievement badges.

        Codecademy是一个相对较新的网站，其广告语是“最易学的编码方法”。目前，该网站仅有两个课程，“初级编程”和“JavaScript快速入门指南”。沉浸在JavaScript 中是种不错的体验。跟 Try Ruby 练习非常相似，你会学到简短的课程、在浏览器里编码，然后看结果。得到全部分数、打开成就徽章。

（Ruby，一种为简单快捷的面向对象编程（面向对象程序设计）而创的脚本语言。）

If you’re already familiar with another programming language, you can probably start with the “JavaScript Quick Start Guide”; if this is your first time taking up programming (beyond HTML and CSS), then you’ll find the “Getting Started with Programming” course immensely helpful. Codecademy is free, but signing up is required.

      如果你已熟悉了另一种编程语言，你也许可以先学“JavaScript快速入门指南”；如果这是您第一次编程（HTML和CSS除外），你会发现“初级编程”课程相当有用。Codecademy是一家免费网站，但需要注册。

--------------------------------------------------------------------------------

----------------------------------------------------------------------------------

Assignment 2: appendTo’s Screencasts

任务2：appendTo 截屏方法

The folks at appendTo have a fantastic set of screencasts geared specifically for beginners. If you want to learn JavaScript the right (and easy) way, definitely work along with these lessons. Visual training is always a plus!

       appendTo 视频有一套特别适合初学者的截屏方法。 如果你想用正确（容易）的方法学习JavaScript，学习这些课程绝对管用。视觉训练总是有效的！

“Level up your skills with our on demand, pragmatic training solution. No signup required. No catch. No kidding.”

     “用我们提供的点播内容、务实的训练解决方案来提升自己的技能。无需注册、无需绑定、绝不忽悠。”

--------------------------------------------------------------------------------

----------------------------------------------------------------------------------

Assignment 3: Read A Good JavaScript Introduction

任务3：阅读一本好的关于JavaScript 的说明书

Once you work through the courses at the Codecademy, you’ll want to get a more thorough introduction to JavaScript – an introduction that will introduce you to the all the types, operators, control structures, and more.

       一旦你通过Codecademy上的课程来学习，你就会想搞到一本关于JavaScript的详细说明书–介绍所有的类型、运算符、控件架构等等。

A handful of good introductions, if I may:

       如果可以的话，我来介绍几个好的说明书：

A Re-introduction to JavaScript – This introduction is on the Mozilla Developers Network, and certainly does the language justice. It’s a dense work, with almost as many code examples as paragraphs.

       《再说JavaScript》 – 这本说明书可在Mozilla开发者网络上找到，语言公正。这本书内容很丰富，有很多代码实例和文段介绍。

Eloquent JavaScript – This book, by Marijn Haverbeke, is available freely online, but you can also get it on Amazon if you’d like a hard copy. It goes beyond the MDN intro, because it covers not only the JavaScript language, but also coding style and using JavaScript in the browser. Also, “eloquent” isn’t an overstatement.

       《Eloquent JavaScript》 – 该书由Marijn Haverbeke 编写，可免费在线阅读，如果你想弄个硬拷贝可以上亚马逊网站购买。它比MDN说明更详细，因为它不仅涵盖了JavaScript 语言，而且包括编码风格以及在浏览器里使用JavaScript。当然，“eloquent”并非言过其实。（eloquent - 雄辩的、口若悬河的）

Getting Good with JavaScript – Okay, yes, this is my own book, but there’s another reason I’m including it here. It’s really pretty different from the other two intros I’ve listed here; I only cover what you’ll need to know to get up and running as quickly as possible. Also, it comes with over 6 hours of screencasts, so if that you’re thing, check it out. (And yes, this one costs.)

       《Getting Good with JavaScript》 – 没错，这本书是我写的，但是我介绍这本书是另有原因的。它跟我在前面介绍的两本说明不同；在这本书里我只介绍了编程人员快速掌握编程技巧所需要的部分。此外，它还附带超过6个小时的截屏视频，因此，想要就去看看吧。（当然，这本不是免费的。）

--------------------------------------------------------------------------------

----------------------------------------------------------------------------------

Assignment 4: Install and Learn Firebug (or the Developer Tools)

任务4：安装、学习Firebug（或开发人员工具）

Once you start working with JavaScript in the browser, you’ll want to install Firebug and get familiar with it. Firebug is a plugin for Firefox that assists you in building and debugging your web pages: think of it as the surgeon’s knife for web developers. Don’t use Firefox? Like Safari or Chrome better? No problem: check out the built-in developer tools, which are very similar to Firebug.

       一旦你开始在浏览器里使用JavaScript，就需要安装Firebug并熟悉它的性能。Firebug是一款用于Firefox的插件，它能帮你创建和调试网页：对网页开发者来说，它就像外科医生的‘手术刀’。如果你不用Firefox？喜欢Safari 或者Chrome怎么办？没问题：可以查找类似Firebug的内置开发人员工具。

"You can open the developer tools panel by pressing Option + Command + I on the Mac, or Control + Shift + I on the PC."

      “你可以在Mac地址栏里按选项+命令+I 或者按快捷键Control + Shift + I ，来打开设计工具面板。”

You’ll learn a lot by opening up your tool of choice and just clicking around while on one of your favourite websites. Here are a couple of resources that will get you up to speed:

       通过打开你选的工具，只需在你喜欢的其中一个网站上点击点击，你就会学到很多东西。这里有一些能加速你学习的资源：

Firebug

Firebug

Firebug website and wiki

Firebug网站和维基百科

Introduction to Firebug on CSS-Tricks

Firebug的CSS-技巧说明

10 Reasons Why You Should Be Using Firebug here on Nettuts+.

你应该在Nettuts+上使用Firebug的10大理由。

Firebug: White to Black Belt by me, on the Tuts+ Marketplace.

Firebug：从白带到黑带，Tuts+ Marketplace 网站（http://marketplace.tutsplus.com/item/firebug-white-to-black-belt/118795）

Developer Tools

设计工具

Developer tools website

设计工具网站

Google I/O 2011: Chrome Dev Tools Reloaded by Paul Irish

Google I/O 2011：由Paul Irish重组的浏览器设计工具

Google Chrome Developer Tools: 12 Tricks to Develop Quicker by Paul Irish

Google 浏览器设计工具：Paul Irish 的快速开发12技巧

--------------------------------------------------------------------------------

----------------------------------------------------------------------------------

Assignment 5: Read a Book

任务5：读一本有关JavaScript的书籍

So now you’re familiar with the basics. However, there’s a lot more to learn. While I could recommend a list of books that would bankrupt you, I’ll keep it to four of the highest-quality books you’ll find anywhere:

       现在你已经熟悉了些基础知识，但是还有很多东西要学。尽管我推荐的一些书可能会让你‘破产’，但你会发现任何时候我都会推荐4本高质量的书：                                                           

These first two are general, in-depth JavaScript resources that take what you know from the introductions to a much deeper level; sure, they’ll be some overlap from the introductions, but not much: just enough to keep you comfy.

       前两本是一般的、较深入的JavaScript 资源，它们会让你从简介到较深层次逐步理解；当然，简介里会有一些重叠的说明，但不多：刚好让你看起来很舒服。

(Note: while all these books are available on Amazon, I’ve linked to the publishers’ websites, so you can check out the sample chapters available.)

（注：虽然这些书在亚马逊网站能买到，我已经链接了出版商的网站，因此，你能看看范例章节。）

Professional JavaScript for Web Developers – Written by Nicolas C. Zakas, this book could hardly cover more than it does. If you’ve seen any of Zakas’ work before, you’ll know he’s incredibly thorough. Besides covering the JavaScript language, this book will give you a good handle on using JavaScript in the browser.

   《JavaScript高级程序设计》- Nicolas C. Zakas 编写，这本书涵盖了它能涵盖的所有内容。如果你以前看过Zakas的任何作品，你会发现他是个不折不扣的天才。除了涵盖了JavaScript语言，这本书还能让您在浏览器里很好的使用JavaScript。

JavaScript 24-hour Trainer – This awesome resource was put together by Jeremy McPeak, who writes for Nettuts+ as well. It’s not just a book: it comes with over 4 hours of video tutorials on DVD. There are 43 lessons, covering everything from syntax to coding guidelines and code optimization.

       《JavaScript 24-hour Trainer 》由Jeremy McPeak 编撰，该作者也写过Nettuts+。它不仅仅是一本书：还附带了一张长达四小时的教学光碟。全书共43节课，涉及编码句法指导和代码优化。

While those books are great for understanding the JavaScript language and how to use it in the browser, there’s a lot more to learn. And while those books do go into some patterns and practices, here are two books devoted to those subjects that I think you’ll find useful.

       虽然这些书非常适合编程人员学习JavaScript语言以及如何在浏览器中使用这些语言，但是学无止境。虽然这些书的确进入了一些模式和实练中，我再推荐两本我认为有用的书。

JavaScript Patterns – Written by Stoyan Stefanov. I just finished reading this book, and, boy, do I wish I had read it sooner. After reading the resources above, you’ll know how to write JavaScript, but this book will teach you how to organize it, an important skill that isn’t as common as you’d think.

1）《JavaScript Patterns 》- Stoyan Stefanov著。我也是刚刚读完这本书，我真希望能尽快读完它。在读过上面的资源之后，你可以学到如何编写JavaScript，但是这本书会教你如何对资源进行重组，这项技能很重要，并非如你想象般简单。

JavaScript: The Good Parts – Written by Douglas Crockford. This little gem will explain what’s good and what’s bad about the JavaScript language.

2）《JavaScript：The Good Parts 》- Douglas Crockford 著。该书介绍了JavaScript的优缺点。

--------------------------------------------------------------------------------

---------------------------------------------------------------------------------

Assignment 6: Build Something!

任务6：做些事情！

As you worked through the resources above, you should have been following along with the code samples: pulling them apart, and tweaking them to see what happens. But now it’s time to really strike out on your own. It’s time to actually build something.

        在学习完上述资源后，你应该已经尝试了一些代码样本：修改代码、整合代码看看会怎么样。但是是时候让自己休息一下，做点东西出来了。

So, what can you build? There’s a lot you can do. Here are a couple of ideas.

       你能做什么呢？你能做很多东西。这里有一些意见。

A Photo Gallery: Display a set of photo thumbnails and a main photo. When a user clicks a thumbnail, have the larger version of the thumbnail (not the thumbnail itself) replace the current main photo. Bonus points if you can overlay a caption coming from the thumbnail alt tag, or loop through the photos if the user hasn’t clicked one for a minute.

1） 图片库：显示一套图片缩略图和主图。当用户点击缩略图的时候，要用较大的缩略图（不是原缩略图）替代当前的主图。如果你能覆盖缩略图alt 标记的标题就奖励积分，或是在用户一分钟内未点击的时候进行图片循环。

A To-do List: This might sound tougher than it is; but I’m not suggesting you build a full-fledged to-do application. Just have a text box with a button beside it; when you click the button, the entered text becomes an item in an unordered list below. Clicking on a list item removes it. It sounds simple enough, but there are several gotchas that it will be good for you to think about as a beginner.

2） 待办列表：听起来有点难，我也不打算推荐你制作一个完整的待办列表。只需要做一个文本框并在其旁放上按钮；点击按钮的时候，已输入的文字会在一个无序列表下面变成一个项目。点击列表项目便可移除。这听起来很容易，但有几个陷阱，对初学者来说仔细想想还是很有好处的。

An Animating Box: Animation is always tricky, but it doesn’t have to be complex. Have a div with some text in it, and several buttons above. One button can adjust the width; one, the height; and one, the background colour. The key is not to have the changes happen immediately, but over the course of, say, a second. Remember, Google is your friend, especially if you haven’t done any animation in JavaScript thus far.

3） 动画框：动画其实是小把戏而已，并不需要弄得太复杂。做一个包含了少许文本的div，其上要有若干按钮。一个按钮用来调整宽度，一个用来调整高度；还有一个用来调整背景颜色。关键是不要让更改发生得太快，但在一秒钟之内。记住，Google 是你的朋友，特别是如果迄今为止你还未用JavaScript 做任何动画的话。

I’m sure you can think of other projects that will be great practice. Of course, push yourself out of your comfort zone; that’s the only way to learn.

       我相信你能想到其他的很好的练习的计划。当然，学习的唯一方法是把自己从安乐窝里拽出来。

"Also, be sure to refer to the JavaScript category here on Nettuts+ for a massive list of tutorials, at all skill levels."

“此外，在所有的技能水平上，确保JavaScript 类别在Nettuts+上有大量教程列表。”

（Nettuts是一个专注于提供网络开发教程的网站。）

--------------------------------------------------------------------------------

----------------------------------------------------------------------------------

Assignment 7: Begin Learning a JavaScript Library

任务7：开始学习如何使用JavaScript库

If you’ve come this far, you’ll probably realize that there are several things that are difficult to accomplish in a cross-browser way (or at all) in JavaScript. The biggest offenders are probably things like excessive DOM manipulation, AJAX, and animation. This is where a library comes it.

        如果你学到了这个地步，就会意识到有些JavaScript 编写任务很难（或根本不能）通过跨浏览器的方式实现。最可能违规的便是过量的DOM操作，AJAX和动画。这也就是为什么我们需要JavaScript 库的原因。

As I mentioned earlier, the point of a JavaScript library is to sugar down the painful stuff. Therefore, now might be the time to look at one. There are a ton to choose from, and I’ll let you decided which to experiment with. Whether it be jQuery or Mootools, YUI or Dojo, their respective sites will give you everything you need to get started. If you feel the need, give one a try.

        正如我前面提到的，一个JavaScript 库的详细内容犹如减轻痛苦的蜜糖。因此，现在有必要来看一下。这里有大量库供你选择，我会让你自己决定从哪个开始。无论是jQuery 还是Mootools，YUI 还是Dojo，它们各自的网站会为你提供开始学习时你所需要的一切信息。如果你觉得用得着就来试试吧。

Most Popular Libraries

      最流行的库：

While there’s certainly a countless number of libraries available, you should try to stick with a popular choice – at least at first.

      虽然很容易得到大量的库，你还是应该选一个受欢迎的– 至少排名第一。

jQuery

       jQuery

Dojo

       Dojo

YUI

       YUI

MooTools

       MooTools

Prototype

       Prototype

--------------------------------------------------------------------------------

---------------------------------------------------------------------------------

Assignment 8: Keep up with the Masters

任务8：紧随大师的步伐

There are a ton of incredible JavaScript geniuses out there, who are always doing cool stuff that you don’t want to miss. Thankfully, our never-sleeping associate editor Siddharth has rounded up a list of ”33 Developers you MUST Subscribe to as a JavaScript Junkie. Drop what you’re doing, and subscribe/follow these developers. This is a requirement.

       有很多令人难以置信的JavaScript  天才，他们一直在做些很酷的东西，你一定不想错过。值得庆幸的是，我们的工作狂Siddharth 副主编已经搞到一份33名设计人员列表，要想成为一名JavaScript 发烧友你就必须订阅它。扔下手头的工作，订阅/跟随这些设计人员。这是必须要做的。

But you can do more. This fair website is often posting about JavaScript, so don’t go away. Also, check out the JavaScript Show, a podcast about the latest and greatest in the world of JavaScript. You might also want to sign up to the JavaScript Weekly email newsletter.

       但是，你还能做更多事情。这个公平网站经常发布关于JavaScript 的信息，所以不要走开。此外，关注JavaScript Show ，一档全世界关于JavaScript最新最大的播客。你可能还想注册JavaScript电子周刊简讯。

Still want more? Check out the JavaScript Category over on the Tuts+ Marketplace.

       还想要更多吗？关注Tuts+Marketplace 的JavaScript 类。

--------------------------------------------------------------------------------

---------------------------------------------------------------------------------

Conclusion

      最后

Thanks for reading! Hopefully, this plan can help you become a JavaScript fanatic. If you’re already familiar with JavaScript, can you recommend any other resources in the comments?

       感谢阅读此文！真诚的希望它能帮你成为一名JavaScript 爱好者。如果你已对JavaScript 很熟悉，你可以在评论中推荐其他任何相关资源。