A Deep Dive into Javascript

  • Published on
    01-Sep-2014

  • View
    105

  • Download
    0

DESCRIPTION

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

Transcript

  • 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/jido/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 == undened var 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 Its a scripting languagebut 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-rst-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 upAJAX!
  • 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 red 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!