JavaScript - From Birth To Closure

JavaScript From birth to closure

Yeah, nothing

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

• 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)

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 • undeﬁned • Object

Types of Object include: • function • Array • Date • RegExp

Checking type

typeof return values: • string • number • boolean • function • object • undeﬁned

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"; })();

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

Object constructor function Ben () { ! this.name = "Ben Affleck"; ! this.gotAnOscar = true; }; var ben = new Ben(); alert(ben.gotAnOscar); // true

Object literal var ben = { ! name : "Ben Affleck", ! gotAnOscar : true }; alert(ben.name); // "Ben Affleck"

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 ﬁrst • 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

Class-based mimicking • Simple JavaScript Inheritance • A Base Class for JavaScript Inheritance • Deﬁning classes and inheritance

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 function... ...I now see my early attempts to support the classical model in JavaScript as a mistake.” - Douglas Crockford

• 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

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

Function scope

• Run a function in a certain context • The call and apply methods • Deﬁned 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 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; }

Yahoo JavaScript Module Pattern

• Origins from Douglas Crockford • Singleton pattern • Offers private and public members

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

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/ 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

http://codebits.eu	63
http://www.slideshare.net	54
http://www.valtech.se	24
http://lanyrd.com	14
http://www.techgig.com	11
https://codebits.eu	6
http://us-w1.rockmelt.com	6
http://jobb.bazooka.se	4
http://hi.chibaole.com	4
http://valtech.se	4
http://blog.gabrieleromanato.com	3
http://onwebdev.blogspot.com	3
https://intranet.valtech.se	3
http://www.valtechlabs.se	2
http://www.linkedin.com	2
http://webcache.googleusercontent.com	1
http://115.112.206.131	1
https://si0.twimg.com	1
http://onwebdev.blogspot.com.es	1
http://wildfire.gigya.com	1

JavaScript - From Birth To Closure

by Robert Nyman on Nov 09, 2009

Accessibility

Categories

Upload Details

Usage Rights

20 Embeds 208

Statistics

JavaScript - From Birth To Closure Presentation Transcript