0
{ 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
JavaSc...
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 = ...
(function () {

  // do something

})();
var outer, inner;

outer = function () {
    var counter = 0;

     inner = function () {
         return ++counter;
     ...
Inheritance is achieved through
prototypes.
var Foo, Bar;

Foo = function () {};
Foo.prototype.bar = 123;

Bar = function () {};
Bar.prototype = new Foo;
Bar.prototyp...
Don’t forget about Ajax.
var xhr;

xhr = new XMLHttpRequest;
xhr.onreadystatechange = function (event) {
    if (xhr.readyState === 4) {
        co...
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) {...
var getXHR = (function () {
  if (window.XMLHttpRequest) {
    return getW3XHR;
  }
  else if (window.ActiveXObject) {
   ...
The Module enables private members.
var my.lib = (function () {

  var $ = document.getElementById;
  var cache = {};

  return {
     getElement : function (...
Lazy function de nition saves even more
trees.
var getResource = function () {
    var resource, counter;

     
    resource = ‘foo’;
     
    counter = 0;
     
    g...
Fragment templates create DOM nodes.
var getEmailTemplate = function () {
    var email, link, check;

       email = document.createElement(‘div’);
       lin...
Node registries keep DOM nodes
organized.
var d     = document;
var byId = d.getElementById;
var byTag = d.getElementsByTagName;

var elements = {
   ‘foo’ : byId(‘...
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...
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 you.
mikeg@lovemikeg.com
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
Upcoming SlideShare
Loading in...5
×

The Beauty Of Java Script V5a

977

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
977
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "The Beauty Of Java Script V5a"

  1. 1. { The Beauty of JavaScript } Mike Girouard | AjaxWorld 2008
  2. 2. Hello.
  3. 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. 4. I’d like to talk about a language like no other.
  5. 5. JavaScript’s core is built on top of many genius ideas.
  6. 6. JavaScript offers classless OOP.
  7. 7. JavaScript is a functional language.
  8. 8. JavaScript runs on the client-side & server-side.
  9. 9. Many brilliant engineers have contributed to JavaScript.
  10. 10. Unfortunately mouse trails left some nasty scars.
  11. 11. Despite it’s aws, many beautiful features exist.
  12. 12. JavaScript resembles C & Java.
  13. 13. foo.bar = ‘baz’;
  14. 14. if (foo < bar) { // do something }
  15. 15. for (i = 0; i < n; i++) { // do something }
  16. 16. while (i < n) { // do something }
  17. 17. do { // something } while (i < n);
  18. 18. Everything is literal.
  19. 19. var name = ‘Mike G.’;
  20. 20. var age = 25;
  21. 21. var canDrink = true;
  22. 22. var colors = [‘red’, ‘green’, ‘blue’];
  23. 23. var hexColors = { ‘red’ : 0xFF0000, ‘green’ : 0x00FF00, ‘blue’ : 0x0000FF };
  24. 24. var rgbColors = { ‘red’ : [255, 0, 0], ‘green’ : [0, 255, 0], ‘blue’ : [0, 0, 255] };
  25. 25. Subscript notation is bad ass.
  26. 26. (foo.bar === foo[‘bar’])
  27. 27. var callbacks = { ‘#login-form’ : function () { // code to validate a login }, ‘#print-btn’ : window.print };
  28. 28. Functions are objects.
  29. 29. var foo = function () { return ++foo.counter; }; foo.counter = 0;
  30. 30. JavaScript is functional.
  31. 31. var foo = function () { // do something };
  32. 32. var id = function () { console.log(this.id); }; lib.addEvent(foo, ‘click’, id); lib.addEvent(bar, ‘click’, id);
  33. 33. mouseLib.rollOver( ‘some-element’, function () { this.src = ‘on.jpg’; }, function () { this.src = ‘off.jpg’; } );
  34. 34. (function () { // do something })();
  35. 35. var outer, inner; outer = function () { var counter = 0; inner = function () { return ++counter; }; return counter; };
  36. 36. Inheritance is achieved through prototypes.
  37. 37. var Foo, Bar; Foo = function () {}; Foo.prototype.bar = 123; Bar = function () {}; Bar.prototype = new Foo; Bar.prototype.bar = 456;
  38. 38. Don’t forget about Ajax.
  39. 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. 40. JavaScript is available of ine.
  41. 41. Expressive code breeds beautiful patterns.
  42. 42. Self-invocation creates scope.
  43. 43. var foo = ‘bar’; var baz = ‘bif’;
  44. 44. (function () { var foo = ‘bar’; var baz = ‘bif’; })();
  45. 45. Load-time de nition/branching saves trees.
  46. 46. var addEvent = (function () { if (window.addEventListener) { return addW3Event; } else if (window.attachEvent) { return addExplorerEvent; } else { return addLegacyEvent; } })();
  47. 47. var getXHR = (function () { if (window.XMLHttpRequest) { return getW3XHR; } else if (window.ActiveXObject) { return getExplorerXHR; } else { throw ‘No XHR Support.’; } })();
  48. 48. The Module enables private members.
  49. 49. var my.lib = (function () { var $ = document.getElementById; var cache = {}; return { getElement : function (id) { // do something } }; })();
  50. 50. Lazy function de nition saves even more trees.
  51. 51. var getResource = function () {     var resource, counter;     resource = ‘foo’;     counter = 0;     getResource = function () {         return resource + ‘ has been accessed ’ + (++counter) + ‘ times’;     };     return getResource(); };
  52. 52. Fragment templates create DOM nodes.
  53. 53. 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); }; }();
  54. 54. Node registries keep DOM nodes organized.
  55. 55. 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’) };
  56. 56. Libraries make beautiful abstractions.
  57. 57. Prototype by Sam Stephenson.
  58. 58. $(…)
  59. 59. $$(…) $A(…) $F(…) $H(…) $R(…) $w(…)
  60. 60. jQuery by John Resig
  61. 61. $(…)
  62. 62. $(‘#print’).click(function () { $(this).addClass(‘printed’); window.print(); });
  63. 63. YUI by Yahoo!
  64. 64. YAHOO YAHOO.util.Dom YAHOO.util.Event
  65. 65. YAHOO.namespace(‘mikeg’); YAHOO.mikeg = (function () { var $ = YAHOO.util.Dom.get; var $$ = YAHOO.util.Selector.query; // do stuff })();
  66. 66. It’s up to us to keep JavaScript Beautiful.
  67. 67. Listen to Doug.
  68. 68. Pick a library, any library.
  69. 69. Protect the global object.
  70. 70. Use *Lint.
  71. 71. Use *Unit.
  72. 72. Educate others.
  73. 73. Thank you. mikeg@lovemikeg.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×