Peter Kröner, Webtechnologie-Erklärbär

Im zweiten Teil der Mootools-Artikelserie heißt es nun: ran an den Code! Mit der Einführung zu den Dollar- und Eventfunktionen geht es vor allem erst mal darum, zu zeigen, dass sich einfache Aufgaben mit Mootools auf einfache Art und Weise lösen lassen. Um die schwergewichtigen Aufgaben, die eigentlich die Paradedisziplin von Mootools sind, wird es erst in späteren Teilen gehen.

Mootools einbinden

Mootools besteht aus zwei Teilen. Core enthält alle Basisfunktionen für die Arbeit mit Dokumenten, für einfache Effekte, Ajax und weitere nützliche Funktionen für den alltäglichen Einsatz, während die More-Komponente spezialisierte Plugins wie einen Formular-Validator, Tooltips und ähnliches enthält. Beide Komponenten kann man von der Mootools-Downloadseite herunterladen. Die Core- und More-Builder erlauben es darüber hinaus, nur die Teile von Core und More herunterzuladen die man für ein bestimmtes Projekt braucht – so kann man einiges an Dateigröße einsparen.

Für Testzwecke ist es am einfachsten, sich einfach Mootools komplett über die Google AJAX Libraries API einzubinden. Einfach die folgenden Codezeile in eine HTML-Datei packen und schon kann es losgehen:

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>

Für eine Hand voll Dollar-Funktionen: $() und $$()

Häufig benutzt man Javascript, um damit irgendwelche HTML-Elemente auf einer Website zu bearbeiten - sei es um sie zu verändern, Daten auszulesen oder gar neu zu erstellen. Um Elemente auszuwählen bietet Mootools grundsätzlich zwei Wege – die Dollar-Funktion und die Doppeldollar-Funktion mit CSS-Selektoren.

Die Dollar-Funktion $() wählt ein Element anhand seiner ID aus. Beispiele:

var foo = $('foo'); // Wählt z.B. <p id="foo"></p> aus
var bar = $('bar'); // Wählt z.B. <span id="bar"></span> aus

Das Praktische hierbei: die Elemente werden nicht nur wie beim aus normalem Javascript bekannten document.getElementById() einfach ausgewählt, sondern sie werden auch gleich mootoolifiziert. Was das bedeutet?

Mootools ist objektorientiert. Alle Objekte haben Methoden, die in der Form von meinObjekt.hilfreicheFunktion() aufgerufen werden. Und die Dollar-Funktion stattet das durch sie gewählte Objekt direkt mit ein paar der Mootools-Methoden aus. Dadurch ist zum Beispiel ohne Umschweife folgendes möglich:

// Das Element mit der Mootools-Fade-Methode ausblenden
$('foo').fade('out');

Einfach, oder? Man beachte, dass der Code für die gleiche Funktion in jQuery fast identisch ist:

// Das Element mit der ID "foo" via jQuery ausblenden
$('#foo').hide('slow');

Soviel zum Thema Mootools macht alles komplizierter. Was im Vergleich zu jQuery auffällt, ist dass die Dollar-Funktion bei jQuery einen CSS-Selektor statt der ID des Elements nimmt. Das ist mit Mootools auch möglich – dafür gibt es die Doppeldollar-Funktion $$(). Auch dort werden die ausgewählten Elemente direkt mootoolifiziert, so dass dort auch das alte Spiel möglich ist:

// Die mit dem CSS-Selektor gewählten Elemente ausblenden
$$('div#foo > table.bar a[rel=foobar]').fade('out');

Mit der Dollar- und Doppeldollar-Funktion kann man auch bereits ausgewählte Objekte mootoolifizieren:

var meineElemente = document.getElementsByTagName('p');
meineElemente.fade('out'); // Funktioniert nicht
$$(meineElemente).fade('out'); // Funktioniert!

Neben der Verwendung von CSS-Selektoren ist der zweite Unterschied zwischen der Dollar- und der Doppeldollar-Funktion, dass $() immer exakt ein Element zurückgibt (oder null, falls kein Element gefunden wurde), $$() hingegen immer ein Array (genau genommen kein Array, aber etwas ganz ähnliches). Dieses Array ist denn entweder leer oder enthält ein oder mehrere Objekte – je nachdem, was gefunden wurde.

