Enterprise javascriptsession3

Enterprise JavaScript
Session 3 - History and the Rest

Wednesday, November 7, 12

Hi, I’m Troy


Hi, I’m Troy
• Developing software Since 1979
• Initially Game Software in Assembly (6502
and x86)
• Currently JavaScript, C#, Java, Objective-C
• rockncoder@gmail.com


jssaturday.com
Nov. 10th, Long Beach Convention
Center
Discount code: RiaConsultingLLC
Save $65!!!


Today’s Agenda


Today’s Agenda
• Somethings We Missed


Today’s Agenda
• The History Object


Today’s Agenda
• jQuery Mobile


Today’s Agenda
• jQuery Mobile
• Backbone.js


Somethings We Missed

• Typeof
• Functions
• Exceptions


typeof
• The typeof operator detects the type of an
object
• It evaluates to a string which represents the
object’s type
• Unfortunately it is broken


typeof
var msg = “hello there”;
var bob = typeof msg;
console.log(“msg is of type” + bob);
/* prints - msg is of type string */


Type typeof

Object “object”
Array “object”
Function “function”
String “string”
Number “number”
Boolean “boolean”
null “object”
undeﬁned “undeﬁned”


typeof demo


Function Properties
• The “this” parameter
• The arguments parameter
• call & apply methods
• length property


The “this” parameter
• Functions receive two hidden parameters
• The ﬁrst hidden parameter is this
• It holds the context of the object which
called the function
• When called from global space, this points
to the window object
• Can modify the calling object via this

The arguments parameter

• The second hidden parameter is arguments
• It contains a list of all the parameter passed
to the function
• arguments is array-like, values in it can be
index, but no other array methods


arguments demo


call & apply methods
• The call & apply methods both allow you to
pass the this object to a function
• The difference is in how you pass
parameters to the function
• call: parameters sent individually
• apply: parameters sent in an array


call & apply methods
demo


The length property
• The length property holds the number
parameters the function was declared with


length property demo


Hands-on Exercise


Hands-on Exercise
• Use arguments to create a function,
calcSum, which returns the sum of an
unknown number of numbers passed to it


Hands-on Exercise
• Use arguments to create a function,
calcSum, which returns the sum of an
unknown number of numbers passed to it
• The following should all work:
calcSum(1,2,3);
calcSum(4,5,6,7,8);
calcSum(100,200,450,74);


Hands-on Exercise, pt. 2


• Make the calcSum function more robust by
ﬁltering non-numbers out of the summing
function


• Make the calcSum function more robust by
ﬁltering non-numbers out of the summing
function
• The following should all work:
calcSum(1,2, true,3);
calcSum(4,5,”bob”,6,7,8);
calcSum(100,200,calcSum,450,74);


Exceptions
• Like other languages JavaScript has
exceptions
• The exceptions can also be thrown using
the throw statement:
if(typeof a !== ‘number’ || typeof b !== ‘number’){
throw {
name: ‘TypeError’,
message: ‘add needs numbers‘
};
}


Exceptions
function calcBob () {
try {
/* operation which might generate
an exception */
} catch(e) {
/* handle exception */
}
}


The History Object


The History Problem
• Modern JavaScript web apps have three
problems with regards to history:
• They aren’t navigate-able by web crawlers
• They don’t have bookmark-able URLs
• They don’t behave correctly


history problem demo


The History Object
• The History Object is part of the window
object
• The API is very small, three methods and
one property
• methods: back(), forward(), go()
• Properties: length


The History Object
• The History object can only move forward
or backwards to places the user has already
been
• Not able to add items to history
• Not very useful


HTML5 History
• pushState()
• replaceState()
• popstate event
• history.state


pushState()
• pushState(state, title, URL);
• state - a JS object associated with the new
history entry
• title - currently ignored by browser
• URL - the new history entry’s URL


replaceState()
• replaceState(state, title, URL);
• Behaves exactly like pushState except it
modiﬁes the current history entry instead
of creating a new one


popstate event
• A popstate event is ﬁred by the browser
every time the active history entry changes


history.state
• var currentState = history.state;
• Allows you to read the current state of the
history object


History polyﬁlls
• HTML5 pushState is supported on most
modern browsers
• Older browsers will need to use a polyﬁll
like History.js


history object demo


https://github.com/
balupton/history.js/wiki/
Intelligent-State-Handling


jQuery Mobile


Quick Intro to jQuery
Mobile
A uniﬁed, HTML5-based user interface system
for all popular mobile device platforms, built on
the rock-solid jQuery and jQuery UI
foundation. Its lightweight code is built with
progressive enhancement, and has a ﬂexible,
easily theme-able design.


Demo #1


Page Structure
• Header
• Footer
• Content Area


Header
• Page Title
• Left Button
• Right Button


Footer
• Title
• Buttons


Content Area
This is where your stuff goes.


How It Works
• Dynamic DOM Manipulation
• HTML5 Pseudo-Attributes
• There is no free lunch


Dynamic DOM
Manipulation demo


HTML5 Pseudo-
Attributes
• JQM Uses Pseudo-Attributes (data-)
• Standard Browser Behavior - Ignore
Unknown Attributes
• Allows for Some Functionality on low-end
browsers


Form Elements
(aka widgets)
• buttons
• sliders
• radio buttons
• checkboxes
• select menus
• etc.


Lists
• Basic Lists
• Nested Lists
• List Dividers
• Split Lists
• etc.


Multi-Page Apps
• basic setup
• transitions
• passing data between pages


Events


Touch
• tap
• taphold
• swipe
• swipeleft
• swiperight


Page
• Page Load
• Page Change
• Page Transitions
• Page Initialization
• Page Remove
• Layout


Page Load
• pagebeforeload
• pageload
• pageloadfailed


Page Change
• pagebeforechange
• pagechange
• pagechangefailed


Page Transition
• pagebeforeshow
• pageshow
• pagebeforehide
• pagehide


Page Create
• pagebeforecreate
• pagecreate
• pageinit


Miscellaneous
• pageremove
• updatelayout
• orientationchange


page events demo


PerformanceTips
• Watch the size of the DOM
• Selectors
• Narrow Them
• Cache Them
• Reference the active Page


Hands-on Exercise
• Using jsFiddle.net, create a simply jQuery
Mobile page


Hands-on Exercise
• Using jsFiddle.net, create a simply jQuery
Mobile page
• It should have a header, a footer, and at
least on form element on the page


Backbone.js


Backbone supplies structure to JavaScript-heavy
applications by providing models with key-value binding
and custom events, collections with a rich API of
enumerable functions, views with declarative event
handling, and connects it all to your existing application
over a RESTful JSON interface.

Requires Underscore and jQuery.


Underscore is a utility-belt library for JavaScript that
provides a lot of the functional programming support
that you would expect in Prototype.js (or Ruby), but
without extending any of the built-in JavaScript objects.


Backbone.js
• Handles the data on client

• Models

• Views

• Collections


Models


Views


Collections


Summary
• Typeof
• Functions
• Exceptions
• jQuery Mobile
• Backbone.js

Enterprise javascriptsession3

Related slideshows

More Related Content

Enterprise javascriptsession3