В этом уроке мы рассмотрим две “полки” библиотеки: первая, это функция .periodical();, после которой мы проведем короткое введение в хеш-массивы. Periodical будет делать именно то, для чего её и придумали (вот так открытие!): она будет выполнять функцию с заданной периодичностью. Вторя “полка”, хеш-массивы – это наборы данных, состоящих из связки ключа и значения, записанных определенным образом. Итак, далее представим краткое введение в хеш-массивы и, если Вы все правильно поймёте, а я уверен в этом на 100% (ведь я то понял ), то эти знания окажутся весьма полезными.

.periodical()

Основы

Всё просто: добавляем .periodical(); к названию функции и эта функция будет периодически запускаться. Вроде бы всё, но не всё. Как и всегда, есть ещё несколько вещей, которые нужно упомянуть. Итак, нам нужна будет функция, которую будем выполнять, и периодичность, в миллисекундах, с которой эта функция будет выполняться.

var periodicalFunction = function(){
	alert('ещё!');
}
	//в этом примере ф-ция periodical() запускаетя при загрузке страницы,
    //но, как будет показано далее, не обязательно на этом ограничиваться
    window.addEvent('domready', function() {
    	//число в скобках означает частоту запуска функции, в миллисекундах
        	var periodicalFunctionVar = periodicalFunction.periodical(100);
    });

Встроенная привязка с .bind();

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

window.addEvent('domready', function() {
	//передаем что-нибудь переменной
    var periodicalFunctionVar = periodicalFunction.periodical(100, passedVar);
});

Остановка запущенной по циклу функции

$clear()

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

	//удаляем из памяти переменную, которая содержала функцию и ее использование с periodical();
    $clear(periodicalFunctionVar);

Пример

Итак, подытожим… примером. Попробуем использовать несколько вещей, которые мы только что узнали (и немного до сели неизведанного), чтобы создать таймер. Вначале напишем HTML код таймера, где будем использовать кнопки старта и обнуления. Также, нужно будет создать полосу, которая будет увеличиваться по истечении времени. И ещё, нужно будет показать, сколько времени уже таймер запущен.

	<button id="timer_start">пуск</button><br />
    <button id="timer_stop">пауза</button><br />
    <button id="timer_reset">обновить</button>
    <div id="timer_bar"></div>
    <div id="timer_display">0</div>

Код Mootools в студию!

var timerFunction = function(){
	//каждый раз, по вызову этой функции
    //переменная currentTime будет увеличиваться на 1
    //дальше остановимся более подробно на этом
    //также, обратите внимание на использование конструкции "this.counter"
    //"this" - это хеш-массив
    //и "counter" это ключ
    //и снова, более подробно остановимся на этом позже
	var currentTime = this.counter++;
    /*я изменил первоначальный счетчик:
    дело в том, что если оставить счетчик на долго включенным
    строка может вытянуться довольно далеко, потому, пришлось
    доавить проверку ширины родительского элемента, что делается
    с помощью функции .getParent(), параметром которой можно указать не только
    название родительского тега, но даже и класс этого самого родительского элемента,
    а в моем случае, родительский класс называется post.
    Также обратите внимание на использование функции toInt(). Я думаю вы читали
    пост про фильтрацию и обработку чисел?
    */
	if(currentTime == $('timer_bar').getParent('.post').getStyle('width').toInt()+1) $('timer_stop').fireEvent('click');
    //тут изменяем содержимое блока div, с данными о текущем времени таймера
	else $('timer_display').set('text', currentTime);
    //тут изменяем ширину блока с графическим отображением длительности выполнения функции
	$('timer_bar').setStyle('width', currentTime);
	//устанавливаем атрибут disabled на true, чтобы выключить кнопку Пуска после самого пуска
    //ниже я более подробно остановился на этом моменте
	$('timer_start').set('disabled', true);
}
var timerFunction = function(){
    var currentTime = this.counter++;
 
    $('timer_display').set('text', currentTime);
 
    $('timer_bar').setStyle('width', currentTime);
}
	window.addEvent('domready', function() {
    //заодно познакомьтесь: простой хеш-массив, состоящий из одной пары ключ/значение
    var currentCounter = new Hash({counter: 0});
    //запускаем периодическое выполнение
    //и вторым параметром привязываем this к необходимой переменной
    var simpleTimer = timerFunction.periodical(100, currentCounter);
    //так как нам не нужно, чтобы таймер запускался при загрузке страницы, мы его и не запускаем
    $clear(simpleTimer);
    //добавим событие к кнопке старта
    //это позаботится о том, что таймер снова затикает
    $('timer_start').addEvent("click", function(){
    	simpleTimer = timerFunction.periodical(100, currentCounter);
	});
    //следующая функция очищает периодичную функцию и подсвечивает строку таймера
    $('timer_stop').addEvent("click", function(){
    	$clear(simpleTimer);
        $('timer_bar').highlight('#EFE02F');
	});
    $('timer_reset').addEvent("click", function(){
    	//сброс вначале очищает периодичную функцию $clear(simpleTimer);
        //устанавливая счетчик на 0
        //немного далее немного более :)
        currentCounter.set('counter', 0);
        //изменяем содержимое соответствующих элементов таймера
        $('timer_display').set('text', currentCounter.counter);
        $('timer_bar').setStyle('width', 0);
    });
});

Опробуем таймер в действии?

Небольшое объяснения того, почему я выключаю кнопку Пуска при ее нажатии (она включается обратно при Паузе и Сбросе). Дело в том, что если повторно нажать Пуск, предварительно не остановив, счетчик “забежит” в два раза быстрее и его уже не остановить. А если потом ещё и ещё нажимать, скорость будет увеличиваться. Как бороться с этим явлением, я без понятия… Почему так происходит? Это, видимо, нужно разбираться в недрах и логике программирования, а мне сейчас не до этого.

И еще один момент: почему я установил

$('timer_start').set('disabled', true);

в саму функцию, а не в

    $('timer_start').addEvent("click", function(){
    	simpleTimer = timerFunction.periodical(100, currentCounter);
	});

Тут получается довольно интересно и закручено, как в английском детективе. И тоже нужно разбираться в недрах, но в недрах функции .periodical(). Насколько я понимаю, все происходит примерно так: при клике на кнопку Пуск, мы повторно вызываем переменную simpleTimer, которая является хранителем периодичного запуска функции timerFunction. Итак, вызвав переменную simpleTimer, поделать уже ничего нельзя: определенная функция будет запускаться, пока ее не остановить. И вот, при каждом запуске функции она выполняет $('timer_start').setStyle('disabled', 'true').

Кстати, просто использовать

$('timer_start').removeEvent('click')

вместо

$('timer_start').set('disabled', true);

не получилось. Кнопка Пуск все равно работает, а почему, не могу себе даже представить .

Введение в хеш-массивы

Создание нового хеш-массива

В примере, приведенном выше, возможно есть некоторые вещи, с которыми Вы еще не сталкивались (точнее я Вас с ними еще не сталкивал, а где-то еще вы с ними уже сталкивались). В некоторых местах мы используем хеш-массива. Хешы – это наборы, состоящие из пары ключ/значение, которые очень схожи с массивами, так как они содержать несколько объектов, однако к каждому содержащемуся в хеше объекту привязывается ключ. Итак, посмотрим под лупой на хеши:

	var hashVar = new Hash({ 'первыйКлюч': 0, 'второйКлюч': 0 });

Итак, слева у нас получается ключ, которому присваивается значение справа (те из Вас, о читатели, которые все-таки знают что такое хеш-массива и уже задумываются о том, чтобы просмотреть другие посты моего блога, хочу лишь сообщить, что я рассматриваю сейчас только основы основ хеш-массивов. Написание функций для хранения данных с помощью хешей я оставлю на тот момент, когда можно будет поговорить о классах). Итак, существует много плюсов в том, чтобы использовать именно хеш-массивы. Во-первых, в одном объекте можно хранить многочисленные наборы данных, процесс обратного получения которых довольно прост, также как и хранение комплексных структур данных.

