SlideShare a Scribd company logo
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
in December 1995
• IE followed suit with JScript in 1996
“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 standardizing - Fifth edition
• Web browsers becoming much faster
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 Damon.
That's who I'm dating.";
}
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") {
! // false
}
// 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) // false
if (c) // false
if (d) // false
if (e) // false
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 // Equals "number"
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"
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];
! }
! return sum;
}
concat(1, 2, 3); // 6
concat(1, 2); // 3
concat(1, 2, 7, 11, 5); // 26
Objects
function Ben () {
! this.name = "Ben Affleck";
! this.gotAnOscar = true;
};
var ben = new Ben();
alert(ben.gotAnOscar); // true
Object constructor
var ben = {
! name : "Ben Affleck",
! gotAnOscar : true
};
alert(ben.name); // "Ben Affleck"
Object literal
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 + ": " + goodMovie[item]);
}
var goodMovie = {
! title : "Good Will Hunting",
! year : 1997
};
// Check returns true
if ("year" in goodMovie) {
! alert(goodMovie.year);
}
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 "I feel like fame is wasted on me.";
};
// 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();
Checking for the greet() method in this order:
• ben instance
• Ben prototype
• Being prototype
• Object prototype
• Simple JavaScript Inheritance
• A Base Class for JavaScript Inheritance
• Defining classes and inheritance
Class-based mimicking
• 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 function...
...I now see my early attempts to support the
classical model in JavaScript as a mistake.”
- Douglas Crockford
Why prototype syntax
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
! playOnline = true;
! return likesToPlay;
! // Returns "Hold ‘em"
}
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(); // Not accessible
“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
Polluting the global
namespace
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 () {
! setName.call(document, "Bennifer");
};
function setName (name) {
! this.name = name;
! // document.name === "Bennifer"
}
document.onclick = function () {
! setName.call(document, "Bennifer");
};
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");
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");
Closures
• 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
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 (y) {
! return 5 + y;
}
function add (x) {
! return function (y) {
! ! return x + y;
! };
}
var add5 = add(5);
// How JavaScript sees it
var add5 = function (y) {
! return 5 + y;
}
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;
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;
! ! link.onclick = function () {
! ! ! alert(i);
! ! };
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;
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;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);
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;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);
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;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);
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;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);
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;
!
! // Public members
! return {
! ! title : function () {
! ! ! return movieTitle;
! ! },
! !
! ! directedByBen : function () {
! ! ! return isDirectedByBen;
! ! }
! };
}();
var goneBabyGone = function () {
! // Private members
! var movieTitle = "Gone Baby Gone",
isDirectedByBen = true;
!
! // Public members
! return {
! ! title : function () {
! ! ! return movieTitle;
! ! },
! !
! ! directedByBen : function () {
! ! ! return isDirectedByBen;
! ! }
! };
}();
var goneBabyGone = function () {
! // Private members
! var movieTitle = "Gone Baby Gone",
isDirectedByBen = true;
!
! // Public members
! return {
! ! title : function () {
! ! ! return movieTitle;
! ! },
! !
! ! directedByBen : function () {
! ! ! return isDirectedByBen;
! ! }
! };
}();
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
! };
}();
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 {
! ! movies : function () {
! ! ! return noOfMovies;
! ! }
! };
}();
// 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";
! ! }
! };
}();
Sugar & spice
It’s awfully nice!
• Sugaring
• Currying
// A little sugar
String.prototype.trim = function () {
! return this.replace(/^s*|s*$/g, "");
};
var monkey = " Monkey ";
monkey.trim(); //"Monkey"
// Currying
function add () {
! var sum = 0;
! for (var i=0, il=arguments.length; i<il; i++) {
! ! sum += arguments[i];
! };
! return sum;
}
// 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
// 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
// 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
// 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
// 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
// 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
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 and
prototypical nature
This is how we roll
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/
IEVoodoo 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

More Related Content

More from Robert Nyman

Have you tried listening?
Have you tried listening?Have you tried listening?
Have you tried listening?
Robert Nyman
 
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Robert Nyman
 
Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google Daydream
Robert Nyman
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the Web
Robert Nyman
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
Robert Nyman
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
Robert Nyman
 
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
Robert Nyman
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & products
Robert Nyman
 
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Robert Nyman
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Robert Nyman
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
Robert Nyman
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
Robert Nyman
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
Robert Nyman
 
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goThe web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must go
Robert Nyman
 
Google, the future and possibilities
Google, the future and possibilitiesGoogle, the future and possibilities
Google, the future and possibilities
Robert Nyman
 
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the Nordics
Robert Nyman
 
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?
Robert Nyman
 
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupAndroid TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
Robert Nyman
 
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiNew improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, Helsinki
Robert Nyman
 
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiMobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Robert Nyman
 

More from Robert Nyman (20)

Have you tried listening?
Have you tried listening?Have you tried listening?
Have you tried listening?
 
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
 
Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google Daydream
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the Web
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
 
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & products
 
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
 
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goThe web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must go
 
Google, the future and possibilities
Google, the future and possibilitiesGoogle, the future and possibilities
Google, the future and possibilities
 
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the Nordics
 
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?
 
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupAndroid TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
 
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiNew improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, Helsinki
 
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiMobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
 

JavaScript - From Birth To Closure

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