The Beauty Of Java Script V5a

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 my.lib = (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!

YAHOOYAHOO.util.DomYAHOO.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.

Thank [email protected]