This chapter demonstrates about the Prototype.js which is an object in JavaScript and is a Javascript Framework and following are the concepts covered in this chapter.
About Prototype
Installation And Using
About Prototype
Description
Prototype provides the information about the prototype library and as well as central repository for default iterators and functions. Prototype is intended for only namespace but not for instantiation and not for mixing the other objects. Prototype was mainly developed by Sam Stephenson which is an Java Script is enable user to manipulate the DOM in a very easy Process.
Browser Features
Prototype provides repository as browser feature information which can be used in any where in source code. The idea behind is make the prototype code is so readable and centralise the scripting trickery to detect the browser features for easy maintenance.
Iterators and Functions
In Prototype Objects there are numerous methods in which mostly used is the Enumarable Model but which can make it optional by defaulting an identity function which returns an argument untouched.
Installation And Using
Description
User can get installed Prototype by adding Protype.js file to source. Prototype js available in a single file which can be downloaded from the official page of Prototypejs.org and user can also get the different versions of Prototye js file from the official website of Prototypejs.org. The code below demonstrates the using of Prototype as shown.
[jscript]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
</head>
<body>
........
</body>
</html>
[/jscript]
The snippet below demonstrates the to get the DOM elements by using the prototype $() function in JavaScript as shown below.
[jscript]
<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>first paragraph of Prototype</p>
</div>
<div id = "secondDiv">
<p>another paragraph of Prototype</p>
</div>
<input type = "button" value = "Test $()" onclick = "test();"/>
</body>
</html>
[/jscript]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.