Dimiter Kunchev

 JavaScript library written by Sam Stephenson   Adds object oriented techniques  Provides many utility functions  Extends JavaScript methods and objects  Hides cross-browser problems  Simplifies developing of heavy web applications

 $() – literal form for document.getElementById  Returns reference to the element with that ID  If specified multiple arguments, returns an array with the corresponding elements  $F() – returns the value of input form field  Works with text boxes, check boxes, radio buttons, buttons, etc var myDiv = $('myDiv'); var inputValue = $F('myInput');

 $$() – returns elements matching the given CSS filter rule  Try.these – takes multiple function calls as arguments and returns the value of the first that worked var arr = $$('div#login_form input'); Try.these ( function () {return XMLNode.text}, function () {return XMLNode.textContent} ); Try.these ( function () {return XMLNode.text}, function () {return XMLNode.textContent} );

 $A() – converts it's single argument into an Array object  Extends the array with some usefl methods  $H() – converts it's argument into an enumerable hash object  Also adds some methods var arr = $A(["a", "b", "c"]); arr.each(function(elem) {alert (elem);}); var arr = $A(["a", "b", "c"]); arr.each(function(elem) {alert (elem);}); var obj = $H( {"id":5, name:"test"} ); alert (obj.toQueryString()); //produces id=5&name=test var obj = $H( {"id":5, name:"test"} ); alert (obj.toQueryString()); //produces id=5&name=test

 bindAsEventListener (object, optinal arguments) – returns anonymous function  Can be used to attach object's method as event handler  The event handler receives the event object and all arguments passed to the bindAsEventListener method this.btn.onclick = this.onBtnClick.bindAsEventListener(this, 'btn'); … onBtnClick: function (event, some_string) { } this.btn.onclick = this.onBtnClick.bindAsEventListener(this, 'btn'); … onBtnClick: function (event, some_string) { }

 bind – similar to bindAsEventListener  Passes to the method all arguments, specified by the caller and to the bind method  Useful for attaching handlers of Ajax requests and timers setTimeout(this.onTimer.bind(this, 'timer'), 1000); … onTimer: function (caller) { // caller will be 'timer' // caller will be 'timer'} setTimeout(this.onTimer.bind(this, 'timer'), 1000); … onTimer: function (caller) { // caller will be 'timer' // caller will be 'timer'}

 Extensions to the Object object  extend (destination, source) – copies all properties and methods from source object to destination object  Used for class inheritance  keys – returns array with the names of all properties and methods of the object  values – returns array with the values of all properties and methods of the object  clone – creates shadow copy of the object

 Prototype.js AJAX classes and methods are capsulated in single object, named Ajax  Ajax.Request  Ajax.Updater  Ajax.PeriodicalUpdater  Ajax.Responders

 Simplifies the use of XMLHttpRequest  Hides browser differences  Object constructor takes two arguments  URL to send the request to  Associative array with options new Ajax.Request ('get-data.html', { method:"get", onSucccess: showData, // function to handle result parameters: $H({id:5, kw:'abc'}).toQueryString() }); new Ajax.Request ('get-data.html', { method:"get", onSucccess: showData, // function to handle result parameters: $H({id:5, kw:'abc'}).toQueryString() });

 Options that can be passed to the constructor:  method : 'get' or 'post'  parameters : string data to append to the URL  New versions of prototype support associative array as parameters  toQueryString is executed  postBody : string – the contents to send over HTTP POST request

 onSuccess : function to be called when data is read from server  The function takes one parameter – the XHMLHttpRequest object  contentType : string – sets the HTTP Content-Type header of the request  encoding : string – sets the encoding of the request body for POST method  By default it is 'UTF-8'

 Extension of Ajax.Request  Constructor takes one more parameter – id of element to place the fetched data in  Doesn't need onSuccess handler method new Ajax.Updater ( 'result', // element ID 'result', // element ID 'get-data.html', 'get-data.html', { method:"get", method:"get", parameters: $H({id:5,kw:'abc'}). parameters: $H({id:5,kw:'abc'}). toQueryString() toQueryString() }); new Ajax.Updater ( 'result', // element ID 'result', // element ID 'get-data.html', 'get-data.html', { method:"get", method:"get", parameters: $H({id:5,kw:'abc'}). parameters: $H({id:5,kw:'abc'}). toQueryString() toQueryString() });

 Extension of Ajax.Updater class  Constructor takes the same arguments as Ajax.Updater one  You can specify the frequency and decay of the requests in the options new Ajax.PeriodicalUpdater ( 'result', // element ID 'get-data.html', { method:"get", frequency: 100, decay: 1 }); new Ajax.PeriodicalUpdater ( 'result', // element ID 'get-data.html', { method:"get", frequency: 100, decay: 1 });

 Prototype.js introduces the Element object  Contains methods to work with the DOM  All methods are also copied as extensions to the element references, accessed by the $() function Element.show('my_div'); // The above is the same as: $('my_div').show();Element.show('my_div'); $('my_div').show();

 addClassName(element, className)  Adds the given class name(s) to the className property of the element  removeClassName(element, className)  Respectively removes the class name from the element  ancestors(element)  Returns array with all parent nodes of the element (from the element towards the root)

 childOf (element, ancestor)  Returns boolean – if the element is descendant of ancestor  desendantOf method is the same  descendants (element)  Returns array with all child nodes (recursively) of the element  getElementsByClassName(element, className)  Returns array with all child elements that have the given className in their classes

 Methods  serialize(form) – returns url-formated list of field names and their values  Useful for sending the data over Ajax  getElements(form) – returns array with the input fields in the form  disable(form), enable(form) – disable / enable all the inputs in the form

 Contains methods for working with events  element(event) – returns reference to the element that fired the event  isLeftClick(event) – returns true if the left mouse button was clicked  pointerX(event), pointerY(event) – return the X/Y coordinate of mouse event  stop(event) – abort event execution and stop its propagation

 Event.observe(element, name, observer, useCapture) – attach event listener to element  element is id or element reference  name is the event type – "load", "click", etc.  observer is the function that will handle the event  useCapture – specify whether to use capture or bubbling event flow models  Event.stopObserving – remove event handler  Parameters must be exactly the same as specified in Event.observer