3. 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
Wednesday, November 7, 12
4. jssaturday.com
Nov. 10th, Long Beach Convention
Center
Discount code: RiaConsultingLLC
Save $65!!!
Wednesday, November 7, 12
6. Today’s Agenda
• Somethings We Missed
Wednesday, November 7, 12
7. Today’s Agenda
• Somethings We Missed
• The History Object
Wednesday, November 7, 12
8. Today’s Agenda
• Somethings We Missed
• The History Object
• jQuery Mobile
Wednesday, November 7, 12
9. Today’s Agenda
• Somethings We Missed
• The History Object
• jQuery Mobile
• Backbone.js
Wednesday, November 7, 12
10. Somethings We Missed
• Typeof
• Functions
• Exceptions
Wednesday, November 7, 12
11. 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
Wednesday, November 7, 12
12. typeof
var msg = “hello there”;
var bob = typeof msg;
console.log(“msg is of type” + bob);
/* prints - msg is of type string */
Wednesday, November 7, 12
13. Type typeof
Object “object”
Array “object”
Function “function”
String “string”
Number “number”
Boolean “boolean”
null “object”
undefined “undefined”
Wednesday, November 7, 12
15. Function Properties
• The “this” parameter
• The arguments parameter
• call & apply methods
• length property
Wednesday, November 7, 12
16. The “this” parameter
• Functions receive two hidden parameters
• The first 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
Wednesday, November 7, 12
17. 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
Wednesday, November 7, 12
19. 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
Wednesday, November 7, 12
20. call & apply methods
demo
Wednesday, November 7, 12
21. The length property
• The length property holds the number
parameters the function was declared with
Wednesday, November 7, 12
24. Hands-on Exercise
• Use arguments to create a function,
calcSum, which returns the sum of an
unknown number of numbers passed to it
Wednesday, November 7, 12
25. 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);
Wednesday, November 7, 12
27. Hands-on Exercise, pt. 2
• Make the calcSum function more robust by
filtering non-numbers out of the summing
function
Wednesday, November 7, 12
28. Hands-on Exercise, pt. 2
• Make the calcSum function more robust by
filtering 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);
Wednesday, November 7, 12
29. 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‘
};
}
Wednesday, November 7, 12
30. Exceptions
function calcBob () {
try {
/* operation which might generate
an exception */
} catch(e) {
/* handle exception */
}
}
Wednesday, November 7, 12
32. 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
Wednesday, November 7, 12
34. 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
Wednesday, November 7, 12
35. 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
Wednesday, November 7, 12
36. HTML5 History
• pushState()
• replaceState()
• popstate event
• history.state
Wednesday, November 7, 12
37. 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
Wednesday, November 7, 12
38. replaceState()
• replaceState(state, title, URL);
• Behaves exactly like pushState except it
modifies the current history entry instead
of creating a new one
Wednesday, November 7, 12
39. popstate event
• A popstate event is fired by the browser
every time the active history entry changes
Wednesday, November 7, 12
40. history.state
• var currentState = history.state;
• Allows you to read the current state of the
history object
Wednesday, November 7, 12
41. History polyfills
• HTML5 pushState is supported on most
modern browsers
• Older browsers will need to use a polyfill
like History.js
Wednesday, November 7, 12
45. Quick Intro to jQuery
Mobile
A unified, 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 flexible,
easily theme-able design.
Wednesday, November 7, 12
68. Hands-on Exercise
• Using jsFiddle.net, create a simply jQuery
Mobile page
Wednesday, November 7, 12
69. 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
Wednesday, November 7, 12
71. 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.
Wednesday, November 7, 12
72. 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.
Wednesday, November 7, 12
73. Backbone.js
• Handles the data on client
• Models
• Views
• Collections
Wednesday, November 7, 12