Your SlideShare is downloading. ×
0
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
JavaScript - From Birth To Closure
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

JavaScript - From Birth To Closure

16,649

Published on

This presentation will give you a brief background to JavaScript, what it is and where it comes from. Then it will walk you through general pitfalls, best practices and more advanced topics such as …

This presentation will give you a brief background to JavaScript, what it is and where it comes from. Then it will walk you through general pitfalls, best practices and more advanced topics such as object-orientation, scope and closures.

Published in: Technology
12 Comments
78 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,649
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
780
Comments
12
Likes
78
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. JavaScript From birth to closure
  2. Yeah, nothing
  3. Brendan Eich
  4. Brendan Eich
  5. What is JavaScript?
  6. • Developed by Brendan Eich 1995 • Initially called Mocha, then LiveScript • First day of light in a beta of Netscape 2 in December 1995 • IE followed suit with JScript in 1996
  7. “You’re number one!”
  8. Has NOTHING to do with Java!
  9. • JavaScript is one of the world’s most popular programming languages • One interpreter on every machine • ECMAScript standardizing - Fifth edition • Web browsers becoming much faster
  10. SunSpider test
  11. Douglas Crockford
  12. Douglas Crockford
  13. • JSON • JSLint • JSMin
  14. JavaScript basics
  15. Variable declaration: var benAffleck = ”Actor”;
  16. Function declaration: function benQuote () { ! return "Rumors about me? Calista Flockhart, Pam Anderson, and Matt Damon. That's who I'm dating."; }
  17. Conditionals
  18. • If • Switch • Shorthand assignment • Ternary operators
  19. function makeMovie (withLivTyler) { ! var nice = withLivTyler || false; }
  20. (datedJLo)? "Lucky guy!" : "No?";
  21. Comparison operators
  22. • = Assignment • == Equality • === Identity
  23. // Assignment var bestFriend = "Matt Damon"; // Equality if (5 == "5") { ! // true } // Identity if (5 === "5") { ! // false }
  24. // Short-circuit logic if (true || false) if (false && true) // Makes this code safe if (obj && obj.property)
  25. // Short-circuit logic if (true || false) if (false && true) // Makes this code safe if (obj && obj.property)
  26. Type coercion
  27. // true 5 == "5" // 123 "1" + 2 + 3;
  28. // 6, manual type conversion parseInt("1", 10) + 2 + 3;
  29. null == undefined == 0 == false == "" • Not really, but sort of • Rather “truthy” or “falsy”
  30. var a = null; var b; // undefined var c = 0; var d = false; var e = ""; if (a) // false if (b) // false if (c) // false if (d) // false if (e) // false
  31. JavaScript data types
  32. • string • number • boolean • null • undefined • Object
  33. Types of Object include: • function • Array • Date • RegExp
  34. Checking type
  35. typeof return values: • string • number • boolean • function • object • undefined
  36. typeof fanClub // "undefined" var title = "Armageddon"; typeof title // Equals "string" var age = 37; typeof age // Equals "number"
  37. function anotherQuote () { ! return "If I ever woke up with a dead hooker in my hotel room, Matt would be the first person I'd call."; } typeof anotherQuote; //"function"
  38. var obj = {}; typeof obj = // "object" var arr = ["B", "E", "N"]; typeof arr // "object"
  39. var obj = {}; typeof obj = // "object" var arr = ["B", "E", "N"]; typeof arr // "object" ?!
  40. Using instanceof
  41. obj instanceof Array // false arr instanceof Array // true
  42. Functions
  43. Procedural function notAHit () { ! return "Gigli"; }
  44. Functions as variables var wroteScript = function () { ! return "Good Will Hunting"; }; wroteScript();
  45. Anonymous document.onmousemove = function (evt) { alert(evt.pageX); };
  46. Self-invoking (function () { ! var dogma = "Shot in 1999"; })();
  47. Self-invoking (function () { ! var dogma = "Shot in 1999"; })();
  48. Function arguments
  49. • Any argument can be omitted • Any argument can be added • No overloading • The arguments collection
  50. function concat (a, b, c) { ! return a + b + c; } concat(1, 2, 3); // 6 concat(1, 2); // NaN
  51. • The arguments collection • Property: arguments.length • NOT an array
  52. function concat () { ! var sum = 0, l = arguments.length; ! for (var i=0; i<l; i++) { ! ! sum += arguments[i]; ! } ! return sum; } concat(1, 2, 3); // 6 concat(1, 2); // 3 concat(1, 2, 7, 11, 5); // 26
  53. Objects
  54. Object constructor function Ben () { ! this.name = "Ben Affleck"; ! this.gotAnOscar = true; }; var ben = new Ben(); alert(ben.gotAnOscar); // true
  55. Object literal var ben = { ! name : "Ben Affleck", ! gotAnOscar : true }; alert(ben.name); // "Ben Affleck"
  56. Different syntax, same thing: ben["arms"] = 2; ben.arms = 2;
  57. Different syntax, same thing: ben["arms"] = 2; ben.arms = 2;
  58. For any object: var ben = {}; ben[1972] = "Year of birth"; ben["born"] = 1972; ben[true] = false;
  59. var regEx = new RegExp; regEx[3] = "I can do this?";
  60. var goodMovie = { ! title : "Good Will Hunting", ! year : 1997 }; for (var item in goodMovie) { ! alert(item + ": " + goodMovie[item]); }
  61. var goodMovie = { ! title : "Good Will Hunting", ! year : 1997 }; // Check returns true if ("year" in goodMovie) { ! alert(goodMovie.year); }
  62. Inheritance
  63. • Prototype-based inheritance • Not class-based
  64. • The prototype chain checks itself first • It then goes to the parent, parent’s parent etc...
  65. function Being () { ! this.living = true; } Being.prototype.greet = function () { ! return "Hello!"; };
  66. function Ben () { ! this.talks = true; } Ben.prototype = new Being; Ben.prototype.saySomething = function () { ! return "I feel like fame is wasted on me."; };
  67. // Create an instance var ben = new Ben(); // Returns "I feel like fame is wasted on me." ben.saySomething(); // Returns "Hello!", inherited // from the Being object ben.greet();
  68. Checking for the greet() method in this order: • ben instance • Ben prototype • Being prototype • Object prototype
  69. Class-based mimicking • Simple JavaScript Inheritance • A Base Class for JavaScript Inheritance • Defining classes and inheritance
  70. Why prototype syntax • It’s native, i.e. no dependencies • Freedom of style and version • Easy readability • Code handover
  71. Why prototype syntax “I have been writing JavaScript for 8 years now, and I have never once found need to use an uber function... ...I now see my early attempts to support the classical model in JavaScript as a mistake.” - Douglas Crockford
  72. Scope
  73. • Scope refers to where variables and functions are accessible • In what context something is being executed
  74. • Basically, global or local • Variables have function scope • Functions have the same scope as variables
  75. // Global var likesToPlay = "Poker"; function getGame () { ! // Local ! var likesToPlay = "Hold ‘em"; ! // Global ! playOnline = true; ! return likesToPlay; ! // Returns "Hold ‘em" }
  76. function playPoker (money) { ! if (money) { ! ! var willPlay = true; ! } ! // Perfectly valid ! return willPlay; }
  77. function global () { ! return "Access anywhere"; }
  78. function outer () { ! function inner () { ! ! return "Inner"; ! } ! return inner(); } outer(); // Accessible inner(); // Not accessible
  79. Polluting the global namespace “Global scope is like a public toilet. You can’t avoid going in there. But try to limit your contact with surfaces when you do.” - Dmitry Baranovskiy, Raphaël JS library
  80. Function scope
  81. • Run a function in a certain context • The call and apply methods • Defined for all functions
  82. function docReady () { ! alert(this); ! // this is the window object } window.onload = docReady;
  83. function setName (name) { ! this.name = name; ! // document.name === "Bennifer" } document.onclick = function () { ! setName.call(document, "Bennifer"); };
  84. function setName (name) { ! this.name = name; ! // document.name === "Bennifer" } document.onclick = function () { ! setName.call(document, "Bennifer"); };
  85. function setNames () { ! this.firstName = arguments[0]; ! this.lastName = arguments[1]; // document.firstName === “Ben” // document.lastName === “Affleck” } function callSetNames () { ! setNames.apply(document, arguments); }; callSetNames("Ben", "Affleck");
  86. function setNames () { ! this.firstName = arguments[0]; ! this.lastName = arguments[1]; // document.firstName === “Ben” // document.lastName === “Affleck” } function callSetNames () { ! setNames.apply(document, arguments); }; callSetNames("Ben", "Affleck");
  87. Closures
  88. • Closures are expressions, usually functions, which can work with variables set within a certain context • Inner functions referring to local variables of its outer function create closures
  89. function add (x) { ! return function (y) { ! ! return x + y; ! }; } var add5 = add(5); var no7 = add5(2); // Equals 7
  90. “Right... What?!”
  91. function add (x) { ! return function (y) { ! ! return x + y; ! }; } var add5 = add(5); // How JavaScript sees it var add5 = function (y) { ! return 5 + y; }
  92. function add (x) { ! return function (y) { ! ! return x + y; ! }; } var add5 = add(5); // How JavaScript sees it var add5 = function (y) { ! return 5 + y; }
  93. function addLinks () { ! for (var i=0, link; i<5; i++) { ! ! link = document.createElement("a"); ! ! link.innerHTML = "Link " + i; ! ! link.onclick = function () { ! ! ! alert(i); ! ! }; ! ! document.body.appendChild(link); ! } } window.onload = addLinks;
  94. function addLinks () { ! for (var i=0, link; i<5; i++) { ! ! link = document.createElement("a"); ! ! link.innerHTML = "Link " + i; ! ! link.onclick = function () { ! ! ! alert(i); ! ! }; ! ! document.body.appendChild(link); ! } } window.onload = addLinks;
  95. function addLinks () { ! for (var i=0, link; i<5; i++) { ! ! link = document.createElement("a"); ! ! link.innerHTML = "Link " + i; ! ! link.onclick = function (num) { ! ! ! return function () { ! ! ! ! alert(num); ! ! ! }; ! ! }(i); ! ! document.body.appendChild(link); ! } } window.onload = addLinks;
  96. function addLinks () { ! for (var i=0, link; i<5; i++) { ! ! link = document.createElement("a"); ! ! link.innerHTML = "Link " + i; ! ! link.onclick = function (num) { ! ! ! return function () { ! ! ! ! alert(num); ! ! ! }; ! ! }(i); ! ! document.body.appendChild(link); ! } } window.onload = addLinks;
  97. function addLinks () { ! for (var i=0, link; i<5; i++) { ! ! link = document.createElement("a"); ! ! link.innerHTML = "Link " + i; ! ! link.onclick = function (num) { ! ! ! return function () { ! ! ! ! alert(num); ! ! ! }; ! ! }(i); ! ! document.body.appendChild(link); ! } } window.onload = addLinks;
  98. function addLinks () { ! for (var i=0, link; i<5; i++) { ! ! link = document.createElement("a"); ! ! link.innerHTML = "Link " + i; ! ! link.onclick = function (num) { ! ! ! return function () { ! ! ! ! alert(num); ! ! ! }; ! ! }(i); ! ! document.body.appendChild(link); ! } } window.onload = addLinks;
  99. function addLinks () { ! for (var i=0, link; i<5; i++) { ! ! link = document.createElement("a"); ! ! link.innerHTML = "Link " + i; ! ! link.onclick = function (num) { ! ! ! return function () { ! ! ! ! alert(num); ! ! ! }; ! ! }(i); ! ! document.body.appendChild(link); ! } } window.onload = addLinks;
  100. Yahoo JavaScript Module Pattern
  101. • Origins from Douglas Crockford • Singleton pattern • Offers private and public members
  102. var goneBabyGone = function () { ! // Private members ! var movieTitle = "Gone Baby Gone", isDirectedByBen = true; ! ! // Public members ! return { ! ! title : function () { ! ! ! return movieTitle; ! ! }, ! ! ! ! directedByBen : function () { ! ! ! return isDirectedByBen; ! ! } ! }; }();
  103. var goneBabyGone = function () { ! // Private members ! var movieTitle = "Gone Baby Gone", isDirectedByBen = true; ! ! // Public members ! return { ! ! title : function () { ! ! ! return movieTitle; ! ! }, ! ! ! ! directedByBen : function () { ! ! ! return isDirectedByBen; ! ! } ! }; }();
  104. var goneBabyGone = function () { ! // Private members ! var movieTitle = "Gone Baby Gone", isDirectedByBen = true; ! ! // Public members ! return { ! ! title : function () { ! ! ! return movieTitle; ! ! }, ! ! ! ! directedByBen : function () { ! ! ! return isDirectedByBen; ! ! } ! }; }();
  105. var goneBabyGone = function () { ! // Private members ! var movieTitle = "Gone Baby Gone", isDirectedByBen = true, ! ! title = function () { ! ! ! return movieTitle; ! ! }, ! ! ! ! directedByBen = function () { ! ! ! return isDirectedByBen; ! ! }; ! ! // Public members ! return { title : title, directedByBen : directedByBen ! }; }();
  106. Namespacing
  107. • Avoiding global variables • Code structure • Extending, but not necessarily inheriting
  108. // Create a Ben object var Ben = {}; // Set functionality Ben.Director = function () { ! var noOfMovies = 4; ! return { ! ! movies : function () { ! ! ! return noOfMovies; ! ! } ! }; }();
  109. // Assertion if (typeof Ben === "undefined") { ! Ben = {}; } Ben.Actor = function () { ! var noOfMovies = 51; ! return { ! ! actAndDirectorCount : function () { ! ! ! return noOfMovies + " as actor & " + Ben.Director.movies.call(this) + " as Director"; ! ! } ! }; }();
  110. Sugar & spice It’s awfully nice!
  111. • Sugaring • Currying
  112. // A little sugar String.prototype.trim = function () { ! return this.replace(/^s*|s*$/g, ""); }; var monkey = " Monkey "; monkey.trim(); //"Monkey"
  113. // Currying function add () { ! var sum = 0; ! for (var i=0, il=arguments.length; i<il; i++) { ! ! sum += arguments[i]; ! }; ! return sum; }
  114. // Currying (continued) - Currying method by Crockford! ! Function.prototype.curry = function () { ! var slice = Array.prototype.slice, ! ! args = slice.apply(arguments), ! ! that = this; ! return function () { ! ! ! return that.apply( ! ! ! ! null, args.concat(slice.apply(arguments)) ! ! ! ); ! }; } var add8 = add.curry(5, 3); alert(add8(1, 3, 7)); // 19
  115. // Currying (continued) - Currying method by Crockford! ! Function.prototype.curry = function () { ! var slice = Array.prototype.slice, ! ! args = slice.apply(arguments), ! ! that = this; ! return function () { ! ! ! return that.apply( ! ! ! ! null, args.concat(slice.apply(arguments)) ! ! ! ); ! }; } var add8 = add.curry(5, 3); alert(add8(1, 3, 7)); // 19
  116. // Currying (continued) - Currying method by Crockford! ! Function.prototype.curry = function () { ! var slice = Array.prototype.slice, ! ! args = slice.apply(arguments), ! ! that = this; ! return function () { ! ! ! return that.apply( ! ! ! ! null, args.concat(slice.apply(arguments)) ! ! ! ); ! }; } var add8 = add.curry(5, 3); alert(add8(1, 3, 7)); // 19
  117. // Currying (continued) - Currying method by Crockford! ! Function.prototype.curry = function () { ! var slice = Array.prototype.slice, ! ! args = slice.apply(arguments), ! ! that = this; ! return function () { ! ! ! return that.apply( ! ! ! ! null, args.concat(slice.apply(arguments)) ! ! ! ); ! }; } var add8 = add.curry(5, 3); alert(add8(1, 3, 7)); // 19
  118. // Currying (continued) - Currying method by Crockford! ! Function.prototype.curry = function () { ! var slice = Array.prototype.slice, ! ! args = slice.apply(arguments), ! ! that = this; ! return function () { ! ! ! return that.apply( ! ! ! ! null, args.concat(slice.apply(arguments)) ! ! ! ); ! }; } var add8 = add.curry(5, 3); alert(add8(1, 3, 7)); // 19
  119. // Currying (continued) - Currying method by Crockford! ! Function.prototype.curry = function () { ! var slice = Array.prototype.slice, ! ! args = slice.apply(arguments), ! ! that = this; ! return function () { ! ! ! return that.apply( ! ! ! ! null, args.concat(slice.apply(arguments)) ! ! ! ); ! }; } var add8 = add.curry(5, 3); alert(add8(1, 3, 7)); // 19
  120. Syntax recommendations
  121. • No real standard, only best practices • Recommended tool: JSLint
  122. Embrace JavaScript
  123. • Embrace JavaScript • Don’t try to make it into Java, C or any other language • Learn to love it and its dynamic, loose and prototypical nature
  124. This is how we roll
  125. Robert Nyman robertnyman.com/speaking/ robert@robertnyman.com Twitter: @robertnyman Pictures: Brendan - http://www.flickr.com/photos/mollyeh11/279367481/ Yoda - http://buzzybeegirl.files.wordpress.com/2008/12/yoda-400x3001.jpg Twitter - http://twitter.com/manssandstrom/status/1528315581 Gmail - http://www.flickr.com/photos/webber/71748774/ Slow - http://www.feministing.com/archives/012345.html Crockford - http://www.flickr.com/photos/charliebrewer/2897862701/ Obi-Wan - http://enterthecircle.files.wordpress.com/2009/01/obi-wan-kenobi-01-large.jpg Ben Affleck - http://www.flickr.com/photos/sasy/3993866442/ Squat toilet - http://www.flickr.com/photos/35034350906@N01/4080372999 Cuddling bears - http://www.nogg.se/blogg.asp?intShowMenu=a2&idHomepage=6951&idBloggCategory=6162 Winnie The Pooh and friends - http://mammacarola.blogg.se/2009/april/ IE Voodoo Doll - http://nexus404.com/Blog/2007/10/26/make-your-own-internet-explorer-voodoo-doll-a-step-by-step-guide/ Ben Affleck confused - http://cdn.buzznet.com/assets/imgx/4/9/0/5/8/orig-49058.jpg

×