Mootools 1.2 за 30 дней – День 1 – Введение в библиотеку


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

Недавно мы получили предложение сделать учебник по Mootools 1.2 рассчитанный на 30 дней. Это показалось нам настолько хорошей идей, что мы сразу взялись за работу. Для чтения этого учебника Вам не потребуются опыта работы с JavaScript и Mootools 1.2, но нужны базовые знания CSS и HTML.

Mootools 1.2 за 30 дней

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

Mootools 1.2 – это мощная, но в тоже время легкая библиотека написанная на JavaScript. Библиотека была создана для облегчения разработки интерактивных веб приложений на JavaScript. Вы может сказать, большинство вещей из Mootools 1.2 можно сделать с помощью CSS. Например, CSS позволяет менять свойства элементов при наведении мышки. Но JavaScript позволяет обрабатывать больше событий (нажатие кнопки мышки, наведение мышки, нажатие клавиш, …), а Mootools позволяет чрезвычайно легко воспользоваться этой возможностью.

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

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

Установка Mootools 1.2

Сначала нужно скачать и установить ядро библиотеки — Mootools 1.2 Core.

  1. Скачиваем библиотеку Mootools 1.2 Core
  2. Загружаем библиотеку Mootools 1.2 Core на ваш сервер или в вашу рабочую среду.
  3. Подключаем библиотеку Mootools 1.2 Core. Для этого в заголовке страницы (тэг head) вставляем код:
    1. <script src=”mootools1.2core.js” type=”text/javascript” />

Добавление тэга script в заголовке страницы

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

  1. Вставить код в заголовке между двумя тэгами script:
    1. <script type="text/javascript">
    2.     <!—здесь ваш код—>
    3. </script>
  2. Создать отдельный файл с кодом JavaScript и подключить его в заголовке:
    1. <script src=”myJavaScriptFile.js” type=”text/javascript” />

С этого момента вы можете использовать любой из предложенных методов. Я же буду использовать оба метода: обработка события domready внутри тэгов script и создание своих функций во внешнем JavaScript файле.

Поместите код в domready

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

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

Поместите код в функцию

Вы можете написать свою функцию и разместить ее вне обработчика domready, а затем вызывать её из обработчика события.

  1. var exampleFunction = function() {
  2.      alert('hello')
  3. };
  4. window.addEvent('domready', function() {
  5.     exampleFunction();
  6. });

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

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

Ядро (Core)

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

Native

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

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

Класс

Класс JavaScript (в отличие от класса CSS) – это некий объект позволяет использовать его несколько раз. Чтобы узнать больше о классах Mootools вы можете прочитать небольшое введение от Valerio Mootools классы — как их использовать. Также я рекомендую Mootools Class Template от David Walsh’s.

Элементы

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

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

Утилиты

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

Эффекты (FX)

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

  • Создание анимированного перехода между двумя стилями (например, плавное увеличение элемента DIV) — var myFx = new Fx.Tween(element);
  • Создание анимированного перехода между множеством различных значений двух стилей (например, плавное увеличение элемента DIV с изменением цвета фона и толщины границы) — var myFx = new Fx.Morph(element) .

Запросы

В этом разделе содержаться инструменты для облегчения создания XMLHttpRequest (Ajax) функциональности. Несмотря на то, что Mootools делает этот процесс более простым, он также позволяет выбрать формат обмена HTML или JSON (Javascript Object Notation).

Плагины

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

  • Fx.Slide
  • Fx.Scroll
  • Fx.Elements
  • Drag
  • Drag.Move
  • Color
  • Group
  • Hash.Cookie
  • Sortables
  • Tips
  • SmoothScroll
  • Slider
  • Scroller
  • Assets
  • Accordion
Если вас интересует экономика и экономическая теория, то можете почитать лекции. Предлагают услуги по написанию рефератов и курсовых.

Что дальше…

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

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

Zip архив содержащий все необходимое для начало роботы с Mootools.

Архив содержит копию библиотеки Mootools 1.2 Core, простой файл HTML, отдельный файл JavaScript и файл с CSS стилями.

Шапагалка (Cheat Sheet) по Mootools 1.2

В ней описаны наиболее используемые элементы библиотеки, и все на одном листе А4. Вы можете распечатать ее и использовать, когда вам необходим подсказка. Скачать можно здесь: Шапагалка (Cheat Sheet) по Mootools 1.2.

Перевод статьи: 30 Days of Mootools 1.2 Tutorials — Day 1 — Intro to the Library

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

Tags:

3 комментария to “Mootools 1.2 за 30 дней – День 1 – Введение в библиотеку”

  1. Отличная идея! Спасибо за проделанный труд! Будем изучать! Как говорил дедушка Ленин: «Учиться, учиться и еще раз учиться!» Ждем продолжения!

  2. Какие вы молодцы! Большое спасибо за такие подробные уроки!

  3. Ветал:

    Объясните пожалуйста на пальцах, что значит «поместить код в domready», что надо делать?

Leave a Reply