MooTools 1.2 Einführung - "Hello World"

0 | 9663 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "MooTools 1.2 Einführung - "Hello World"" mit Ihrem Wissen!

Anzeige Hier werben

Für die Einführung in das JavaScript-Framework "MooTools" möchten wir unser Beispiel aus dem vorherigen Artikel »"Hello World" mit Ajax« in der aktuellen MooTools Version 1.2 umsetzen. Dabei möchten wir durch den Klick eines Links den Inhalt eines Absatzes einer Webseite nachladen, ohne die Webseite komplett neu zu laden. In diesem MooTools Tutorial sollen dabei besonders die Vorteile aufgezeigt werden, welche durch die Nutzung eines Frameworks wie MooTools entstehen.

Textdatei erstellen

Erstellen Sie in Ihrem Arbeitsordner, der gleiche Ordner, indem sich auch Ihre HTML und JavaScript-Datei befindet, eine Textdatei mit dem Namen "hallo.txt" mit beliebigem Inhalt.

HTML-Code erstellen

Wir benötigen lediglich eine einfache HTML-Seite die zwei Absätze und einen Link enthalten soll. Den Inhalt des unteren Absatzes möchten wir nach einem Klick austauschen, ohne dass dabei die Seite neu geladen wird. Der HTML-Quellcode schaut dabei wie folgt aus:

Minimales HTML-Gerüst  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<html>
<head>
</head>
<body>
<p>
  Ich werde nicht neu geladen.
</p>
<p id="myContent">
  <a href="#">Klick mich</a>. Ich werde neu geladen!
</p>
</body>
</html>

Mootools runterladen

Die Projektwebseite von MooTools lautet www.mootools.net, auf welcher Sie sich auch Ihr eigenes MooTools-Paket zum Download zusammenstellen können. Dieses am Anfang etwas verwirrende Bedienungssystem hat den Hintergrund, dass die Mootools-JavaScript-Datei, die Sie von der Webseite runterladen, eine möglichst kleine Dateigröße haben soll und somit auch ihre spätere Webanwendung.

Für die Entwicklung empfiehlt es sich immer, den kompletten MooTools Core runterzuladen.

Evtl. enthält die Datei noch die Endung .txt, diese müssen Sie entfernen, sodass Ihre Datei mit .js endet.

Mootools einbinden

Die runter geladene MooTools-JavaScript-Datei müssen wir jetzt in unsere HTML-Seite einbinden. Dies geschieht im "<head>" Bereich des HTML-Quellcodes auf folgende Weise, vorausgesetzt, die MooTools-JavaScript-Datei haben Sie im gleichen Verzeichnis wie Ihre HTML-Datei abgelegt.

Aktuelle MooTools Version (Stand: 25.06.2009) einbinden  
HTML
1
<script type="text/javascript" src="mootools-1.2.3-core-yc.js"></script> 

Der Code ist relativ selbsterklärend. Sie geben als Erstes den Typen Ihres Scripts an, in unserem Fall natürlich "text/javascript", sowie die Quelle auf unserer Festplatte wo unser Script abgelegt ist.

"Hello World" mit MooTools umsetzen

Vorweg eine wichtige Anmerkung. Um dieses Beispiel selbst auf dem PC zu testen, müssen Sie entweder einen lokalen Webserver (wie XAMPP) laufen haben oder die Beispieldateien zum Testen auf einen Webserver hochladen.

Im Folgenden möchten wir unsere "Hello World" Ajax-Anwendung mit MooTools umsetzen. Wir erinnern uns, dass die Umsetzung der kleinen Ajax-Anwendung ohne MooTools besonders für das Instanziieren des XMLHttpRequest-Objekts sehr aufwendig war, weil auf Multi-Browser-Fähigkeit geachtet werden musste. Der Befehl von MooTools für das Instanziieren eines Objekts ist dagegen sehr schlank:

Neue Request.HTML Instanz  
JavaScript
1
2
3
4
5
        var objRequest = new Request.HTML({
          method: 'get',
          url: 'hallo.txt',
          update: $('myContent')
        }).send();

Die Schritte kurz einzeln erklärt: Wir erzeugen uns eine Variable mit dem Namen objRequest, welche ein Request.HTML-Objekt instanziiert. Request.HTML ist dabei eine speziell für HTML erweiterte XMLHttpRequest-Abfrage von MooTools.

Zusätzlich wird festgelegt mit welcher Methode ('get') und von welcher Quelle ('hallo.txt') die Daten geholt werden sollen, sowie welches Element ('myContent') mit den Information aus der "hallo.txt" befüllt werden soll - vorausgesetzt, der Request war erfolgreich.

Der Request würde jetzt funktionieren, jedoch existiert noch kein Link, welcher diesen Mechanismus aktiviert. Deshalb erweitern wir unser JavaScript, sodass folgendes endgültiges Ergebnis genutzt wird:

Komplettes "MooTools JavaScript" (inkl. HTML-Script-Tags)  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
  <script type="text/javascript">
    window.addEvent('domready', function() {
      $$('#myContent a').addEvent('click', function(e) {
        e.preventDefault();
        var objRequest = new Request.HTML({
          method: 'get',
          url: 'hallo.txt',
          update: $('myContent')
        }).send();
      });
    });
  </script>

Auch hier eine kurze Erklärung: "window.addEvent 'domready'" sagt, dass der Inhalt dieser Funktion dann zur Verfügung steht wird, sobald der DOM fertig ist. $$('#myContent a') definiert jeden (in unserem Beispiel nur einen) Link im Element mit der ID #myContent. Es wird mit "addEvent 'click'" definiert, dass beim Klicken der Inhalt der Funktion ausgeführt werden soll (als Ersatz für onclick="" im HTML selbst). e.preventDefault() verhindert, dass der aktuelle Link aufgerufen wird (als Ersatz für return false; im HTML onclick="") respektive der Event, der beim Klicken auf einen Link ausgelöst würde, ausgeführt wird.

Der komplette Code sieht nun wie folgt aus:

Kompletter Code  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
  <script type="text/javascript" src="mootools-1.2.3-core-yc.js"></script> 
  <script type="text/javascript">
    window.addEvent('domready', function() {
      $$('#myContent a').addEvent('click', function(e) {
        e.preventDefault();
        var objRequest = new Request.HTML({
          method: 'get',
          url: 'hallo.txt',
          update: $('myContent')
        }).send();
      });
    });
  </script>
</head>
<body>
<p>
  Ich werde nicht neu geladen
</p>
<p id="myContent">
  <a href="#">Klick mich</a>. Ich werde neu geladen!
</p>
</body>
</html>

Damit haben Sie eine kleine MooTools-Anwendung umgesetzt. Falls das kleine Script bei Ihnen lokal nicht laufen sollte, schieben Sie die drei Dateien auf einen Webserver.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "MooTools 1.2 Einführung - "Hello World"" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "MooTools 1.2 Einführung - "Hello World"" hier bearbeiten.

Mitarbeiter
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • Erfolgreiche Suchmaschinenoptimierung mit SEO München