ALL OF JAVASCRIPT

George Mauer

RATE ME ON SPEAKERRATEhttp://tinyurl.com/0811-brdnug

Owner of Humble Pi Consulting

Current senior developer at Surge

Former Senior Software Developer at EPS Software

Member - VirtualBrownBag, VirtualAltNet, gnocode, PhpNOLA, RubyBayou

Improv and sketch Comedy with www.NolaComedy.com

gmauer@gmail.com @togakangaroo

http://georgemauer.net/blog

About Me

Join Us For the Virtual Brown Bag

12:00 PM CST Thursdays on Livemeeting

www.virtualbrownbag.comTwitter: @virtualbrownbag

Javascript is….

Actually called ECMAScriptWhy Javascript?

Most popular language Lightweight conceptually It will make your C# a lot better

All the cool kids are doing it

I want it!

You got it…in your browser Use developer add-ons

Chrome (Ctrl+Shift+J) IE (F12) Firefox

Web Development HelperFirebug

Enable Console and we’re interactive

In the browser Javascript interacts with the Document Object Model

Browser’s interpretation of HTML

I wanna…use it?

Your script in the page

<script> tag Inline Or Link

Another HTTP request is made and the script file is downloaded Cached Order and download timing matters

Words! Minification Bundling CDNs Global scope

You have to be careful of the source For now let’s use console.log(…)

Syntax – Javascript is NOT Java

No type declaration var someInt = 123 console.log(someInt)

Strings use “ or ‘ Yes, there are

exceptions and try…catch blocks do…while loops if and switch statements

No, we will not talk about them Except the for loop

There is no function to evaluate strings There is nothing to: eval(“alert(‘javascript!’)”); (There totally is, but shhh…)

Semi-colons are optional…ish

Control Structures

Yes, there are exceptions and try…catch blocks do…while loops if and switch statements

No, we will not talk about them Except the for loop

There is no function to var someString = “alert(‘javascript!’)”;

eval(someString); (There totally is, but shhh…)

Semi-colons are optional…ish

Concept #1 – Objects as Hashes

No such thing as classes, just objects So there’s just

anonymous objects Object Literal:

Comma-separated, Colon denoted hash

Trailing commas not allowed

Nothing is immutable You can add properties Functions too!

var person = {

name: "Brian May",

occupation: "Mucisian",

who: function() {

console.log(this.name+": I used to be in Queen")

}

};

person.phD = "Astronomy";

person.playMusic = function() {

console.log("Is this the real life?");

}

Concept #1 – Objects as Hashes

Objects ARE Hashes/DictionariesmyObject.propertyName == myObject[“propertyName”]

Use console.dir() to explore objects Arrays

Comma separated, Square brackets Elements in array can be of any type Arrays are objects

Functions

Use the function keyword

No type information on parameters

All functions return something (though it might be undefined)

When invoking parameters are always optional Do you care?

function youLike(name) {

if(typeof name === 'undefined') {

console.error("I don’t know who to like");

return;

}

return 'I like ' + name;

}

console.log(youLike('fred'))

// I like fred

console.log(youLike())// I don’t know who to like

// undefined

Concept #2 – First Class Functions

Functions are objects Can be stored in variables Or parameters to other functions Functions can have properties! They are

just objects that can be invoked. So how are they not objects?

Functions are invokable That’s it (for now)

Function Closures

Similar to lambdas in LINQ

Great for helper functions

It works exactly how you instinctually think it should

Nest as many as you want

Not visible outside of functions

Anonymous functions can be assigned to variables

var tellHistory = function () {

var who;

function warBrokeOut() {

console.log('war broke out');

console.log('lots of '+who+' died');

}

who = 'Cavemen';

console.log(who+' invented axes');

warBrokeOut();

who = 'Babylonians';

console.log(who+' invented laws');

warBrokeOut();

who = 'Greeks';

console.log( who+' invented democracy');

warBrokeOut();

warBrokeOut();

}

Concept #3 – Loose Typing

Really there are types Strings, Integers, floats But you can write whatever you want

JS has it covered: 99% of the time it just works

Concept #3 – Loose Typing

Loose means coercions on the spot This can get wonky

1+2+"3" == "33“ "1"+2+3 == "33“ 2==false;

=== operator will prevent coercion and is recommend

It’s weird but if you know what you’re doing…

Concept #4 – Closures

Addresses one of the biggest problems – global scope

Functions can be nested inside each other

Scope works exactly as you instinctively think it would

