Your SlideShare is downloading. ×
0
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
The Beauty Of Java Script V5a
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Beauty Of Java Script V5a

969

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
969
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
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

×