JavaScript: From the ground up

JavaScript: From The Ground UpOr, if you’re a Java or C# Developer writing JavaScript, why you’re probably confused as hell David Padbury http://davidpadbury.com @davidpadbury

We thank the following companies for their gracious sponsorship Pla6num Sponsor Gold Sponsors Silver Sponsors

JavaScript will look familiar to most developers

var text = "Barry Manilow Rocks";var words = text.split( );for (var i = 0; i < words.length; i++) { console.log( words[i] );}

var barry = new Person(Barry, Manilow);barry.sing();barry.dance();

Problem is, it has very little incommon withthe languages it looks like

“Java is to JavaScript what Car is to Carpet. “ - Chris Heilmann

JavaScript has had a rather messy evolution.

Types seem like a good place to start

// Booleanvar canSmileWithoutYou = false;// Stringvar name = Lola;// Numbervar yearsAgo = 30;

var people = [ mandy, lola, tony ];people[1] = showgirl;console.log( people[1] ); // showgirl

var lola = { employer: Copacaba, stuffInHair: [ feathers ]};console.log( lola.stuffInHair )// [ feathers ]

var people = [ mandy, lola, tony ];console.log( people[30] ); // undefined// No error

null // Value meaning nothingundefined // No valuevar o = { foo: null};console.log( o.foo ); // nullconsole.log( o.bar ); // undefined

Comparisons arepretty easy going

Truthy orFalsy

var emptyString = , // Falsy nonEmptyString = Copa, // Truthy zero = 0, // Falsy nonZero = 42, // Truthy obj = {}, // Truthy nullObj = null, // Falsy undefinedObj; // Falsy

if (input != null && input.length != 0) something();// Equivalent to...if (input) something()

They can also be a little weird

var nullObj = null, undefinedObj; // undefinednullObj == undefinedObj; // True!42 == 42; // True!

When you care, be strict about your comparisons var nullObj = null, undefinedObj; nullObj === undefinedObj; // False 42 === 42; // False

Functions look pretty traditional at ﬁrst glance

function add(n1, n2) { return n1 + n2;}

But what’s cool, is that they’re ﬁrst class functions

var add = function (n1, n2) { return n1 + n2;}

Which means you can throw them around

function add(n1,n2) { return n1 + n2; }function createAdder(n1) { return function(n2) { add(n1 + n2); }}var oneAdder = createAdder(1);var result = oneAdder(2); // 2 + 1 = 3

Functions can get at their arguments as an array

function sum() { var total = 0; for (var i = 0; i < arguments.length; i++) { total += arguments[i]; } return total;}sum(1, 2, 3, 4, 5); // 15

Objects can bepretty ﬂexible

var o = {};console.log( o.name ); // undefinedo.name = Lola;console.log( o.name ); // Lolaconsole.log( o[name] ); // Lola

var lola = { employer: Copacaba, stuffInHair: feathers};for (var p in lola) { var value = lola[p]; console.log( p + = + value);}// employer = Copacaba// stuffInHair = feathers

Context is important

console.log( this );// In a webbrowser,// by default functions are executed// in the window contextthis === window; // true

function constructPerson( name ) { this.name = name;}constructPerson( Lola );this.name === window.name === Lola; // Ooops

Just like String has split()Just like Array has slice()Function has methods too

function add(n1, n2) { return n1 + n2; }add(2, 3); // Is equivalent too...// call( context, arg1, arg2, argN...)add.call(this, 2, 3);// apply( context, [args] )add.apply(this, [2, 3]);

function constructPerson( name ) { this.name = name;}var lola = {};constructPerson.call( lola, Lola );lola.name == ‘Lola’; // True

Creating objects with their own state? That seems really useful!If only there was a easier way of doing it....

function Person( name ) { this.name = name;}var lola = new Person( Lola );lola.name == Lola; // TRUE!// new short for:// var lola = {};// Person.call(lola);

Look familiar?

var o = new Object();var a = new Array();var d = new Date();

console.log( typeof(Object) ); // Functionconsole.log( typeof(Array) ); // Functionconsole.log( typeof(Date) ); // Function

They’re all just functions

function Person( name ) { this.name = name; this.sayName = function() { console.log("Hi, Im " + this.name); }}var lola = new Person( Lola );lola.sayName(); // Lola

