Prototype – Useful Resources

Prototype – Useful Resources ”; Previous Next The following resources contain additional information on Prototype. Please use them to get more in-depth knowledge on this. JavaScript Advanced Course – Useful methods to power up your code 26 Lectures 2 hours Laurence Svekis More Detail Adobe Xd Course – UI / UX Design, Prototype And Getting A Job 128 Lectures 11.5 hours Aleksandar Cucukovic More Detail Ultimate JavaScript Objects 66 Lectures 2 hours Daniel Stern More Detail Print Page Previous Next Advertisements ”;

Prototype – Periodical Execution

Prototype – Periodical Execution ”; Previous Next Many times it is required to execute a function many times after a certain period of time. For example, you may want to refresh your screen after a given time. Prototype provides a simple mechanism to implement it using PeriodicalExecuter object. The advantage provided by PeriodicalExecuter is that it shields you against multiple parallel executions of the callback function. Creating a PeriodicalExecuter The constructor takes two arguments − The callback function. The interval (in seconds) between executions. Once launched, a PeriodicalExecuter triggers indefinitely, until the page unloads or the executer is stopped using stop() method. Example Following is the example which will pop up a dialogue box after every 5 seconds untill you will stop it by pressing “cancel” button. <html> <head> <title>Prototype examples</title> <script type = “text/javascript” src = “/javascript/prototype.js”></script> <script> function startExec() { new PeriodicalExecuter(function(pe) { if (!confirm(”Want me to annoy you again later?”)) pe.stop(); }, 5); } </script> </head> <body> <p>Click start button to start periodic executer:</p> <br /> <br /> <input type = “button” value = “start” onclick = “startExec();”/> </body> </html> Output Print Page Previous Next Advertisements ”;

Prototype – Enumerating

Prototype – Enumerating ”; Previous Next Enumerable class provides a large set of useful methods for enumerations. Enumerations are objects that act as collection of values. Enumeration methods are mostly used to enumerate arrays and hashes. There are other objects as well like ObjectRange and various DOM- or AJAX-related objects where you can use enumeration methods. The Context Parameter Every method of Enumerable that takes an iterator also takes the context object as the next (optional) parameter. The context object is what the iterator is going to be binded to, so the this keyword inside it will point to the object. var myObject = {}; [”foo”, ”bar”, ”baz”].each(function(name, index) { this[name] = index; }, myObject); // we have specified the context myObject; This will produce the following result − Output { foo: 0, bar: 1, baz: 2} Using it Efficiently When you need to invoke the same method on all the elements, go with invoke() method. When you need to fetch the same property on all the elements, go with pluck() method. The findAll/select methods retrieve all the elements that match a given predicate. Conversely, the reject() method retrieves all the elements that do not match a predicate. In the specific case where you need both the sets, you can avoid looping twice: just use partition() method. Here is a complete list of all the methods related to Enumerable. Prototype Enumerable Methods NOTE − Make sure you at least have the version 1.6 of prototype.js. S.No. Method & Description 1. all() Determines whether all the elements are boolean-equivalent to true, either directly or through computation by the provided iterator. 2. any() Determines whether at least one element is boolean-equivalent to true, either directly or through computation by the provided iterator. 3. collect() Returns the results of applying the iterator to each element. Aliased as map(). 4. detect() Finds the first element for which the iterator returns true. Aliased by the find() method. 5. each() It lets you iterate over all the elements in a generic fashion, then returns the Enumerable, thereby allowing chain-calling. 6. eachSlice() Groups items in chunks based on a given size, with last chunk being possibly smaller. 7. entries() Alias for the more generic toArray method. 8. find() Finds the first element for which the iterator returns true. Convenience alias for detect(). 9. findAll() Returns all the elements for which the iterator returned true. Aliased as select(). 10. grep() Returns all the elements that match the filter. If an iterator is provided, it is used to produce the returned value for each selected element. 11. inGroupsOf() Groups items in fixed-size chunks, using a specific value to fill up the last chunk if necessary. 12. include() Determines whether a given object is in the Enumerable or not, based on the == comparison operator. Aliased as member(). 13. inject() Incrementally builds a result value based on the successive results of the iterator. 14. invoke() Optimization for a common use-case of each() or collect(): invoking the same method, with the same potential arguments, for all the elements. 15. map() Returns the results of applying the iterator to each element. Convenience alias for collect(). 16. max() Returns the maximum element (or element-based computation), or undefined if the enumeration is empty. Elements are either compared directly, or by first applying the iterator and comparing returned values. 17. member() Determines whether a given object is in the Enumerable or not, based on the == comparison operator. Convenience alias for include(). 18. min() Returns the minimum element (or element-based computation), or undefined if the enumeration is empty. Elements are either compared directly, or by first applying the iterator and comparing returned values. 19. partition() Partitions the elements in two groups: those regarded as true, and those considered false. 20. pluck() Optimization for a common use-case of collect(): fetching the same property for all the elements. Returns the property values. 21. reject() Returns all the elements for which the iterator returned false. 22. select() Alias for the findAll() method. 23. size() Returns the size of the enumeration. 24. sortBy() Provides a custom-sorted view of the elements based on the criteria computed, for each element, by the iterator. 25. toArray() Returns an Array representation of the enumeration. Aliased as entries(). 26. zip() Zips together (think of the zip on a pair of trousers) 2 &plus; sequences, providing an array of tuples. Each tuple contains one value per original sequence. Print Page Previous Next Advertisements ”;

