Introduction to prototype.js

Connecting to the development of a project that uses this wonderful js framework. Before that, I used only jQuery, so I had to study this new library for me.

The second place where I went for information, after Wikipedia, was Habr. I was surprised to find I did not find here a blog dedicated to Prototype and moreover, no information “for beginners”. I decided to fix this flaw.

All interested - I ask under the cat

')

Introduction

For a start, I want to note that this topic is not a place for a holivar, of the form “X is steeper than Y”. I want to talk only about the capabilities of this framework, without affecting others.

This framework is supported by Internet Explorer 6.0+, Mozilla Firefox 1.5+, Apple Safari 2.0+ and Opera 9.25+. Accordingly, it can be used in 99% of projects.

Currently, the latest version is 1.7, released November 22, 2010.

So, we downloaded the source code of the library and connected it to our html document.

<script src="prototype.js" type="text/javascript"></script> 

Now consider the opportunities that have become available to us.

Basic features

Actually, the whole point of the framework is set out in 5 functions. About them below.

$ ()
Everything is simple here. Now

 document.getElementById('elementId'); 

can be replaced by

 $("elementId"); 

Moreover, if you pass several parameters to the function, it will return an array of elements

 var array = $('elementId-1', 'elementId-2', 'elementId-3'); 

This array can be processed in a loop, for example

 for (i=0; i<array.length; i++) { alert(array[i].innerHTML); } 

$$ ()
The function splits one or several CSS selectors that are received at the input, and returns the elements that correspond to these filters.

 <div id='loginForm'> <div class='field'> <label class='black'>User name:</label> <input type='text' id='name' value='My name'/> </div> <div class='field'> <label class='red'>Password:</label> <input type='password' id='pass' value='pass' /> </div> <input type='submit' value='login' /> </div> 

 var array = $$('div#loginForm .field input'); for(var i=0; i<array.length; i++){ alert(array[i].value); } 

This code will output:
My name
pass

Consider an example more complicated when several filters are applied to the input of a function.

  array = $$('div#loginForm .field input', 'div#loginForm .red'); s = ''; for(var i=0; i<array.length; i++){ s = ( array[i].value ? array[i].value : array[i].innerHTML ); alert(s); } 

Here we will see the following result:
My name
pass
Password

$ F ()
For the code above, we could get the values ​​of the form elements as follows:

  alert($F('name')); alert($F('pass')); 

As you probably already guessed, the result will be
My name
pass

For better understanding, the following three constructs are similar.

 var a = document.getElementById('name').value; var b = $('name').value; var c = $F('name'); 

Values ​​a, b, c will be equal

$ A ()
The $ A () function converts one argument that it takes to an Array object.

 <select id="list" > <option value="3">Test 1</option> <option value="2">Test 2</option> <option value="4">Test 3</option> </select> 

 var someNodeList = $('list').getElementsByTagName('option'); var nodes = $A(someNodeList); //      nodes.each(function(node){ alert(node.nodeName + ': ' + node.innerHTML); }); 

Get
3: Test 1
2: Test 2
4: Test 3

$ H ()
The $ H () function converts objects to enumerated Hash objects that look like an associative array.

Each element of a hash object is an array of two elements: a key and a value. In addition, the object has 5 methods
keys () - returns an array of all keys
values ​​() - returns an array of all values.
merge (Hashes) - accepts objects of Hash type, returns only one object, the result of their combination
toQueryString () - converts an object into a query-string. Ie a string of the form "key1 = value1 & key2 = value2 & key3 = value3"
inspect () - returns an object in an array format, of the form “key: value”

 //  var a = { first: 10, second: 20, third: 30 }; // hash var h = $H(a); alert(h.toQueryString()); // "first=10&second=20&third=30" 

Cool, right?

Useful features

And consider a few more functions, without which life would not be so beautiful.

getElementsByClassName ()
It works similarly to the getElementsByTagName () function. The only difference is that it is necessary to submit not the name of the tag, but the name of the class. The array returns all elements that correspond to the specified class. The function works even if several classes are defined for an element.
I think everything is clear without an example.

Try.these ()

 return Try.these( function() { alert(""); jkgjhgjhg //  alert(" "); return 1; }, function() { alert(""); return 2; } ); 

As a result, printed
the first
second

And the function itself will return 2.
I think everything is clear here. An indispensable tool for debugging

Another useful feature of the library is to work with text templates.

  //  var cart = new Object(); cart.items = [ ]; //  cart.items.push({product: '', price: 24.50, quantity: 1}); cart.items.push({product: '', price: 5.44, quantity: 3}); cart.items.push({product: '', price: 10.00, quantity: 4}); //  Template var itemFormat = new Template( '  #{quantity} . ' + ' #{product}  #{price}. ' ); for(var i=0; i<cart.items.length; i++){ var cartItem = cart.items[i]; alert(itemFormat.evaluate(cartItem)); } 

We get:
You order 1pcs. Product Book for 24.50r. each
You order 3pcs. Product Handle for 5.44r. each
You order 4pcs. Product Notebook at 10.00. each

Well, of course, in the modern world you can not finish without saying about AJAX. Now an AJAX request can be done as follows:

 var myAjax = new Ajax.Request( url, {method: 'post', parameters: data, onComplete: ajax_response} ); 

Method - get or post.
Parameters - type key = value, combined in Query-string.
OnComplete - the function to be called after the completion of an AJAX request

Example:

 var url = 'http://yourserver/app/get_sales'; var pars = 'id=123&value=456'; var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: showResponse }); } function showResponse(originalRequest) { alert(originalRequest.responseText); } 

Conclusion

The prototype.js library has many great features that can make a developer’s life easier and simply cannot be described in a small article.

Thank you if you have read this far.

useful links

The official site of the project. Here you can download the latest version of the framework and read the official documentation.

For everything else there is google