Die meisten Leser stecken ihre Bücher in die Bibliothek, die meisten Schriftsteller stecken ihre Bibliothek in ihre Bücher. – Nicholas Chamfort

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 

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>

Hier klicken, um das Bild zu Vergrößern

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:

first() – liefert das erste Element.

last() – liefert das letzte Element.

compact() – liefert alle nicht-leeren Elemente.

flatten() – wandelt ein mehrdimensionales Array in ein eindimensionales um.

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.