.set() и .get()

При работе с хеш-массивами можно использовать знакомые функции .set() и .get(). Если нужно задать ключу какое-либо значение, вначале нужно определить ключ, потом задать ему значение через .set(). Если нужно получить значение, просто нужно определить ключ и применить к нему .get(). В принципе, это всё!

	//взяв за основу хеш-массив, определенный выше
	//первому ключу можно дать значение 200 вот так
    hashVar.set('первыйКлюч', 200);
    //с помощью .get() можно получить значение первого ключа
    //после того, как мы дли ему значение 200, это значение мы и получим
    var hashValue = hashVar.get('первыйКлюч');

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

var hashValue = hashVar.pervyi;
//что означает тоже самое, что и
var hashValue = hashVar.get('pervyi');

Добавляем новые данные в массив

.extend();

Любой уже определенный хеш-массив можно дополнить новыми парами данных с помощью .extend(). Пример:

	//вначале создадим новый массив. Обычный массив.
    //такой массив также состоит из пар ключ/значение
    //но он не имеет возможностей хеша
    var simpleObject = { 'третий': 450, 'четвертый': 89 };

Если есть необходимость добавить эти данные к уже существующему хеш-массиву, мы просто используем .extend(); для того, чтобы создать свободное место для этих данных.

	//так хеш-массив hashVar пополняется всеми данными массива simpleObject
    hashVar.extend(simpleObject);

Очень важно помнить, что все дубликаты ключей будут переписаны вторым вариантом, т.е. тем, которым пополняем первый массив. Так, если у нас в первом массив была пара “первыйКлюч” : “буква А”, а в массиве, которым мы расширяем первый массив есть пара “первыйКлюч” : “буква Б”, то в окончательном массиве именно второй вариант выживет.

Если не хотите, чтобы второй вариант выжил, и вам нужно, что бы выжил именно первый вариант, нужно вместо .extend() использовать .combine(). В остальном функция .combine() работает также, как и .extend().

Удаляем пару данных из хеш-массива

.erase()

Слово “erase” с английского переводится как “удалить”. Функция полностью оправдывает свое название: называете массив, добавляете .erase() и в скобках указываете ключ.

hashVar.erase('первыйПлюч');

Хеш-массивы и функция .each()

С функцией .each() многие, скорее всего, уже знакомы из урока про массивы. Как и в случае с массивами, .each() перебирает каждую единицу данных хеш-массива, применяя к ней пользовательскую функцию.

hashVar.each(function(value, key) {
	//простая функция по выводу сообщения со значением ключа и его значения
    //обратите внимание, что при передаче данных функции
    //вначале нужно передать значение, а потом уже и его ключ
    //как и в случае с массивами: вначале item (значение), потом и index (его порядковый номер в массиве)
    alert(key + ":" + value);
});

На этом, пожалуй, всё! Надеюсь, урок пригодится вам также, как и мне.

Привет, люди планеты Земля! 1) хочу перед всеми извинится, если это кому-либо важно, за много месяxный перерыв… Мне стыдно!!!! Сам не ожидал, что так получится, но свадьба – дело тонкое, трудоемкое, которое требует много времени. Да, я женился, отдохнул, и готов к новым урокам. Еще, в качестве оправдания хочу сказать, что все это время я не забывал о блоге, своем не развитом, и хотя бы записывал идеи постов, которые, как мне кажется, окажутся полезными. Некоторые темы уже даже наполовину готовы, осталось только их дописать и опубликовать – всего ничего! Ну а пока, внимание! Смотрим на доску!

Если кто не заметил, я перешел от вручную написанного моим знакомым программистом движка на более популярный вордпрес. Это не означает, что ЦМСка моего знакомого не хороша – наоборот, она хороша тем, что она заточена под определенные действия, а именно под продвижение. Но, так как эту систему управления написал не я, я в ней совсем не разбираюсь, а дергать человека постоянно не хочу, решил перейти на вордпрес. Благо, по этой тематике в интернете много всего понаписано, да и просто покопаться в коде вордпреса тоже полезно для развития. Итак, все старые посты перекинуты, теперь все по-прежнему. Продолжаю публиковать уроки Mootools. Вот он следующий урок, о фильтрации текста.

Функции обработки строк

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

Перед тем, как мы продолжим, взглянем на то, как такие функции вызываются:

var my_text_variable = "Сюда вставляем текстовую строку";
 
//  результат переменная с исходником.наименование функции
var result_of_function = my_text_variable.someStringFunction();

Только ради большей эрудиции, следует отметить, что строковые функции можно вызывать и непосредственно с исходником:

var result_of_function = "Сюда вставляем текст".someStringFunction();

Обратите внимание, что так же можно вызвать и функцию для обработки числа:

//Обратите внимание на использование скобок
 
//тогда как при работе со строками используются кавычки
var limited_number = (256).limit(1, 100);

Также, хочет отметить вот что: Ява скрипты не должны вычищать пользовательский текст перед посылкой его на сервер для дальнейшей обработки. Все, что пишится на JavaScript может быть видно ВСЕМ посетителям страницы, эти скрипты можно включать/выключать, потому настоятельно рекоммендую не использовать JavaScript для обеспечения безопасности. Надеюсь не забуду провести небольшой дискурс по поводу безопасности с помощью PHP, когда мы дойдем до класса Mootools Request. И еще раз – все скрипты обеспечивающие безопасность должны выполняться на сервере, подальше от пользователя, а не с помощью JavaScript и всего к нему относящемуся!!!

trim()

Функция trim() позволяет, как и в языке PHP, быстро и эффективно избавить строку от лишних пробелов и пустого пространсва по обеим сторонам.

//Текст, который мы "тримируем"
var text_to_trim =  "    \nСтрока с ненужным пустым местом     ";
 
//  переменная trimmed_text стала такой: "Строка с ненужным пустым местом"
var trimmed_text = text_to_trim.trim();

Если вы еще не сталкивались с таким символом, как “\n”, сообщаю, что этот символ соответствует новой строке (от англ. “Newline“). Этот символ можно использовать в тексте, который нужно разбить на строки. Такой символ, или разрыв строк, фунцией trim() считается как пустое пространство, потому от него функция тоже избавляется. Жаль только, что trim() не избавляет от пустого пространства внутри текста:

var trimDemo = function(){
	//дадим тексту переменную
 
	var text_to_trim =  '            \nочень       много       белого\n              ';
 
	//тримируем
 
	var trimmed_text = text_to_trim.trim();
 
	//Смотрим результат
	alert('До тримирования: \n' + 
		  '|-' + text_to_trim + '-|\n\n' +
 
		  'После тримирования : \n' +  
	      '|-' + trimmed_text + '-|');
}

Тримирование

clean()

Понятно, заваливать весь текст пробелами – нехорошо. Потому, разработчики Mootools пошли навстречу тем, кто так считает. Функция clean() очистит не только пробелы и «пробело-образные» символы до и после текста, но и внутри него:

//Текст для очистки
var text_to_clean =  "    \nТекст     \nс      большим \n \n    количеством     \nпробелов  \n   ";
 
//  очищенный текст будет таким "Текст с большим количеством пробелов"
var cleaned_text  = text_to_trim.clean();

Как показывает пример, функция clean() – это тотже trim(), только с возможностью чистки пробелов внутри текста. Таким образом, эта функция почистит весь текст от пробелов в количестве более 2-х поряд, и от всех табов (\t) и разрывов строк (\n). Давайте сравним результаты работы этих двух функций:

