![Page 1: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/1.jpg)
JavaScript Libraries:Prototype.js
![Page 2: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/2.jpg)
Prototype.js
Get it at:
http://www.prototypejs.org/
![Page 3: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/3.jpg)
Prototype.js
• Ajax interface
• Utility methods
• Helper methods
• Extending the DOM
• Class Object
• …and even more!
![Page 4: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/4.jpg)
AJAX interface
• Three objects that give you the simplest method for AJAXifying your applications:– Ajax.PeriodicalUpdater– Ajax.Updater– Ajax.Request
• Also provides the ability to register global listeners for each step of the AJAX requests using Ajax.Responders
![Page 5: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/5.jpg)
Ajax.PeriodicalUpdater
new Ajax.PeriodicalUpdater(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)
![Page 6: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/6.jpg)
Ajax.Updater
new Ajax.Updater(container, url[, options])
• Replaces innerHTML of container with response text
![Page 7: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/7.jpg)
Ajax.Request
• new Ajax.Request(url[, options])
• Callbacks allow you to build custom functionality with the response text instead of just replacing innerHTML of container element.
![Page 8: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/8.jpg)
Ajax.Responders
• Repository of global event listeners for each step of the AJAX request.
• Use register() and unregister() methods• Example:Ajax.Responders.register({
onCreate: function() {
Ajax.activeRequestCount++;
toggleIndicator();
},
onComplete: function() {
Ajax.activeRequestCount--;
toggleIndicator();
}
});
![Page 9: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/9.jpg)
Ajax Options
• Available options:– method, – parameters, – asynchronous, – postBody, – requestHeaders, – insertion, – evalScripts, – decay (periodicalUpdater), – frequency (periodicalUpdater)
![Page 10: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/10.jpg)
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:– onSuccess, – onFailure, – onException,– onComplete
![Page 11: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/11.jpg)
Ajax Callbacks example
var myObject = Class.create();
Object.extend(myObject.prototype, {
initialize: function(options){
this.setoptions(options)
},
setoptions: function(options) {
this.options = {
ajaxurl: 'ajaxcalls.cfm',
mydivid: 'mydiv'
}
Object.extend(this.options, options || {});
},
myAjaxCall: function(){
var pars = 'action=returntrue';
var myAjax = new Ajax.Request(this.options.ajaxurl, {method: 'post', parameters: pars, onSuccess: this.processMyAjax.bindAsEventListener(this)});
},
processMyAjax: function(t){
if (t.responseText.strip() == 1)
$(this.options.mydivid).innerHTML = 'Hello, world!';
else
window.alert('There was an error');
}
});
Event.observe(window,'load',function(){myobj = new myObject();});
![Page 12: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/12.jpg)
Utility Methods
• $• $$• $A• $F• $H• $R• $w• try.these• document.getElementsByClassName
![Page 13: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/13.jpg)
$() method
• document.getElementById() on steroids• Pass in id or element• Pass in multiple ids will return an Array
object of all elements
![Page 14: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/14.jpg)
$() example1. <html xmlns="http://www.w3.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 alertDivs(){6. var divNodes = $('div1','div2');7. divNodes.each(function(node){8. window.alert(node.innerHTML);9. });10. }11.</script>12.<title>Dollar Method</title>13.</head>
14.<div id="div1">Hello,</div>15.<div id="div2">World!</div>
16.<a href="javascript:void(0)" onclick="alertDivs();">Alert Divs</a>
17.<body>18.</body>19.</html>
![Page 15: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/15.jpg)
$$() method
• Specify any CSS rule– Type selectors (div)– Descendent selector (space between selectors)– Attribute selectors ([attr],[attr=value],etc…)– Class selectors (.classname)– ID selectors (#div1)
• Returns a document-order Array of elements that match the CSS rule
• All elements inherit Prototype’s DOM Extensions
![Page 16: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/16.jpg)
$$() method
• When to NOT use:– You want elements with a specified CSS class
name use:
document.getElementsByClassName()– You want elements with a specified CSS class
name within a container element use:
Element.getElementsByClassName()
![Page 17: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/17.jpg)
$$() example<html xmlns="http://www.w3.org/1999/xhtml"><head><script language="javascript" type="text/javascript"
src="lib/prototype.js"></script><script language="javascript" type="text/javascript">
function alertDivs(){var divNodes = $$('div.helloworld');divNodes.each(function(node){
window.alert(node.innerHTML);});
}</script><title>Dollar Method</title></head>
<div id="div1" class="helloworld">Hello, World!</div><div id="div2">Not me?</div>
<a href="javascript:void(0)" onclick="alertDivs();">Alert Divs</a>
<body></body></html>
![Page 18: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/18.jpg)
$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 W3C 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.getElementByTagName()– element.childNodes
![Page 19: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/19.jpg)
$A() example<html xmlns="http://www.w3.org/1999/xhtml"><head><script language="javascript" type="text/javascript"
src="lib/prototype.js"></script><script language="javascript" type="text/javascript">
function alertDivs(){var divs = document.getElementsByTagName('div');var divNodes = $A(divs);divNodes.each(function(node){
window.alert(node.innerHTML);});
}</script><title>Dollar Method</title></head>
<div>Hello, World!</div><div>Here we go again!</div>
<a href="javascript:void(0)" onclick="alertDivs();">Alert Divs</a>
<body></body></html>
![Page 20: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/20.jpg)
$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.getValue(element)
![Page 21: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/21.jpg)
$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).
![Page 22: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/22.jpg)
What’s a Hash?
• Hashes are associative arrays
• In ColdFusion, we refer to these as Structs
• Prototype extends these as well (as we’ll see later) with the Enumerable module
![Page 23: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/23.jpg)
$H() example<html xmlns="http://www.w3.org/1999/xhtml"><head><script language="javascript" type="text/javascript"
src="lib/prototype.js"></script><script language="javascript" type="text/javascript">
function alertDivs(){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="alertDivs();">Alert my function</a>
<body></body></html>
![Page 24: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/24.jpg)
$R() method
• $R(start, end[, exclusive = false])
• Creates a new ObjectRange object
• Returned Array is extended with Prototype’s Enumerable module
![Page 25: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/25.jpg)
$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});
![Page 26: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/26.jpg)
$w() method
• Splits a string into an Array, treating all whitespace as delimiters
• Returned Array is extended with Prototype’s Enumerable class
![Page 27: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/27.jpg)
You keep saying:
‘The element is extended with Prototype’s DOM extensions’
or
‘The returned Array is extended with Prototype’s Enumerable module’
![Page 28: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/28.jpg)
What the heck are you talking about?
![Page 29: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/29.jpg)
I’m talking about Helpers…
• Enumerables– Arrays– Hashes– Ranges
• Element.Methods• Event• Form• Function• Insertion• Class• Object
![Page 30: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/30.jpg)
Enumerables
• all• any• collect• detect• each• entries• find• findAll• grep• include• Inject• invoke
• map• max• member• min• partition• pluck• reject• select• size• sortBy• toArray• zip
![Page 31: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/31.jpg)
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()– indexOf()– reverse()– uniq()– without()
![Page 32: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/32.jpg)
Hash Helpers
• Hash is extended with Enumerable module• Hash is also extended with the following
methods:– each()– inspect()– keys()– merge()– remove()– toQueryString()– values()
![Page 33: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/33.jpg)
Element.Methods
• Prototype extends DOM elements• Accessed via:
– $() utility method, i.e.:$(‘mydiv’).addClassName(‘highlight’);
– Element object, i.e.:Element.addClassName(‘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.addClassName(‘highlight’);
}
![Page 34: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/34.jpg)
Commonly used Element methods
• addClassName() and removeClassName()• addMethods()• cleanWhitespace()• extend()• hide() and show()• getElementsByClassName()• setStyle()• scrollTo()• update()
and more…
![Page 35: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/35.jpg)
Element.methods
• Most methods return the element, so you can also chain these together, i.e.:
$(‘mydiv’).addClassName(‘highlight’).update(‘Changes have been saved’).toggle();
![Page 36: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/36.jpg)
Event
• Events management made easy!
• Commonly used methods:– observe() and stopObserving()– findElement()
![Page 37: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/37.jpg)
Event exampleEvent.observe(‘mydiv’,’click’,myFunction);Event.stopObserving(‘mydiv’,’click’,myFunction);
Now, lets say we are using the this reference within a function, such as:
var myObj = {
ajaxurl: 'ajaxcalls.cfm',
indicatorid: 'ajaxindicator',
toggleIndicator: function(){
$(this.indicatorid).toggle();
},
myFunction: function(){
new Ajax.Request(this.ajaxurl,{parameters: pars, onSuccess: this.myFunctionHandler});
},
myFunctionHandler: function(t){
if (t.responseText.strip() == 1){
this.toggleIndicator;
}else{
window.alert('There was an error');
}
}
}
![Page 38: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/38.jpg)
The problem with this
• When you pass the myFunctionHandler as a function argument you lose what this means to the original function
• When we call this.toggleIndicator() within the myFunctionHandler() method without using Prototype’s binding, toggleIndicator() will not be called.
• Prototype solves this with bind() and bindAsEventListener()– The only difference is that bindAsEventListener()
ensures the first argument to the function is the event object
![Page 39: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/39.jpg)
Binding solved, thanks Prototype!
var myObj = {
ajaxurl: 'ajaxcalls.cfm',
indicatorid: 'ajaxindicator',
toggleIndicator: function(){
$(this.indicatorid).toggle();
},
myFunction: function(){
new Ajax.Request(this.ajaxurl,{parameters: pars, onSuccess: this.myFunctionHandler.bindAsEventListener(this)});
},
myFunctionHandler: function(t){
if (t.responseText.strip() == 1){
this.toggleIndicator;
}else{
window.alert('There was an error');
}
}
}
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
![Page 40: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/40.jpg)
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.
![Page 41: JavaScript Libraries: Prototype.js. Get it at:](https://reader035.vdocuments.site/reader035/viewer/2022062516/56649e355503460f94b2459d/html5/thumbnails/41.jpg)
Class examplevar 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'