Mit den via $() und $$() ausgewählten Elementen kann man nun allerlei lustige Sachen anstellen – Zum Beispiel könnte man sie mit Events versehen.

Events

Der vereinfachte Umgang mit Events ist ein typisches Kernfeature von modernen Javascript-Frameworks. Als Beispiel nehmen wir einmal an, wir hätten einen Button und wollten dafür sorgen, dass bei einem Klick darauf ein Alert-Fenster aufpoppt. Unserer bunten Browserlandschaft ist zu verdanken, dass der Code dafür in normalem Javascript so aussähe:

var button = document.getElementById('button');
var foobar = function(){
    alert('Foobar!');
}
if(button.addEventListener) {
    button.addEventListener("click", foobar, false);
} else if (button.attachEvent) {
    button.attachEvent("onclick", foobar);
} else {
    button.onlick = foobar;
}

Es gibt also satte drei Wege, eine Funktion an ein Ereignis (hier den Klick auf einen Button) zu binden: die richtige Methode, die microsoft'sche Methode und die funktionierende Methode. Da ist es begrüßenswert, dass Mootools diesen Prozess wie folgt vereinfacht:

$('button').addEvent('click', function(){
    alert('Foobar!');
});

Mann nimmt einfach das Ziel-Element, wendet die addEvent-Methode an, gibt ihr die Art des Events (hier einen Klick) und die auszuführende Funktion mit – fertig! Wenn man mehrere Events an ein Objekt binden möchte ist das auch denkbar einfach:

$('button').addEvents({
    'mouseover': function() {
        alert('Mouseover!');
    },
    'mouseout': function() {
        alert('Mouseout!');
    },
    'click': function() {
        alert('Angeklickt!');
    }
});

Die addEvents-Methode nimmt statt einem Event mit einer Funktion ein ganzes Objekt an, in dem mehrere Events notiert sind, und bindet Sie an das betroffene Element.

Neben den üblichen Verdächtigen unter den Events (click, mouseover usw.) hat Mootools noch zwei Extras an Bord. Erstens kann man sich bei Bedarf komplett neue, eigene Events basteln, zweitens gibt es das Domready-Event. Dieses wird ausgelöst, sobald das HTML-Dokument soweit geladen ist, dass es modifziert werden kann – anders als das altbekannte onload-Event, das erst ausgelöst wird, wenn das Dokument inklusive sämtlicher Ressourcen (Stylesheets, Bilder usw.) geladen ist. Und auf all das will man normalerweise nicht warten. Den Unterschied zwischen Domready und Onload zeigt diese Demo recht anschaulich.

Lange Rede, kurzer Sinn: in den allermeisten Fällen möchte man seinen Mootools-Code in einem Domready-Event platzieren:

window.addEvent('domready', function() {
    // Hier kommt der eigentliche Code hin
}

Wenn man das nicht macht, läuft man Gefahr, dass das Javascript ausgeführt wird, bevor das dazugehörige Dokument fertig geladen ist und in Folge dessen jeder Versuch, mit mit der Dollar-Funktion ein Element auszuwählen, mit null endet.

Ausblick auf Teil 3: Objekte und Effekte

Der geübte jQuery-Nutzer wird sich spätentens jetzt nach dem Sinn dieser Artikelserie fragen. Schließlich sind all diese Funktionen so oder ähnlich auch mit jQuery (oder jedem anderen, guten Javascript-Framework) zu haben, wozu also Mootools? Nur die Ruhe: dieser Teil der Serie hat lediglich demonstriert, dass einfache Dinge mit Mootools einfach zu machen sind. Die wahre Stärke von Mootools kommt aber erst zum Vorschein, wenn die zu bewältigenden Aufgaben komplexer werden.

Und komplexer wird es werden. Im nächsten Teil werden wir uns erst mal die auch noch relativ un-unüblichen Objekte und Effekte zur Brust nehmen, bevor wir uns später dem Umgang mit Klassen widmen. Also dranbleiben! Und wie immer gilt: Wer Sonderwünsche hat, der möge sie tunlichst anmelden!