1 / 23

Prototype

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.

caitlyn-kinnerk
Download Presentation

Prototype

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Prototype

  2. 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

  3. 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

More Related