var cleanDemo = function(){
	//Прикрепляем исходник к переменной
	var text_to_clean =  '            слишком \n       много\n       пробелов              ';
 
 
	//Чистим
	var cleaned_text = text_to_clean.clean();
 
 
	//Выводим результат в окно alert()
	alert('До чистки : \n' + 
		  '|-' + text_to_clean + '-|\n\n' +
 
		  'После чистки : \n' +  
	      '|-' + cleaned_text + '-|');
 
}

Чистка

contains()

Как и 2 предыдущие рассмотренные функции, функция Mootools contains() делает одну очень простую вещь, без особенностей и заморочек: она проверяет, содержиться ли в исходном тексте заданная строка. В качестве результата работы возвращается True если вхождения есть и False – если нет.

//Строка с исходным текстом
var string_to_match = "В этом тексте ведем поиск?";
 
//Ищем слово "тексте", did_string_match возвращает true
var did_string_match = string_to_match.contains('тексте');
 
 
//Ищем слово "ужас", функция возвращает False
did_string_match = string_to_match.contains('ужас');

Эта функция может пригодится во многих приложениях на Вашем сайте/блоге/сайте, особенно в комплексе с другими Mootools функциями. Например, если использовать функцию clean() с функцией each() для приминения пользовательской функции к каждому элементу массива (см. урок 3), можно сделать довольно многое, засоряя лишь несколько строк. Например, если мы создадим некий массив слов, запрещенных к использованию в комментариях, можно просмотреть весь текст на предмет использования этих слов. При этом, используется не такая уж и большая фукнция:

	string_to_match = "сюда вставляем любой текст, в котором нужно проводить поиски";
	word_array = ['слова', 'которые', 'нужно', 'найти'];
 
	//Передаем каждое слово в качестве переменного аргумента функции
	word_array.each(function(word_to_match){
		//Поиск текущего слова
		if (string_to_match.contains(word_to_match)){
 
			alert('было найдено слово' + word_to_match + '! НЕХОРОШО!');
		};
 
	});

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

var containsDemo = function (textAreaID){
 
	//Создаем список запрещенных слов
	var banned_words = ['BMW', 'Audi', 'Fererro Roche', 'хрень', 'херня', 'мудак'];	
 
 
	//берем содержимое тега textarea
	var textarea_input = $(textAreaID).get('value');
 
 
	//эта переменная будет отвечать за количество НЕ найденых совпадений
    //чтобы можно было отблагодарить пользователей
    //за чистоту речи, если вдруг такое случится
	var i = 0;
 
 
   	//используя функцию each() пробегаем по каждому слову этого текста
	banned_words.each(function(banned_word){
		//ищем запрещенные слова указанные в списке
 
		if (textarea_input.contains(banned_word)){
 
			//Сообщаем пользователю, что такие плохие слова использовать очень плохо!
			alert('Слово ' + banned_word + ' тут использовать нельзя!');
 
		}
		//Если совпадение по очередному слову не найдено
        //перемнная i увеличивается на 1
		else ++i;
	});
 
    //Если i ровняется количеству запрещенных слов, значит пользователь их не использовал
    //Благодарим пользователя за чистоту речи
	if (i==banned_words.length) alert ("Спасибо, что не используете ненависные нам слова!");
 
}

Как-то раз ехал на своем BMW на фабрику Fererro Roche и тут меня подрезает какой-то мудак на своем Audi. Я ему вдогонку кричу «Ты что за хрень вытворяешь, мудак!!! Что за херня!»
Проверка на запрещенные слова

Как-то раз ехал на своем автомобиле на фабрику одной известной компании по производству всяких разных сладостей и тут меня подрезает какой-то нехороший человек на своем автомобиле. Я ему вдогонку кричу «Ты что за нехорошую вещь вытворяешь, нехороший человек!!! Ну как же так?! Что за люди то неприличные!?!»
Проверка на запрещенные слова

substitute()

Функция substitute() – это очень мощный инструмент несмотря на свою кажущююся простоту. Сегодня мы затронем лишь ее основы, но отметим, что основная мощь ее исходит из возможности использовать ее с регулярными выражениями, которые мы рассмотрим в последующих уроках. Однако, только лишь основные возможности этой функции уже позволяет немного поиздеваться над исходным текстом.

//Это текст, который функция будет использовать
//в качестве шаблона. Обращаю внимание, что слова, которые 
//нужно заменить, помещаются в фигурные скобки
var text_for_substitute = "Майонез - это {один},  Кетчуп - это {два}, Горчица - это {три}.";
 
//Далее содаем объекс, в котором содержаться правила замены
 
//Слова справа, не помещенные в кавычки - это слова
//которые будут заменены словами слева, помещенными
//в кавычки
var substitution_object = {
	один: 'лучшая заправка для салата', 
	два: 'соус, который хорошо подходит к мясу, особенно к шашлыку', 
	три: 'такая замазка, иногда горькая, но в основном не очень. Хорошо  к мясу тоже подходит'
 
    };
 
//вызываем функцию substitute() с объектом, 
//в котором находятся шаблоны замены   
var new_string = text_for_substitute.substitute(substitution_object); 
 
 
//теперь наш текст выглядит вот так:
//"Майонез - это лучшая заправка для салата,
//Кетчуп - это соус, который хорошо подходит к мясу, особенно к шашлыку,
//Горчица - это такая замазка, иногда горькая, но в основном не очень. Хорошо  к мясу тоже подходит."

Вообще не всегда обязательно нужно создавать объект с шаблонами, т.к. можно обойтись и таким кодом:

//Создаем текст с отметками для замены
var text_for_substitute = "{это_нужно_заменить} и оригинальный текст";
 
//А шаблон для замены в виде объекта можно передать функции substitute()
//в виде параметра
var result_text = text_for_substitute.substitute({это_нужно_заменить: 'Значение замены'});
 
//результатом функции будет "Значение замены и оригинальный текст"

Чем дальше, тем глубже! Вместо стандартных словоформ в кавычках (слова слева) можно использовать элементы DOMа, т.е. можно создавать более интерактивные приложения на сайте:

var substituteDemo = function(){
	//Берем оригинальный тест из соответствующего элемента DOM
 
	var original_text = $('substitute_span').get('html');
 
 
	//Определяем, чем будем заменять:
	//а заменять мы будем текстом введеным в текстовое поле
	var new_text = original_text.substitute({
 
		первый  : $('first_value').get('value'),
		второй : $('second_value').get('value'),
 
		третий  : $('third_value').get('value'),
	});
 
 
	//Заменяем первоначальный текст на новый
	$('substitute_span').set('html', new_text);
 
 
 
	//Отключаем кнопку замены и включаем кнопку сброса
	$('simple_substitute').set('disabled', true);
 
	$('simple_sub_reset').set('disabled', false);
}
 
 
var substituteReset = function(){
	//Создаем переменную для первоначального текста
	var original_text = "|- {first} -- {second} -- {third} -|";
 
 
	//Заменяем текст в соответствующем элементе на первоначальный 
	$('substitute_span').set('html', original_text);
 
 
	//Выключаем кнопку сброса и включаем кнопку замены
	$('simple_sub_reset').set('disabled', true);
 
	$('simple_substitute').set('disabled', false);
}

|- {первый} — {второй} — {третий} -|

Первая замена: Вторая замена: Третья замена: Замена Сброс

И, напоследок, еще немного теории. При приминении функции substitute() к строке, всегда нужно предоставлять функции объект со всеми парами «ключ : значение», так как иначе функция просто удалит все, что найдет между фигурными скобками (включая сами фигурные скобки). Потому, будьте осторожны, при использовании такой строки в качестве полигона действий:

("{раз} блаблабла {два} и пусть бе-бе-бе").substitute({раз : 'текст на замену'});

В конечном итоге получится

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

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

Числа

Помните, в 4-м уроке мы брали значения текстовых полей, отображающих RGB значения цветов, и использовали их для замены фонового цвета страницы, а сегодня мы снова возьмем за основу этот код, приделав к нему небольшие модификации.

rgbToHex()

