More Related Content
Similar to Refresh Events Prototype
Similar to Refresh Events Prototype (20)
Recently uploaded
Recently uploaded (20)
Refresh Events Prototype
- 1. Thursday, February 19, 2009
- 2. Agenda • General Framework Overview • What Prototype Isn’t • The Ninja Database • Questions? Thursday, February 19, 2009
- 3. jQuery Awesome. Thursday, February 19, 2009
- 4. Prototype Awesome. Thursday, February 19, 2009
- 5. Frameworks Awesome. Thursday, February 19, 2009
- 6. Javascript Awesome. Thursday, February 19, 2009
- 7. Browsers? Thursday, February 19, 2009
- 8. Prototype == jQuery Come on, they all basically do the same thing. Thursday, February 19, 2009
- 9. Ruby in the Browser? Not quite. Thursday, February 19, 2009
- 10. AJAX The umbrella term Thursday, February 19, 2009
- 11. So why Prototype? Thursday, February 19, 2009
- 12. Light as a … NO. Thursday, February 19, 2009
- 13. Quick as a … NO. Thursday, February 19, 2009
- 14. jQuery is Champ. Thursday, February 19, 2009
- 15. Prototype Has Muscle. • Class Creation • Insertion • DOM Element Creation • Events • Custom Events • Scope Binding • AJAX Thursday, February 19, 2009
- 16. The Ninja Database Thursday, February 19, 2009
- 17. Thursday, February 19, 2009
- 18. Controlling Class Instance via Firebug • Creating a class instance with optional parameters • Inserting custom instances into the DOM • Accessing the public API of a class instance • Class instances maintain state Thursday, February 19, 2009
- 19. Thursday, February 19, 2009
- 20. Controlling Class Instance via Firebug • Creating a class instance with optional parameters • Inserting custom instances into the DOM • Accessing the public API of a class instance • Class instances maintain state Thursday, February 19, 2009
- 21. But what does the DOM look like? Thursday, February 19, 2009
- 22. Thursday, February 19, 2009
- 23. How is this elegance possible? Thursday, February 19, 2009
- 24. Constructors Thursday, February 19, 2009
- 25. Overwrite Options During Thursday, February 19, 2009
- 26. Insert Anything. Element#insert(anything); Thursday, February 19, 2009
- 27. Programmatically Create Elements Thursday, February 19, 2009
- 28. Events Use the DOM as a notification system for your class. Thursday, February 19, 2009
- 29. Standard DOM Events Thursday, February 19, 2009
- 30. Standard DOM Events Thursday, February 19, 2009
- 31. Standard DOM Events Function#bind(this) Your best friend when using classes. Allows referencing instance variables in an event listener. Thursday, February 19, 2009
- 32. Custom Events Too Thursday, February 19, 2009
- 33. Custom Events Too Thursday, February 19, 2009
- 34. Custom Events Too Thursday, February 19, 2009
- 35. Custom Events Too Thursday, February 19, 2009
- 36. Custom Events Too Thursday, February 19, 2009
- 37. AJAX Everybody’s doing it. Thursday, February 19, 2009
- 38. Thursday, February 19, 2009
- 39. Evaluate JSON Thursday, February 19, 2009
- 40. Questions? • http://github.com/camwest/ refresh-prototype-talk • http://bigbangtechnology.com/blog Thursday, February 19, 2009
Editor's Notes
- Big Bang Technology, June 2008, Max Cameron, iPhone, Web Dev, Flex Development, Bigbangtechnology.com
- abstract away inconsitencies in browser. each does it different functionally equivalent small differences in edge cases
- interesting history. one of the first modern JavaScript frameworks designed to mimic the Ruby in the browser.
- Interactive sophisticated programs in the browser. Typically without page refreshes.
- Most of those accomplishments go to jQuery, and I'd highly recommend using it for most simple JavaScript implementations.
- * visual representation of the class instances * events are bound * loaded via ajax from a json feed
- Creating a class instance with optional parameters Inserting custom instances into the DOM Accessing the public API of a class instance Class instances maintain state regardless of whether they are in the DOM or not.
- explain the html structure of the dom nodes
- Object.extend overrides default options with whatever is passed into the constructor If something isn’t passed in, the default value is used
- you can take any DOM element and use the .insert method on it to insert custom classes as long as they implement toElement as an instance method.
- Element is a class built just like Ninja. It takes two arguments, the tag name, and a hash of attribute values that you’d like to see on the element. Update is an Element method that lets you add elements or text as children
- if you don’t use bind on event listeners. “this” references the element that dispatched the event. but we want to reference the class instance to access properties inside it. interpolate makes adding variables to strings a lot easier
- custom events need to be bound to dom elements. use custom events for public methods that change the visual appearance of the class
- iterate through the JSON to create new class instances for each record found. typically would be database driven. don’t forget to store a reference to the class instance or JavaScript will garbage collect it
- Notice how the JSON feed is styled with the same key values as our class constructor options.