Concept #4 – Closures

Self-executing functions solve global scope issue

var someFunc = function() {

//stuff

}

someFunc();

//shorten to

(function() {

//stuff

})

Public? Private? Static?We got you

Concept #4 – Closures

Lots of variations on this module pattern

Concept #5 – Prototypes

Javascript is object-oriented and has no classes! Prototype inheritance

Simpler – each object has a prototype object Flexible – can mimic class inheritance and more

Remember: Every object is a hash Plus a [[prototype]] attribute (revealed in some browsers by the

__proto__ property) Q: Do you have a cupOfSugar?

Yes I do (object has cupOfSugar in the hash) No I don’t but let me ask Peter (object does not but Peter is the

[[prototype]]) No I don’t (object does not and [[prototype]] is null)

Can be used to emulate Class Inheritance Enables duck-typing, class-wide dynamicism, more! I recommend a style where you do not use this often

Concept #5 – Prototypes: new Javascript has a ‘new’ keyword

Very different from C# new You don’t really need to use ‘new’ for OO in Javascript

What does ‘new do’? All functions have a not null prototype property creates a function with the [[prototype]] set to the constructor

function’s prototype property You can enforce ‘new’ Anti-intuitively works on functions but not objects

Newer versions of Javascript (> 1.8.5) deprecate ‘new’ for Object.create(withPrototype)

Constructor functions denoted via convention. Capitalize constructor functions camelCase non-constructor functions

What is JSON?

A subset of Javascript for transporting data Functionally equivalent to XML

But way more succinct

Lingua franca for ajax data-exchange Twitter.com – look at the dev tools network tab

JSON is parsed with JSON parser, not eval’ed!

Cross-Domain Ajax

I go to amazon.com and log in My browser stores information

(cookies) to identify me to Amazon I then go to evilpage.com

Uses ajax to contact amazon.com My browser thinking the amazon

session is still on sends my Amazon Amazon sends back secret information

to evilpage.com!

THE PROBLEM

Same Origin Policy

Browsers limit your ability to request resources across domains

In general you can request and use across domains Display images Run scripts Display iframe

You cannot have programmatic access to these resources Analyze images from other domains in JS Get arbitrary scripts as a string Inspect cross-domain iframe’s DOM

Resources for understanding: Eric Law on the policy Phil Haack on a simple exploit with this

Cross-Domain Solutions

Display data from other domains in iframes Cannot use that data

Do all queries to other domains server side Can much better control caching Protected better against format changes Takes up your bandwith

JSONP Service returns and executes:

Cross-domain script execution is ok Assumes you have a global method called myMethod

Evaluated, not parsed like JSON Dangerous – if the site is compromised it can inject any

script!

myMethod({name: ‘George’})

Always think twice when

sending secure data!

Odds and Ends – Jasmine

Testing is even more important in dynamic languages No compiler to catch errors Easy to screw up global state

Jasmine is a lightweight testing framework Based on ruby’s rspec Really simple and easy to learn

Sample specs from gim.ShannonGame

Odds and Ends – Coffeescript Lightweight Javascript compiler that removes

the suck Gets rid of the function keyword Significant whitespace and no need for parens Postfix conditions (number = 42 if answer== true) Splats and object decomposition Comprehensions Easier inheritance setups Try it out Reverse compiler is a great learning tool

Heavily influencing the future of Javascript (Harmony)

Why Libraries?

Mismatches in browser implementations The standard DOM interface is awful Internet Explorer <8 sucks Unforeseen standards adopted (ie. CSS)

Standardize these away jQuery, prototype, mootools, ext-js, yui,

others Jsfiddle.net - Try them out

Some Resources

Douglas Crockford’s JavaScript the Good Parts Video

Mozilla Developer Center – by far the best documentation When searching for javascript help, add on “MDC” Introduction to javascript from MDC Javascript OO

Javascript Garden Fascinating Elegant Code beginner series Hidden Features of Javascript on StackOverflow jsfiddle.net – In-browser js prototyping sandbox complete with syntax

highlighting, formatting, javascript libraries inclusion, and code pasting for sharing

Google Closure – how not to write javascript The console object API JSLint – Douglas Crockford’s syntax checker. Best explanation of the new keyword. Paul Irish Learns from jQuery source, and more jQuery API Reference RATE ME ON SPEAKERRATE:

http://tinyurl.com/0811-brdnugwww.virtualbrownbag.com

That Web 2.0 thing? Yeah, that.

