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

Функции и 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', function 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);
});