1. Prototype

2. Prototype
This is what happens when a smart Ruby programmer plays with JavaScript
Created by Sam Stephenson
Makes JavaScript some what Ruby like
Additional convenience methods, etc.
Makes DOM much simpler to navigate
Manages browser differences

3. Clone() copies class/object
Extend
We discussed about inheritance in JavaScript
Prototype provides an extend method
Copies properties from one to another
Clone() copies class/object

4. Ruby like functions for in Java iterates over object properties
Ruby’s each iterator would be nice!
Closure can perform tasks on the elements of a collection
More Ruby like functions added

5. DOM Simplified DOM is powerful, but awfully painful
Prototype helps by providing a number of convenience methods
Somewhat cryptic, but darn good

6. $() Method Takes all kinds of things
Id represented by String
a DOM node
Adds some interesting Ruby like methods to DOM element
So you can iterate over, …

7. $$() Method
Allows you to select (and iterate) over elements identified by
Tag name
CSS Class name Id

8. Insertion Given an ID, insertion allows you to insert content
Before (above)
Top (top within)
Bottom (bottom within)
After (below)
the content

9. Using $() and Insertion

10. Using $() and Insertion…

11. Ajax Calls
Prototype’s provides a “class” called Ajax that takes care of several things related to Ajax
Browser idiosyncrasies
Goes to the extent of:
Making the remote call
Helps you with return codes
Remember the hideous status ids
Allows you to perform actions when call complete

12. Help with XMLHttpRequest
XMLHttpRequest object implementation is across browsers
We saw how to write code to deal with these differences
Prototype hides this for you

13. What we saw earlier

14. Prototype’s solution
beautiful!

15. What’s that Try.these?

16. Defining success and failure

17. Ahem, but how do I make a remote call?
Ajax.Request helps with that
But, what’s that Class.create()?

18. Class.create() Earlier we saw how to create classes in JavaScript
Prototype adds convenience to create a class

19. Ajax.Request

20. Making Asynchronous Call

21. Making Asynchronous Call…

22. Making Asynchronous Call…

23. Pretty cool, but can be simpler!
Ajax.Updater extends Ajax.Request
Updates a section of page (typically an id for a div tag) with returned content
PeriodicalExecuter can keep polling the server at specified interval