Let’s talk about AJAX

HTTP Model

Problems Refresh is ugly Unnecessary bandwith The operation is user triggered

Solution Use javascript to fetch data and update the page when it is returned jQuery has some great helpers for this. Example

The Global Scope

You don’t have to use var If you don’t,

assignment bubbles up like you would think

All the way to the global window object!

So always use var Isolate yourself from

global scope with self-executing functions

Explanation of variables, properties, scopes

function doStuff() {

var firstName = 'Fred';

function changeName() {

firstName = 'Jim';

lastName = 'Halpern';

}

changeName();

}

doStuff();

firstName; // undefined

lastName; // Halpern – huh?

window.lastName; // Halpern – uh oh!

(function() {

…doWhatever…

})();

More Javascript - Prototypes

Javascript is object-oriented and has no classes! Prototype inheritance

Simpler – each object has a prototype object Flexible – can mimic class inheritance and more

Remember: Every object is a hash Plus a [[prototype]] attribute (revealed in some browsers

by the __proto__ property) Q: Do you have a cupOfSugar?

Yes I do (object has cupOfSugar in the hash) No I don’t but let me ask Peter (object does not but Peter is the

[[prototype]]) No I don’t (object does not and [[prototype]] is null)

Can be used to emulate Class Inheritance Enables duck-typing, class-wide dynamicism, more!

What’s new? Javascript has a ‘new’ keywoad

But no traditional inheritance You don’t really need to use ‘new’ for

OO in Javascript

What does ‘new do’? All functions have a not null prototype

property creates a function with the

[[prototype]] set to the constructor function’s prototype property

You can enforce ‘new’

Anti-intuitively works on functions but not objects Newer versions of Javascript (> 1.8.5)

deprecate ‘new’ for Object.create(withPrototype)

Constructor functions denoted via convention. Capitalize constructor functions camelCase non-constructor functions

function createPerson(name, age) { return { name: name, age: age, toString: function() { return this.name + "

is " + this.age + " years old“; } }}var bob = createPerson("bob", 39);var sal = createPerson("sal", 22);-------------------------------------------------------------var Cat = function(catName) {

this.catName = catName;};Cat.prototype.meow = function() {

console.log(this.catName+" says meow");

}var mittens = new Cat("Mittens");var whiskers = new Cat("Whiskers");

What’s this?

Javascript has the ‘this’ keyword Use it to refer to the current scope /

context Sort of

Lots of caveats It usually works how you think but double

check Can also be substituted with function’s

call() or apply() methods Can be useful for method reuse

Odds and Ends – RegEx

Traditionally more important in dynamic languages Two ways to create

var r1 = /^a+./;var r2 = new RegEx("^a+.");r1.exec(str); // Returns array of matchesr1.test(str); // Returns true if there is a matchstr.match(r1); //Returns an array of Matchesstr.search(r1); //Returns idx if there is a match or -1str.replace(r1); //Returns string with regex replacedstr.split(r1); //Returns an array of substrings

Odds and Ends – XSS

Cross Site Scripting – someone causes their Javascript to run on your site for other users

Dangerous for: Comments / forums / twitter feeds where you can post things other people can see

Search areas or GET urls where long user submissions can be embedded in a link

Examples of simple XSS attacks How to prevent it:

Ensure all user input reflected back is Html encoded Don’t place anything from GET requests on the page Be aware and think!

Javascript Weirdness - Hoisting Variable declarations are

moved to the top of the scope

Function declarations are created and declared in the same step At the top of the scope

Function assignments are similar to variable declarations

Consider declaring all variables in scope with one var statement var bob, joe, jill;

var num = 56;function calc() { console.log(num); var num = 12; console.log(num);}

function calc_isReally() { var num; console.log(num); num = 12; console.log(num);}

Javascript Weirdness

for..in loops through all keys on hash / properties on object Including those in the prototype chain which isn’t

very helpful Use hasOwnProperty() if this is not desired behavior

Don’t use this to enumerate Arrays for loop – similar to for loop in c# or c++

Use it to loop through arrays But remember Array.length is a calculated property!

for(var i=0; i<arr.length; ++i) { } Bad! for(var i=0, len=arr.length; i<len; ++i) { } OK

Javascript Weirdness

String Duality Native and object representations of strings typeof comparison won’t always work Do you really need to check type?

Really? parseInt(), parseFloat() are not so simple

What should parseInt("010") return? Read the MDC docs when using built-in

functions (there aren’t that many)