logging in or signing up JavaScript Libraries aSGuest5913 Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 297 Category: Sports License: All Rights Reserved Like it (0) Dislike it (0) Added: December 10, 2008 This Presentation is Public Favorites: 0 Presentation Description No description available. Comments Posting comment... Premium member Presentation Transcript JavaScript Libraries: : JavaScript Libraries: Prototype.js Script.aculo.us Brian Love Hamilton College Web Integrations Specialist Prototype.js : Prototype.js Get it at: http://www.prototypejs.org/ Prototype.js : Prototype.js Ajax interface Utility methods Helper methods Extending the DOM Class Object …and even more! AJAX interface : 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 Ajax.PeriodicalUpdater : 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) Ajax.Updater : Ajax.Updater new Ajax.Updater(container, url[, options]) Replaces innerHTML of container with response text Ajax.Request : 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. Ajax.Responders : 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(); } }); Ajax Options : Ajax Options Available options: method, parameters, asynchronous, postBody, requestHeaders, insertion, evalScripts, decay (periodicalUpdater), frequency (periodicalUpdater) Ajax Callbacks : 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 Ajax Callbacks example : 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();}); Utility Methods : Utility Methods $ $$ $A $F $H $R $w try.these document.getElementsByClassName $() method : $() method document.getElementById() on steroids Pass in id or element Pass in multiple ids will return an Array object of all elements $() example : $() 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> $$() method : $$() 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 $$() method : $$() 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() $$() example : $$() 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> $A() method : $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 $A() example : $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> $F() method : $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) $H() method : $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? : 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 $H() example : $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> $R() method : $R() method $R(start, end[, exclusive = false]) Creates a new ObjectRange object Returned Array is extended with Prototype’s Enumerable module $R() examples : $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 : $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’ : 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? : What the heck are you talking about? I’m talking about Helpers… : I’m talking about Helpers… Enumerables Arrays Hashes Ranges Element.Methods Event Form Function Insertion Class Object Enumerables : 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 Array Helpers : 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() Hash Helpers : Hash Helpers Hash is extended with Enumerable module Hash is also extended with the following methods: each() inspect() keys() merge() remove() toQueryString() values() Element.Methods : 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’);} Commonly used Element methods : Commonly used Element methods addClassName() and removeClassName() addMethods() cleanWhitespace() extend() hide() and show() getElementsByClassName() setStyle() scrollTo() update() and more… Element.methods : 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(); Event : Event Events management made easy! Commonly used methods: observe() and stopObserving() findElement() Event example : 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'); } } } The problem with this : 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 Binding solved, thanks Prototype! : 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 Class Object : 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 : 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' Script.aculo.us : Script.aculo.us Get it at: script.aculo.us Visual Effects : Visual Effects Appear() and Fade() Puff() DropOut() Shake() Highlight() SwitchOff() BlindDown() and BlindUp() SlideDown() and SlideUp() Pulsate() Squish() Fold() Grow() Shrink() Basic Syntax : Basic Syntax Effect.Name(‘elementid’, [options]); Common Options (parameter is a hash{}): duration fps from to queue Common Callbacks: beforeStart() beforeUpdate() afterUpdate() afterFinish() Queuing your effects : Queuing your effects Queue option arguments: String specifying position in queue, i.e.: new Effect.Appear(‘mydiv1’,{queue:’start’}); new Effect.Appear(‘mydiv2’,{queue:’end’}); Hash with position string and scope string, i.e.new Effect.Appear(‘mydiv1’,{queue:{position:’start’,scope:’banner’}}); new Effect.Appear(‘mydiv2’,{queue:{position:’end’,scope:’banner’}}); new Effect.Appear(‘mydiv3’,{queue:{position:’start’,scope:’menu’}}); new Effect.Appear(‘mydiv4’,{queue:{position:’end’,scope:’menu’}}); Hash with position string, scope string, and limit number, i.e.: new Effect.Appear(‘mydiv1’,queue:{position:’start’,scope:’banner’,limit:2}}); new Effect.Appear(‘mydiv2’,queue:{position:’start’,scope:’banner’,limit:2}}); new Effect.Appear(‘mydiv3’,queue:{position:’end’,scope:’banner’,limit:2}}); Drag and Drop made simple : Drag and Drop made simple Three classes help us: Draggables Droppables Sortables Draggable object : Draggable object new Draggable(‘elementid’, [options]); Common options: handle revert zindex contstraint ghosting Droppable : Droppable Two methods: Droppable.add() Droppable.remove() Droppable.add(‘elementid’,[options]); Droppable.remove(‘elementid’); Common options: accept containment hoverclass overlap greedy Sortable : Sortable Two methods: Sortable.create() Sortable.destroy() Sortable takes care of the creation of both the Draggable and Droppable Common options: tag only containment …Plus similar options as Draggable Callbacks: onChange onUpdate onUpdate callback : onUpdate callback Called when the drag ends and the Sortable’s order is changed in any way. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the container as its parameter. The id attributes of the elements contained in the Sortable must be named as follows: Id=“string_identifier”, i.e.: <li id=“sortlist_1”>…</li> <li id=“sortlist_2”>…</li> Sortable.create() example : Sortable.create() example Sortable.create('sortable_list',{onUpdate:function(){ var listsequence = Sortable.sequence('sortable_list'); var list = listsequence.map(function(item,i) { var id = $('eventitem_'+item).id; return i + "=" + id; }).join('&'); var pars = 'action=edit_event_items_order&count='+listsequence.length+'&'+list; new Ajax.Request('<cfoutput>#CGI.SCRIPT_NAME#</cfoutput>',{method:'post',parameters:pars}); } What else can it do? : What else can it do? Create your own effects Autocompletion In place editing (text input and textarea) DOM Builder Unit testing and Functional testing Questions, comments, ideas? : Questions, comments, ideas? Thanks! You do not have the permission to view this presentation. In order to view it, please contact the author of the presentation.
JavaScript Libraries aSGuest5913 Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 297 Category: Sports License: All Rights Reserved Like it (0) Dislike it (0) Added: December 10, 2008 This Presentation is Public Favorites: 0 Presentation Description No description available. Comments Posting comment... Premium member Presentation Transcript JavaScript Libraries: : JavaScript Libraries: Prototype.js Script.aculo.us Brian Love Hamilton College Web Integrations Specialist Prototype.js : Prototype.js Get it at: http://www.prototypejs.org/ Prototype.js : Prototype.js Ajax interface Utility methods Helper methods Extending the DOM Class Object …and even more! AJAX interface : 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 Ajax.PeriodicalUpdater : 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) Ajax.Updater : Ajax.Updater new Ajax.Updater(container, url[, options]) Replaces innerHTML of container with response text Ajax.Request : 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. Ajax.Responders : 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(); } }); Ajax Options : Ajax Options Available options: method, parameters, asynchronous, postBody, requestHeaders, insertion, evalScripts, decay (periodicalUpdater), frequency (periodicalUpdater) Ajax Callbacks : 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 Ajax Callbacks example : 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();}); Utility Methods : Utility Methods $ $$ $A $F $H $R $w try.these document.getElementsByClassName $() method : $() method document.getElementById() on steroids Pass in id or element Pass in multiple ids will return an Array object of all elements $() example : $() 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> $$() method : $$() 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 $$() method : $$() 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() $$() example : $$() 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> $A() method : $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 $A() example : $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> $F() method : $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) $H() method : $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? : 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 $H() example : $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> $R() method : $R() method $R(start, end[, exclusive = false]) Creates a new ObjectRange object Returned Array is extended with Prototype’s Enumerable module $R() examples : $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 : $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’ : 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? : What the heck are you talking about? I’m talking about Helpers… : I’m talking about Helpers… Enumerables Arrays Hashes Ranges Element.Methods Event Form Function Insertion Class Object Enumerables : 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 Array Helpers : 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() Hash Helpers : Hash Helpers Hash is extended with Enumerable module Hash is also extended with the following methods: each() inspect() keys() merge() remove() toQueryString() values() Element.Methods : 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’);} Commonly used Element methods : Commonly used Element methods addClassName() and removeClassName() addMethods() cleanWhitespace() extend() hide() and show() getElementsByClassName() setStyle() scrollTo() update() and more… Element.methods : 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(); Event : Event Events management made easy! Commonly used methods: observe() and stopObserving() findElement() Event example : 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'); } } } The problem with this : 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 Binding solved, thanks Prototype! : 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 Class Object : 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 : 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' Script.aculo.us : Script.aculo.us Get it at: script.aculo.us Visual Effects : Visual Effects Appear() and Fade() Puff() DropOut() Shake() Highlight() SwitchOff() BlindDown() and BlindUp() SlideDown() and SlideUp() Pulsate() Squish() Fold() Grow() Shrink() Basic Syntax : Basic Syntax Effect.Name(‘elementid’, [options]); Common Options (parameter is a hash{}): duration fps from to queue Common Callbacks: beforeStart() beforeUpdate() afterUpdate() afterFinish() Queuing your effects : Queuing your effects Queue option arguments: String specifying position in queue, i.e.: new Effect.Appear(‘mydiv1’,{queue:’start’}); new Effect.Appear(‘mydiv2’,{queue:’end’}); Hash with position string and scope string, i.e.new Effect.Appear(‘mydiv1’,{queue:{position:’start’,scope:’banner’}}); new Effect.Appear(‘mydiv2’,{queue:{position:’end’,scope:’banner’}}); new Effect.Appear(‘mydiv3’,{queue:{position:’start’,scope:’menu’}}); new Effect.Appear(‘mydiv4’,{queue:{position:’end’,scope:’menu’}}); Hash with position string, scope string, and limit number, i.e.: new Effect.Appear(‘mydiv1’,queue:{position:’start’,scope:’banner’,limit:2}}); new Effect.Appear(‘mydiv2’,queue:{position:’start’,scope:’banner’,limit:2}}); new Effect.Appear(‘mydiv3’,queue:{position:’end’,scope:’banner’,limit:2}}); Drag and Drop made simple : Drag and Drop made simple Three classes help us: Draggables Droppables Sortables Draggable object : Draggable object new Draggable(‘elementid’, [options]); Common options: handle revert zindex contstraint ghosting Droppable : Droppable Two methods: Droppable.add() Droppable.remove() Droppable.add(‘elementid’,[options]); Droppable.remove(‘elementid’); Common options: accept containment hoverclass overlap greedy Sortable : Sortable Two methods: Sortable.create() Sortable.destroy() Sortable takes care of the creation of both the Draggable and Droppable Common options: tag only containment …Plus similar options as Draggable Callbacks: onChange onUpdate onUpdate callback : onUpdate callback Called when the drag ends and the Sortable’s order is changed in any way. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the container as its parameter. The id attributes of the elements contained in the Sortable must be named as follows: Id=“string_identifier”, i.e.: <li id=“sortlist_1”>…</li> <li id=“sortlist_2”>…</li> Sortable.create() example : Sortable.create() example Sortable.create('sortable_list',{onUpdate:function(){ var listsequence = Sortable.sequence('sortable_list'); var list = listsequence.map(function(item,i) { var id = $('eventitem_'+item).id; return i + "=" + id; }).join('&'); var pars = 'action=edit_event_items_order&count='+listsequence.length+'&'+list; new Ajax.Request('<cfoutput>#CGI.SCRIPT_NAME#</cfoutput>',{method:'post',parameters:pars}); } What else can it do? : What else can it do? Create your own effects Autocompletion In place editing (text input and textarea) DOM Builder Unit testing and Functional testing Questions, comments, ideas? : Questions, comments, ideas? Thanks!