Downloaded 24 times
Uploaded byTroy Miles
Enterprise javascriptsession3
The document discusses the agenda for an Enterprise JavaScript session, which includes recapping functions, exceptions, and the history object in JavaScript. It then goes into detail on the typeof operator, function properties like arguments and this, and how to use the call and apply methods. Hands-on exercises demonstrate working with arguments and exceptions. Finally, the document explains how the history object works and how HTML5 introduced new methods like pushState and replaceState to programmatically modify the browser history.
Enterprise javascriptsession3
- 1. Enterprise JavaScript Session 3 - History and the Rest Wednesday, November 7, 12
- 2. Hi, I’m Troy Wednesday,November 7, 12
- 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
- 5.
- 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
- 14.
- 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
- 18.
- 19. call & applymethods • 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 & applymethods 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
- 22. length property demo Wednesday,November 7, 12
- 23.
- 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
- 26. Hands-on Exercise, pt.2 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
- 31. The History Object 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
- 33. history problem demo 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
- 42. history object demo Wednesday,November 7, 12
- 43. https://github.com/ balupton/history.js/wiki/ Intelligent-State-Handling Wednesday, November 7, 12
- 44.
- 45. Quick Intro tojQuery 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
- 46.
- 47. Page Structure • Header • Footer • Content Area Wednesday, November 7, 12
- 48. Header • Page Title • Left Button • Right Button Wednesday, November 7, 12
- 49. Footer • Title • Buttons Wednesday, November 7, 12
- 50. Content Area This is where your stuff goes. Wednesday, November 7, 12
- 51. How It Works • Dynamic DOM Manipulation • HTML5 Pseudo-Attributes • There is no free lunch Wednesday, November 7, 12
- 52. Dynamic DOM Manipulation demo Wednesday, November 7, 12
- 53. HTML5 Pseudo- Attributes • JQM Uses Pseudo-Attributes (data-) • Standard Browser Behavior - Ignore Unknown Attributes • Allows for Some Functionality on low-end browsers Wednesday, November 7, 12
- 54. Form Elements (aka widgets) • buttons • sliders • radio buttons • checkboxes • select menus • etc. Wednesday, November 7, 12
- 55. Lists • Basic Lists • Nested Lists • List Dividers • Split Lists • etc. Wednesday, November 7, 12
- 56. Multi-Page Apps • basic setup • transitions • passing data between pages Wednesday, November 7, 12
- 57.
- 58. Touch • tap • taphold • swipe • swipeleft • swiperight Wednesday, November 7, 12
- 59. Page • Page Load • Page Change • Page Transitions • Page Initialization • Page Remove • Layout Wednesday, November 7, 12
- 60. Page Load • pagebeforeload • pageload • pageloadfailed Wednesday, November 7, 12
- 61. Page Change • pagebeforechange • pagechange • pagechangefailed Wednesday, November 7, 12
- 62. Page Transition • pagebeforeshow • pageshow • pagebeforehide • pagehide Wednesday, November 7, 12
- 63. Page Create • pagebeforecreate • pagecreate • pageinit Wednesday, November 7, 12
- 64. Miscellaneous • pageremove • updatelayout • orientationchange Wednesday, November 7, 12
- 65. page events demo Wednesday,November 7, 12
- 66. PerformanceTips • Watch the size of the DOM • Selectors • Narrow Them • Cache Them • Reference the active Page Wednesday, November 7, 12
- 67.
- 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
- 70.
- 71. Backbone supplies structureto 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 autility-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
- 74.
- 75.
- 76.
- 77. Summary • Typeof • Functions • Exceptions • The History Object • jQuery Mobile • Backbone.js Wednesday, November 7, 12