a deep dive into javascript

41
Javascript DeepDive Understanding common JS design patterns

Upload: tiang-cheng

Post on 01-Sep-2014

118 views

Category:

Software


0 download

DESCRIPTION

Learn more about Javascript Objects, Anonymous functions, and Scope.

TRANSCRIPT

Page 1: A Deep Dive into Javascript

Javascript DeepDive Understanding common JS design patterns

Page 2: A Deep Dive into Javascript

Basic Javascript

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

• Object & Arrays

• Check for Nulls

• Functions

Page 3: A Deep Dive into Javascript

Types in Javascript

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

Page 4: A Deep Dive into Javascript

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

Page 5: A Deep Dive into Javascript

Code Demo

jsbin.com/batab/5

Page 6: A Deep Dive into Javascript

Basics - Arrays

• Datastructure representing a list of something

• Commonly used

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

• Remember Rule #1?

Page 7: A Deep Dive into Javascript

Array Functions

jsbin.com/jifido/4

Page 8: A Deep Dive into Javascript

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

Page 9: A Deep Dive into Javascript

Null Demo

jsbin.com/pevoc/2

Page 10: A Deep Dive into Javascript

Basics - Functions

• function() aFunction { …some code … }

• Functions can be substituted as objects

• Callback Functions (shown in AJAX session)

Page 11: A Deep Dive into Javascript

Object Classes

• Creating a object-orientated class using functions…

• Handy to understand

• Useful if you creating your own version of jQuery

Page 12: A Deep Dive into Javascript

Object Classes Demo

jsbin.com/vewan/2

Page 13: A Deep Dive into Javascript

Basics Summary

• Everything in Javascript is an Object

• Simple Types, Functions

• Three common data structures

• Objects, Arrays, Functions

Page 14: A Deep Dive into Javascript

Intermediate Javascript

• Variable Scope

• Anonymous Functions

Page 15: A Deep Dive into Javascript

Intermediate - Scope

• Four types of variable accessibility

• Block Scope

• Function Scope

• Global Scope

• Window Scope

Page 16: A Deep Dive into Javascript

Code Demo

jsbin.com/vacez/5

Page 17: A Deep Dive into Javascript

Window Scope

• Scope within a window

• Iframes = new scope

• Document = new scope

Page 18: A Deep Dive into Javascript

Global Variables

• Document Level scope

• Declaration outside of function

• Can be accessed inside a function

Page 19: A Deep Dive into Javascript

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

Page 20: A Deep Dive into Javascript

Block Variable

• JS has no block scope

• Block variables are treated the same as function variables

Page 21: A Deep Dive into Javascript

Intermediate - Anonymous Functions

• Functions without a name

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

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

Page 22: A Deep Dive into Javascript

Code Demo

jsbin.com/vacez/7

Page 23: A Deep Dive into Javascript

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)

Page 24: A Deep Dive into Javascript

Object Orientation

• Abstraction = Functions

• Polymorphism = Everything is an Object

• Inheritance = Clone an object (aka Deep Copy)

• Encapsulation = Object within an function

Page 25: A Deep Dive into Javascript

Object Orientation Demo

jsbin.com/potef/2

Page 26: A Deep Dive into Javascript

Advanced….

• Self Executing Anonymous Functions

Page 27: A Deep Dive into Javascript

Self executing FUNctions

• Encapsulate all your functionality inside one scope

• Exception in your do not affect other methods

• Written as a module….

Page 28: A Deep Dive into Javascript

A simple trick…

• Some math…

• var s = function(){}

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

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

Page 29: A Deep Dive into Javascript

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/

Page 30: A Deep Dive into Javascript

End of Deep Dive

• Questions?

• Lets take a break!

• ….coming up…AJAX!

Page 31: A Deep Dive into Javascript

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/

Page 32: A Deep Dive into Javascript

AJAX Demo

jsbin.com/pigix/2

Page 33: A Deep Dive into Javascript

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

Page 34: A Deep Dive into Javascript

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.

Page 35: A Deep Dive into Javascript

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

Page 36: A Deep Dive into Javascript

Promises Demo

jsbin.com/pigix/4

Page 37: A Deep Dive into Javascript

jQuery Demo

• A Quickie!

• …Lots of good tutorials out there

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

Page 38: A Deep Dive into Javascript

jQuery Demo

jsbin.com/pizuf/2

Page 39: A Deep Dive into Javascript

Final Words

• Now you know how javascript works

• Rule #1: Everything is an Object

• Javascript = Objects = Functions

Page 40: A Deep Dive into Javascript

Question Time

Page 41: A Deep Dive into Javascript

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

workshop!