Anzeige
Tutorialbeschreibung

Javascript und Ajax - JavaScript-Bibliotheken

Javascript und Ajax - JavaScript-Bibliotheken

Das nun folgende Tutorial ist ein Auszug aus der 7. Auflage des Buches: JavaScript und Ajax von Christian Wenz.

Kapitel 33 JavaScript-Bibliotheken

Wenn man so die Entwicklung von JavaScript in den letzten Jahren betrachtet, stellt man zwei Dinge fest: Hurra, die Browser halten sich immer mehr an Standards, die Entwicklung fällt leichter (beispielsweise DOM, DHTML, AJAX). Andererseits gibt es mittlerweile mehr Browser, die teilweise auch nur auf einem bestimmten Betriebssystem laufen. Die Entwicklung von browserunabhängigen, modernen JavaScript-Anwendungen fällt schwerer (beispielsweise DOM, DHTML, AJAX).

Aus diesem Grund kommen Open-Source-JavaScript-Bibliotheken immer mehr in Mode, die häufig benötigte Funktionalität kapseln und – aufgrund der großen Nutzer- und damit Testbasis – auch exotischere Browser berücksichtigen können.

Gerade sehr fortgeschrittene Effekte wie etwa Drag & Drop sind ohne Bibliothek kaum mehr denkbar. Das gesammelte Wissen der Open-Source-Entwicklergemeinde hinter der JavaScript-Bibliothek lässt zumindest hoffen, dass auch seltenere Systeme adäquat berücksichtigt worden sind. Es ist häufig so gut wie unmöglich, dieses Know-how selbst zusammenzurecherchieren.

Dieses Kapitel stellt einige dieser Bibliotheken und Frameworks vor, allerdings nur kurz. Das hat einen praktischen Grund: Die Halbwertszeit solcher Bibliotheken ist häufig geringer als der Zeitraum zwischen Redaktionsschluss und Veröffentlichungszeitpunkt des Buches. Aktuelle Informationen zu den jeweiligen Bibliotheken finden Sie natürlich auf den Projektwebsites.


33.1 Prototype 
topBilder
topBilder

Eine der bekanntesten JavaScript-Bibliotheken ist Prototype. Unter http://prototype.conio.net/ gibt es das Ganze zum Download, entweder als einzelne .js-Datei (prototype.js) oder als komplette Distribution mit einzelnen Skriptdateien. Letztere Variante enthält die einzelnen Prototype-Bestandteile im Ordner src; im Ordner dist befindet sich dann die prototype.js, die Datei, die den kompletten Code aus den Einzeldateien enthält. Der Sinn des Ganzen: Im src-Verzeichnis finden Sie die Funktionalität nach Bereichen aufgeteilt, die komplette Datei prototype.js wird aber in Websites verwendet (somit ist nur ein zusätzlicher HTTP-Request erforderlich):

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

Bilder

Abbildung 33.1     Die Homepage von Prototype

Der bekannteste Bestandteil von Prototype ist folgende Hilfsfunktion:

function $() {
  var elements = new Array();

  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);


    if (arguments.length == 1)
      return element;

    elements.push(element);
  }

  return elements;
}

Sie übergeben eine beliebige Anzahl von IDs an die Funktion und erhalten Referenzen auf die entsprechenden HTML-Objekte zurück. Der Aufruf $("XYZ") entspricht also document.getElementById("XYZ"). Also ist das Ganze an sich nichts Besonderes, aber es ist einfach eine enorme Zeitersparnis. Die Methode getElementById() wird in DOM-Anwendungen so häufig aufgerufen, dass eine solche Abkürzung wirklich praktisch ist. Und viel besser noch: Da kaum bekannt ist, dass das Dollarzeichen in Funktions- und sogar Variablennamen in JavaScript erlaubt ist, haben auch modernere JavaScript-Anwendungen in der Regel keine Funktion, die $() heißt.

Davon abgesehen bietet Prototype einige nette Features, die bei der täglichen Arbeit mit JavaScript viel Zeit sparen können. Einige eingebaute Objekte werden erweitert, beispielsweise erhalten Strings einige neue Methoden. Sehr wichtig – vor allem in Zusammenhang mit XSS (siehe Kapitel 30) – ist die Methode escapeHTML(), die HTML-Sonderzeichen entfernt. Hier schlägt Prototype einen interessanten Weg ein: Es wird ein Textelement erzeugt, dessen Text der von HTML-Sonderzeichen zu befreiende String ist. Am Ende liefert die Eigenschaft innerHTML des äußeren Elements den HTML-kodierten String zurück:

var div = document.createElement('div');
var text = document.createTextNode(this);
div.appendChild(text);
return div.innerHTML;

Sehr praktisch sind auch die Erweiterungen für Arrays. Hier eine Auswahl der neuen Methoden, die – dank Prototype – jedes JavaScript-Array besitzt:

gpBilder
 
first() – liefert das erste Element.
gpBilder
 
last() – liefert das letzte Element.
gpBilder
 