С точки зрения структуры, функция rgbToHex() принадлежит коллекции функции для работы с массивами. Но, т.к. эта функция для работы с числовыми массивами, мы будем рассматривать ее именно в этом уроке. С точки зрения предназначения и использования, функция rbgtoHex() вполне проста:

function changeColor(red_value, green_value, blue_value){

  	var color = [red_value, green_value, blue_value].rgbToHex();

   	alert('Конвертируется в : ' + color);
   }
     changeColor('5', '41', '18')

changeColor(‘54′, ‘41′, ‘18′);

Этот код идеально работает, если передавать в качестве аргументов цифры. Посмотрите, как поведет себя браузер, когда вместо одного из аргументов мы передадим текст:

changeColor(‘54′, ‘41′, ‘опля’);

«Nan» виднеющийся в конце сообщения имеет значение Not a Number (Не Число). Если именно вы вводите вручную массив цифр для значения цвета, такой ошибки может вы и не увидите. Но если используется какой-либо внешний источник, очень вероятно, что придется частенько почитывать такие ошибочки.

toInt()

Теперь нам нужно убедиться в том, что фукнция rgbToHex() получает в качестве аргумента, именно числа, а не данные в каком-либо другом формате. Для этого мы можем использовать функцию toInt() – это еще одна относительно простая и понятная функция. Ей можно передать любую переменную, а она позаботится о том, чтобы извлеч из данных этой переменной число.

var toIntDemo = function(make_me_a_number){

var number = make_me_a_number.toInt();
 
alert ('Что получилось : ' + number);

}

toIntDemo(’613.234′)
toIntDemo(’83_ура!’)
toIntDemo(’а_нет_ли_тут_26?’)

Ну вот! Как видно, toInt() несправляется с каждой неоднозначной ситуацией, но, благодяра другой классной вещи в Mootools, которая называется $type(), мы можем спокойно разобраться и с этой проблемкой!

$type()

$type() – это еще одна вкусняшка нашей любимой библиотеки. Она анализирует переданную ей перменную и возвращает текстовую строку с названием типа данных, которому придлажала переменная. Что-то я тут запутал… Лучше разюерем на примере:

var checkType = function(variable_to_check){
	var variable_type = $type(variable_to_check);

	alert("Данные являются типом : " + variable_type);
}

checkType(43)checkType(’a string’)checkType(false)

На самом деле, функция $type() не ограничивается определением этих трех типов данных. $type() возвращает следующие значения в текстовой форме:

• ‘element’ – Если переданный объект является элементом DOMa
• ‘textnode’ – текстовый элемент DOMa.
• ‘whitespace’ – пустое пространство DOMa.
• ‘arguments’ – аргумент.
• ‘array’ – массив.
• ‘object’ – объект.
• ‘string’ – текстовая строка.
• ‘number’ – число.
• ‘date’ – дата.
• ‘boolean’ – булев тип.
• ‘function’ – функция.
• ‘regexp’ – регулярной выражение.
• ‘class’ – класс (созданный с помощью new Class или является расширением другого класса).
• ‘collection’ – когда переданный объект – это набор из html-элементов, как при вызове childNodes, getElementsByTagName, и т.д.
• ‘window’ – окно.
• ‘document’ – документ.
• false – (булев тип – единственный в своем роде при использовании $type()) Возвращается тогда, когда объект имеет тип undefined, null, NaN или ни один ииз вышеперечисленных.

var toIntDemo = function(make_me_a_number){
	//попробуем сделать число из введенного текста
	var number = make_me_a_number.toInt();

 
	//Если это не срабатывает, устанавливаем число ноль (0)
	if ($type(number) != 'number'){number = 0;}

	alert('Что получилось : ' + number);
}

toIntDemo_2(’613.234?)

toIntDemo_2(’83_Ё_моЁ!’)
toIntDemo_2(’а_что_если_83?)

Если соединить все это воедино, получиться почти идеальная версия нашего скрипта по конвертированию цветов из формата RGB в шестнадцатиричный код – changeColor():

var changeColor_2 = function(red_value, green_value, blue_value){

	//Убедимся в том, что у нас все данные - числа
 
    red_value = red_value.toInt();
    green_value = green_value.toInt();

    blue_value = blue_value.toInt();
    //Устанавливаем значения по умолчанию на всё, что не является числом
 
    if ($type(red_value)   != 'number'){red_value = 0;}

    if ($type(green_value) != 'number'){green_value = 0;}
    if ($type(blue_value)  != 'number'){blue_value = 0;}

    //Вычисляем шестнадцатиричное значение
 
    var color = [red_value, green_value, blue_value].rgbToHex();

    alert('Конвертируется в : ' + color);
}

changeColor(‘208′, ‘127′, ‘74′);
changeColor(‘82′, ‘7′, ‘скунс’);

changeColor(‘522′, ‘847′, »);

Обратите внимание, что последняя кнопка передает числа куда более высокие, чем могут приминать цвета в формате RGB (0-255), а это, нужно сказать, делает шестнадцатиричное число не особо пригодным для обозначения цветов. К сожалению, это означает, что если мы получим число большее или меньшее диапазона 0-255, мы не получим шестнадцатиричного значения цвета. К счастью, Mootools поможет нам забыть и об этой проблеме.

limit()

Функция limit() не выдиляется сложностью, т.к. этим словом ее охарактеризовать нельзя. Она помогает удержать числа в заданном диапазоне:

//вызываем функцию
limit(n1, n2)

//где n1 наименьшее число требуемого диапазона
// а n2 - наивысшее

Ничего сложного! Елинственное «но», это то, что нужно иметь ввиду, что функция предполагает, что n1 и n2 – это числа. Поэтому крайне рекомендуется применять toInt() к данным, которые предположительно являются числами и которые предствоит передавать в функцию limit() (или любую другую функцию для работы с числами).

var limitDemo = function(number_to_limit){
	//Получаем число
 
	number_to_limit = number_to_limit.toInt();

 
	//получаем число из требуемого диапазона
	var limited_number = number_to_limit.limit(0, 255);

	alert("Ограничиваем до : " + limited_number);
}

limitDemo(6535634);

А вот и полный рецепт

var changeColor = function(red_value, green_value, blue_value){

	//Убеждаемся, что все данные у нас - это числа
 
	red_value   = red_value.toInt();
	green_value = green_value.toInt();

	blue_value  = blue_value.toInt();
 
	//Устанавливаем значения по умолчанию на все, что не является числом
	if ($type(red_value)   != 'number'){red_value = 0;}

	if ($type(green_value) != 'number'){green_value = 0;}

	if ($type(blue_value)  != 'number'){blue_value = 0;}

 
	//Ограничиваем все до диапазона значений RGB (0 - 255)
 
	red_value   = red_value.limit(0, 255);

	green_value = green_value.limit(0, 255);
 
	blue_value  = blue_value.limit(0, 255);

 
	//Конвертируем в шестнадцатиричную систему
	var color = [red_value, green_value, blue_value].rgbToHex();
	alert('Converts to : ' + color); 

}

changeColor(’28′, ‘17′, ‘47′);changeColor(‘28′, ‘17′, ‘oops’);changeColor(’428′, ‘317′,
‘265000′);

Обратите внимание, что функция .rgbToHex() нигде не принимает никаких атрибутов. Это все потому, что эта функция может принять 2 атрибута булев типа: true, false. По умолчанию установлен false, что и возвращает нам строку в таком виде, в котором она нам нужна для вставки в атрибут цвета, т.е. “#000000″. Если же передать атрибут true, функция вернет данные в виде массива.

var rgb2HexTrue = function(r, g, b){
  var rgbArray = [r, g, b].rgbToHex(true);
  var rgbHex = [r, g, b].rgbToHex();
  alert('rgbToHex с параметром TRUE: ' + rgbArray + 'и с параметром FALSE: ' + rgbHex);
}

rgb2Hex(’34′, ’117′, ’247′)

