The document discusses the beauty of JavaScript and its many features. It covers how JavaScript offers classless object-oriented programming and functional programming. It also discusses how JavaScript can run on both the client-side and server-side. The document provides examples of JavaScript syntax like variables, functions, objects, prototypes and more to demonstrate JavaScript's capabilities. It emphasizes that libraries help create abstractions and beautiful patterns in JavaScript code.

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