论坛首页 Web前端技术论坛

雄辩的JavaScript(经典翻译计划1)

浏览 9237 次
精华帖 (1) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2012-04-15   最后修改:2012-04-18

 

亲们,以前看过一个JavaScript入门的推荐帖子(article.yeeyan.org/view/188878/225166),其中推荐了若干书目,但是一大部分还木有翻译。计划在最近一年把它们汉化,分享给大家。


第一本书是《Eloquent JavaScript》,就从这里开始吧。




EloquentJavascript


An opinionated guide to programming


by Marijn Haverbeke




前言


雄辩的Javascript(译者注:翻译为生动更为贴切)是一本有思想性针对Javascript的导论(教程),这是一本电子书。除了描述性地语言外,包含了大量的实例,创造了一个试验并与实践这些实例的环境。


本书的读者是小虾们。有一些编程经验的菜鸟,可以略过2到5章,这些概念你可能已经很熟悉了。当然请要阅读第一章的最后部分,这个部分有许多关于本书的重要信息。


本书是免费的,可以按照你的需要使用全书或者其中的某些部分,使用时请标注我是原作者。

 


第一章 Introduction


 

个人电脑最初被引入时,多数装配了BASIC这样简单的程序设计语言。当时,与电脑进行交互基本上等同于与编程语言进行交互,每一个个人电脑的使用者,无论是出于主动还是被动,都尝到了编程语言的滋味。现在个人电脑越来越多,越来越廉价,用户只需要通过鼠标就能和个人电脑进行交互:对于多数用户来说,这足够了。但是对于那些技术控,将程序设计从日常使用中分离,是一件很不方便的事情。

 

幸运的是,作为web编程中一种高效的开发方式,现代浏览器都有一个Javascript开发和解释环境。不用技术细节给用户带来不必要的麻烦是一个信条,因此Javascript总是很好地隐藏,浏览器使其生效,同时也成为了一个学习编程的平台。

 

这个正是这本书希望传达的。

 

 

子曰:“不愤不启,不悱不发,举一隅不以三隅反,则不复也。”

                             ——孔子

 

除了介绍JavaScript,本书也尝试介绍编程的基本原则。编程,是复杂的。但是基本的原则,多数时候是简单的。当程序构建在这些基本的原则之上时,规则和复杂性就没有那么简单了。编程应该是简单和可预测的,正如这一领域的先驱Donald Knuth所说,编程是一门艺术。

 

如果想从本书获得一些比粗略浏览更为重要的干货。请保持你的敏锐,去钻研、解答练习题,只有坚持才能确保你理解了它。


 

 

电脑程序员是宇宙的创造者,这个宇宙由他创造也由他负责,程序语言会创造几乎无限复杂的宇宙。

 

                                 ——Joseph Weizenbaum,计算能力与人类理性

 

程序是一个复杂体。它既是程序员编写的一个代码片段,又是电脑工作的指导力量,既是内存中的数据,同时它又控制了内存中数据的行为。尝试类比程序和我们日常生活中事物的相似性,往往功亏一篑,但是对机器来说或许很合适。机械手表的齿轮巧妙地结合在一起,如果制表人技艺足够精湛,手表可以连续几年精准地报时。程序中的元素以相似的方式组合,如果程序员明白他所作的一切,程序运转将不会崩溃。

 

电脑整合了这些无形的部件。电脑只会毫无智能地,直线型地执行命令,它的优势在于以惊人的速度执行它们。一个程序可以优雅地组合这些简单的命令,完成很复杂的任务。

 

对于一些人而言,写程序是一种非常吸引人的。程序是一系列思想的组合。构建它们是廉价的,轻量级的,只要双手敲击键盘,程序便会增长。如果失去了对程序的控制,它的大小、复杂性将会失控地增长,哪怕是它的开发者也会感到迷惑不解:这个是编程存在的主要问题,也是如今那么多程序无故地挂掉、崩溃的原因。

 

 

程序运行时是无比美丽的,编程的艺术就是控制复杂性的艺术。出色的程序是可控的,复杂度较低的。

 

 

如今很多程序员认为使用一系列熟知的技术集合就可以很好地控制程序的复杂性。他们给程序的形式定义了一系列复杂的教条。


 

为了使得程序更加直观和可预见,而为神奇和美丽的程序设置若干禁忌,的确妨碍了编程的丰富性啊!编程技术的全景是多样性、广阔和吸引人的,还有许多未知等待我们去发见。陷阱和圈套大大减少了它们,甚至把许多资深的程序员引向了可怕的错误深渊,但这些仅仅提醒你要如履薄冰,与机智随行。学习的过程中你总会遇到新的挑战,新的领域也将等待你去探索。拒绝探索的程序员将会停止不前,失去乐趣,当然也会失去前进的动力(成为一个专家的动力)。

 

正如我提到的,一个程序员的准则是无所谓对错的。效率、清晰、程序大小的控制也同样重要:但是如何在这些相互对立的因素上取得平衡是一件让人头大的事情。规则是重要的,适时地打破规则同样重要。

 

 

计算机诞生时,是没有程序设计语言的。编程看起来像下面这样:


 

00110001 00000000 00000000
00110001 00000001 00000001
00110011 00000001 00000010
01010001 00001011 00000010
00100010 00000010 00001000
01000011 00000001 00000000
01000001 00000001 00000001
00010000 00000010 00000000
01100010 00000000 00000000

 

 

这是一个从1一直加到10的程序,它指出了结果(1 + 2 + ..  + 10 = 55)。那种结构非常简单的计算机就可以执行它。在早期的计算机上编程,要在正确的位置上设置许多排列好的开关,并且从卡片机上输入数据。你会觉得这是一个令人郁闷的,随时都会发生错误的过程。即使编写最简单的程序,都需要耗费大量人类智能,设置许多规范,涉及众多复杂的特性。

 

当然,手工输入这些诡异的比特位(也就是01)给程序员们带来了巨大的满足和成就感,就像巫师一般,是很值得的。

 

上面的每一行数字串代表了一个单独的指令,如果用自然语言描述应该是这样:

 

  1. 0储存在内存位置0
  2. 1储存在内存位置1
  3. 将内存1位置的值储存到内存2位置
  4. 内存位置2中的值减去11
  5. 如果内存位置2中的值为0那么执行指令9
  6. 把内存位置1中的值加到内存位置0
  7. 内存位置1中加1
  8. 回到指令3
  9. 输出内存0位置中的值

 

虽然这样描述易懂一些,还是让人感到不爽。用名字替代指令和位置似乎会好一些:

 

'total'设置为0

'count'设置为1

[loop]

'compare'设置为'count'

'compare'中减去11

如果'compare',跳转到[end]

'count'的值加到'total'

'count'中加1

跳转到[loop]

[end]

输出'total'

 

到这一层面上不难理解程序是如何运行的了。你理解了吗?最开始的两行赋予两个内存位置起始值:total用于计算程序的结果,count用于计算和跟踪当前的数值。使用compare的一行是最晦涩的。程序用这行判断count是否为11,以便停止程序的循环。程序如此之原始,以至于只能通过检查是否为0,并依据这个检查结果进行跳转。所以这个内存位置被命名为compare,计算count - 11的值,并且依据这个结果来做出行动。后面的两行将count加到了结果中,并且使count增加1,只要count不为11,就会持续增加下去。


同样的程序用Javascript实现起来是这样的:


 

var total = 0, count = 1;
while (count <= 10) {
	total += count;
	count += 1;
}
print(total);

 

 

可以看到诸多本质上的提升,最重要的是这里已经没有必要通过特定的方法实现程序的回退与执行,一切工作都由神奇的while关键词完成了,程序会执行下去,直到满足了count <= 10这个条件。显然,也没有必要创建临时的变量去判断它是否为0。细节上确实有些傻瓜化了,程序设计语言的威力在于为我们傻瓜化地处理很多细节。

 

下面展示了程序需要便捷化处理一些过程时的形式,对一系列数的集合计算它们的和。


 

print(sum(range(1, 10)));

 

 

程序可以表示为长整数、短整数;可读或者不可读的。第一个版本的程序特别晦涩,最后一个更接近于自然语言:打印出从110的和。(我们将在后面的章节看到如何构建sumrange这些工具)

 

优秀的程序设计语言,为程序员提供了一个更为抽象的表述方法。它隐藏了不友好的细节,提供了方便的块(像while这样的结构),而且总是能让程序员去创建他们自己的块(像sumrange这些操作)。

 

 

JavaScript就是这样一种语言,如今,用于智能地解决网页中遇到的各种棘手的问题。一些人认为下一代JavaScript语言将会成为处理更多其他问题和任务的重要语言。我不知道是否真的会有那么一天,但是如果你对JavaScript兴趣十足,的确值得学习它。即使你以后不会从事web开发 ,书中的经验也会一直跟随你。

 

有些人认为JavaScript有些糟糕的特性,大部分是属实的。当我最初用JavaScript编程时,很快就开始诟病它了:它默认接受几乎我输入的一切代码,但是以完全不同的方式解释和执行。对所做的工作失去线索的确是一个事实,然而真正问题是:JavaScript赋予了程序员巨大的自由。这样的初衷是使得初学者能够快速上手,但是现实是发现程序中的问题愈加困难,程序根本不会告诉你,错误在哪里。

 

然而,灵活性也是一个程序设计语言的优势所在。JavaScript给予了程序员更多空间和技术去完成多数其他严格类型的语言不可能完成的事情:这个特性足以弥补JavaScript的劣势。正确地学习和使用JavaScript语言一段时间后,我渐渐喜欢上了她。

 

 

与名称截然不同,JavaScriptJava程序设计语言关系甚微。命名完全处于营销角度,而不是理性地考虑。1995年当JavaScript被网景引入之时,Java正红得发紫,有些人认为搭上这个营销快车是一件很赞的事情,可以如今我们在名称上迷糊了。


 

