Javascript DeepDive Understanding common JS design patterns

Basic Javascript

• Variable Types (var, string, int, object, function)

• Object & Arrays

• Check for Nulls

• Functions

Types in Javascript

• Int, Double, Date, String, Array, Object, Function

Basics - Objects

• Rule #1: all values in Javascript are an object

• Variables, Objects, Functions

• {name: value}

• {name: value, name: value, name: value …}

• Access the values: object.name

Code Demo

jsbin.com/batab/5

Basics - Arrays

• Datastructure representing a list of something

• Commonly used

• Looks like this: [item, item, item]

• Remember Rule #1?

Array Functions

jsbin.com/jifido/4

Basics - Check for nulls• If you access an attribute of a null object, you will get an

exception

• Javascript exceptions halt execution (bad!)

• Always check for nulls, or initialise your objects

• if object == null || if object == undefinedvar a = new Object()

• attributes of an object can be null without throwing exceptions

Null Demo

jsbin.com/pevoc/2

Basics - Functions

• function() aFunction { …some code … }

• Functions can be substituted as objects

• Callback Functions (shown in AJAX session)

Object Classes

• Creating a object-orientated class using functions…

• Handy to understand

• Useful if you creating your own version of jQuery

Object Classes Demo

jsbin.com/vewan/2

Basics Summary

• Everything in Javascript is an Object

• Simple Types, Functions

• Three common data structures

• Objects, Arrays, Functions

Intermediate Javascript

• Variable Scope

• Anonymous Functions

Intermediate - Scope

• Four types of variable accessibility

• Block Scope

• Function Scope

• Global Scope

• Window Scope

Code Demo

jsbin.com/vacez/5

Window Scope

• Scope within a window

• Iframes = new scope

• Document = new scope

Global Variables

• Document Level scope

• Declaration outside of function

• Can be accessed inside a function

Function Variable

• Variables declared inside a function have access to each other

• No access to variables in other functions

• Use return, or save variables into a global variable

Block Variable

• JS has no block scope

• Block variables are treated the same as function variables

Intermediate - Anonymous Functions

• Functions without a name

• function Loopy() { …. some code like console.log() ….}

• function() { …. some code like console.log() ….}

Code Demo

jsbin.com/vacez/7

Javascript as a languauge

• It’s a scripting language…but more

• Object Orientated

• Functional Programming

• Executes from top to bottom

• Weakly typed (only need to check for nulls)

Object Orientation

• Abstraction = Functions

• Polymorphism = Everything is an Object

• Inheritance = Clone an object (aka Deep Copy)

• Encapsulation = Object within an function

Object Orientation Demo

jsbin.com/potef/2

Advanced….

• Self Executing Anonymous Functions

Self executing FUNctions

• Encapsulate all your functionality inside one scope

• Exception in your do not affect other methods

• Written as a module….

A simple trick…

• Some math…

• var s = function(){}

• (s) = (function(){})

• (s)() = (function(){})()

Additional Resources• http://helephant.com/2008/08/17/building-simple-objects/

• http://helephant.com/2008/08/19/functions-are-first-class-objects-in-javascript/

• http://happygiraffe.net/blog/2008/08/27/javascript-scope/

• http://jibbering.com/faq/notes/closures/

• http://www.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/

• http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

End of Deep Dive

• Questions?

• Lets take a break!

• ….coming up…AJAX!

AJAX Slides

• http://girldevelopit.github.io/gdi-core-javascript/class4.html#/3

• Reference:http://api.jquery.com/jquery.get/ http://api.jquery.com/jquery.post/ http://api.jquery.com/jquery.ajax/

AJAX Demo

jsbin.com/pigix/2

Promises

• Synchronous (Functions)

• Asynchronous (Call Back Functions)

• Design Pattern for the web (Ace that interview!)

• A promise states that if an event occurs, i will call this method

• A functions can be attached to a promise before, during, or after the event has occurred

Promises in jQuery

• The Promise interface also allows jQuery's Ajax methods, including $.get(), to chain multiple .done(), .fail(), and .always() callbacks on a single request,

• and even to assign these callbacks after the request may have completed.

• If the request is already complete, the callback is fired immediately.

Promises is the bomb

• Calls to your API

• Waiting for a response from your user

• Events that may occur at any time (login/logout)

• Must Watch: Promises in Angular https://www.youtube.com/watch?v=XcRdO5QVlqE

Promises Demo

jsbin.com/pigix/4

jQuery Demo

• A Quickie!

• …Lots of good tutorials out there

• http://girldevelopit.github.io/gdi-core-javascript/class3.html#/2

jQuery Demo

jsbin.com/pizuf/2

Final Words

• Now you know how javascript works

• Rule #1: Everything is an Object

• Javascript = Objects = Functions

Question Time

Thank you!Leave us a review on the meetup.com Group Review section if you had a great

workshop!