1 / 41

JavaScript Libraries:

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

salome
Download Presentation

JavaScript Libraries:

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. JavaScript Libraries: Prototype.js

  2. Prototype.js Get it at: http://www.prototypejs.org/

  3. Prototype.js • Ajax interface • Utility methods • Helper methods • Extending the DOM • Class Object • …and even more!

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

  5. 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)

  6. Ajax.Updater new Ajax.Updater(container, url[, options]) • Replaces innerHTML of container with response text

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

  8. 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(); } });

  9. Ajax Options • Available options: • method, • parameters, • asynchronous, • postBody, • requestHeaders, • insertion, • evalScripts, • decay (periodicalUpdater), • frequency (periodicalUpdater)

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

  11. 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();});

  12. Utility Methods • $ • $$ • $A • $F • $H • $R • $w • try.these • document.getElementsByClassName

  13. $() method • document.getElementById() on steroids • Pass in id or element • Pass in multiple ids will return an Array object of all elements

  14. $() 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 = $('div1','div2'); • divNodes.each(function(node){ • window.alert(node.innerHTML); • }); • } • </script> • <title>Dollar Method</title> • </head> • <div id="div1">Hello,</div> • <div id="div2">World!</div> • <a href="javascript:void(0)" onclick="alertDivs();">Alert Divs</a> • <body> • </body> • </html>

  15. $$() 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

  16. $$() 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()

  17. $$() 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>

  18. $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

  19. $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>

  20. $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)

  21. $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).

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

  23. $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>

  24. $R() method • $R(start, end[, exclusive = false]) • Creates a new ObjectRange object • Returned Array is extended with Prototype’s Enumerable module

  25. $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 });

  26. $w() method • Splits a string into an Array, treating all whitespace as delimiters • Returned Array is extended with Prototype’s Enumerable class

  27. You keep saying:‘The element is extended with Prototype’s DOM extensions’or‘The returned Array is extended with Prototype’s Enumerable module’

  28. What the heck are you talking about?

  29. I’m talking about Helpers… • Enumerables • Arrays • Hashes • Ranges • Element.Methods • Event • Form • Function • Insertion • Class • Object

  30. all any collect detect each entries find findAll grep include Inject invoke map max member min partition pluck reject select size sortBy toArray zip Enumerables

  31. 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()

  32. Hash Helpers • Hash is extended with Enumerable module • Hash is also extended with the following methods: • each() • inspect() • keys() • merge() • remove() • toQueryString() • values()

  33. 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’);}

  34. Commonly used Element methods • addClassName() and removeClassName() • addMethods() • cleanWhitespace() • extend() • hide() and show() • getElementsByClassName() • setStyle() • scrollTo() • update() and more…

  35. 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();

  36. Event • Events management made easy! • Commonly used methods: • observe() and stopObserving() • findElement()

  37. Event example Event.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'); } } }

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

  39. 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 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'); } } }

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

  41. 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'

More Related