Dieser Artikel ist Teil einer Serie:
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!
Kommentare (20)
Robert Agthe ¶
27. Juli 2009, 10:08 Uhr
Schöne Sache. Wenn ich mal was komplexes in Javascript zu programmieren habe, dann würde ich sicher auch MooTools nehmen. Kam aber bisher leider noch nich vor :D
Hab immer nur JS zum pimpen der UI, Useability oder für n paar JSON querys genutzt.
Björn ¶
27. Juli 2009, 11:17 Uhr
Im Feedreader zumindest unter Thunderbird liest sich der Beitrag etwas arg irreführend da das Doppel-$ in ein einzelnes $ gewandelt wird.
"Für eine Hand voll Dollar-Funktionen: $() und $()"...
Peter ¶
27. Juli 2009, 11:22 Uhr
Zitat Björn:
Öh, WTF. Wieso macht Thunderbird das denn? Würde es helfen, $ als
$
zu notieren?Luckerking ¶
27. Juli 2009, 11:37 Uhr
mooTools scheint echt eine feine Sache zu sein.
Der gewaltige Unterschied zwischen domready und onload ist mir jetzt nach dieser Nachricht auch klar geworden:
Steffen Becker ¶
27. Juli 2009, 11:54 Uhr
Allerdings sollte mein seit Version 1.2.3 die Möglichkeit in Betracht ziehen (wenn man Plugins schreibt und diese der Öffentlichkeit zur Verfügung stellt) diese mit dem "Dollar Safe Mode" zu programmieren, also anstatt $ document.id zu verwenden - mehr Info dazu unter: http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/
Hubert Müller ¶
27. Juli 2009, 12:29 Uhr
Eine wirklich sehr gelungene und hilfreiche Artikeserie für die ich mich als Framework-Einsteiger recht herzlich bedanken möchte ;-)
Wenn es um Frameworks geht, hört man in letzter Zeit fast nur noch jQuery, welches als das Maß-aller-Dinge angepriesen wird.
Dabei macht gerade Mootools vieles besser als andere Frameworks (soweit ich das als Neuling bewerten kann).
Mir persönlich sagt die Modulbauweise von Mootools besonders zu: Alles was ich brauche in einer JS-Datei, dazu noch schön komprimiert und dank automatisch aufgelösten Abhängigkeiten besonders Einsteigerfreundlich.
So einen Wizard sollte es für jQuery auch geben.
Ingo ¶
27. Juli 2009, 14:09 Uhr
"Mootoolifiziert" sollte verdudifiziert werden ;)
Gregor ¶
28. Juli 2009, 09:37 Uhr
Ich hab einen Sonderwunsch. Drag n Drop wäre interessant. Am besten in Verbindung mit Ajax, damit die Elemente dann auch nach dem Reload da bleiben, wo man sie hingezogen hat.
Peter ¶
28. Juli 2009, 12:14 Uhr
Gute Idee. Das nehme ich als Beispiel für den Umgang mit Objekten und Plugins.
Marc ¶
28. Juli 2009, 23:19 Uhr
Der Mootools-Fanclub Karlsruhe dankt!
Fab ¶
29. Juli 2009, 17:12 Uhr
@Marc: Ich will diesem Fanclub beitreten! :)
wetternest ¶
30. Juli 2009, 21:35 Uhr
ich hätt auch eine anregung für komplexere beispiele mit drag'n'drop
ich wollte immer schon mal wissen wie google maps funktioniert. hab auch schon mal angefangen zum rumbasteln
ich hab für das ziehbare element eine tabelle verwendet die dann immer wenn man zu nah an den rand kommt eben an der einen seite abgeschnitten wird und an der andren seite eine spalte dazu
aber im ff funzt das so halbwegs meistens, im IE is das sooooo langsam und das auch nur wenn man den halben code rauskommentiert weil nicht kompatibel
also echt zum verzweifeln...
wär echt nett wenn du mir da ein bissl die richtung weisen könntest!
David ¶
31. Juli 2009, 11:38 Uhr
Wird in der Serie auch die Ajax-Ecke beleuchtet? Das würde mich sehr interessieren.
franz ¶
5. August 2009, 14:07 Uhr
Also ich verwende wenn dann auch mootools - ich find schon den Namen ansprechender als jquery....hehe
jb ¶
1. Mai 2010, 17:51 Uhr
Ich weiß, dass das hier vielleicht nicht der richtige Ort für n MooTools-Support ist, aber kann es sein, dass Cookie.dispose() nicht im Firefox funktioniert? Im IE gehts...
Christian ¶
28. Juli 2010, 10:46 Uhr
Hallo Peter,
du schreibst, dass es für Testzwecke am einfachsten ist, sich die Mootools komplett über die Google AJAX Libraries API einzubinden.
Wie handhabst du das auf Live-Seiten? Hast du dann deine eigene lokale Kopie der Mootools oder beziehst du die Datei trotzdem über die Google AJAX Libraries API?
Ich frage vor dem Hintergrund, dass man durch die Einbindung über sog. Content Delivery Networks (CDN) vielleicht ja auch ein bisschen Ladezeit sparen kann bzw. nach den Empfehlungen des Firebug-Plugins PageSpeed sogar soll.
Peter ¶
29. Juli 2010, 08:54 Uhr
Auf Live-Seiten nehme ich immer noch eine lokale Datei. Ein CDN für eine einzige Datei zu nutzen bringt nichts, wenn man lokal alle Scripts zu einer großen Datei zusammenfasst.
Felted ¶
15. Oktober 2010, 14:47 Uhr
Leider funktioniert bei mir schon das erste Beispiel nicht.
Im Head habe ich:
und im Body steht:
Als Fehlermeldung sagt mir der FF:
$("foo") is null
Kann mir das jemand erklären...?
Grüße, Felted
Peter ¶
15. Oktober 2010, 16:35 Uhr
Dein Script wird, weil es ganz oben im Head steht, ausgeführt, bevor der Browser überhaupt das Dokument so weit verarbeitet hat, dass er beim Foo-Div angekommen ist. Du solltest all dein Mootools-JS in ein DOMReady-Event verpacken:
Felted ¶
18. Oktober 2010, 08:21 Uhr
Klar domready. Macht Sinn.
Vielen Dank für Deine Hilfe!
Grüße, Feltef