Prototype – Quick Guide

Prototype – Quick Guide ”; Previous Next Prototype – Overview What is Prototype ? Prototype is a JavaScript Framework that aims to ease the development of dynamic web applications. Prototype was developed by Sam Stephenson. Prototype is a JavaScript library, which enables you to manipulate DOM in a very easy and fun way that is also safe (cross-browser). Scriptaculous and other libraries, such as Rico are build on Prototype”s foundations to create widgets and other end-user stuff. Prototype − Extends DOM elements and built-in types with useful methods. Has built-in support for class-style OOP including inheritance. Has advanced support for event management. Has powerful Ajax features. Is not a complete application development framework. Does not provide widgets or a full set of standard algorithms or I/O systems. How to Install Prototype? Prototype is distributed as a single file called prototype.js. Follow the below mentioned steps to setup the prototype library − Go to the download page (http://prototypejs.org/download/) to grab the latest version in a convenient package. Now, put prototype.js file in a directory of your website, e.g. /javascript. You are now ready to use the powerful Prototype framework in your web pages. How to Use Prototype Library? Now, you can include the Prototype script as follows − <html> <head> <title>Prototype examples</title> <script type = “text/javascript” src = “/javascript/prototype.js”></script> </head> <body> …….. </body> </html> Example Here is a simple example showing how you can use Prototype”s $() function to get DOM elements in your JavaScript − <html> <head> <title>Prototype examples</title> <script type = “text/javascript” src = “/javascript/prototype.js”></script> <script> function test() { node = $(“firstDiv”); alert(node.innerHTML); } </script> </head> <body> <div id = “firstDiv”> <p>This is first paragraph</p> </div> <div id = “secondDiv”> <p>This is another paragraph</p> </div> <input type = “button” value = “Test $()” onclick = “test();”/> </body> </html> Output Why This Tutorial? A very good documentation for Prototype Framework is available at prototypejs.org then why should one refer to this tutorial! The answer is that we have put all the most commonly used functionalities together in this tutorial. Secondly, we have explained all the useful methods along with suitable examples, which are not available at the official site. If you are an advanced user of Prototype Framework, then you can directly jump to the official website, otherwise this tutorial could be a good start for you and you can use it like a reference manual. Prototype – Useful Features Let”s now look at what Prototype can do specifically for us to develop a Dynamic Web Application. Cross Browser Support While doing JavaScript programming, it is required to handle different Web Browsers differently. Prototype Library has been written in such a way that it takes care of all the compatibility issues and you can do cross browser programming without any hassle. The Document Object Model Prototype provides helper methods that ease some of the strain of DOM programming. Using Prototype, you can manipulate DOM very easily. HTML Forms With Ajax, other input mechanisms such as drag and drop, can be used as part of a conversation between the browser and the server. With conventional JavaScript programming, it is difficult to capture these inputs and pass them to the server. Prototype provides a set of utilities for working with HTML forms. JavaScript Events Prototype provides some excellent cross-browser support while coding events, and also extends the Function object to make it easy to work with event handling. Ajax Utilities The most important feature of Prototype is it”s support for Ajax. All major browsers support a version of the XMLHttpRequest object that makes Ajax possible, either as an ActiveX component or as a native JavaScript object. XMLHttpRequest, however, exposes the HTTP protocol at a very low level, which gives the developer a lot of power, but also requires her to write a lot of code in order to do simple things. Prototype uses it”s own object inheritance system to provide a hierarchy of Ajax helper objects, with more generic base classes being subclassed by more focused helpers that allow the most common types of Ajax request to be coded in a single line. Prototype – Utility Methods The Prototype library comes with lot of predefined objects and utility functions. You can use those functions and objects directly in your JavaScript programming. These methods are one of the cornerstones of efficient Prototype-based JavaScript coding. Spend some time to study them to become comfortable with the methods. This chapter details all these useful methods with examples. S.No. Method & Description 1. $() If provided with a string, returns the element in the document with matching ID; otherwise returns the passed element. 2. $$() Takes an arbitrary number of CSS selectors (strings) and returns a document-order array of extended DOM elements that match any of them. 3. $A() Converts the single argument it receives into an Array object. 4. $F() Returns the value of a form control. This is a convenience alias of Form.Element.getValue. 5. $H() Converts objects into enumerable Hash objects that resemble associative arrays. 6. $R() Creates a new ObjectRange object. 7. $w() Splits a string into an Array, treating all whitespace as delimiters. 8. Try.these Accepts an arbitrary number of functions and returns the result of the first one that doesn”t throw an error. document.getElementsByClassName This method retrieves (and extends) all the elements that have a CSS class name of className. However, this method has been deprecated in the latest versions of Prototype. Prototype – Element Object The Element object provides various utility functions for manipulating elements in the DOM. Here is the list of all the utility functions with examples. All the methods defined here are automatically added to any element accessed using the $() function. So, writing Element.show(”firstDiv”); is the same as writing $(”firstDiv”).show(); Prototype Element Method NOTE − Make sure you have at least version 1.6 of prototype.js. S.No. Method & Description 1. absolutize() Turns element into an absolutely-positioned element without changing its position in the page layout. 2. addClassName() Adds the given CSS class

Prototype – Useful Features

Prototype – Useful Features ”; Previous Next Let”s now look at what Prototype can do specifically for us to develop a Dynamic Web Application. Cross Browser Support While doing JavaScript programming, it is required to handle different Web Browsers differently. Prototype Library has been written in such a way that it takes care of all the compatibility issues and you can do cross browser programming without any hassle. The Document Object Model Prototype provides helper methods that ease some of the strain of DOM programming. Using Prototype, you can manipulate DOM very easily. HTML Forms With Ajax, other input mechanisms such as drag and drop, can be used as part of a conversation between the browser and the server. With conventional JavaScript programming, it is difficult to capture these inputs and pass them to the server. Prototype provides a set of utilities for working with HTML forms. JavaScript Events Prototype provides some excellent cross-browser support while coding events, and also extends the Function object to make it easy to work with event handling. Ajax Utilities The most important feature of Prototype is it”s support for Ajax. All major browsers support a version of the XMLHttpRequest object that makes Ajax possible, either as an ActiveX component or as a native JavaScript object. XMLHttpRequest, however, exposes the HTTP protocol at a very low level, which gives the developer a lot of power, but also requires her to write a lot of code in order to do simple things. Prototype uses it”s own object inheritance system to provide a hierarchy of Ajax helper objects, with more generic base classes being subclassed by more focused helpers that allow the most common types of Ajax request to be coded in a single line. Print Page Previous Next Advertisements ”;

Prototype – Form Management

Prototype – Form Management ”; Previous Next Prototype provides an easy way to manage HTML forms. Prototype”s Form is a namespace and a module for all things form-related, packed with form manipulation and serialization goodness. While it holds methods dealing with forms as a whole, its sub module Form.Element deals with specific form controls. Here is a complete list of all the methods related to Form Element. Prototype Form Methods NOTE − Make sure you at least have the version 1.6 of prototype.js. S.No. Method & Description 1. disable() Disables the form as whole. Form controls will be visible but uneditable. 2. enable() Enables a fully or partially disabled form. 3. findFirstElement() Finds first non-hidden, non-disabled form control. 4. focusFirstElement() Gives keyboard focus to the first element of the form. 5. getElements() Returns a collection of all form controls within a form. 6. getInputs() Returns a collection of all INPUT elements in a form. Use optional type and name arguments to restrict the search on these attributes. 7. request() A convenience method for serializing and submitting the form via an Ajax.Request to the URL of the form”s action attribute. The options parameter is passed to the Ajax.Request instance, allowing to override the HTTP method and to specify additional parameters. 8. reset() Resets a form to its default values. 9. serialize() Serialize form data to a string suitable for Ajax requests (default behavior) or, if optional getHash evaluates to true, an object hash where keys are form control names and values are data. 10. serializeElements() Serialize an array of form elements to a string suitable for Ajax requests (default behavior) or, if optional getHash evaluates to true, an object hash where keys are form control names and values are data. Print Page Previous Next Advertisements ”;

Prototype – Expressing Ranges

Prototype – Expressing Range ”; Previous Next Prototype Ranges represent an interval of values. The preferred way to obtain a range is to use the $R utility function. You can create a big range of values using a simple syntax as follows − $R(1, 10).inspect(); $R(”a”, ”e”).inspect(); This will produce the following result − [”1, 2, 3, 4, 5, 6, 7, 8, 9, 10”] [”a”, ”b”, ”c”, ”d”, ”e”] The include() Method This method determines whether the value is included in the range − Syntax Range.include(value); Return Value If value is included, then returns a true value otherwise false. Example <html> <head> <title>Prototype examples</title> <script type = “text/javascript” src = “/javascript/prototype.js”></script> <script> function showResult() { alert ( “Test 1 : ” + $R(1, 10).include(5)); // Returns true alert ( “Test 2 : ” + $R(”a”, ”h”).include(”x”)); // Returns flase } </script> </head> <body> <p>Click the button to see the result.</p> <br /> <br /> <input type = “button” value = “Result” onclick = “showResult();”/> </body> </html> Output Print Page Previous Next Advertisements ”;

Prototype – Utility Methods

Prototype – Utility Methods ”; Previous Next The Prototype library comes with lot of predefined objects and utility functions. You can use those functions and objects directly in your JavaScript programming. These methods are one of the cornerstones of efficient Prototype-based JavaScript coding. Spend some time to study them to become comfortable with the methods. This chapter details all these useful methods with examples. S.No. Method & Description 1. $() If provided with a string, returns the element in the document with matching ID; otherwise returns the passed element. 2. $$() Takes an arbitrary number of CSS selectors (strings) and returns a document-order array of extended DOM elements that match any of them. 3. $A() Converts the single argument it receives into an Array object. 4. $F() Returns the value of a form control. This is a convenience alias of Form.Element.getValue. 5. $H() Converts objects into enumerable Hash objects that resemble associative arrays. 6. $R() Creates a new ObjectRange object. 7. $w() Splits a string into an Array, treating all whitespace as delimiters. 8. Try.these Accepts an arbitrary number of functions and returns the result of the first one that doesn”t throw an error. document.getElementsByClassName This method retrieves (and extends) all the elements that have a CSS class name of className. However, this method has been deprecated in the latest versions of Prototype. Print Page Previous Next Advertisements ”;

Prototype – Home

Prototype Tutorial PDF Version Quick Guide Resources Job Search Discussion This tutorial gives a complete understanding on Prototype. Prototype is distributed as a single file called prototype.js. Prototype is an object in javaScript from which other objects inherit properties. Audience This tutorial has been written for users willing to learn the JavaScript Prototype object and its usage. Beginners as well as experienced users can refer this tutorial to brush up or learn the JavaScript prototypes. Prerequisites To learn prototype you should have the basic knowledge of JavaScript and its properties. Print Page Previous Next Advertisements ”;

Prototype – Strings Processing

Prototype – String Processing ”; Previous Next Prototype enhances the String object with a series of useful methods ranging from the trivial to the complex. Here is the list of all the functions with examples dealing with String. Prototype String Methods NOTE − Make sure you have the prototype.js version of 1.6. S.No. Method & Description 1. blank() Checks if the string is ”blank”, meaning either empty or containing only whitespace. 2. camelize() Converts a string separated by dashes into a camelCase equivalent. For instance, ”foo-bar” would be converted to ”fooBar”. 3. capitalize() Capitalizes the first letter of a string and downcases all the others. 4. dasherize() Replaces every instance of the underscore character (“_”) by a dash (“-“). 5. empty() Checks if the string is empty. 6. endsWith() Checks if the string ends with substring. 7. escapeHTML() Converts HTML special characters to their entity equivalents. 8. evalJSON() Evaluates the JSON in the string and returns the resulting object. 9. evalScripts() Evaluates the content of any script block present in the string. Returns an array containing the value returned by each script. 10. extractScripts() Extracts the content of any script block present in the string and returns them as an array of strings. 11. gsub() Returns the string with every occurrence of a given pattern replaced by either a regular string, the returned value of a function or a Template string. 12. include() Checks if the string contains a substring. 13. inspect() Returns a debug-oriented version of the string. 14. interpolate() Treats the string as a Template and fills it with object”s properties. 15. isJSON() Checks if the string is valid JSON by the use of regular expressions. This security method is called internally. 16. parseQuery() Parses a URI-like query string and returns an object composed of parameter/value pairs. 17. scan() Allows iterating over every occurrence of the given pattern. 18. startsWith() Checks if the string starts with substring. 19. strip() Strips all the leading and trailing whitespace from a string. 20. stripScripts() Strips a string of anything that looks like an HTML script block. 21. stripTags() Strips a string of any HTML tag. 22. sub() Returns a string with the first count occurrences of pattern replaced by either a regular string, the returned value of a function or a Template string. 23. succ() Used internally by ObjectRange. Converts the last character of the string to the following character in the Unicode alphabet. 24. times() Concatenates the string count times. 25. toArray() Splits the string character-by-character and returns an array with the result. 26. toJSON() Returns a JSON string. 27. toQueryParams() Parses a URI-like query string and returns an object composed of parameter/value pairs. 28. truncate() Truncates a string to the given length and appends a suffix to it (indicating that it is only an excerpt). 29. underscore() Converts a camelized string into a series of words separated by an underscore (“_”). 30. unescapeHTML() Strips tags and converts the entity forms of special HTML characters to their normal form. 31. unfilterJSON () Strips comment delimiters around Ajax JSON or JavaScript responses. This security method is called internally. Print Page Previous Next Advertisements ”;