标签: 学习 javascript 方法 | 发表时间:2011-10-19 10:55 | 作者:雕工天狼 黄立

译者 雕工天狼

The Best Way to Learn 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


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 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


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 练习非常相似,你会学到简短的课程、在浏览器里编码,然后看结果。得到全部分数、打开成就徽章。


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.




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.


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)


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 website and wiki


Introduction to Firebug on CSS-Tricks


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


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


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:


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 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!


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+上有大量教程列表。”




Assignment 7: Begin Learning a JavaScript Library


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.

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













Assignment 8: Keep up with the Masters


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 类。





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 很熟悉,你可以在评论中推荐其他任何相关资源。

相关 [学习 javascript 方法] 推荐:


- 黄立 - 译言-每日精品译文推荐
学习JavaScript的最佳方法. Andrew Burgess 2011年9月21日. You don’t have to worry about finding the best resources, sorting out the bad ones, and figuring out what to learn next.


- - 博客园_知识库
  首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门.   谈不上经验,都是一些教训.   这个时候有人要说,“靠,你丫半桶水,凭啥教我们”.   你叫一个大学生去教小学数学,不见得比一个初中生教得好. 因为大学生早已经过了那个阶段,都忘记自己怎么走过来的了. 而对于初中生,刚好走过那个阶段,对自己怎么走过来的还记忆犹新,或者还有一些自己的总结.

JavaScript 学习资源推荐

- thanq - 岁月如歌
最近 reddit 有讨论:References for JavaScript Mastery. 去年 Rey Bango 博客上也有一篇文章:What to Read to Get Up to Speed in JavaScript. 下面是我的整理,希望能对你有所帮助. DOM Scripting: Web Design with JavaScript and the Document Object Model – 2005 年,这本书的第一版是我最喜爱的前端书籍之一.


- - 收集分享互联网资源!
//获取obj标签对象的class. //如果oClass为空则直接赋newClass. //1、判断当前标签里是否含有newClass,如果含有newClass则return跳出不赋值,避免反复赋同样的newClass. //2、如果不含有newClass,则在原来oClass的基础上添加新的newClass.


- - 阮一峰的网络日志
将近20年前, Javascript诞生的时候,只是一种简单的网页脚本语言. 如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到 后端,有着各种 匪夷所思的用途. 程序员用它完成越来越庞大的项目. Javascript代码的复杂度也直线上升. 单个网页包含10000行Javascript代码,早就司空见惯.


- - 阮一峰的网络日志
你可能知道,Javascript语言的执行环境是"单线程"(single thread). 所谓"单线程",就是指一次只能完成一件任务. 如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推. 这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.


- - WebHek
最近我在研究开发一个火狐插件,具体的功能是将网页内容截屏并分享到微博上. 目前基本功能已经实现,大家可以在 @程序师视野 里看到用这个截图插件分享的微博的效果. 之前我曾写过 如何将canvas图形转换成图片和 下载canvas图像的方法,这些都是在为这个插件做技术准备. 技术路线很清晰,将网页的某个区域的内容生成图像,保持到canvas里,然后将canvas内容转换成图片,保存到本地,最后上传到微博.

JavaScript 方法的4种调用模式

- - Harttle Land
函数(Function)是JavaScript的基本模块单元,JavaScript的代码重用, 信息隐藏,对象组合等都可以借助函数来实现. JavaScript中的函数有4种调用模式:. 方法调用(Method Invocation Pattern). 函数调用(Function Invocation Pattern).

前端技术系列课程(No.4) – 深入学习JavaScript语言

- - Taobao UED Team

[收藏]利用 Console 来学习、调试JavaScript

- - Web前端 - ITeye博客
利用 Console 来学习、调试JavaScript. 一  什么是 Console. Console 是用于显示 JS和 DOM 对象信息的单独窗口. 并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中. 二  什么浏览器支持 Console. 很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console.