Начинаем утреннюю зарядку: Уроки Mootools – Урок 1


Введение в библиотеку Mootools 1.2

Я с недавних пор с программированием познакомился. Должен сказать, заворожило! Очень интересно и увлекательно. С каждой новой вещью, которую узнаешь, появляется еще больше вещей, которые еще нужно познать.

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

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

Недавно мне в руки попал блог, который вел мой знакомый программист. Сам с интересом почитал некоторые посты. Но, у человека появились другие задачи, и блог перешел ко мне. Что я в нем буду писать, я уже частично оговорил, но буду стараться вывешивать как просто интересные переводы, файлы, задачи и примеры, так и истории успешно выполненных задач и путь, который я буду проходить в поисках этих решений.

Пожелайте мне удачи! :)

С библиотекой Mootools я познакомился недавно. Хоть я и раньше встречал это название, интереса особого она у меня не вызвала (интересно, почему?). Но в последний раз, когда я устанавливал на один из рабочих сайтов утилитку Slimbox (тоже весьма полезная и интересная штука!), которая является младшим и более легковесных братом знаменитой LightBox, меня заинтересовала эта библиотека, особенно, когда я взглянул на ее исходный код: это действительно мощная и очень легкая библиотека, упрощающая работу с JavaScript.

Когда я начал искать какие-нибудь учебники по этой библиотеке, ничего, кроме официального учебника не нашел. И, хочу заметить, он представлен не совсем в удобном формате, как мне кажется. (Кстати, в скором будущем планирую сделать PDF файлик, где будет представлен весь учебник, и где поиск по нему будет, намного удобнее, как мне кажется; пока только на английском, но может и переведу, если вдруг люди заинтересуются). В общем, все это я говорю к тому, что нашел хороший, на мой взгляд, 30-дневный курс по Mootools, который не требует от Вас никаких знаний HTML или JavaScript, но приветствует базовые знания CSS. Курс на английском, с блога компании ConsiderOpen (UPD: который уже не существует, а жаль :( ).

Итак, начнем!

Введение в библиотеку Mootools 1.2

Mootools 1.2 (My Object Oriented Tools) – это легкая, но мощная библиотека JavaScript, предназначенная для облегчения интерактивного создания веб страниц с помощью JavaScript. В некотором смысле можно сказать, что многие действия, которые умеет Mootools, можно рассматривать как расширения CSS (Cascade Style Sheet – Каскадные таблицы стилей). Например, с помощью CSS можно изменить свойство какого-либо элемента при наведении курсора на него (свойство :hover), тогда как JavaScript распознает даже больше событий, спровоцированных пользователем (клик – “click”, наведение курсором – “mouseover”, нажатие различных клавиш и т.д.), а библиотека Mootools делает распознавание этих событий настолько простым, что этим просто невозможно не воспользоваться!

Ко всему прочему, у Mootools в запасе есть уйма интересных расширений, которые позволят вам не только изменять “на лету” свойства элементов (таких как свойство CSS :hover), но которые также позволяют вам изменять форму объектов, анимировать их движения и множество других возможностей, о которых мы расскажем в течение нашего курса.

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

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

<script src="mootools1.2core.js" type="text/javascript" /></script>

(в нашем файл библиотеки находится в той же папке, что и сам html файл)

Установка библиотеки Mootools 1.2

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

  1. Поместить свой код в тег <script>, который, в свою очередь, нужно поместить в тег head
    <script type="text/javascript"></script>
  2. Создайте внешний JavaScript-файл и создайте ссылку на него в теге <head>
    <script src="myJavaScriptFile.js" type="text/javascript"></script>

Вы можете сами выбрать, каким методом будете вставлять ваш код в документ. Это сугубо ваше личное решение. Я буду вызывать все функции из события domready (что такое “событие domready”? читайте в следующем посте), заключенного в тегах script, но функции свои я буду создавать в отдельном внешнем файле JavaScript.

Код Mootools нужно поместить в событие domready

Функции Mootools нужно вызывать из события domready.

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

Вставьте его в функцию

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

var exampleFunction = function() {
     alert('hello')
};
 
window.addEvent('domready', function() {
    exampleFunction();
});

Описание библиотеки

В этой первой части нашего курса мы подробно рассмотрим ключевые компоненты архитектуры библиотеки и пройдемся по основным ее функциям.

Основа

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

  • Поиск значения (возвращает false, если значение не существует или 0, если существует) – $chk(значение);
  • Возвращает целое число из указанного диапазона – $random (мин, макс);
  • Позволяет с легкостью определять версию браузеров, их движком и возможностей.

Native

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

  • Создавать скрипты, которые бы применяли какие-либо действия к каждому объекту массива – .each();
  • Выбирать последний объект массива – getLast();
  • Создавать событие, которое бы происходило каждые Х милисекунд – .periodical();
  • Округлять дроби – .round();
  • Конвертировать цвета из RGB в шестнадцетиричную систему исчисления – .rgbToHex().

Класс

Класс в JavaScript (в отличие от класса CSS) – это объект с некой функциональностью многоразового использования. Если у вас не плохо с английским, можно пройти на блог сайта mootools.net, и почитать более подробно информацию об использовании классов. Кстати, в мои планы входит также и перевод этой статьи. Также зарубежные спецы очень рекомендуют шаблон класса Mootools с сайта Дэвида Уолша.

Элемент

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

  • Выбирать первый элемент DOM-а определенного типа, с определенным ID или определенного класса – .getElement();
  • Выбирать все элементы DOM-а имеющие определенный тип, определенный ID или определенный класс – .getElements();
  • Добавить определенный класс выбранному элементу – .addClass();
  • Узнать значение свойства какого-либо элемента – .getProperty();
  • Изменять или устанавливать значение свойства какого-либо элемента – .setProperty();
  • Узнать значение свойства стиля какого-либо элемента – .getStyle();
  • Изменить или установить значение свойства стиля какого-либо элемента – .setStyle();
  • Узнать координаты элемента – .getCoordinates().

Утилиты

Утилиты Mootools предоставляют еще более удобные критерии поиска элементов на странице, включая событие domready, предоставляет дополнительные инструменты для запросов AJAX, упрощает работу с кукисами и даже включает в себя некоторый функционал, позволяющий объединить JavaScipt и ActionScript.

Спец. эффекты FX

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

С помощью Mootools можно:

  • создавать анимированные переходы между двумы значениями стиля (например увеличивать элемент <div>) – var myFx = new FX.Tween(элемент);
  • создавать анимированные переходы между множеством различных значений стилей (например, плавно увеличивать размер элемента <div>, когда изменяется увет заднего плана, а линия его границы становится толще) var myFx = new Fx.Morph(элемент).

Запросы

Эта часть Mootools содержит инструменты, упрощающие работу с запросом XMLHttpRequest (Ajax) JavaScript-a. Несмотря на то, запосы Mootools делают процесс запросов/ответов намного менее напряжным, они также предоставляют разработчику выбор между ответами в HTML или JSON (Javascript Object Notation).

Плагины

Плагины Mootools расширяют его основную функциональность, позволяя с легкостью манипулировать фнукиональность пользовательского интерфейса. Список плагинов Mootools включает в себя:

  • Fx.Slide;
  • Fx.Scroll;
  • Fx.Elements;
  • Drag;
  • Drag.Move;
  • Color;
  • Group;
  • Hash.Cookie;
  • Sortables;
  • Tips;
  • SmoothScroll;
  • Slider;
  • Scroller;
  • Assets;
  • Accordion.

В течение следующих 29 уроков мы углубимся в узкие темы этой библиотеки и разберем ее элементы на простые для понимания части.

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

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

Удачи!

, ,

  1. #1 by Александр on 19.11.2009 - 6:37 pm

    для начало освоения mootools очень неплохо

  2. #2 by Алексей on 27.11.2009 - 9:09 am

    “….могу предложить вам вот эту таблицу….”
    Выдает 404.

    • #3 by proglammer on 27.11.2009 - 7:46 pm

      прощу прощения… результат перехода на вордпресс… не учел все ссылки. спасибо за замечание! исправлено

  3. #4 by Sinneren on 02.12.2009 - 4:29 pm

    Я впервые столкнулся с яваскрипитом.
    Решил сделать спойлеры для себя. искал как делается.
    нашёл реализацию на мутулзе.
    взял готовый код, который, судя по всему работает у автора.
    использовал ваш урок основы.
    вставил <script src=”имя.js” type=”text/javasrcipt”></script> между <head></head>. файл естественно в одной папке.
    создал div с классом описанным в коде.
    готовый код реализации вставил между выше описанными <script></script>
    вот тут и вопрос:туда ли нужно было вставлять?
    потому что код не реализуется никак…

  4. #6 by разработчик сайтов на joomla on 02.07.2010 - 10:11 pm

    спасибо
    так держать!

    сам недакно начал писать на mootools
    правда на 1.1 версия

  5. #7 by Амет on 16.09.2010 - 9:51 pm

    Огромное спасибо автору!
    очень хорошее введение!

    • #8 by proglammer on 18.09.2010 - 11:31 am

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

  6. #9 by Gruz on 01.01.2011 - 11:23 pm

    Грамматическая ошибка: “библиотека, упрАщающая работу с JavaScript.”
    Праща тут, видимо, ни к чему. (-:
    Давид и Голиаф (-:

    • #10 by proglammer on 12.01.2011 - 8:40 pm

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

  7. #11 by vetal on 14.05.2011 - 11:36 am

    (( Я прочитал про пост с domready -
    http://php.infoniac.ru/what-is-domready.html, но так и не понял,
    что значит поместить код в событие domready, объясниете плиз на
    пальцах куда втыкать этот код?

    • #12 by proglammer on 27.05.2011 - 10:39 am

      под этими словами, я имел ввиду следующее:

      window.addEvent('domready', function(){
      /*сюда вставляется код*/
      })
      

      по сути, всего-лишь создается обработчик события domready для
      элемента window. к обработчику привязывается функция, код которой
      выполняется при срабатывании события. pS. приношу извинения за
      поздний ответ: был в отпуске, интернета совсем не было :(

  8. #13 by Олег on 20.03.2012 - 7:24 am

    отличная статья для перехода с actionscript на js

  9. #15 by Виталий on 12.04.2012 - 8:22 pm

    Вы в начале статьи написали, что с mootools удобно работать с дом элементами и это не которое расширение css, но это не сильная его сторона, по работе с dom jquery нет равных. Mootools силен в других направлениях, например работа с классами (но не только), просто надоело изобретать велосипеды на чистом js, вот решил на помощь призвать mootools. У этого фреймворка есть класс Class, вот методом тыка что о узнал, но вот хочу попросить, если есть такая возможность, перевидите, пожалуйста, такие очень важные инструменты. И за остальные уроки большое спасибо, они очень полезные не только тем, кто впервые слышит, что такое js.

    • #16 by proglammer on 13.04.2012 - 6:28 am

      Спасибо за “спасибо”! Я сейчас потихоньку работаю над второй частью урока про классы, ток что заходите. Постараюсь в ближайшее время выложить.

  10. #17 by Ангелина on 10.08.2013 - 6:56 am

    Неплохо. Про вторую часть, ссылку напишите

  11. #18 by Ангелина on 10.08.2013 - 6:58 am

    Про вторую часть, ссылку напишите

(никто не узнает)

Код на картинке: