Practical prototype and scipt.aculo.us part 3 pot

Iwrote this book for people who have some experience with JavaScript and no experi-ence with Prototype.. I mean for “experiexperi-ence with JavaScript” to cast a wide net: you may love J

About the Technical Reviewer

After getting hooked on the Web in 1996 and spending several years pushing pixels and

bits for the likes of IBM and Konica Minolta, AARON GUSTAFSON founded his own web

consultancy: Easy! Designs Aaron is a member of the Web Standards Project (WaSP)

and the Guild of Accessible Web Designers (GAWDS) He also serves as a technical

edi-tor for A List Apart, is a contributing writer for Digital Web Magazine and MSDN, and

has built a small library of writing and editing credits in the print world, including

con-tributions to AdvancED DOM Scripting (friends of ED, 2007), Accelerated DOM

Script-ing with Ajax, APIs, and Libraries (Apress, 2007), and Web Design in a Nutshell, Third

Edition (O’Reilly, 2006) Aaron has graced the stage at numerous conferences, including

An Event Apart, COMDEX, South by Southwest, the Ajax Experience, and Web

Direc-tions, and he is frequently called on to provide web standards training in both the

pub-lic and private sectors

He blogs at http://easy-reader.net

xv

Anumber of forces conspired to help me finish this book, despite my best efforts not

to Aaron Gustafson was a great help as technical editor and gave thoughtful code

cri-tiques The patient, stoic folks at Apress gave me constructive encouragement

through-out the slow, arduous process Christophe Porteneuve, having written a book on the

same subject, gave me tips on several occasions

I am also grateful to Sam Stephenson, both for creating Prototype and for inviting

me to be a part of Prototype Core Other team members gave critical moral support:

Thomas Fuchs, Tobie Langel, Mislav Marohnic, and Justin Palmer

Objects, as well as people, were instrumental in the completion of this book:

a MacBook Pro, TextMate, Parallels Desktop, and sugar-free Red Bull I thank them for

their support

Iwrote this book for people who have some experience with JavaScript and no

experi-ence with Prototype I mean for “experiexperi-ence with JavaScript” to cast a wide net: you

may love JavaScript, or hate it, or love the language but hate browser scripting, or love

both, or hate both

Because the book assumes some JavaScript experience, it does not cover the most

basic parts of the JavaScript language itself, nor does it cover the DOM There are

many books that can get you started on that path, but the best free resource is Quirks

Mode (www.quirksmode.org), the authoritative and exhaustive reference created by

Peter-Paul Koch

This book is also meant to appeal to those who have some experience with

Proto-type but don’t consider themselves experts Many have worked with ProtoProto-type indirectly

through Ruby on Rails or a similar framework Many have used a third-party script that

depended on Prototype, but treated the code as a black box

In the first chapter of the book, we’ll look at some aspects of the JavaScript language

that novice users may not know about Feel free to spend as much time on Chapter 1 as

you need, since it’s crucial that you understand these concepts if you want to use

Proto-type effectively

The screenshots in this book show Firefox running on Windows XP, but the code

examples are designed to work in all major browsers and on all major platforms

Proto-type boasts official support for Firefox (versions 1.5 and above), Internet Explorer (6 and

above), Safari (2 and above), and Opera (9.2 and above)

I welcome your feedback, observations, and ridicule I can be reached at

book@andrewdupont.net

xix

P A R T 1

What You Should Know

About Prototype, JavaScript,

and the DOM

Before jumping into the deep end, you should learn about where Prototype comes

from—its purpose, origin, and philosophy We’ll also discuss what differentiates

Proto-type from other libraries

First, though, we need to make sure we’re on the same page This book assumes

a basic familiarity with JavaScript and the DOM, but that’s a vague prerequisite, and

JavaScript is a language both broad and deep

In case you need a refresher, here’s a crash course in topics that will be built upon in

the chapters to follow

About JavaScript

George Orwell once wrote that writing JavaScript “is a horrible, exhausting struggle, like

a long bout of some painful illness One would never undertake such a thing if one were

not driven on by some demon whom one can neither resist nor understand.”

OK, that’s a lie He actually said that about writing books Keep in mind, though, that

JavaScript had not yet been created in Orwell’s time, and that a modern-day Orwell might

have eschewed prose in favor of programming, a far higher artistic pursuit.

I feel this way about JavaScript, at the very least It’s a brilliant language with very

public flaws It was created hastily and standardized prematurely The JavaScript

envi-ronments within browsers vary wildly in spec compliance, language features, and speed

It’s a language whose ideals are compromised by the imperfect state of today’s Web

We’ll talk about ways to mitigate these flaws But first let’s look at some of the things

that make JavaScript brilliant

3

C H A P T E R 1

Everything Is an Object

The sooner you embrace this concept, the more quickly you’ll understand Prototype: everything in JavaScript is an object This has several different meanings and several different implications, which are outlined in the following subsections

All Data Types Have Instance Methods

Like other languages that embrace object orientation, every object can have instance methods This allows for flexible syntax and makes code easier to read

["foo", "bar", "baz"].join(' ');

//=> "foo bar baz"

"foo bar baz".split(' ');

//-> ["foo", "bar", "baz"]

It also ensures that functions don’t clutter up the global namespace What’s the use

of a generic joinfunction, for instance, if it works only on arrays? Or a generic splitthat works only on strings?

All Data Types Inherit from Object

JavaScript boasts half a dozen native data types: Object,String,Array,RegExp(for regular expressions), Boolean(true or false), and Date

I place Objectfirst because it’s the root data type When I say that everything in JavaScript is an object, I also mean that everything in JavaScript is an Object Confused? Let me explain

Objectcan be thought of as a blank data type, the empty canvas that all other types

start with There is nothing Objectdoes that another type can’t do, but then that’s the point: Objects can bend to your will

But back to the main point: Everything in JavaScript is an Object We can verify this with the instanceofoperator on some core JavaScript data types:

Array instanceof Object;

//-> true

RegExp instanceof Object;

//-> true

Date instanceof Object;

//-> true

String instanceof Object;

//-> true

C H A P T E R 1 ■ W H AT YO U S H O U L D K N O W A B O U T P R OTOT Y P E , J AVA S C R I P T, A N D T H E D O M

4