{ The Beauty of JavaScript }
Mike Girouard | AjaxWorld 2008

Hello.

I am a
Back-end guy in a front-end guy’s clothes
Sr. Developer at Magnani Caruso Dutton
JavaScript hacker since ’99
JavaScript developer/evangelist since ’07
Speaker: lovemikeg.com/talks
Blogger: lovemikeg.com/blog

I’d like to talk about a
language like no other.

JavaScript’s core is built on top of many
genius ideas.

JavaScript offers classless OOP.

JavaScript is a functional language.

JavaScript runs on the client-side &
server-side.

Many brilliant engineers have
contributed to JavaScript.

Unfortunately mouse trails left some
nasty scars.

Despite it’s aws, many
beautiful features exist.

JavaScript resembles C & Java.

foo.bar = ‘baz’;

if (foo < bar) {
// do something
}

for (i = 0; i < n; i++) {
// do something
}

while (i < n) {
// do something
}

do {
// something
}
while (i < n);

Everything is literal.

var name = ‘Mike G.’;

var age = 25;

var canDrink = true;

var colors = [‘red’, ‘green’, ‘blue’];

var hexColors = {
‘red’ : 0xFF0000,
‘green’ : 0x00FF00,
‘blue’ : 0x0000FF
};

var rgbColors = {
‘red’ : [255, 0, 0],
‘green’ : [0, 255, 0],
‘blue’ : [0, 0, 255]
};

Subscript notation is bad ass.

(foo.bar === foo[‘bar’])

var callbacks = {
‘#login-form’ : function () {
// code to validate a login
},
‘#print-btn’ : window.print
};

Functions are objects.

var foo = function () {
return ++foo.counter;
};
foo.counter = 0;

JavaScript is functional.

var foo = function () {
// do something
};

var id = function () {
console.log(this.id);
};
lib.addEvent(foo, ‘click’, id);
lib.addEvent(bar, ‘click’, id);

mouseLib.rollOver(
‘some-element’,
function () {
this.src = ‘on.jpg’;
},
function () {
this.src = ‘off.jpg’;
}
);

(function () {
// do something
})();

var outer, inner;
outer = function () {
var counter = 0;
inner = function () {
return ++counter;
};
return counter;
};

Inheritance is achieved through
prototypes.

var Foo, Bar;
Foo = function () {};
Foo.prototype.bar = 123;
Bar = function () {};
Bar.prototype = new Foo;
Bar.prototype.bar = 456;

Don’t forget about Ajax.

var xhr;
xhr = new XMLHttpRequest;
xhr.onreadystatechange = function (event) {
if (xhr.readyState === 4) {
console.log(xhr.responseText);
};
};
xhr.open(‘GET’,document.location.href,true);
xhr.send(null);

JavaScript is available of ine.

Expressive code breeds
beautiful patterns.

Self-invocation creates scope.

var foo = ‘bar’;
var baz = ‘bif’;

(function () {
var foo = ‘bar’;
var baz = ‘bif’;
})();

Load-time de nition/branching saves
trees.

var addEvent = (function () {
if (window.addEventListener) {
return addW3Event;
}
else if (window.attachEvent) {
return addExplorerEvent;
}
else {
return addLegacyEvent;
}
})();

var getXHR = (function () {
if (window.XMLHttpRequest) {
return getW3XHR;
}
else if (window.ActiveXObject) {
return getExplorerXHR;
}
else {
throw ‘No XHR Support.’;
}
})();

The Module enables private members.

var myLib = (function () {
var $ = document.getElementById;
var cache = {};
return {
getElement : function (id) {
// do something
}
};
})();

Lazy function de nition saves even more
trees.

var getResource = function () {
var resource, counter;
resource = ‘foo’;
counter = 0;
getResource = function () {
return resource +
‘ has been accessed ’ +
(++counter) + ‘ times’;
};
return getResource();
};

Fragment templates create DOM nodes.

var getEmailTemplate = (function () {
var email, link, check;
email = document.createElement(‘div’);
link = document.createElement(‘a’);
check = document.createElement(‘input’);
email.className = ‘email-item’;
email.appendChild(check);
email.appendChild(link);
return function () {
return email.cloneNode(true);
};
})();

Node registries keep DOM nodes
organized.

var d = document;
var byId = d.getElementById;
var byTag = d.getElementsByTagName;
var elements = {
‘foo’ : byId(‘foo’),
‘bar’ : byId(‘foo’).byTag(‘bar’)[0],
‘links’ : byTag(‘a’)
};

Libraries make beautiful
abstractions.

Prototype by Sam Stephenson.

$(…)

$$(…) $A(…) $F(…)
$H(…) $R(…) $w(…)

jQuery by John Resig

$(…)

$(‘#print’).click(function () {
$(this).addClass(‘printed’);
window.print();
});

YUI by Yahoo!

YAHOO
YAHOO.util.Dom
YAHOO.util.Event

YAHOO.namespace(‘mikeg’);
YAHOO.mikeg = (function () {
var $ = YAHOO.util.Dom.get;
var $$ = YAHOO.util.Selector.query;
// do stuff
})();

It’s up to us to keep
JavaScript Beautiful.

Listen to Doug.

Pick a library, any library.

Protect the global object.

Use *Lint.

Use *Unit.

Educate others.

Be careful. JavaScript is not secure.

Thank you.
mikeg@lovemikeg.com

Oh yeah, we’re hiring!
careers@mcdpartners.com