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

Like this? Share it with your network

Share

The Beauty Of Java Script V5a

on

  • 1,732 views

 

Statistics

Views

Total Views
1,732
Views on SlideShare
1,731
Embed Views
1

Actions

Likes
0
Downloads
21
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The Beauty Of Java Script V5a Presentation 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