Java Script Libraries Prototype js Prototype js Get
Java. Script Libraries: Prototype. js
Prototype. js Get it at: http: //www. prototypejs. org/
Prototype. js • • • Ajax interface Utility methods Helper methods Extending the DOM Class Object …and even more!
AJAX interface • Three objects that give you the simplest method for AJAXifying your applications: – Ajax. Periodical. Updater – Ajax. Request • Also provides the ability to register global listeners for each step of the AJAX requests using Ajax. Responders
![Ajax. Periodical. Updater new Ajax. Periodical. Updater(container, url[, options]) • Updates the container with](http://slidetodoc.com/presentation_image_h/fe56f53293cd23b2e32fb61a26e0a4f7/image-5.jpg "Ajax. Periodical. Updater new Ajax. Periodical. Updater(container, url[, options]) • Updates the container with")
Ajax. Periodical. Updater new Ajax. Periodical. Updater(container, url[, options]) • Updates the container with the contents of the response text • Options: – Frequency: number of seconds between calls (default is 2) – Decay: rate at which the request interval grows when the response in unchanged (default is 1 – or no decay)
![Ajax. Updater new Ajax. Updater(container, url[, options]) • Replaces inner. HTML of container with](http://slidetodoc.com/presentation_image_h/fe56f53293cd23b2e32fb61a26e0a4f7/image-6.jpg "Ajax. Updater new Ajax. Updater(container, url[, options]) • Replaces inner. HTML of container with")
Ajax. Updater new Ajax. Updater(container, url[, options]) • Replaces inner. HTML of container with response text
![Ajax. Request • new Ajax. Request(url[, options]) • Callbacks allow you to build custom](http://slidetodoc.com/presentation_image_h/fe56f53293cd23b2e32fb61a26e0a4f7/image-7.jpg "Ajax. Request • new Ajax. Request(url[, options]) • Callbacks allow you to build custom")
Ajax. Request • new Ajax. Request(url[, options]) • Callbacks allow you to build custom functionality with the response text instead of just replacing inner. HTML of container element.
Ajax. Responders • Repository of global event listeners for each step of the AJAX request. • Use register() and unregister() methods • Example: Ajax. Responders. register({ on. Create: function() { Ajax. active. Request. Count++; toggle. Indicator(); }, on. Complete: function() { Ajax. active. Request. Count--; toggle. Indicator(); } });
Ajax Options • Available options: – – – – – method, parameters, asynchronous, post. Body, request. Headers, insertion, eval. Scripts, decay (periodical. Updater), frequency (periodical. Updater)
Ajax Callbacks • The following are commonly used callbacks that receive the XHR object and the result of evaluating the X_JSON response header if applicable: – on. Success, – on. Failure, – on. Exception, – on. Complete
Ajax Callbacks example var my. Object = Class. create(); Object. extend(my. Object. prototype, { initialize: function(options){ this. setoptions(options) }, setoptions: function(options) { this. options = { ajaxurl: 'ajaxcalls. cfm', mydivid: 'mydiv' } Object. extend(this. options, options || {}); }, my. Ajax. Call: function(){ var pars = 'action=returntrue'; var my. Ajax = new Ajax. Request(this. options. ajaxurl, {method: 'post', parameters: pars, on. Success: this. process. My. Ajax. bind. As. Event. Listener(this)}); }, process. My. Ajax: function(t){ if (t. response. Text. strip() == 1) $(this. options. mydivid). inner. HTML = 'Hello, world!'; else window. alert('There was an error'); } }); Event. observe(window, 'load', function(){myobj = new my. Object(); });
Utility Methods • • • $ $$ $A $F $H $R $w try. these document. get. Elements. By. Class. Name
$() method • document. get. Element. By. Id() on steroids • Pass in id or element • Pass in multiple ids will return an Array object of all elements
$() example 1. <html xmlns="http: //www. w 3. org/1999/xhtml"> 2. <head> 3. <script language="javascript" type="text/javascript" src="lib/prototype. js"></script> 4. <script language="javascript" type="text/javascript"> 5. function alert. Divs(){ 6. var div. Nodes = $('div 1', 'div 2'); 7. div. Nodes. each(function(node){ 8. window. alert(node. inner. HTML); 9. }); 10. } 11. </script> 12. <title>Dollar Method</title> 13. </head> 14. <div id="div 1">Hello, </div> 15. <div id="div 2">World!</div> 16. <a href="javascript: void(0)" onclick="alert. Divs(); ">Alert Divs</a> 17. <body> 18. </body> 19. </html>
$$() method • Specify any CSS rule – – – Type selectors (div) Descendent selector (space between selectors) Attribute selectors ([attr], [attr=value], etc…) Class selectors (. classname) ID selectors (#div 1) • Returns a document-order Array of elements that match the CSS rule • All elements inherit Prototype’s DOM Extensions
$$() method • When to NOT use: – You want elements with a specified CSS class name use: document. get. Elements. By. Class. Name() – You want elements with a specified CSS class name within a container element use: Element. get. Elements. By. Class. Name()
$$() example <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <script language="javascript" type="text/javascript" src="lib/prototype. js"></script> <script language="javascript" type="text/javascript"> function alert. Divs(){ var div. Nodes = $$('div. helloworld'); div. Nodes. each(function(node){ window. alert(node. inner. HTML); } </script> <title>Dollar Method</title> </head> <div id="div 1" class="helloworld">Hello, World!</div> <div id="div 2">Not me? </div> <a href="javascript: void(0)" onclick="alert. Divs(); ">Alert Divs</a> <body> </html>
$A() method • $A(iterable) • Takes an “array-like collection” – that’s anything with an numeric indices • Often used for DOM functions that return the HTMLCollection object (an abstract representation in the W 3 C DOM of any collection of HTML element objects) • Provides the ability to use Prototype’s extended Array class with the Enumerable module • i. e. – document. images – document. get. Element. By. Tag. Name() – element. child. Nodes
$A() example <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <script language="javascript" type="text/javascript" src="lib/prototype. js"></script> <script language="javascript" type="text/javascript"> function alert. Divs(){ var divs = document. get. Elements. By. Tag. Name('div'); var div. Nodes = $A(divs); div. Nodes. each(function(node){ window. alert(node. inner. HTML); } </script> <title>Dollar Method</title> </head> <div>Hello, World!</div> <div>Here we go again!</div> <a href="javascript: void(0)" onclick="alert. Divs(); ">Alert Divs</a> <body> </html>
$F() method • $F(element) • Returns the current value of a form control • The current value is a string for all controls except multiple select boxes, which return an array of values. • As a side note: Really, this is just a global shortcut method for Form. Element. get. Value(element)
![$H() method • $H([obj]) • Returns instance of a Hash object (instead of regular](http://slidetodoc.com/presentation_image_h/fe56f53293cd23b2e32fb61a26e0a4f7/image-21.jpg "$H() method • $H([obj]) • Returns instance of a Hash object (instead of regular")
$H() method • $H([obj]) • Returns instance of a Hash object (instead of regular JS object instantiation using the new keyword, which returns a clone of the hash – keeping the original intact).
What’s a Hash? • Hashes are associative arrays • In Cold. Fusion, we refer to these as Structs • Prototype extends these as well (as we’ll see later) with the Enumerable module
$H() example <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <script language="javascript" type="text/javascript" src="lib/prototype. js"></script> <script language="javascript" type="text/javascript"> function alert. Divs(){ var h = $H({name: 'value', myfunction: function(){ window. alert('This is my function!'); }}); h. myfunction(); } </script> <title>Hash Example</title> </head> <a href="javascript: void(0)" onclick="alert. Divs(); ">Alert my function</a> <body> </html>
![$R() method • $R(start, end[, exclusive = false]) • Creates a new Object. Range](http://slidetodoc.com/presentation_image_h/fe56f53293cd23b2e32fb61a26e0a4f7/image-24.jpg "$R() method • $R(start, end[, exclusive = false]) • Creates a new Object. Range")
$R() method • $R(start, end[, exclusive = false]) • Creates a new Object. Range object • Returned Array is extended with Prototype’s Enumerable module
$R() examples $R(0, 10). include(10) // -> true $A($R(0, 5)). join(', ') // -> '0, 1, 2, 3, 4, 5' $A($R('aa', 'ah')). join(', ') // -> 'aa, ab, ac, ad, ae, af, ag, ah' $R(0, 10, true). include(10) // -> false $R(0, 10, true). each(function(value) { // invoked 10 times for value = 0 to 9 });
$w() method • Splits a string into an Array, treating all whitespace as delimiters • Returned Array is extended with Prototype’s Enumerable class
You keep saying: ‘The element is extended with Prototype’s DOM extensions’ or ‘The returned Array is extended with Prototype’s Enumerable module’
What the heck are you talking about?
I’m talking about Helpers… • Enumerables – Arrays – Hashes – Ranges • • Element. Methods Event Form Function Insertion Class Object
Enumerables • • • all any collect detect each entries find. All grep include Inject invoke • • • map max member min partition pluck reject select size sort. By to. Array zip
Array Helpers • Array is extended with Enumerable module • Array is also extended with the following methods: – – – clear() clone() compact() each() first() and last() flatten() from() index. Of() reverse() uniq() without()
Hash Helpers • Hash is extended with Enumerable module • Hash is also extended with the following methods: – – – – each() inspect() keys() merge() remove() to. Query. String() values()
Element. Methods • Prototype extends DOM elements • Accessed via: – $() utility method, i. e. : $(‘mydiv’). add. Class. Name(‘highlight’); – Element object, i. e. : Element. add. Class. Name(‘mydiv’, ’highlight’); – Or directly as methods of an extended element using Element. extend(), i. e. : say we have an: onclick=“highlight(this)” function highlight(elem){ Element. extend(elem); elem. add. Class. Name(‘highlight’); }
Commonly used Element methods • • • add. Class. Name() and remove. Class. Name() add. Methods() clean. Whitespace() extend() hide() and show() get. Elements. By. Class. Name() set. Style() scroll. To() update() and more…
Element. methods • Most methods return the element, so you can also chain these together, i. e. : $(‘mydiv’). add. Class. Name(‘highlight’). upda te(‘Changes have been saved’). toggle();
Event • Events management made easy! • Commonly used methods: – observe() and stop. Observing() – find. Element()
Event example Event. observe(‘mydiv’, ’click’, my. Function); Event. stop. Observing(‘mydiv’, ’click’, my. Function); Now, lets say we are using the this reference within a function, such as: var my. Obj = { ajaxurl: 'ajaxcalls. cfm', indicatorid: 'ajaxindicator', toggle. Indicator: function(){ $(this. indicatorid). toggle(); }, my. Function: function(){ new Ajax. Request(this. ajaxurl, {parameters: pars, on. Success: this. my. Function. Handler}); }, my. Function. Handler: function(t){ if (t. response. Text. strip() == 1){ this. toggle. Indicator; }else{ window. alert('There was an error'); } } }
The problem with this • When you pass the my. Function. Handler as a function argument you lose what this means to the original function • When we call this. toggle. Indicator() within the my. Function. Handler() method without using Prototype’s binding, toggle. Indicator() will not be called. • Prototype solves this with bind() and bind. As. Event. Listener() – The only difference is that bind. As. Event. Listener() ensures the first argument to the function is the event object
Binding solved, thanks Prototype! What does it do? Pretty simple actually: Prototype wraps the function in another one, which locks the execution scope to an object that is specified as the first argument var my. Obj = { ajaxurl: 'ajaxcalls. cfm', indicatorid: 'ajaxindicator', toggle. Indicator: function(){ $(this. indicatorid). toggle(); }, my. Function: function(){ new Ajax. Request(this. ajaxurl, {parameters: pars, on. Success: this. my. Function. Handler. bind. As. Event. Listener(this)}); }, my. Function. Handler: function(t){ if (t. response. Text. strip() == 1){ this. toggle. Indicator; }else{ window. alert('There was an error'); } } }
Class Object • Prototype extends the OO nature of JS • Class. create() returns a function that acts like a Ruby class, that when called will fire its own initialize() method.
Class example var Sports = Class. create(); Sports. prototype = { initialize: function(name, action, point){ this. name = name; this. action = action; this. point = point; }, score: function(){ window. alert('The '+this. name+' player '+this. action+' a '+this. point); } } var rball = new Sports('racquetball', 'served', 'ace'); rball. score(); // -> alerts 'The racquetball player served a ace' var bball = new Sports('baseball', 'hit', 'homerun'); bball. score(); // -> alerts 'The baseball player hit a homerun' //lets extend the Sports class to create a Swimming class var Swimming = Class. create(); Swimming. prototype = Object. extend(new Sports(), { score: function(){ window. alert('The '+this. name+''s time was '+this. point); } }); var swimmer = new Swimming('swimmer', '1 minute and 2 seconds'); swimmer. score(); // -> alerts 'The swimmer's time was 1 minute and 2 seconds'
- Slides: 41
