Mootools 1.2 за 30 дней — День 4 — Функции


Функции и библиотека Mootools 1.2

Добра пожаловать на 4 день курса «Mootools 1.2 за 30 дней». Если вы еще не читали первые дни, то можете сделать это сейчас «Обучающий курс по библиотеке Mootools. День 1». Сегодня мы немного отойдем от рассмотрения библиотеки Mootools и займемся основами функций в JavaScript.

Mootools 1.2 за 30 дней

Однако, так как мы все таки рассматриваем Mootools, вы должны понимать как использовать функции с библиотекой. На предыдущих занятиях мы размещали код примеров непосредственно в обработчике domready. Имея дело с функциями, вы можете расположить код за пределами обработчика. Функция не будет выполняться пока вы ее не вызовите из обработчика.

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

  1. <script type="text/javascript"><!—   —></script>

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

Основы

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

  1. var simple_function = function(){

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

  1. alert('This is a simple function');

И заканчиваем определение функции закрывающейся фигурной скобкой.

  1. }

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

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

  1. //определяем функцию simple_function
  2. var simple_function = function(){
  3.  alert(Это простая функция');
  4. }
  5. window.addEvent('domready', function() {
  6.        //вызываем функцию simple_function когда страница загрузиться
  7.        simple_function();
  8. });

Один параметр

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

  1. var name_of_function = function(name_of_the_parameter){
  2.     /*function code goes here*/
  3. }

Как только вы так сделали переменная становиться доступной внутри функции для использования. Вы можете называть параметры как захотите, но хорошим тоном считается делать названия как можно понятнее. Например, если вы передаете в функцию переменную, которая содержит название города, то название переменной ‘town_name’ более предпочтительно, чем неопределенное ‘user_input’.

В примере ниже мы определяем функцию которая получает единственный параметр (названный parameter) и выводит окно предупреждения с содержимым этой переменной. Заметьте, что первая часть сообщения, заключенная в одинарные кавычки, это не параметр. Когда вы используете параметр в комбинации со строками, вы должны объединить их с помощью оператора ‘+’, как это сделано ниже:

  1. var single_parameter_function = function(parameter){
  2.         alert('Введено : ' + parameter);
  3. }
  4. window.addEvent('domready', function(){
  5.         single_parameter_function('Это параметр');
  6. });

Несколько параметров

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

  1. var third_number = first_number + second_number;

Здесь оператор ‘+’ используется для объединения всех трех переменных и текстовых строк в одну строку.

  1. alert(first_number + " plus " + second_number + " equals " + third_number);

Вначале это может казаться очень запутанным, но на самом деле все очень просто. Если вы используете оператор ‘+’ с числами, результатом будет их сумма. Но если вы используете этот, же оператор с комбинацией чисел и строк (хотя бы один из операндов — строка), то результатом будет строка.

  1. var two_parameter_function = function(first_number, second_number){
  2.         //получам сумму двух переданных переменных
  3.         //first_number и second_number
  4.         var third_number = first_number + second_number;
  5.         //Выводим результат
  6.         alert(first_number + " плюс " + second_number + " равно " + third_number);
  7. }
  8. window.addEvent('domready', function(){
  9.  two_parameter_function(10, 5);
  10. });

Возвращаемое значение

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

  1. return third_number;

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

  1. var two_parameter_returning_function = function(first_number, second_number){
  2.   var third_number = first_number + second_number;
  3.   return third_number;
  4. }
  5. window.addEvent('domready', function(){
  6.  var return_value = two_parameter_returning_function(10, 5);
  7.  alert("Возвращаемое значение: " + return_value);
  8. });

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

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

  1. window.addEvent('domready', function(){
  2.  /*наш код*/
  3. });

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

  1. function(){
  2.  /*наш код*/
  3. }

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

  1. //Создаем функцию которая будет вызываться по событию domready
  2. var domready_function = function(){
  3.  /*наш код*/
  4. }
  5. //Определяем обработчик событий domready
  6. window.addEvent('domready', domready_function);

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

Волгоград — город, который имеет богатую историю. Самое известное из событий связанных с ним: Сталинградская битва (17.07.1942-02.02.1943). К тому же город, за время своего существования, менял название 3 раза: Царицын (1589-1925), Сталинград (1925-1961), Волгоград (1961-по текущее время). А здесь Вы можете посмотреть сайты Волгограда.

Пример:

Чтобы подогреть ваш аппетит к следующему занятию, а заодно и восполнить отсутствие материала про Mootools сегодня, я представляю вам немного бессмысленную функцию, которая позволит менять вам цвет фона этой страницы на лету.

  1. var changeColor = function(){
  2.  //Используется для получения значения
  3.  //цвета из текстовых полей
  4.  //( http://docs.mootools.net/Element/Element#Element:get )
  5.  var red   = $('red').get('value');
  6.  var green = $('green').get('value');
  7.  var blue  = $('blue').get('value');
  8.  
  9.  //Проверяем что все значения целые числа
  10.  //( http://docs.mootools.net/Native/Number#Number:toInt )
  11.  red   = red.toInt();
  12.  green = green.toInt();
  13.  blue  = blue.toInt();
  14.  
  15.  //Проверяем что все значения находятся
  16.  //между 1 и 255, уменьшаем в случае необходимости
  17.  //( http://docs.mootools.net/Native/Number#Number:limit )
  18.  red   = red.limit(1, 255);
  19.  green = green.limit(1, 255);
  20.  blue  = blue.limit(1, 255);
  21.  
  22.  //Получаем шестнадцатеричный код
  23.  //( http://docs.mootools.net/Native/Array/#Array:rgbToHex )
  24.  var color = [red, green, blue].rgbToHex();
  25.  
  26.  //Устанавливаем фоновый цвет для текущей страницы
  27.  //( http://docs.mootools.net/Element/Element.Style#Element:setStyle )
  28.  $('body_wrap').setStyle('background', color);
  29. }
  30.  
  31. var resetColor = function(){
  32.  //Устанавливаем белый фоновый цвет для текущей страницы
  33.  //( http://docs.mootools.net/Element/Element.Style#Element:setStyle )
  34.  $('body_wrap').setStyle('background', '#fff');
  35. }
  36.  
  37. window.addEvent('domready', function(){
  38.  //Добавляем обработку событий нажатия кнопки
  39.  //(подробности завтра)
  40.  //( http://docs.mootools.net/Element/Element.Event#Element:addEvent )
  41.  $('change').addEvent('click', changeColor);
  42.  $('reset').addEvent('click', resetColor);
  43. });

Красный :

Зеленый :

Синий :

Для дальнейшего изучения

Подробнее о функциях JavaScript

Javascript Functions на Quirksmode

Если вы знаете другие хорошие ресурсы про функции в JavaScript обязательно присылайте их.

Вы можете скачать zip архив с материалами этого дня.

В архиве содержаться Mootools 1.2 Core, JS файл, HTML файл с примером который вы видите выше.

Вольный перевод статьи: 30 Days of Mootools 1.2 Tutorials — Day 4 — Functions

Похожие записи:

Tags:

3 комментария to “Mootools 1.2 за 30 дней — День 4 — Функции”

  1. Спасибо за пост! Но у меня изменение цвета почему-то не работает(((

  2. И у меня не работает=( Может что-то неправильно делаю?

  3. Уже все работает. Спасибо, что подсказали.
    Как оказалось IE и FireFox не любят когда файл скрипта подключается в тэге BODY, они желают HEAD. А Opera пропускает на ура. Хотя это вполне может быть спецификой Mootools, но что-то сильно я сомневаюсь в этом.

    Перенес подключние библиотеки в Mootools И все заработало во всех 3 браузерах.

Leave a Reply