Borrows from Ruby

(but still feels like JavaScript)

# Ruby  
%w{zero one two three three two one}.uniq.reverse
#-> ["three", "two", "one", "zero"]

// Prototype-flavored JavaScript
$w('zero one two three three two one').uniq().reverse()
//-> ["three", "two", "one", "zero"]

$: Query by ID

// why do this...
document.getElementById('foo');
// when you can do this?
$('foo');

$: Query by ID

// especially since getElementById can't do...
var foo = $('foo');
//-> <div#foo>
$(foo);
//-> <div#foo>

// or this:
$('foo', 'bar', 'baz');
//-> [<div#foo>, <div#bar>, <div#baz>]

$$: Query by CSS selector

$$('li.slide');
//-> [<li.slide>, <li.slide>, <li.slide>...]

$$('li.slide > h1');
//-> [<h1>, <h1>, <h1>...]

$$('ol.presentation > li:first-child');
//-> [<li.title-slide>]

$$('a[rel~=external]');
//-> [<a>, <a>, <a>...]

$$('ol.presentation > li:not(.slide)');
//-> []

Hiding/showing elements

<div id="show-on-load">
<!-- first time running the app, blah blah blah -->
Here's some stuff you need to know...
</div>

Hiding/showing elements

var showOnLoad = $('show-on-load');
//-> <div id="show-on-load">
showOnLoad.hide();
//-> <div id="show-on-load" style="display: none;">

Adding/removing class names

$('show-on-load').className = 'active';
// BAD IDEA ↑
$('show-on-load').addClassName('active');
$('show-on-load').removeClassName('active');

Add your own instance methods

Element.addMethods({
  waffles: function() { return "waffles!"; }
});

$('foo').waffles(); //-> "waffles!"

Generics

(all instance methods on elements can be called statically)

Element.addClassName('show-on-load', 'active');
Element.waffles('foo') //-> "waffles!"

Without a framework

var xhr;
  
// Firefox, Opera, Safari, IE7
if (window.XMLHttpRequest)
  xhr = new XMLHttpRequest();

// IE 5-6
try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } 
catch (e) {
  try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } 
  catch (e) { throw 'Ajax not supported!' }
}