ECMAScriptJavaScript关系最为紧密。当除网景以外其他浏览器支持JavaScript特性时,它们看起来更像是ECMAScript,随后文档精确规定了这种语言的工作方式,在文档中,经过委员会的标准化,它被称为ECMAScript

 

ECMAScript定义了一种通用的程序设计语言,只字未提这种语言针对浏览器的拓展。JavaScript是专门针对网页和浏览器的ECMAScript的拓展。

 

还有一些程序设计语言基于ECMAScriptAdobe Flash使用的ActionScript是其中最重要的一种。Flash使得网页丰富化,当然也带来了不少噪声。了解JavaScript不会影响你去构建Flash应用。

 

本书写作之时,人们正在使用ECMAScript4ECMAScript4有几种不同的版本,每一种都有一些特性。完全不用担心这些特性会影响你现在的学习。ECMAScript4更像是我们现在使用版本的拓展,本书提到的一切几乎都会被保持。除非这些新的特性被所有现代浏览器支持,否则,ECMAScript4web编程实用化还有很长的距离。

 

 

 

本书的章节中包含了大量的代码(编者注1)。就我的经验看来,阅读和写代码是一种重要的学习方法。不要只随便浏览这些代码,仔细地阅读和理解它们:最开始可能漫长和无聊,但是你会很快地掌握它,对练习也是一样。除非你确确实实解决了问题,否则不要假设你掌握了它们。

 

基于网页的工作方式,看到其中的JavaScript代码很容易,这也是一种学习方式。纳闷的是,很多程序员并不是很专业,并没有认真学习和掌握JavaScript,因此网页里充斥着很多低质量的代码。近朱者赤,近墨者黑,所以当心了!

 

 

为了使你体验JavaScript编程,无论是实例还是你自己编写的代码都可以通过控制台窗口执行。如果你使用现代图形化浏览器(IE6及更高版本,FireFox1.5或者更高版本,Safari3或者更高版本),打开控制台就可以了。

 

控制台包含了三种重要的元素:显示错误信息和执行结果的输出窗口,JavaScript代码输入区。尝试在里面输入一个数字然后按回车执行,如果程序有意义,它将会展示输出结果。下面试着输入wrong!,输出窗口是不是给出了错误信息?通过上线方向键可以调出你以前输入过的代码。

 

对于大一些跨多行的代码块,可以使用控制台右边的区域。“Run”按钮用于执行这个区域的代码,同时打开多个程序是可以的:用“New”和“Load”可以怎么新的程序。当打开了不止一个文件时,“Run”可以选择其中一个执行,当然通过“Close”可以关闭它们。

 

本书中的示例通过矩形框包围,鼓励你修改它们,最糟糕的结果就是死循环了。

 

幸运的是,浏览器会监测这些害虫,长时间运行无结果的程序进程会被干掉。

 

 

在后面的章节里,我们会一起构建包含多个代码块的程序。

 

 

代码:代码是编程的产物。程序中的一行或者这个程序都可以被称作代码。

 

 

2012414 于杭州

附译言网全文

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 截屏方法1

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开发者网络上找到,语言公正。这本书内容很丰富,有很多代码实例和文段介绍。1

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
<
   发表时间:2012-04-17  

这个很赞~细细看了,很多干货的,需要大家一起翻译吗?

PS:把原文贴出来,大家可以比较。

0 请登录后投票
   发表时间:2012-04-18  
这个不错,前两天还在一个群里边看到推荐了。
希望楼主坚持住,别中途就短了。
0 请登录后投票
   发表时间:2012-04-18  
很期待~~
0 请登录后投票
   发表时间:2012-04-18   最后修改:2012-04-18
楼主的奉献精神可嘉,但是翻译Javascript还不如翻译项目管理或者需求分析或者架构设计之类的书籍,中国的软件行业不缺少高水平的Coder,缺少的是专业的管理人才和设计人才。
0 请登录后投票
   发表时间:2012-04-18  
javascript重在实践,权威指南如果能认真看,再加上大量项目锻炼,就会很牛B了,js东西不多但是有很多技巧
0 请登录后投票
   发表时间:2012-04-18  
smiky 写道
javascript重在实践,权威指南如果能认真看,再加上大量项目锻炼,就会很牛B了,js东西不多但是有很多技巧


+1

javascript高级程序设计也不错的,看了这个,尤其对面试神马的,都很ok了(即使没有大量实践经验)
0 请登录后投票
   发表时间:2012-04-18  
楼主加油...虽然能看英文但是觉得看英文好蛋疼呀...
0 请登录后投票
   发表时间:2012-04-18  
一直想学JavaScript ,只是一直没有毅力坚持下来~
0 请登录后投票
   发表时间:2012-04-19  
js很强大,但是精通的不多,也不需要太多精通的,js可以开发网页游戏,但只是说可以,真正去实现的人不多。。。。因为没必要。。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics