Уроки PHP, Mootools, JavaScript, ActionScript, HTML, CSS

А если вы еще не в курсе, во нашем втором уроке о Mootools, мы говорили об основах этой библиотеки, о селекторах в Mootools. Мы также обсуждали селекторы, которые в своих результатах возвращали массивы данных (если кто не знает, в чем я конечно сомневаюсь, массивы – это специальные списки данных, организованные таким образом, чтобы давать пользователю обширные возможности по их управлению). Сегодня мы рассмотрим то, как использовать массивы, чтобы манипулировать элементами DOM-а.

Основы

.each();

.each(); – это ваш лучший друг при работе с массивами; это лучший способ применять любую функцию к каждому элементу массива. Например, скажем существует необходимость создать предупреждение alert(); для каждого div-а на странице:

$$('div').each(function() {
	alert('ДИВик');
});

А с таким кодом HTML предыдущий код показал бы два предупреждения, по одному на каждый div.

<div>Один</div>
<div>Два</div>

.each(); не обязывает к использованию $$. Другой метод создания массива (как мы и говорили на прошлом уроке), это использование .getElements();.

$('body_wrap').getElements('div').each(function() {
	alert('ДИВик');
});

<div id="body_wrap">
	<div>Первый</div>
	<div>Второй</div>
</div>

Еще одни способ выполнить ту же задачу, это назначить массив переменной, после чего применить к ней метод .each();

//вначале следует объявить переменную с помощью ключевого слова var:
//"var ИМЯ_ПЕРЕМЕННОЙ_ЛАТИНСКИМИ_БУКВАМИ"
//за которым последует символ "=", который и определяет данные объявленной переменной,
//в нашем случае, это массив элементов div
 
var myArray = $('body_wrap').getElements('div');
//теперь можно использовать эту переменную с массивом также,
//как и селектор массивов, рассмотренный ранее
 
myArray.each(function() {
	alert('ДИВик');
});

После всего этого, может потребоваться отделить вашу функцию от селектора и от метода .each();. Для этого, мы рассмотрим более детально создание функции в следующем уроке, а пока будет достаточно и той простенькой, которую мы сейчас создадим:

var myArray = $('body_wrap').getElements('div');
 
//чтобы создать новую функцию, нужно, также, как и в случае с переменными,
// объявить переменную, дав ей имя
//а после знака равно, нужно ввести ключевое слово "function()",
//чтобы объявить, что переменная – это функция
//после чего нужно поместить код функции в фигурные скобки ("{...}")
 
var myFunction = function() {
	alert('ДИВик');
};
//а далее нужно просто вызвать функцию внутри метода .each();.
 
myArray.each(myFunction);

Примечание: При вызове функции так, как мы это сделали в методе .each();, имя функции заключать в кавычки не нужно!

Копирование массива

$A

Библиотека Mootools предоставляет разработчикам простой способ копирования массивов с помощью функции $A. Давайте назначим массив переменной, как мы это сделали выше:

//создайте свою переменную с массивом
 
var myArray = $('body_wrap').getElements('div');

Для копирования массива нужно:

//создать новую переменную и скопировать в нее массив "myArray"
 
var myCopy = $A(myArray);

Теперь переменная myCopy содержит теже элементы, что и переменная myArray.

Выбор определенного элемента в массиве

.getLast();

.getLast(); вернет последний элемент массива. После создания массива:

var myArray = $('body_wrap').getElements('div');

можно выбрать его последний элемент.

var lastElement = myArray.getLast();

Переменная lastElement теперь является последним элементом массива myArray.

.getRandom();

Работает аналогично методу .getLast();, за исключением того, что произвольно выбирает элемент массива.

var randomElement = myArray.getRandom();

Переменная randomElement теперь является произвольно выбранный элемент массива myArray.

Добавить элемент к массиву

.include();

С помощью этого метода можно легко добавлять элементы в массив. Все, что нужно сделать, это вставить необходимый элемент в скобки метода .include(); и присоединить всю конструкцию к массиву. С помощью следующего HTML кода

<div id="body_wrap">
	<div>первый</div>
	<div>второй</div>
   	<span id="add_to_array">добавить в массив</span>
</div>

можно создать такой же массив, как мы создавали и чуть выше, вызвав все divы, находящиеся в элементе ‘body_wrap’.

var myArray = $('body_wrap').getElements('div');

Чтобы добавить элемент в уже соществующий массив, вначале нужно назначить для этого элемента переменную, а потом уже использовать метод .include();.

//вначале определяем переменную для элемента, который хотим добавить в массив
 
var newToArray = $('add_to_array');
 
//после чего добавляем переменную в массив
 
myArray.include(newToArray);

А теперь в нашем массиве находятся все элементы div и span.

.combine();

Этот метод работает также, как и .include();, с тем исключением, что позволяет добавить данные одного массива в другой, без того, исключая при этом дуплирование информации. Стоит также отметить, что метод .combine(); является чувствительным к регистру, поэтому нужно быть внимательным при ее использовании. Предположим, у нас было создано 2 массива из следующего HTML кода:

<div id="body_wrap">
	<div>первый</div>
	<div>второй</div>
    <span class="class_name">добавляем в массив</span>
    <span class="class_name">и это туда же</span>
    <span class="class_name">снова туда же</span>
</div>

После чего мы может создать следующие два массива:

//создаем массив, так же, как мы это делали и ранее
 
var myArray = $('body_wrap').getElements('div');
 
//потом, создаем массив из всех элементов с классом .class_name
 
var newArrayToArray = $$('.class_name');

Теперь мы можем использовать .combine(); чтобы комбинировать два созданных массива. Этот метод также исключит дубликаты информации.

//а потом комбинируйте переменную newArrayToArray c myArray
 
myArray.combine(newArrayToArray);

Теперь массив myArray содержит все элементы массива newArraytoArray.

Примеры

Массивы позволяют вам производить какое-либо действие с целым списком элементов. В следующем примере видно, как можно использовать ключ. слово “item” как своего рода “местоимение” текущего элемента.

//создает массив всех жлементов в элементе #body_wrap классом .class_name
 
var myArray = $('body_wrap').getElements('.class_name');
 
//вначале создадим новый элемент, который потом добавим к нашему массиву 
 
var addSpan = $('addtoarray');
 
//а теперь создадим новый массив, который скомбинируем с нашим массивом
 
var addMany = $$('.addMany');
 
//теперь можно добавить в массив элемент span
 
myArray.include(addSpan);
 
//и комбинировать массив addMany с массивом myArray myArray.combine(addMany);
//теперь создадим функцию, которая пройдется по всем элементам (ITEM) массива
 
var myArrayFunction = function(item) {
 
//ключевое слово item теперь относится к текущему элементу в массиве,
//к которому применяется функция
	item.setStyle('background-color', '#eee');
}
 
//теперь вызовем созданную функцию myArrayFunction для каждого элемента в массиве
//с помощью метода EACH
 
myArray.each(myArrayFunction);

<div id="body_wrap"> 
	<div class="class_name">первый</div>
    <div>второй</div> 
    <div class="class_name">третий</div>
    <span id="addtoarray">добавить в массив</span>
    <span class="addMany">один из нескольких</span>
    <span class="addMany">второй из нескольких</span></div>

Закругляемся…

Ну что ж, вроде как все! Этот урок не претендует на то, чтобы показать вам все прелести того, что библиотека Mootools может делать с массивами, но, надеюсь, он дал вам идею того, что Mootools может предложить по этому поводу.

А что будет завтра?

В следующем уроке мы поговорим о функциях: о том как их создавать, как их использовать и для чего они вообще нужны.

В следующих нескольких уроках мы продолжим говорить об основах Mootools, нов дальнейшем перейдем к более сложным проектам, так что не забывайте все то, что уже знаете .

Я пока все еще работаю над pdf-изацией всех документов на docs.mootools.net, но все равно рекомендую там иногда появляться и просматривать предназначения тех многочисленных функций и методов, которые предоставили нам разработчики Mootools. Я это тоже иногда делаю. Кстати, несмотря на полное отсутствие внимания к деталям, я недавно сделал небольшой скриптик, написанный на чистом Mootools, который заменяет цены на странице, в соответствии с введенным курсом обмена валют по ЦБ. Еще планирую автоматизировать этот процесс, что б скрипт сам откуда то брал нынешний курс валют… Если кому-то это интересно, могу выложить код, хотя, я уверен, все уже и так продвинулись дальше меня в этом всем .

Как всегда, всем удачи в начинаниях!