html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Mother of the gods, it is Surfingbird!

You finally got here. We've been waiting for you and we have so many interesting things!

Close

Введение в prototype.js

Подключаюсь к разработке проекта, в котором используется этот замечательный 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
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

21
    +3 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • skypractic
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции