Prototype

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

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

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

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

$() 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, …

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

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

Using $() and Insertion

Using $() and Insertion…

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

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

What we saw earlier

Prototype’s solution beautiful!

What’s that Try.these?

Defining success and failure

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

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

Ajax.Request

Making Asynchronous Call

Making Asynchronous Call…

Making Asynchronous Call…

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