Dziudek's jogger

JavaScript staje się powoli nieodłączną częścią stron internetowych. Jednak nie służy już do tworzenia zupełnie zbytecznych migających / latających za kursorem / drażniących oczy ozdobników, które znamy ze stron tworzonych kilka lat temu. Dziś JavaScript stał się metodą na ułatwienie i umilenie życia internautom. Jego użycie pozwala zaoszczędzić mnóstwo czasu, transferu i miejsca na stronie, bo możemy dzięki skryptom upchać na małym obszarze mnóstwo treści dostępnej najczęściej jednym kliknięciem.

Ten sielankowy obraz psują dwie sprawy - obu z nich doświadczył każdy, kto napisał kilka/kilkanaście skryptów JS. Pierwszy problem to brak standaryzacji JavaScript - wiele rzeczy inaczej obsługuje się w IE, a inaczej w alternatywnych przeglądarkach. Pewnych rzeczy IE w ogóle nie obsługuje i trzeba stosować różne udziwnienia w kodzie. Zatem często zdarza się, że musimy pisać kod JS dla IE i reszty przeglądarek.

Druga sprawa to powtarzalność problemów do realizacji - z reguły na różnych stronach powtarza się motyw zwijania/rozwijania jakiegoś elementu, menu itd. I dlatego właśnie warto stosować frameworki JS. Dobry framework to taki, który pozwala skrócić czas pisania kodu dzięki wbudowanej obsłudze różnych przeglądarek oraz gotowymi rozwiązaniami najczęstszych problemów w wydajnej wersji. Nie muszę chyba pisać, że framework MooTools doskonale spełnia te warunki.

W MooTools 1.2 masz wybór

Jeszcze niedawno piszący w MooTools mogli trochę pozazdrościć krótkiej składni znanej z jQuery. W wersji 1.2 problem właściwie znikł - większość funkcji ma swoje odpowiedniki będące metodami klasy Element - dzięki temu można tworzyć zapisy postaci:

kolekcjaElementów.jakasOperacja().innaOperacja().jeszczeInnaOperacja();

Oczywiście mamy auto-iterację (która swoją drogą istniała już w MooTools 1.11 dla kolekcji elementów zwracanych przez funkcję $$).

Ale tytuł mówi o tym, że w MooTools 1.2 mamy wybór - i tak jest. W większości wypadków mamy co najmniej dwa sposoby na zapisanie tego samego kodu - w sposób krótki i dłuższy. Przy czym sposób dłuższy jest z reguły bardziej czytelny i pozwala zastosować więcej opcji. W wypadku stosowania dłuższej metody kod wygląda mniej więcej tak:

var obiektKlasy = new Klasa("element",{opcje});

W wypadku obiektów natywnych (na przykład Array, String) możemy też łatwo stworzyć własne nazwy dla metod poprzez metodę alias (o niej w kolejnej części kursu).

Tak więc MooTools 1.2 już w samej kwestii zapisu kodu pozwala na o wiele więcej niż poprzednik, a to dopiero początek (resztę poznamy w kolejnych częściach kursu).

Jak zacząć ?

Aby w ogóle móc użyć MooTools na swojej stronie, należy najpierw dodać skonfigurowany dla własnych potrzeb plik mootools.js (pobrany ze strony mootools.net) w sekcji HEAD swojej strony:

<script type="text/javascript" src="sciezka_do_pliku_mootools.js"></script>

Osobiście polecam umieszczanie frameworka i skryptów z niego korzystających w oddzielnych plikach - dla zachowania porządku. Wyjątek mogą stanowić tutaj króciutkie skrypty o rozmiarach kilku kB - ale głównie wtedy gdy naprawdę zależy nam na liczbie zapytań do serwera.

UWAGA! Wszelkie pliki zawierające skrypty korzystające z MooTools muszą być umieszczone PO linijce dodającej plik mootools.js do strony ! Inaczej zobaczymy błąd JS spowodowany odwoływaniem się do obiektów/funkcji, które (jeszcze) nie istnieją.

UWAGA ! Niech nie przyjdzie komukolwiek do głowy stosować więcej NIŻ JEDEN framework JS na stronie! Jednoczesne użycie MooTools/jQuery/Prototype = kłopoty.

Co oferuje nam MooTools 1.2 ?

Pozwolę sobie wymienić najważniejsze możliwości MooTools 1.2:

• jeden kod działający we wszystkich przeglądarkach,
• zaawansowane możliwości selekcji elementów dokumentu (także z użyciem selektorów projktowanego dopiero CSS 3),
• rozszerzenie możliwości obiektów natywnych,
• duże ułatwienia w kwestii manipulowania elementami dokumentu,
• wsparcie dla programowania obiektowego,
• możliwość tworzenia zaawansowanych animacji opartych o zmianę właściwości CSS elementów,
• obsługa AJAX wraz z wsparciem dla formatu JSON,
• obsługa techniki drag'n'drop,
• oraz wiele innych klas stworzonych do obsługi efektów i rozwiązywania typowych problemów z jakimi spotykamy się podczas pisania skryptów JS.

Na co zwrócić największą uwagę ?

Aby dobrze zrozumieć MooTools należy przede wszystkim oswoić się z obsługą obiektów natywnych i programowaniem obiektowym w tym frameworku - wszystkie pozostałe elementy bazują właśnie głównie na tych dwóch kwestiach i wymagają po prostu nauczenia się obsługi danej klasy MooTools. Dlatego, mimo że ta bardziej teoretyczna część kursu może wydać się mało fascynująca to jest ona podstawą naszych dalszych działań, które będą dawać później najciekawsze efekty.