Your SlideShare is downloading. ×
  • Like
The Beauty Of Java Script V5a
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The Beauty Of Java Script V5a

  • 938 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
938
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
21
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 my.lib = (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. Thank you. mikeg@lovemikeg.com