The Beauty Of Java Script V5a

  • 925 views
Uploaded on

 

More 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
925
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