Given at AjaxWorld West 2008.

1. { The Beauty of JavaScript }
Mike Girouard | AjaxWorld 2008

2. Hello.

3. 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

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

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

6. JavaScript offers classless OOP.

7. JavaScript is a functional language.

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

9. Many brilliant engineers have
contributed to JavaScript.

10. Unfortunately mouse trails left some
nasty scars.

11. Despite it’s aws, many
beautiful features exist.

12. JavaScript resembles C & Java.

13. foo.bar = ‘baz’;

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

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

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

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

18. Everything is literal.

19. var name = ‘Mike G.’;

20. var age = 25;

21. var canDrink = true;

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

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

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

25. Subscript notation is bad ass.

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

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

28. Functions are objects.

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

30. JavaScript is functional.

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

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

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

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

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

36. Inheritance is achieved through
prototypes.

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

38. Don’t forget about Ajax.

39. 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);

40. JavaScript is available of ine.

45. Expressive code breeds
beautiful patterns.

46. Self-invocation creates scope.

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

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

49. Load-time de nition/branching saves
trees.

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

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

52. The Module enables private members.

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

54. Lazy function de nition saves even more
trees.

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

56. Fragment templates create DOM nodes.

57. 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);
};
})();

58. Node registries keep DOM nodes
organized.

59. 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’)
};

60. Libraries make beautiful
abstractions.

61. Prototype by Sam Stephenson.

62. $(…)

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

64. jQuery by John Resig

65. $(…)

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

67. YUI by Yahoo!

68. YAHOO
YAHOO.util.Dom
YAHOO.util.Event

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

70. It’s up to us to keep
JavaScript Beautiful.

71. Listen to Doug.

72. Pick a library, any library.

73. Protect the global object.

74. Use *Lint.

75. Use *Unit.

76. Educate others.

77. Be careful. JavaScript is not secure.

78. Thank you.
mikeg@lovemikeg.com

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