Основы

Функция .setStyle();

Эта функция позволяет установить свойства стиля элемента. Все что нужно сделать, это добавить .setStyle() через сивмол точки («.») в конец строки с селектором (или к соответствующей переменной), и она изменит свойства стилей одного элемента или целого массива элементов.

//определяем селектор
//добавляем функцию .setStyle
//задаем необходимое свойство стиля и его значение
$('body_wrap').setStyle('background-color', '#eeeeee');

$$('.class_name').setStyle('background-color', '#eeeeee');

<div id="body_wrap">

    <div class="class_name"></div>
    <div class="class_name"></div>

    <div class="class_name"></div>
    <div class="class_name"></div>

</div>

.getStyle();

Если понимаешь хоть как-то по английски, тут все понятно: функция получает значение свойства стиля элемента (как-то много родительного падежа ).

//вначале объявляем переменную, в которой будет содержаться значение параметра стиля
var styleValue = $'body_wrap').getStyle('background-color');

Если бы мы прогнали этот код по предыдушим HTML строкам, переменная styleValue получила бы значение ‘#eeeeee’.

Получение и установка нескольких значений стиля

setStyles();

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

//начинаем мы с того, что создаем селектор, к которому добавляем, как всегда через точку, функцию
//в данном случае .setStyles();
$('body_wrap').setStyles({
    //шаблон, которого нужно придерживаться: 'свойство': 'значение',

    'width': '1000px',
    'height': '1000px',
    //ВАЖНО: после последнего значения запятую ставить НЕ НУЖНО!

    //это важно для кроссбраузерности приложения
    'background-color': '#eeeeee'
});

Примечание: Вообще не обязательно всегда заключать название свойства стиля в единичные кавычки. Они нужны только тогда, когда в названии свойства есть дефис (-), как, например, в свойстве font-size. Но для того, чтобы исключить возникновение проблем по причине не поставленной кавычки, лучше приучить себя к кавычкам. Потом искать долго, если что .

Еще одно примечание: эта функция предоставляет большую гибкость при определении значений свойств (таких как ‘200px’ или ‘#ffffff’). Помимо возможности передачи обычных текстовых строк, можно также передавать числа без кавычек (которые будут интепретированы как пиксели – px – в большинстве случаев) и переменные:

//эта строчка передает переменной firstBackgroundColor значение в формате ТЕКСТ '#eeeeee'
var firstBackgroundColor = '#eeeeee';
//можно задавать в качестве значения переменной другую переменную
//в данном случае переменная backgroundColor получает значение друго переменной - '#eeeeee'

var backgroundColor = firstBackgroundColor;
//эта строчка передает переменной divWidth значение в формате ЧИСЛО 500
var divWidth = 500;

$('body_wrap').setStyles({
    //в данном случае, переменные - это слова без кавычек
    'width': divWidth,

    //числа - это.... это числа без кавычек
    'height': 1000,
    //другая перменная
    'background-color': backgroundColor,

    //строки - это ряд символов, заключенных в 'единичные кавычки'
    'color': 'black'
});

.getStyles;

Эта функция позволяет получать несколько значений свойств стилей за один раз. Она работает немного иначе, чем мы виделли немного выше, а отличается этот метод тем, что он работает с несколькими наборами данных в формате ключа (свойство стиля) и его значения (значение свойства). Такой набор данных называется ОБЪЕКТОМ, а метод .getStyles(); позволяет легко формировать такие объекты, чтобы потом их также легко использовать.

//вначале нужно объявить переменную для нашего объекта
//потом создать селектор
//добавляем метод .getStykes к селектору
//после чего создаем список названий свойств стиля, разделенных через запятую
//все названия нужно заключать в 'единичные кавычки'
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color'); 

//вначале создаем новую переменную, которая будет содержать значение свойства
//передаем в переменную определенное свойство; 
//ключ объекта/массива и будет названием свойства
//название свойства заключаем в [квадратные скобки]
//не забываем про 'единичные кавычки' для ключа объекта/массива
var bgStyle = bodyStyles['background-color'];

Пример

В этом примере мы потренируемся использовать некоторые методы, рассмотренные в этом уроке, чтобы получать информацию о стилях (.getStyles();) и устанавливать свои стили (.setStyles();). Обращайте больше внимания не на манипуляции со свойствами стилей, а на структуру кода. Для того, чтобы отделить наши функции от события domready, мы передаем им несколько переменных, которые установленны в самом событии domready. А делается это примерно так: как видно вначале идет объявление переменных с функциями, но при этом видно, что функциям передаются переменные, которые объявляются позже, уже в событии domready, где функции, собственно и вызываются, но уже после объявленных переменных. Что-то вроде того…

Обратите внимания, что собятия click используют анонимные функции. Это дает нам возможность передавать переменные изнутри domready функциям за его пределами. Это может показаться полным бредом на первый взгляд, но пробежав глазами по коду немного ниже, думаю, должно все проясниться.

//обратите внимание, что эта функция имеет параметр "bgColor"
//эта функция будет использоваться уже внутри собятия domready

var seeBgColor = function(bgColor) {
	alert(bgColor);

}
var seeBorderColor = function(borderColor) {
	alert(borderColor);

}
 
//тут мы используем еще не объявленную переменную playDiv
//но, так как мы объявим переменную уже в событии domready и
//и это произойдет до того, как мы вызовим эту функцию, ошибки не будет
//плюс ко всему, теперь не нужно использовать селектор несколько раз
//очень полезно когда имеешь дело со сложными селекторами
var seeDivWidth = function(playDiv) {

        //снова получаем стиль
        //но в отличии от метода .getStyles();, который используем позже в domready,
        //тут мы получаем текущее значение параметра стиля
        //это обеспечивает точные значение ширины элемента, передаваемые в оповещение alert 
        //даже когда значения изменяются по ходу работы
		//или после того, как событие domready уже имело место

 
	var currentDivWidth = playDiv.getStyle('width');
	alert(currentDivWidth);

}
 
 
var seeDivHeight = function(playDiv) {
	var currentDivHeight = playDiv.getStyle('height');

	alert(currentDivHeight);
}
 
 
var setDivWidth = function(playDiv) {

	playDiv.setStyle('width', '50px');
}
 
var setBgColor = function(playDiv) {

	playDiv.setStyle('background-color', '#fdd1aa');
}
 
var setDivHeight = function(playDiv) {

	playDiv.setStyle('height', '50px');
}
 
//обратите внимание, что этот параметр на этом этапе может называться как угодно
//он примет любое значение (буть то элемент или еще что-либо) 

//при ее запуске из события domready
 
var resetSIZE = function (foo) {
	foo.setStyles({

		'height': 200,
		'width': 200,
        'background-color': '#fdd1aa'

 
	});
}
 
window.addEvent('domready', function() {

        //в этом примере мы часто используем этот селектор, поэтому проще и экономнее сразу
        //присвоить его переменной
	var playDiv = $('playstyles');

 
        //тут мы создаем объект с несколькими свойствами стиля
 
	var bodyStyles = playDiv.getStyles('background-color', 'border-bottom-color'); 

 
        //еще значение стиля можно получить обратившись в объекту со свойствами
        //с соответствующим ключем и назначив результат переменной
	var bgColor = bodyStyles['background-color']; 

 
        //тут используется анонимная функция чтобы иметь возможность передать параметр вне события domready
 
	$('bgcolor').addEvent('click', function(){

		seeBgColor(bgColor);
	});
 
 
	$('border_color').addEvent('click', function(){

                //вместо того, чтобы передавать параметр в доступную переменную,
                //его можно вызвать прямо сюда в алерт
		seeBorderColor(bodyStyles['border-bottom-color']);
	});

 
 
	$('div_width').addEvent('click', function(){

		seeDivWidth(playDiv);
	});
 
 
	$('div_height').addEvent('click', function(){

		seeDivHeight(playDiv);
	});
 
 
	$('set_width').addEvent('click', function(){

		setDivWidth(playDiv);
	});
 
 
	$('set_height').addEvent('click', function(){

		setDivHeight(playDiv);
	});
 
   	$('set_BgColor').addEvent('click', function(){

		setBgColor(playDiv);
	});
 
 
	$('reset').addEvent('click', function(){

		resetSIZE(playDiv);
	});
});

А теперь HTML код:

<div id="playstyles"> </div>
    <br />

    <button id="bgcolor">Получить background-color</button><br />
    <button id="border_color">Получить border-bottom-color</button><br />

    <button id="div_width">Получить width</button><br />
    <button id="div_height">Получить height</button><br />

    <button id="set_width">Установить width на 50px</button><br />
    <button id="set_height">Установить height на 50px</button><br />

    <button id="set_BgColor">Поменять background-color</button><br />
    <button id="reset">Сбросить</button>

И небольшой отрезок нужного нам CSS-кода:

#playstyles {
	width: 200px;
	height: 200px;

	background-color: #eeeeee;
	border: 3px solid #dd97a1

}