compact() – liefert alle nicht-leeren Elemente.
gpBilder
 
flatten() – wandelt ein mehrdimensionales Array in ein eindimensionales um.
gpBilder
 
indexOf() – liefert die Position eines bestimmten Elements im Array.

Für AJAX-Anwendungen liefert Prototype gleich eine gesamte Objekthierarchie. Unter anderem gibt es die Klasse Ajax.Request, Ajax.Updater und Ajax.PeriodicalUpdater. Und obwohl AJAX, wie Kapitel 18 zu beweisen versuchte, keine komplizierte Wissenschaft ist, kann die Prototype-Implementierung doch ein wenig (Programmier-) Schweiß vermeiden.

Prototype bietet so praktische JavaScript-Erweiterungen, dass viele Projekte darauf aufsetzen und deswegen die Bibliothek gleich mitliefern. Am bekanntesten ist wohl das zurzeit sehr populäre Web-Framework Ruby on Rails (http://www.rubyonrails.com/), in das Prototype integriert ist. Außerdem gibt es eine Reihe von Projekten, die auf Prototype aufbauen, beispielsweise die Bibliothek im nächsten Abschnitt.

 

 

33.2 script.aculo.us 
topBilder
topBilder

Unter http://script.aculo.us/ finden Sie die gleichnamige Bibliothek. Sie wird häufig auch als scriptaculous bezeichnet. Die Punkte sind nur ein Gag, um daraus eine URL zu machen, denn .us ist eine – wenn auch recht selten verwendete – Top Level Domain.

Scriptaculous setzt auf Prototype auf. In der Tat müssen Sie, um die Bibliothek einzusetzen, zunächst Prototype laden (im Lieferumfang mit dabei) und dann scriptaculous:

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

Zu scriptaculous gehören auch noch einige weitere JavaScript-Dateien:

gpBilder
 
builder.js
gpBilder
 
controls.js
gpBilder
 
dragdrop.js
gpBilder
 
effects.js
gpBilder
 
slider.js

Diese werden aber automatisch von scriptaculous geladen, und zwar ganz »brutal« mit document.write():

document.write('<script type="text/javascript" src="'+libraryName+'"></script>');

Natürlich könnte man die JavaScript-Datei auch per DOM laden (<script>-Element erzeugen, src-Attribut setzen, dem DOM-Baum hinzufügen), doch Safari 2.0 kann das nicht. Auch hier sehen Sie wieder, dass so eine quelloffene Bibliothek das Scheitern vieler Programmierer aggregiert und Lösungen dafür anbietet.

Bilder

Abbildung 33.2     Die Homepage von script.aculo.us

Ein kleines Beispiel soll gezeigt werden, ein Effekt, der grob an Google Suggest erinnert und der bereits in Kapitel 21 bei den AJAX-Frameworks gezeigt worden ist: Nachdem ein paar Zeichen in ein Textfeld eingetippt worden sind, wird eine Art Autovervollständigungsliste angezeigt.

Normalerweise wird das mit einer serverseitigen Technologie gelöst; hier jedoch beschränken wir uns auf rein clientseitige Technologien (natürlich ist eine Ausweitung auf Servertechnologien problemlos möglich). Zunächst müssen die entsprechenden Bibliotheken geladen werden; passen Sie die Pfade gegebenenfalls an Ihr System an:

<script src="scriptaculous-js-1.6.1/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous-js-1.6.1/src/scriptaculous.js" type="text/javascript"></script>

Dann benötigen Sie ein Textfeld; vergeben Sie eine ID (wichtig für später)!

<input id="ac1" type="text" style="width:150px;" />

Im nächsten Schritt erstellen Sie das Element, in dem die Ergebnisse vom Server angezeigt werden sollen; ein <div>-Element, das dieselbe Breite hat wie das Textfeld (width:150px), relativ darunter positioniert ist (position:relative) und anfangs unsichtbar ist (display:none), ist perfekt dafür geeignet:

<div id="Autocompleter1" style="display:none;width:150px;border:2px solid black;
background-color:white;position:relative;"></div>

Jetzt müssen Sie beide Komponenten, Textfeld und Ausgabe-<div>-Element zusammenbringen. Dazu erzeugen Sie die Klasse Ajax.Autocom-pleter und geben die beteiligten IDs als Parameter an:

<script type="text/javascript">
new Ajax.Autocompleter("ac1", "Autocompleter1", "autocompleter_result.html");
</script>

Sie ahnen sicherlich, wozu der dritte Parameter gut ist: Hier geben Sie das Skript an, das im Hintergrund aufgerufen werden soll. In diesem Fall ist es nicht einmal ein serverseitiges Skript, sondern »nur« eine statische HTML-Seite. Diese muss eine <ul>-Aufzählungsliste zurückgeben; per CSS können Sie dann natürlich die Daten dort sehr flexibel darstellen. Unsere Datei autocompleter_result.html enthält zu Testzwecken eine sehr simple, fixe Liste:

<ul>
   <li>eins</li>
   <li>zwei</li>
   <li>drei</li>
</ul>

In der ursprünglichen Datei (autocompleter.html) können Sie abschließend noch die CSS-Klasse selected definieren. Diese CSS-Klasse wird angewandt, wenn eines der Elemente in der dynamisch eingeblendeten Autocompleter-Liste ausgewählt wird:

<style type="text/css">
   .selected {background-color: gray;}
</style>

Hier noch einmal der komplette Code für die HTML-Seite auf scriptaculous-Basis:

<html>
<head>
<title>script.aculo.us</title>
<script src="scriptaculous-js-1.6.1/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous-js-1.6.1/src/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
   .selected {background-color: gray;}
</style>
</head>
<body>
<input id="ac1" type="text" style="width:150px;" />
<div id="Autocompleter1" style="display:none;width:150px;border:2px solid black;
background-color:white;position:relative;"></div>
<script type="text/javascript">
new Ajax.Autocompleter("ac1", "Autocompleter1", "autocompleter_result.html");
</script>
</body>
</html>

Abbildung 33.3 zeigt das Ergebnis: Wenn Sie ein paar Zeichen in das Textfeld tippen, erscheint die Liste.

Bilder

Abbildung 33.3     Der Autocompleter von script.aculo.us

Wenn Sie den HTTP-Verkehr des Browsers beobachten (etwa mit der Mozilla-Erweiterung LiveHTTPHeaders, wie in Abbildung 33.4 zu sehen), sehen Sie, dass die Eingabe im Textfeld im POST-Request mit übergeben wird. Sie können diese Eingabe also serverseitig abfangen und dementsprechend auf dem Server darauf reagieren.

Bilder

Abbildung 33.4     Die vom Autocompleter von script.aculo.us erzeugte HTTP-Anfrage

Scriptaculous bietet natürlich noch eine Menge mehr, unter anderem praktische Animationen und beeindruckende (und wirklich browser- unabhängige) Drag&Drop-Effekte. Im Wiki unter http://wiki.script. aculo.us/scriptaculous/ finden Sie zusätzliche Dokumentation zu der Bibliothek, Demos und vieles mehr.

 

33.3 Weitere Bibliotheken 
topBilder
topBilder

Eine Suche nach »JavaScript library« bei einer beliebigen Suchmaschine führt zu einer riesigen Zahl von Ergebnissen, und es ist wirklich schwierig, die Spreu vom Weizen zu trennen. Viele der Projekte sind beispielsweise bei SourceForge (http://sourceforge.net/) gehostet; Sie sehen dort auch, wie aktiv ein Projekt ist und wann die letzte Version veröffentlicht worden ist. Es gibt zu viele Karteileichen im Web, und ein aktiv gepflegtes Projekt ist ein Muss.

Besonders interessant ist das Open-Source-Framework Rico, das unter http://openrico.org/ erhältlich ist. Es basiert auch auf Prototype und ist sehr komponentenbasiert, in etwa vergleichbar mit dem Dojo Toolkit (siehe Kapitel 21). Sie können also vorgefertigte Steuerelemente verwenden und die dort gekapselten Features einsetzen. Rico nutzt AJAX sehr intensiv, denn gerade dort macht ein Komponenten-Ansatz viel Sinn, wie es beispielsweise auch die diversen AJAX-Frameworks vormachen.

Prinzipiell bleibt festzuhalten, dass Bibliotheken die Arbeit mit JavaScript sehr erleichtern können. Allerdings erfordern sie am Anfang einen großen Lernaufwand; die Dokumentation dazu ist nur allzu oft sehr unvollständig. Auch sind die qualitativen Unterschiede zwischen den Bibliotheken häufig gravierend, und einst erfolgreiche und gute Projekte werden irgendwann nicht mehr gepflegt, die Browser jedoch entwickeln sich weiter. Spätestens dann ist es Zeit, eine andere Bibliothek einzusetzen oder (noch besser) sich selbst bei der Weiterentwicklung zu engagieren.

Das Tutorial ist ein Auszug aus der 7. Auflage des Buches von Christian Wenz:

JavaScript und Ajax - Das umfassende Handbuch
Galileo Computing, 853 Seiten, 8. aktualisierte Auflage

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Galileo Press.

Mehr Informationen zum aktualisierten Fachbuch für Webentwickler gibt es hier: JavaScript und Ajax
 
Alle Kapitel des Buches:
1 Grundlagen
2 JavaScript-Praxis
3 Professionelles JavaScript
4 Web 2.0 und Ajax
5 Kommunikation
6 Serverseitige Programmierung
7 Sicherheit
8 Praxis
9 Anhang
Bilder


 

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 11.01.2018 - 15:21

Danke für das Tutorial.

Portrait von MaoMao
  • 09.01.2013 - 17:04

Gute Tutorial leicht erklärt.

Portrait von schluggy
  • 25.05.2008 - 17:23

Hätte jetzt etwas mehr erwartet, wenn amns chon von "einige" redet.

x
×
×