0
JavaScript
From birth to closure
Yeah, nothing
Brendan Eich
Brendan Eich
What is JavaScript?
• Developed by Brendan Eich 1995
• Initially called Mocha, then LiveScript
• First day of light in a beta of Netscape 2
  ...
“You’re number one!”
Has NOTHING to do
     with Java!
• JavaScript is one of the world’s most
  popular programming languages
• One interpreter on every machine
• ECMAScript st...
SunSpider test
Douglas Crockford
Douglas Crockford
• JSON
• JSLint
• JSMin
JavaScript basics
Variable declaration:
var benAffleck = ”Actor”;
Function declaration:
function benQuote () {
! return "Rumors about me?
    Calista Flockhart, Pam
    Anderson, and Matt ...
Conditionals
• If
• Switch
• Shorthand assignment
• Ternary operators
function makeMovie (withLivTyler) {
! var nice = withLivTyler || false;
}
(datedJLo)? "Lucky guy!" : "No?";
Comparison operators
• =	

 Assignment
• ==	

 Equality
• === Identity
// Assignment
var bestFriend = "Matt Damon";

// Equality
if (5 == "5") {
 ! // true
}

// Identity
if (5 === "5") {
 ! //...
// Short-circuit logic
if (true || false)

if (false && true)

// Makes this code safe
if (obj && obj.property)
// Short-circuit logic
if (true || false)

if (false && true)

// Makes this code safe
if (obj && obj.property)
Type coercion
// true
5 == "5"

// 123
"1" + 2 + 3;
// 6, manual type conversion
parseInt("1", 10) + 2 + 3;
null == undefined == 0 ==
    false == ""


•   Not really, but sort of
•   Rather “truthy” or “falsy”
var    a = null;
var    b; // undefined
var    c = 0;
var    d = false;
var    e = "";

if    (a)   //   false
if    (b)  ...
JavaScript data types
• string
• number
• boolean
• null
• undefined
• Object
Types of Object include:

• function
• Array
• Date
• RegExp
Checking type
typeof return values:

• string
• number
• boolean
• function
• object
• undefined
typeof fanClub // "undefined"


var title = "Armageddon";
typeof title // Equals "string"


var age = 37;
typeof age // Eq...
function anotherQuote () {
! return "If I ever woke up
   with a dead hooker in my
   hotel room, Matt would be
   the fir...
var obj = {};
typeof obj = // "object"


var arr = ["B", "E", "N"];
typeof arr // "object"
var obj = {};
typeof obj = // "object"


var arr = ["B", "E", "N"];
typeof arr // "object"     ?!
Using instanceof
obj instanceof Array // false
arr instanceof Array // true
Functions
Procedural


function notAHit () {
! return "Gigli";
}
Functions as variables

var wroteScript = function () {
! return "Good Will Hunting";
};
wroteScript();
Anonymous


document.onmousemove = function (evt) {
   alert(evt.pageX);
};
Self-invoking


(function () {
! var dogma = "Shot in 1999";
})();
Self-invoking


(function () {
! var dogma = "Shot in 1999";
})();
Function arguments
• Any argument can be omitted
• Any argument can be added
• No overloading
• The arguments collection
function concat (a, b, c) {
! return a + b + c;
}

concat(1, 2, 3); // 6
concat(1, 2); // NaN
• The arguments collection
• Property: arguments.length
• NOT an array
function concat () {
! var sum = 0,
      l = arguments.length;
! for (var i=0; i<l; i++) {
! ! sum += arguments[i];
! }
!...
Objects
Object constructor
function Ben () {
! this.name = "Ben Affleck";
! this.gotAnOscar = true;
};

var ben = new Ben();
alert...
Object literal

var ben = {
! name : "Ben Affleck",
! gotAnOscar : true
};

alert(ben.name); // "Ben Affleck"
Different syntax, same thing:
ben["arms"] = 2;
ben.arms = 2;
Different syntax, same thing:
ben["arms"] = 2;
ben.arms = 2;
For any object:
var ben = {};
ben[1972] = "Year of birth";
ben["born"] = 1972;
ben[true] = false;
var regEx = new RegExp;
regEx[3] = "I can do this?";
var goodMovie = {
! title : "Good Will Hunting",
! year : 1997
};

for (var item in goodMovie) {
! alert(item + ": " + goo...
var goodMovie = {
! title : "Good Will Hunting",
! year : 1997
};

// Check returns true
if ("year" in goodMovie) {
! aler...
Inheritance
• Prototype-based inheritance
• Not class-based
• The prototype chain checks itself first
• It then goes to the parent, parent’s parent
  etc...
function Being () {
! this.living = true;
}

Being.prototype.greet = function () {
! return "Hello!";
};
function Ben () {
! this.talks = true;
}
Ben.prototype = new Being;


Ben.prototype.saySomething = function () {
 ! return...
// Create an instance
var ben = new Ben();


// Returns "I feel like fame is wasted on me."
ben.saySomething();


// Retur...
Checking for the greet() method in this order:

• ben instance
• Ben prototype
• Being prototype
• Object prototype
Class-based mimicking

• Simple JavaScript Inheritance
• A Base Class for JavaScript Inheritance
• Defining classes and inh...
Why prototype syntax

• It’s native, i.e. no dependencies
• Freedom of style and version
• Easy readability
• Code handover
Why prototype syntax
“I have been writing JavaScript for 8 years
now, and I have never once found need to
use an uber func...
Scope
• Scope refers to where variables and
  functions are accessible
• In what context something is being
  executed
• Basically, global or local
• Variables have function scope
• Functions have the same scope as variables
// Global
var likesToPlay = "Poker";

function getGame () {
! // Local
! var likesToPlay = "Hold ‘em";

! // Global
! play...
function playPoker (money) {
! if (money) {
! ! var willPlay = true;
! }

! // Perfectly valid
! return willPlay;
}
function global () {
! return "Access anywhere";
}
function outer () {
! function inner () {
! ! return "Inner";
! }
! return inner();
}
outer(); // Accessible
inner(); // N...
Polluting the global
    namespace
        “Global scope is like a public toilet.

        You can’t avoid going in there....
Function scope
• Run a function in a certain context
• The call and apply methods
• Defined for all functions
function docReady () {
! alert(this);
! // this is the window object
}
window.onload = docReady;
function setName (name) {
! this.name = name;
! // document.name === "Bennifer"
}

document.onclick = function () {
! setN...
function setName (name) {
! this.name = name;
! // document.name === "Bennifer"
}

document.onclick = function () {
! setN...
function setNames () {
! this.firstName = arguments[0];
! this.lastName = arguments[1];
  // document.firstName === “Ben”
...
function setNames () {
! this.firstName = arguments[0];
! this.lastName = arguments[1];
  // document.firstName === “Ben”
...
Closures
• Closures are expressions, usually functions,
  which can work with variables set within a
  certain context
• Inner func...
function add (x) {
! return function (y) {
! ! return x + y;
! };
}
var add5 = add(5);
var no7 = add5(2); // Equals 7
“Right... What?!”
function add (x) {
! return function (y) {
! ! return x + y;
! };
}
var add5 = add(5);

// How JavaScript sees it
var add5...
function add (x) {
! return function (y) {
! ! return x + y;
! };
}
var add5 = add(5);

// How JavaScript sees it
var add5...
function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Lin...
function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Lin...
function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Lin...
function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Lin...
function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Lin...
function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Lin...
function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Lin...
Yahoo JavaScript
Module Pattern
• Origins from Douglas Crockford
• Singleton pattern
• Offers private and public members
var goneBabyGone = function   () {
! // Private members
! var movieTitle = "Gone Baby Gone",
     isDirectedByBen = true;
...
var goneBabyGone = function   () {
! // Private members
! var movieTitle = "Gone Baby Gone",
     isDirectedByBen = true;
...
var goneBabyGone = function   () {
! // Private members
! var movieTitle = "Gone Baby Gone",
     isDirectedByBen = true;
...
var goneBabyGone = function        () {
!   // Private members
!   var movieTitle = "Gone Baby Gone",
         isDirectedB...
Namespacing
• Avoiding global variables
• Code structure
• Extending, but not necessarily inheriting
// Create a Ben object
var Ben = {};


// Set functionality
Ben.Director = function () {
! var noOfMovies = 4;
! return {
...
// Assertion
if (typeof Ben === "undefined") {
! Ben = {};
}
Ben.Actor = function () {
! var noOfMovies = 51;
! return {
!...
Sugar & spice
   It’s awfully nice!
• Sugaring
• Currying
// A little sugar
String.prototype.trim = function () {
!    return this.replace(/^s*|s*$/g, "");
};


var monkey = "     ...
// Currying
function add () {
!   var sum = 0;
!   for (var i=0, il=arguments.length; i<il; i++) {
!   !    sum += argumen...
// Currying (continued) - Currying method by Crockford!
                                                      !
Function.p...
// Currying (continued) - Currying method by Crockford!
                                                      !
Function.p...
// Currying (continued) - Currying method by Crockford!
                                                      !
Function.p...
// Currying (continued) - Currying method by Crockford!
                                                      !
Function.p...
// Currying (continued) - Currying method by Crockford!
                                                      !
Function.p...
// Currying (continued) - Currying method by Crockford!
                                                      !
Function.p...
Syntax
recommendations
• No real standard, only best practices
• Recommended tool: JSLint
Embrace JavaScript
• Embrace JavaScript
• Don’t try to make it into Java, C or any
  other language
• Learn to love it and its dynamic, loose...
This is how we roll
Robert Nyman
                                                        robertnyman.com/speaking/
                           ...
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
×

JavaScript - From Birth To Closure

16,708

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 object-orientation, scope and closures.

Published in: Technology
12 Comments
78 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,708
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
787
Comments
12
Likes
78
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript - From Birth To Closure"

  1. 1. JavaScript From birth to closure
  2. 2. Yeah, nothing
  3. 3. Brendan Eich
  4. 4. Brendan Eich
  5. 5. What is JavaScript?
  6. 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. 7. “You’re number one!”
  8. 8. Has NOTHING to do with Java!
  9. 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. 10. SunSpider test
  11. 11. Douglas Crockford
  12. 12. Douglas Crockford
  13. 13. • JSON • JSLint • JSMin
  14. 14. JavaScript basics
  15. 15. Variable declaration: var benAffleck = ”Actor”;
  16. 16. Function declaration: function benQuote () { ! return "Rumors about me? Calista Flockhart, Pam Anderson, and Matt Damon. That's who I'm dating."; }
  17. 17. Conditionals
  18. 18. • If • Switch • Shorthand assignment • Ternary operators
  19. 19. function makeMovie (withLivTyler) { ! var nice = withLivTyler || false; }
  20. 20. (datedJLo)? "Lucky guy!" : "No?";
  21. 21. Comparison operators
  22. 22. • = Assignment • == Equality • === Identity
  23. 23. // Assignment var bestFriend = "Matt Damon"; // Equality if (5 == "5") { ! // true } // Identity if (5 === "5") { ! // false }
  24. 24. // Short-circuit logic if (true || false) if (false && true) // Makes this code safe if (obj && obj.property)
  25. 25. // Short-circuit logic if (true || false) if (false && true) // Makes this code safe if (obj && obj.property)
  26. 26. Type coercion
  27. 27. // true 5 == "5" // 123 "1" + 2 + 3;
  28. 28. // 6, manual type conversion parseInt("1", 10) + 2 + 3;
  29. 29. null == undefined == 0 == false == "" • Not really, but sort of • Rather “truthy” or “falsy”
  30. 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. 31. JavaScript data types
  32. 32. • string • number • boolean • null • undefined • Object
  33. 33. Types of Object include: • function • Array • Date • RegExp
  34. 34. Checking type
  35. 35. typeof return values: • string • number • boolean • function • object • undefined
  36. 36. typeof fanClub // "undefined" var title = "Armageddon"; typeof title // Equals "string" var age = 37; typeof age // Equals "number"
  37. 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. 38. var obj = {}; typeof obj = // "object" var arr = ["B", "E", "N"]; typeof arr // "object"
  39. 39. var obj = {}; typeof obj = // "object" var arr = ["B", "E", "N"]; typeof arr // "object" ?!
  40. 40. Using instanceof
  41. 41. obj instanceof Array // false arr instanceof Array // true
  42. 42. Functions
  43. 43. Procedural function notAHit () { ! return "Gigli"; }
  44. 44. Functions as variables var wroteScript = function () { ! return "Good Will Hunting"; }; wroteScript();
  45. 45. Anonymous document.onmousemove = function (evt) { alert(evt.pageX); };
  46. 46. Self-invoking (function () { ! var dogma = "Shot in 1999"; })();
  47. 47. Self-invoking (function () { ! var dogma = "Shot in 1999"; })();
  48. 48. Function arguments
  49. 49. • Any argument can be omitted • Any argument can be added • No overloading • The arguments collection
  50. 50. function concat (a, b, c) { ! return a + b + c; } concat(1, 2, 3); // 6 concat(1, 2); // NaN
  51. 51. • The arguments collection • Property: arguments.length • NOT an array
  52. 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. 53. Objects
  54. 54. Object constructor function Ben () { ! this.name = "Ben Affleck"; ! this.gotAnOscar = true; }; var ben = new Ben(); alert(ben.gotAnOscar); // true
  55. 55. Object literal var ben = { ! name : "Ben Affleck", ! gotAnOscar : true }; alert(ben.name); // "Ben Affleck"
  56. 56. Different syntax, same thing: ben["arms"] = 2; ben.arms = 2;
  57. 57. Different syntax, same thing: ben["arms"] = 2; ben.arms = 2;
  58. 58. For any object: var ben = {}; ben[1972] = "Year of birth"; ben["born"] = 1972; ben[true] = false;
  59. 59. var regEx = new RegExp; regEx[3] = "I can do this?";
  60. 60. var goodMovie = { ! title : "Good Will Hunting", ! year : 1997 }; for (var item in goodMovie) { ! alert(item + ": " + goodMovie[item]); }
  61. 61. var goodMovie = { ! title : "Good Will Hunting", ! year : 1997 }; // Check returns true if ("year" in goodMovie) { ! alert(goodMovie.year); }
  62. 62. Inheritance
  63. 63. • Prototype-based inheritance • Not class-based
  64. 64. • The prototype chain checks itself first • It then goes to the parent, parent’s parent etc...
  65. 65. function Being () { ! this.living = true; } Being.prototype.greet = function () { ! return "Hello!"; };
  66. 66. function Ben () { ! this.talks = true; } Ben.prototype = new Being; Ben.prototype.saySomething = function () { ! return "I feel like fame is wasted on me."; };
  67. 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. 68. Checking for the greet() method in this order: • ben instance • Ben prototype • Being prototype • Object prototype
  69. 69. Class-based mimicking • Simple JavaScript Inheritance • A Base Class for JavaScript Inheritance • Defining classes and inheritance
  70. 70. Why prototype syntax • It’s native, i.e. no dependencies • Freedom of style and version • Easy readability • Code handover
  71. 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. 72. Scope
  73. 73. • Scope refers to where variables and functions are accessible • In what context something is being executed
  74. 74. • Basically, global or local • Variables have function scope • Functions have the same scope as variables
  75. 75. // Global var likesToPlay = "Poker"; function getGame () { ! // Local ! var likesToPlay = "Hold ‘em"; ! // Global ! playOnline = true; ! return likesToPlay; ! // Returns "Hold ‘em" }
  76. 76. function playPoker (money) { ! if (money) { ! ! var willPlay = true; ! } ! // Perfectly valid ! return willPlay; }
  77. 77. function global () { ! return "Access anywhere"; }
  78. 78. function outer () { ! function inner () { ! ! return "Inner"; ! } ! return inner(); } outer(); // Accessible inner(); // Not accessible
  79. 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. 80. Function scope
  81. 81. • Run a function in a certain context • The call and apply methods • Defined for all functions
  82. 82. function docReady () { ! alert(this); ! // this is the window object } window.onload = docReady;
  83. 83. function setName (name) { ! this.name = name; ! // document.name === "Bennifer" } document.onclick = function () { ! setName.call(document, "Bennifer"); };
  84. 84. function setName (name) { ! this.name = name; ! // document.name === "Bennifer" } document.onclick = function () { ! setName.call(document, "Bennifer"); };
  85. 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. 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. 87. Closures
  88. 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. 89. function add (x) { ! return function (y) { ! ! return x + y; ! }; } var add5 = add(5); var no7 = add5(2); // Equals 7
  90. 90. “Right... What?!”
  91. 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. 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. 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. 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. 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. 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. 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. 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. 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. 100. Yahoo JavaScript Module Pattern
  101. 101. • Origins from Douglas Crockford • Singleton pattern • Offers private and public members
  102. 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. 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. 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. 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. 106. Namespacing
  107. 107. • Avoiding global variables • Code structure • Extending, but not necessarily inheriting
  108. 108. // Create a Ben object var Ben = {}; // Set functionality Ben.Director = function () { ! var noOfMovies = 4; ! return { ! ! movies : function () { ! ! ! return noOfMovies; ! ! } ! }; }();
  109. 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. 110. Sugar & spice It’s awfully nice!
  111. 111. • Sugaring • Currying
  112. 112. // A little sugar String.prototype.trim = function () { ! return this.replace(/^s*|s*$/g, ""); }; var monkey = " Monkey "; monkey.trim(); //"Monkey"
  113. 113. // Currying function add () { ! var sum = 0; ! for (var i=0, il=arguments.length; i<il; i++) { ! ! sum += arguments[i]; ! }; ! return sum; }
  114. 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. 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. 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. 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. 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. 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. 120. Syntax recommendations
  121. 121. • No real standard, only best practices • Recommended tool: JSLint
  122. 122. Embrace JavaScript
  123. 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. 124. This is how we roll
  125. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×