So I know what you’re thinking... Every object has to have it’s owninstances of everything even when they’re all the same? Isn’t that kind of a waste? You were thinking that? Right?

JavaScript doesn’t have C#/Java style inheritance

It has Prototypes

Every object has an associated prototype

A prototype is just an object Nothing special

When you call something on an objectIt’ll ﬁrst check all the values on the objectIf it’s not found, it’ll check the prototype That’s it.

var a1 = new Array(), a2 = new Array();var proto1 = Object.getPrototypeOf( a1 );var proto2 = Object.getPrototypeOf( a2 );console.log( proto1 == proto2 ); // True

var a = [ 1, 2, 3 ];Object.getPrototypeOf( a );a.__proto__;

var a1 = [], a2 = [], a3 =[];a1.length;// Selfa1.push( 1 ); // Called on prototype

By assigning prototype’s to objects,we can make them behave differently

var a = [], o = {};o.__proto__ = a.__proto__;o.push( 30 ); // Suddenly an arrayconsole.log( o ); // [ 30 ]console.log( a ); // []

Messing with __proto__ is actually super bad practice So how do we set it?

var a = [];// Every function object// has a prototype propertyArray.prototype === a.__proto__; // True

var o = {};o.__proto__ = Array.prototype;o.push( 30 ); // Suddenly an arrayconsole.log( o ); // [ 30 ]

But how do we set an instance’s prototype without messing with __proto__?

var a1 = new Array();a1.__proto__ === Array.prototype;

// new is equivalent to...var a1 = {};a1.__proto__ = Array.prototype;Array.call( a1 );

Pulling this all together...

function Person(name) { this.name = name;}Person.prototype.sayHi = function() { console.log("Hi, Im " + this.name);}var lola = new Person(Lola);var mandy = new Person(Mandy);lola.sayHi(); // Hi, Im Lolamandy.sayHi(); // Hi, Im Mandy

So that’s OO in JavaScriptNext up, we have something you probably haven’t thought twice about for a while

Scoping It’s again, probably notwhat you expect

var n = 1;console.log( n );if (true) { var n = 2; console.log( n );}console.log( n );

var n = 1;console.log( n ); // 1if (true) { var n = 2; console.log( n ); // 2}console.log( n ); // 2

C like languages typically have block-level scope JavaScript has function-level scope

Every declaration in function ishoisted to function wide scope

function bar() { if ( false ) { var x = 1; } if ( false ) { var y = 2; }}bar();

function bar() { var x, y; if ( false ) { x = 1; } if ( false ) { y = 2; }}bar();

var n = 1;function bar() { n = 2; return; var n;}bar();console.log( n ); // 1

This is why it’s recommended to only have a single var block at the top of your methods. It’s just what the runtime will do anyway.

You know how I said function foo() {} andvar foo = function() {} were the same? I lied.

