The Beauty of Java Script

8,421
-1

Published on

Given at AjaxWorld West 2008.

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

No Downloads
Views
Total Views
8,421
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
151
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

The Beauty of Java Script

  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.
  41. Expressive code breeds beautiful patterns.
  42. Self-invocation creates scope.
  43. var foo = ‘bar’; var baz = ‘bif’;
  44. (function () { var foo = ‘bar’; var baz = ‘bif’; })();
  45. Load-time de nition/branching saves trees.
  46. var addEvent = (function () { if (window.addEventListener) { return addW3Event; } else if (window.attachEvent) { return addExplorerEvent; } else { return addLegacyEvent; } })();
  47. var getXHR = (function () { if (window.XMLHttpRequest) { return getW3XHR; } else if (window.ActiveXObject) { return getExplorerXHR; } else { throw ‘No XHR Support.’; } })();
  48. The Module enables private members.
  49. var myLib = (function () { var $ = document.getElementById; var cache = {}; return { getElement : function (id) { // do something } }; })();
  50. Lazy function de nition saves even more trees.
  51. var getResource = function () {     var resource, counter;     resource = ‘foo’;     counter = 0;     getResource = function () {         return resource + ‘ has been accessed ’ + (++counter) + ‘ times’;     };     return getResource(); };
  52. Fragment templates create DOM nodes.
  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. Node registries keep DOM nodes organized.
  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. Libraries make beautiful abstractions.
  57. Prototype by Sam Stephenson.
  58. $(…)
  59. $$(…) $A(…) $F(…) $H(…) $R(…) $w(…)
  60. jQuery by John Resig
  61. $(…)
  62. $(‘#print’).click(function () { $(this).addClass(‘printed’); window.print(); });
  63. YUI by Yahoo!
  64. YAHOO YAHOO.util.Dom YAHOO.util.Event
  65. YAHOO.namespace(‘mikeg’); YAHOO.mikeg = (function () { var $ = YAHOO.util.Dom.get; var $$ = YAHOO.util.Selector.query; // do stuff })();
  66. It’s up to us to keep JavaScript Beautiful.
  67. Listen to Doug.
  68. Pick a library, any library.
  69. Protect the global object.
  70. Use *Lint.
  71. Use *Unit.
  72. Educate others.
  73. Be careful. JavaScript is not secure.
  74. Thank you. mikeg@lovemikeg.com
  75. Oh yeah, we’re hiring! careers@mcdpartners.com
  1. A particular slide catching your eye?

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

×