(and that's just to get the Ajax object)

With Prototype

new Ajax.Request('/some/url');
// no, seriously, you're done

Using callbacks

new Ajax.Request('/some/url', {
  onComplete: function(req) { alert(req.responseText); }
  on404: function(req) { alert("file not found"); }
  on500: function(req) { alert("something went wrong"); }
});

Ajax.Updater

new Ajax.Updater('show-on-load', '/welcome_message.html');
//  fills this element ↑   with this URL's content ↑

Define a handler

function makeRed(event) {
  var node = Event.element(event); // the node that was clicked on
  node.style.color = "red";
}

Event.observe

Event.observe('top_bar', 'click', makeRed);
// or...
$('top_bar').observe('click', makeRed);

Event.stopObserving

Event.stopObserving('top_bar', 'click', makeRed);
// or...
$('top_bar').stopObserving('click', makeRed);

for loops suck

for (var i = 0; i < nodes.length; i++) {
  node = nodes[i];
  node.hide();
}

Enumerable to the rescue

nodes.each( function(node) { node.hide(); });

Works with named functions, too

function makeRed(node) {
  node.style.color = "red";
}

nodes.each(makeRed);

Enumerable#map

[1, 2, 3, 4].map( function(n) { return n * n; });
//-> [1, 4, 9, 16]

Enumerable#select, #reject, #detect, #partition

function isEven(num) { return num % 2 == 0; }
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.select(isEven);
//-> [2, 4, 6, 8, 10]
numbers.reject(isEven);
//-> [1, 3, 5, 7, 9]
numbers.detect(isEven);
//-> 2
numbers.partition(isEven);
//-> [ [2, 4, 6, 8, 10], [1, 3, 5, 7, 9] ]

Enumerable#invoke

"  foo     ".strip(); //-> "foo"
["  foo     ", "         bar", "  baz  "].invoke('strip');
//-> ["foo", "bar", "baz"]

Enumerable#invoke

(passes arguments, too)

// bulk event listening:
$$('li.active').invoke('observe', 'click', makeRed);

// zebra-striping tables:        
$$('table tbody > tr:nth-child(even)').invoke('addClassName', 'stripe');

Enumerable#pluck

(like invoke, but for properties)

<ul id="menu">
  <li id="home">Home</li>
  <li id="about">About Us</li>
  <li id="products">Products</li>
  <li id="help">Help</li>
</ul>

$$('#menu li').pluck('id');
//-> ["home", "about", "products", "help"]

Easy DOM Traversal

<div id="usa">
  <ol id="tx">
    <li id="hou">Houston</li>
    <li id="dal">Dallas</li>
    <li id="sa">San Antonio</li>
    <li id="aus">Austin</li>
  </ol>
</div>

Easy DOM Traversal

$('usa').down(); //-> <ol#tx>
$('usa').down('li'); //-> <li#hou>
$('usa').down('li', 1); //-> <li#dal>
$('aus').up('div'); //-> <div#usa>
$('sa').next(); //-> <li#aus>

Context-specific node queries

$('usa').descendants();
//-> [<ol#tx>, <li#hou>, <li#dal>, <li#sa>, <li#aus>]

$('aus').ancestors();
//-> [<ol#tx>, <div#usa>, ... (all the way up to <body>)]

$('usa').getElementsBySelector('li');
//-> [<li#hou>, <li#dal>, <li#sa>, <li#aus>]

$F

Fetch form values

<input type="text" id="first_name" name="first_name" value="Andrew" />

$F('first_name'); //-> "Andrew"

Handy instance methods

(on forms and form controls)

someForm.disable(); //-> disables entire form
someFormControl.disable(); //-> disables control

Form Serialization

<form method="post" action="submit-form.php" id="sample">
  <input type="text" name="first_name" value="Andrew" />
  <input type="text" name="last_name" value="Dupont" />
  <select name="country">
    <option value="USA" selected="selected">United States</option>
    <option value="UK">United Kingdom</option>
  </select>
</form>

Form Serialization

$('sample').serialize();
//-> "first_name=Andrew&last_name=Dupont&country=USA"

Form#request

(ajax + graceful degradation!)

$('sample').request({ 
  onSuccess: function(req) {
    $('sample').replace(req.responseText);
  }
});

Serializing Objects

var airports = {
  AUS: "Austin/Bergstrom Int'l",
  IAH: "Houston/Intercontinental",
  HOU: "Houston/Hobby",
  DAL: "Dallas/Love Field",
  DFW: "Dallas-Fort Worth Int'l"
};

Serializing Objects

var json = Object.toJSON(airports);
//-> '{"AUS": "Austin/Bergstrom Int\'l", "IAH": "Houston/Intercontinental", "HOU": "Houston/Hobby", "DAL": "Dallas/Love Field", "DFW": "Dallas-Fort Worth Int\'l"}'

json.evalJSON(); //-> [Object]

Math is hard :-(

function blackToWhite(node) {
  /* FRUSTRATINGLY COMPLEX ALGORITHM */
  node.style.color = slightlyLighterShadeOfGray(node.style.color);
  
  if (node.style.color != "#FFFFFF")
    window.setTimeout(function() { blackToWhite(node) }, 20);
}

Effect.Morph figures it out

new Effect.Morph('morph_example', { 
  style: "background-color: #fff; color: #000", 
  duration: 1.0
});

Wait — it gets better

.warning { background-color: #900; color: #fff; }

new Effect.Morph('morph_example_2', { style: 'warning' });

Combination effects

new Effect.Pulsate('pulsate_example', { pulses: 4 });