Подключаюсь к разработке проекта, в котором используется этот замечательный js-фреймворк. До этого использовал только jQuery, поэтому пришлось изучать эту новую для меня библиотеку.

Второе место, куда я пошел за информацией, после Википедии, был Хабр. С удивлением обнаружил не обнаружил здесь блога, посвященного Prototype и более того, никакой информации «для новичков». Решил исправить этот недостаток.

Все заинтересованных — прошу под кат


Введение


Для начала, хочу отметить, что данный топик — не место для холивара, вида «X круче, чем Y». Я хочу рассказать только о возможностях данного фреймворка, не затрагивая другие.

Данный фреймоворк поддерживается Internet Explorer 6.0+, Mozilla Firefox 1.5+, Apple Safari 2.0+ и Opera 9.25+. Соответственно, его можно использовать в 99% проектов.

На текущий момент, последняя версия — 1.7, выпущена 22 ноября 2010.

Итак, мы скачали исходный код библиотеки и подключили её в нашем html-документе
<script src="prototype.js" type="text/javascript"></script>


Теперь рассмотрим возможности, которые нам стали доступны

Базовые возможности


Собственно, вся соль фреймворка изложена в 5-ти функциях. О них ниже.

$()
Здесь всё просто. Теперь 
document.getElementById('elementId');

можно заменить на 
$("elementId");


Более того, если функции передать несколько параметров, то она вернет массив элементов
var array = $('elementId-1', 'elementId-2', 'elementId-3');


Этот массив можно обработать в цикле, например
for (i=0; i<array.length; i++)
{
  alert(array[i].innerHTML);
}


$$()
Функция разбивает один или несколько CSS-cелекторов, которые поступают на вход, и возвращает элементы которые соответствуют этим фильтрам

<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);
	}

Данный код выведет:
My name
pass

Рассмотрим пример по-сложнее, когда на вход функции будет подано несколько фильтров
	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);
	}

Здесь мы увидим следующий результат:
My name
pass
Password

$F()
Для кода выше, мы могли получить значения элементов формы следующим образом:
       alert($F('name'));
       alert($F('pass'));

Как вы, наверное, уже догадались, результатом будет
My name
pass

Для лучшего понимания, следующие три конструкции аналогичны

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

Значения a, b, c будут равны

$A()
Функция $A() преобразует один аргумент, который она получает в объект Array.

<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);
});

Получаем
3: Test 1
2: Test 2
4: Test 3

$H()
Функция $H() преобразовывает объекты в перечислимые Hash-объекты, которые похожи на ассоциативный массив.

Каждый элемент hash-объекта — это массив из двух элементов: ключ и значение. Помимо этого, объект обладает 5-ю методами
keys() — возвращает массив из всех ключей
values() — возвращает массив из всех значений
merge(Hashes) — принимает объекты типа Hash, возвращает только один объект, результат их объединения
toQueryString() — преобраовывает объект в строку query-string. Т.е строку вида «key1=value1&key2=value2&key3=value3»
inspect() — возвращает объект в формате массива, вида «ключ: значение»

//Создаем объект
var a = {
	first: 10,
	second: 20,
	third: 30
};

//получаем hash
var h = $H(a);
alert(h.toQueryString()); //выведет "first=10&second=20&third=30"

Круто, не так ли?

Полезные функции


И рассмотрим еще несколько функций, без которых жизнь не была бы столь прекрасна

getElementsByClassName()
Работает аналогично функции getElementsByTagName(). Отличие лишь в том, что необходимо подавать не имя тега, а название класса. В массиве возвращаются все элементы, которые соответствуют указанному классу. Функция работает даже в том случае, если для элемента определено несколько классов.
Думаю, и без примера всё ясно.

Try.these()
return Try.these(
 function() {
     alert("первый");
     jkgjhgjhg        //преднамеренная ошибка
     alert("первая ошибка");
     return 1;
 },
 function() {
     alert("второй");
     return 2;
 }
);

В итоге, напечатается
первый
второй

А сама функция вернет 2.
Думаю, здесь всё понятно. Незаменимый инструмент при отладке

Еще одной полезной возможностью библиотеки, является работа с текстовыми шаблонами.
              //Создаем объект
	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));
	}

Получим:
Вы заказываете 1шт. товара Книга по 24.50р. каждая
Вы заказываете 3шт. товара Ручка по 5.44р. каждая
Вы заказываете 4шт. товара Тетрадь по 10.00р. каждая

Ну и разумеется, в современном мире нельзя закончить, не сказав об AJAX. Теперь AJAX-запрос можно выполнить следующим образом:
var myAjax = new Ajax.Request(
 url,
 {method: 'post', parameters: data, onComplete: ajax_response}
);


Метод — get или post.
Параметры — вида ключ=значение, объединённые в Query-string.
OnComplete — функция, которая будет вызвана, после завершения AJAX-запроса

Пример:
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);
}


Заключение


В библиотеке prototype.js множество замечательных возможностей, которые могут облегчить жизнь разработчику и которые просто нельзя описать в небольшой статье.

Спасибо, если вы дочитали до этого места.

Полезные ссылки


Официальный сайт проекта. Здесь вы можете скачать последнюю версию фреймворка и ознакомиться с официальной документацией

Для всего остального есть Google