function run() { foo(); // "Foo" - Whole function hoisted bar(); // ERRORZ!!! - Just declaration function foo() { console.log( Foo ); } var bar = function() { console.log( Bar ); }}run();

Let’s pull this all together

Imagine we combine two JavaScript libraries into a single ﬁle. This is a common practice in Web Application.

// lib1.jsfunction awesomeFunction() { console.log( lib1 );}// lib2.jsfunction awesomeFunction() { console.log( lib2 );}awesomeFunction(); // lib2

We should avoid deﬁning stuff in the global scope We can use function scoping to help us

// lib1.js(function(){ function awesomeFunction() { // Doing something awesome... // Honest }})(); // Executed immediately

But now we can’t get it at all from other places We can use objects to emulate namespaces

// lib1.js(function( lib1 ){ lib1.awesomeFunction() { // Doing something awesome... // Honest }})( window.lib1 || (window.lib1 = {} ) );// All of library isolated to single objectlib1.awesomeFunction();

// lib1.js(function( lib1 ) { lib1.awesomeFunction() { console.log( lib1 ); }})( window.lib1 || (window.lib1 = {}) );// lib2.js(function( lib2 ) { lib2.awesomeFunction() { console.log( lib2 ); }})( window.lib2 || (window.lib2 = {}) );lib1.awesomeFunction(); // lib1lib2.awesomeFunction(); // lib2

DemoMaking some of this stuff real

So that’s pretty much JavaScript

Hang about.We went an entire JavaScript talkwithout once mentioning jQuery?

Yep. jQuery is great for dealing withbrowsers and for messing with the DOM tree.

But it doesn’t help us write large JavaScript applications.

Challenges facing JavaScript today...

Organizing Code Expressing Dependencies Intelligent Build Tools Application StructureDealing with Progressive Enhancement

Until these things improveWriting large JavaScript applications is difﬁcult But not impossible

Fortunately, things are improving at an immense pace.

Jasmine BDD RSpec like BDD for JavaScriptdescribe(Calculator, function() { var counter = 0; it(can add a number, function() { counter = counter + 2; expect( counter ).toEqual( 2 ); });});

Dojo Expressing dependencies for packaging// myApp/base.jsdojo.provide(myApp.base);dojo.require(myApp.Settings);dojo.require(myApp.SomethingElse); Rebecca Murphey - Scaffolding a buildable dojo application

Knockout.js MVVM for JavaScript// html<select data-bind="options: availableMeals, optionsText: name, value: chosenMeal"></select>// jsvar viewModel = { availableMeals: [ { name: Chicken }, { name: Pasta} ], chosenMeal: ko.observable()};ko.applyBindings(viewModel);

Node.js JavaScript in your backendvar http = require(http);http.createServer(function (req, res) { res.writeHead(200, { Content-Type: text/plain }); res.end(Hello Worldn);}).listen(8124, "127.0.0.1"); Come back later for more of this...

Coffee Script A little language that compiles into JavaScript# Conditions:number = -42 if opposite# Functions:square = (x) -> x * x# Objects:math = root: Math.sqrt square: square cube: (x) -> x * square x# Existence:alert "#{elvis} is alive!" if elvis?# Array comprehensions:cubes = math.cube num for num in list

Questions?

http://www.lab49.com New York .NET Meetuphttp://www.meetup.com/NY-Dotnet

// Thanks for listening!return;

Scoping and Hoisting, Ben Cherry - http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-HoistingPrototypes and Inheritance, Scott Allen - http://msdn.microsoft.com/en-us/scriptjunkie/ff852808.aspxGreat content on challenges building JS applications, Rebecca Murphey - http://blog.rebeccamurphey.com/WTF JS - http://wtfjs.com

Good Friends - Juliana Coutinho, http://www.flickr.com/photos/ngmmemuda/4166182931/Skeleton Jack-O-Lantern - Rennett Stowe, http://www.flickr.com/photos/tomsaint/2988275492/Evolution - spaceamoeba, http://www.flickr.com/photos/spaceamoeba/3101102763/Orangutan Relaxing - Paolo Camera, http://www.flickr.com/photos/vegaseddie/3338697679/The Sophistication of Mr. Lamp-shade - DerrickT, http://www.flickr.com/photos/derricksphotos/209778001/careful now - Abulic Monkey, http://www.flickr.com/photos/abulic_monkey/135488031/sThe Simple Life - kennymatic, http://www.flickr.com/photos/kwl/4574642827Thai First Class Seat (1A) - Richard Moross, http://www.flickr.com/photos/richardmoross/2211308689/contortionist - pinguino, http://www.flickr.com/photos/pinguino/2862231080/out of context, this is naughty - David Nestor, http://www.flickr.com/photos/thenestor/10934928/What is going on? - SAN_DRINO, http://www.flickr.com/photos/san_drino/1454922072/Hoist training exercise in Irqa - The U.S. Army, http://www.flickr.com/photos/soldiersmediacenter/4308562661/Sunday means get together - Yasin Hassan, http://www.flickr.com/photos/yasinhasan/4431896656/Colbert image used with absolutely no permission at all - Sorry, http://blog.quickdfw.com/archives/2007/01/hell-beg-to-differ.html

http://blog.davidpadbury.com	2086
http://bembengarifin.wordpress.com	179
http://blog.codylindley.com	146
http://blog.lab49.com	58
http://blog.h-quer.de	29
https://twimg0-a.akamaihd.net	11
http://translate.googleusercontent.com	8
url_unknown	5
https://factors.backpackit.com	2
http://paper.li	1
http://webcache.googleusercontent.com	1
https://si0.twimg.com	1

JavaScript: From the ground up

by David Padbury on Nov 01, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 2,527

Statistics

JavaScript: From the ground up — Presentation Transcript