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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The Beauty Of Java Script V5a

949
views

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