Получить background-color – смотрим цвет фона
Получить border-bottom-color – смотрим цвет границы нижней

Получить width – смотрим ширину
Получить height – смотрим высоту
Установить width на 50px – устанавливаем ширину на 50 пикселей
Установить height на 50px – устанавливаем высоту на 50 пикселей

Поменять цвет фона – меняем цвет фона на ‘#fdd1aa’
* Замечу, что несмотря на то, что после смены габаритов нашего объекта, кнопки, полчающие эти габариты, получают правильные значения (ширина = длина = 50px), кнопка получения цвета фона не прокатывает. По каким-то причинам (по каким, я не разобрался), код возвращает изначально установленный цвет фона объекта. Потому, будьте осторожны, если придется что-то подбное использоваться в ваших проектах!
Сбросить

А что же дальше?…

В 8-м уроке я планирую рассказать о том, как работать с числами, а именно о большинстве методов и функций в Mootools 1.2, предназначенных для работы с числами. Не забудьте подписаться на RSS, чтобы первыми прочитать следующий урок!

Управление HTML элементами DOMа с помощью Mootools 1.2

В предыдущих уроках мы рассмотрели возможности выбора элементов DOMа страницы, как создавать массивы, функции, как создавать прослушку событий для определенных элементов DOMа, ну а в этом уроке мы заглянем еще глубже в то, какие возмоности манипулирования элементами HTML скрывает в себе Mootools библиотека 1.2. Я уже, наверное, не раз говорил, насколько мощные возможности скрывает в себе легкая библиотека Mootools 1.2, но хочу еще раз напомнить о том, что с ее помощью можно добавлять новые элементы в вашу страницу, удалять ненужные и изменять их стиль или параметры, и все это «налету».

Основы

.get()

Этот метод позволяет получать доступ к атрибутам элементов. Ипользование метода довольно просто:

//этот код вернет название тега элемента с id "id_name"
$('id_name').get('tag');

<div id="body_wrap">
    <span>Element</span><!-- код, указанный выше, вернул бы "span" -->
</div>

С помощью .get() можно получить не только название HTML тегов, но и такие аттрибуты, как id, name, value, href, src, class (вернет все классы, если элементу присвоенны несколько), с помощью ключевого слова text можно получить текстовое
содержимое элемента, а также многое другое.

.set()

.set() работает также, как и .get(), тоько этот метод устанавливает различные значения, а не получает их, а это очень пригодится при комбинировании с событиями, что позволяет изменять всякие значение уже после того, как загрузится страница.

//этот код установит атрибут href элемента с id #id_name на "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');

<div id="body_wrap">
    <!-- код, указанный выше изменить атрибут href на "http://www.google.com  -->
    <a id="id_name" href="http://www.yahoo.com">Search Engine</a>

</div>

.erase()

Метод .erase() позволяет удалить значение атрибута. Он работает также, как и предыдущие два: выбираете элемент, потом выбираете какой атрибут нужно удалить.

//этот код удалит значение атрибута href элемента с ID #id_name
$('id_name').erase('href');

<div id="body_wrap">
    <!-- код, указанный выше удалит значение атрибута href -->
    <a href="http://www.yahoo.com">Search Engine</a>

</div>

Передвижение

.inject();

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

var elementA = $('elemA');

var elementB = $('elemB');
var elementC = $('elemC');

Этот код вставляет html код в переменные, что делает более легким их использование в Mootools.

<div id="body_wrap">
    <div id="elemA">A</div>

    <div id="elemB">B</div>
    <div id="elemC">C</div>

</div>

А теперь, чтобы изменить порядок сортировки элементов, можно использовать метод .inject() одним из четырех способов. Можно вставить элемент в:

• в конец (bottom) (по умолчанию)
• в начало (top)
• до элемента (before)
• после элемента (after)

Атрибуты bottom и top установят элемент в верхнюю или нижнюю часть выбранного элемента-контейнера. Атрибуты before и after, с другой стороны, установят необходимый элемент до или после другого элемента.

Итак, давайте изменим порядок элементов на A-C-B. Так как нам не нужно вставлять один элемент во внутрь другого, мы будем использовать атрибуты before и after.

//на человеческом языке звучит так:  вставить элемент C перед элементом B
elementC.inject(elementB, 'before');
//На русском:  вставить элемент B после элемента C
elementB.inject(elementC, 'after');

Создание новых элементов

new Element

Конструктор «new Element» можно использовать для того, чтобы создать новый элемент на вашей HTML странице. Процесс очень напоминает написание обычного HTML кода, с тем отличием, что мы исправим синтаксис, чтобы он был совместим с Mootools:

//вначале, вы присваиваете новой переменной значение "new Element"
//в которой и будет содержаться информация о новом элементе (div, a, span и т.д.)
var newElementVar = new Element('div', {

    //тут обозначаются все атрибуты элемента
    'id': 'id_name',
    'text': 'Я новый блок div',

    'styles': {
        //тут можно указать все параметры стиля элемента
        'width': '200px',
        'height': '200px',

        'background-color': '#eee',
        'float': 'left'
    }
});

Смотрите, у нас получился элемент, который можно вставить в какое-либо место, с помощью методов, которые мы рассмотрели чуть чуть ранее. Давайте начнем с такого простого примера HTML:

<div id="body_wrap">
    <div id="content_id">Тут у нас какое-нибудь содержимое</div>

</div>

Теперь конвертируем элемент #content_id в переменную:

var bodyWrapVar = $('body_wrap');

Аналогично тому, что мы рассмотрели немного ранее, мы можем вставлять созданные элементы в код страницы:

//на человеческом языке, звучит так: "вставить сверху bodyWrapVar элемент newElementVar"
newElementVar.inject(bodyWrapVar, 'top');

Таким образом, конечный результат выглядел бы так:

<div id="body_wrap">
    <!-- этот элемент был добавлен в верхнюю внутреннюю часть элемента-контейнера -->
    <div id="id_name">Новый блок</div>

    <div id="content_id">Какая-то муть</div>
</div>

Пример

Например, давайте создадим форму, которая бы позволяла добавлять новый элемент на страницу. Для начала, сделаем несколько полей input и кнопку button.

<div id="body_wrap">
        ID:  <input id="id_input" name="id" />

        text:  <input id="text_input" name="text" />
        <button id="new_div">create a new div</button>

</div>

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

var newDiv = function() {

    //в этой функции мы разместим код вставки нового элемента
};
 
window.addEvent('domready', function() {

    $('new_div').addEvent('click', newDiv);
});

Затем нужно определиться с тем, какими переменными мы будем оперировать. Для того, чтобы использовать данные из форм input, нам нужно получить к ним доступ, а этим займется метод .get(); и его параметр value, который отвечает за значение того или иного элемента:

var idValue = $('id_input').get('value');

