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
Basics - Arrays
• Datastructure representing a list of something
• Commonly used
• Looks like this: [item, item, item]
• Remember Rule #1?
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
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
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
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() ….}
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
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/
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
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!