The Beauty of Java Script

{ 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

http://www.slideshare.net	13
http://www.masihkah.com	9
http://paper.li	4
http://practicals-javascript.blogspot.com	3
http://www.urduweb.org	1
http://localhost	1
http://74.125.153.132	1
http://translate.googleusercontent.com	1

The Beauty of Java Script

by Michael Girouard on Oct 21, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 33

Statistics

The Beauty of Java Script — Presentation Transcript