var textValue = $('text_input').get('value');

Теперь эти переменные, idValue и textValue, содержат значения соответствующих полей input. Так как нам нужно взять значение полей input тогда, когда пользователь кликает по кнопке «Создать новый div», нам нужно вставить этот код в функцию newDiv();, определенную немного ранее. Если бы мы брали значения вне функции,
действие бы происходило при загрузке страницы, а не при клике.

var newDiv = function() {

    var idValue = $('id_input').get('value');

 
    var textValue = $('text_input').get('value');

};
 
window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);

});

Ну а дальше нам нужно будет схватить элемент, в который мы хотим вставить новый блок div:

var newDiv = function() {

    var idValue = $('id_input').get('value');

 
    var textValue = $('text_input').get('value');

    var bodyWrapVar = $('newElementContainer');
};
 
window.addEvent('domready', function() {

    $('new_div').addEvent('click', newDiv);
});

Итак, у нас теперь есть значения полей input, тогда можно создавать новый элемент:

var newDiv = function() {

    var idValue = $('id_input').get('value');

 
    var textValue = $('text_input').get('value');

    var bodyWrapVar = $('newElementContainer');
 
 
    var newElementVar = new Element('div', {

        //эта строка устанавливает id элемента на значение поля <code>input</code>
    	'id':	 idValue,
        //эта строка передает значение поля <code>input</code>

        //для создания внутреннего текста блока
    	'html': textValue
    });
};
 
window.addEvent('domready', function() {

    $('new_div').addEvent('click', newDiv);
});

Ну, а теперь нам остается только вставить новый элемент в нашу страницу:

var newDiv = function() {
	//обратите внимание, что идет запрос на элемент с id="newElementContainer",

	//что означает, что такое элемент (в нашем случае, блок DIV),
	//должен быть заблаговременно создан
	var bodyWrapVar = $('newElementContainer');

 
	var idValue = $('id_input').get('value');
	var textValue = $('text_input').get('value');

 
 	var newElementVar = new Element('div', {
    	        'id': idValue,

    	        'text': textValue
	});
    //на русском это звучит так: вставить переменную newElementVar
    //в верхнюю часть внутри элемента bodyWrapVar
 
	newElementVar.inject(bodyWrapVar, 'top');

};
 
var removeDiv = function() {
    //эта строка удаляет внутренний html код

    //(все, что находится внутри тега div)
	$('newElementContainer').erase('html', '');

}
 
window.addEvent('domready', function() {
 
   $('new_div').addEvent('click', newDiv);

   $('remove_div').addEvent('click', removeDiv);
});

ID:

текст:

создать блок
убрать все новые блоки

(а не попробовать ли слово “mootools” для ID? =) )

Управление событиями в Mootools 1.2

Итак, мы начинаем наш 5-й урок по Mootools. В последнем уроке мы рассматривали различные пути создания и использования функций в Mootools 1.2. Нашим следующим шагом в познании этой библиотеки – это события. Аналогично селекторам, они очень важны для создания интерактивного пользовательского интерфейса (UI). Когда вы получаете доступ к какому-либо элементу, вам нужно будет решить какое именно событие вызовет необходимое действие.

Единичный клик левой кнопкой мыши

Один щелчок левой кнопкой мыши (левый клик) – это самое распространенное событие в веб-разработке. В обычном HTML левый клик распознается гиперссылками, которые перенаправляют пользователя на указанный URL. В Mootools к любому элементу DOMа можно привязать левый клик, что дает большую гибкость в плане дизайна и функционала вашего сайта. Чтобы добавить событие левого клика к элементу необходимо:

//$('id_name') определяет элемент
//.addEvent добавляет событие
//('click') определяет тип события - в данном случае клик)
$('id_name').addEvent('click', function(){
 
//сюда вставляется код, который будет выполнятся при указанном событии)
alert('Теперь и по этому элементу можно кликнуть!')
});

Тоже самое можно сделать и так:

var clickFunction = function(){
    //тут вы пишите код того, что должно произойти
    alert('этот элемент отслеживает клик');
}
window.addEvent('domready', function() {
    $('id_name').addEvent('click', clickFunction);
});

<body>
    <div id="id_name"> <! -- этот элемент будет отслеживать клик по нему -->
    </div>
 
</body>

Примечание: Также как и аналогичное событие у гиперссылок, событие клика в Mootools, на самом деле, распознает событие поднятия кнопки («mouseup»), что означает, что событие произойдет только после того, как пользователь отпустит кнопку мышки, а не когда нажмет на нее. Это делается для того, что бы дать пользователю возможность передумать убрав курсор мышки с элемента и отпустив кнопку уже вне его.

События «mouseenter» и «mouseleave»

Как многим, я думаю, известно, ссылки в тексте HTML могут распознавать событие ‘hover’, что является ни что иное, как наведение курсором мышки на ссылку. С помощью Mootools аналог события ‘hover’ можно добавить и другим элементам DOMа, не только ссылкам. Более того, события Mootools разделены на два «подсобытия»:  mouseenter (наведение курсора) и mouseleave (курсор убирается), что придает больший контроль над элементами DOMа при взаимодействии с пользователями.

Как и ранее, первым делом добавляем «прослушивание» элемента на определенное событие.

var mouseEnterFunction = function(){
    //тут вы пишите код того, что должно произойти
    alert('этот элемент распознает наведение курсора мышки');
 
}
 
window.addEvent('domready', function() {
    $('id_name').addEvent('mouseenter', mouseEnterFunction);
 
});

Событие «mouseleave» работает аналогично:

var mouseLeaveFunction = function(){
 
    //тут вы пишите код того, что должно произойти
    alert('этот элемент распознает отсутствие курсора мышки');
}
 
window.addEvent('domready', function() {
 
    $('id_name').addEvent('mouseleave', mouseLeaveFunction);
});

Удаление события

При разработке приложений может понадобится убрать событие с элемента. Удаление событие, задача настолько же простая, как и их добавление.

//таботает также, как и предыдущие примеры,
//только метод addEvent заменяется на removeEvent
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);

Для создания «прослушек» других событий, например нажатий клавиш «Control» или «Shift», синтаксис немного отличается:

var keyStrokeEvent = function(event){
    // а дальше написано вот что: "если нажатая кнопка была Shift, нужно сделать вот что"
 
    if (event.shift) {
	    alert("Вы нажали на Shift!")
    };
 
}
 
window.addEvent('domready', function() {
    $('myTextarea').addEvent('keydown', keyStrokeEvent);
 
});

<div id="body_wrap">
    <textarea id="myTextarea"></textarea>
 
</div>

Вкусности

Вот несколько рабочих (вроде как) примеров кода, которые мы только что обсуждали:

Примечание: попробуйте вот что: нажмите и удерживайте левую кнопку мыши на элемента, потом уберите с него курсор и отпустите кнопку уже вне элемента. Обратите внимание, что теперь страница не отреагирует на это событие.

var keyStrokeEvent = function(event){
 
    // вот тут говориться, что если нажатой кнопкой была буква k (латинская, маленькая), вот что нужно сделать
    if (event.key == 'k') { 
	    alert("Этот урок стал возможен только благодаря латинской букве 'k'.")  
    };
 
}
 
var mouseLeaveFunction = function(){
    //сюда можно вставить все, чтобы вы хотели, чтобы страница делала при этом событии
    alert('этот элемент теперь распознает, когда курсор его покидает');
 
}
 
var mouseEnterFunction = function(){
    //сюда тоже самое
    alert('этот элемент теперь видит, когда на него наводится курсор');
 
}
 
var clickFunction = function(){
    //и сюда
    alert('теперь этот элемент распознает клик по себе');
 
}
 
window.addEvent('domready', function() {
    $('click').addEvent('click', clickFunction);
 
    $('enter').addEvent('mouseenter', mouseEnterFunction);
    $('leave').addEvent('mouseleave', mouseLeaveFunction);
 
    $('keyevent').addEvent('keydown', keyStrokeEvent);
});

<div id="click" class="block">Левый клик</div><br />
 
<div id="enter" class="block">Курсор наведен</div><br />
<div id="leave" class="block">Курсор убран</div><br />
 
<textarea id="keyevent">Введите латинскую букву k</textarea>

Введите латинскую букву “k” (или русскую “л”)

Функции и Mootools 1.2

Добро пожаловать на 4-й урок нашего “курса молодого бойца”. Если вы впервые на моем блоге и сразу попали на эту страницы, то вам стоит посмотреть предыдущие уроки из этой серии. Сегодня мы пойдем немного не по тому пути, т.к. пройдемся немного по основам функций в JavaScript.

Однако, не отходя все таки далеко от нашей основной темы – Mootools – вы должны помнить, где должен находится код ваших функций для использования в Mootools. В одном из наших предыдущих уроков мы рассматривали примеры использования функций внутри события domready.

В основном, конечно же, считается хорошим “программистским” тоном хранить все свои функции вне страницы с HTML кодом и вызывать их с помощью ссылок на js-файлы. Хотя с другой стороны, многие программисты не любят разбрасывать свой код по нескольким файлам, так как потом легче все найти, когда это все на одной странице. В наших уроках мы будем использовать такой шаблон объявления функций и их вызова из события domready:

<script type="text/javascript">
	/* * Тут определяется функция */
	window.addEvent('domready', function() {
		/* *Вызовы функции */
	});
</script>

Все примеры, представленные в этом уроке, используют этот шаблон. Как ни странно, она работают нормально (с условием, что в самом коде ошибок нет!). Под некоторыми примерами есть также и кнопки, с помощью которых можно испытать работоспособность этих примеров. Обращаю внимание на то, что в некоторых функциях я использовал обработчики событий (event handlers), о которых расскажу в следующем уроке.

Основы

В JavaScript существует несколько методов определения функций, а так как мы тут собрались поучить Mootools, будем использовать любимый метод разработчиков этой библиотеки. В следующем примере показана самая простая функция. Мы объявляем переменную, называем ее simple_function и определяем ее как функцию:

var simple_function = function() {

После этого мы добавляем функцию alert, которая запустится при запуске нашей функции:

alert('Самая обычная и простая функция');

В конце концов, добавляем закрывающую фигурную скобку, которая является самым распространенной вещью, которую забывают поставить разработчики (у меня с этой скобкой отдельный счеты…я и так внимательностью не отличаюсь, так что не поставить закрывающую скобку для меня совсем не проблема):

}

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

Все вышеизложенное объединено в следующем примере. После объявления функции, мы вызываем ее уже из события domready, которое выполнит функцию по загрузке страницы. Нажмите на кнопку под кодом примера и получите результат вызова функции simple_function().

//Определяем функцию simple_function
var simple_function = function(){
	alert('Самая обычная и простая функция');
}
 
window.addEvent('domready', function() {
	//Вызываем нашу функцию по загрузке DOMa(страницы)
    simple_function();
});

Тестируем простую функцию

Функция с одним параметром

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

var имя_функции = function(имя_параметра){
	/*сюда вставляется код функции*/
}

Т.е. это я и многие другие привыкли так объявлять функции (я говорил об этом выше). В JavaScript параметры находятся также в круглых скобках, тогда как скобки находятся после названия функции, как тут:

function имя_функции (имя_параметра) {
	/* код функции */
}

После объявления параметра, переменная будет доступна для работы с ней уже внутри самой функции. Несмотря на то, что называть параметры можно как душе угодно (латинскими буквами), рекомендую предавать их названию как можно больше описания того, для чего они предназначены. Например, если мы передаете в функцию параметр, содержащий название автомобиля, одним из вариантов хорошего названия параметра было бы car_name или даже avto подойдет, вместо чего-то вроде info_ot_usera.

В следующем примере, мы определим функцию, которая будет запрашивать только один параметр (с названием parameter) и вызывает предупреждение (alert()) с этим параметром. Несмотря на то, что первая часть сообщения заключается в единичные кавычки, параметр передается без них. При использовании параметров в сочетании со строками (как в нашем случае), их нужно соединять оператором “+”, как это показано в примере:

var single_parameter_function = function(parameter){
	alert('наш параметр : ' + parameter);
 
window.addEvent('domready', single_parameter_function('Вот это параметр'));

Функция с одним параметром

Передача нескольких параметров

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

var third_number = first_number + second_number;

А после этого используется тот же оператор “+”, только уже в другом качестве, чтобы соединить результат в текстовую строку:

alert(first_number + " плюс " + second_number + " равно " + third_number);

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

var two_parameter_function = function(first_number, second_number){
    //Получаем сумму первого и второго числа
    var third_number = first_number + second_number;
	//Отобразить результат
	alert(first_number + " плюс " + second_number + " равно " + third_number);
}
 
window.addEvent('domready', function(){
	two_parameter_function(10, 5);
});

Функция с двумя параметрами

Возврат значений

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

return third_number;

Нужно отметить, что теперь нужно будет внести некоторые изменения и в функцию ‘domready‘, а именно мы добавим переменную return_value, которой передадим результат работы функции, после чего используем ее в окне оповещения.

var two_parameter_returning_function = function(first_number, second_number){
	var third_number = first_number + second_number;
    return third_number;
}
 
window.addEvent('domready', function(){
	var return_value = two_parameter_returning_function(10, 5);
    alert("return value is : " + return_value);
});

Функция с двумя параметрами с возвратом результата

Использование функции как параметра

Событие domready использует в качестве параметра функцию:

window.addEvent('domready', function(){
	/*ваш код*/
});

Функция, передаваемая в качестве параметра, как показано в примере, называется анонимной функцией

function(){
	/*ваш код*/
}

И, раз уж зашел разговор о событии domready, отмечу еще один (к уже указанным двум в первом уроке) метод объявления функций в событии domready:

//создаем функцию для вызова в событии domready
var domready_function(){
	/* ваш код */
}
 
//Назначаем созданную функцию в параметры события
window.addEvent('domready', domready_function);

Пока, вроде, никто ничего не говорил по поводу того, есть ли какая-то разница в производительности и функциональности между всеми методами, так что, как объявлять функции – это сугубо личное дело каждого.

Примеры

Итак, переходим к самой вкусной части этого урока! Предлагаю поиграть с цветом фона одного из блоков на этой странице. Это, конечно, абсолютно бессмысленно, но полезно, с точки зрения понимания того, что можно творить с помощью Mootools или JavaScript. Код в студию:

var changeColor = function(){
 
    //Используем метод get чтобы получить значение цвета из текстовых блоков
    var red = $('red').get('value');
    var green = $('green').get('value');
    var blue = $('blue').get('value');
 
    //Убедимся, что все значения будут в формате целых чисел (метод toInt)
    red = red.toInt();
    green = green.toInt();
    blue = blue.toInt();
 
    //Убедимся, что каждое число - это значение между 1 и 255
    //при необходимости, округляем (метод limit)
    red = red.limit(1, 255);
    green = green.limit(1, 255);
    blue = blue.limit(1, 255);
 
    //преобразовываем формат цвет из RGB в 16-ричную систему исчисления (метод rgbToHex)
    var color = [red, green, blue].rgbToHex();
 
    //устанавливаем цвет блока (метод setStyle)
    $('body_wrap').setStyle('background', color);
}
var resetColor = function(){
 
	//вернуть белый цвет блока
    $('body_wrap').setStyle('background', '#fff');
}
 
window.addEvent('domready', function(){
    //Добавляем события click к каждой кнопке
    //(метод addEvent - подробнее об этом поговорим в следующем уроке
    //который будет готов очень скоро)
    $('change').addEvent('click', changeColor);
    $('reset').addEvent('click', resetColor);
});