Prototype (Klassenbibliothek)

Prototype
Basisdaten
Entwickler	Sam Stephenson
Aktuelle Version	1.5.1.1 (19. Juni 2007)
Betriebssystem	unabhängig
Programmier­sprache	JavaScript
Kategorie	JavaScript-Framework
Lizenz	MIT-Lizenz
deutschsprachig	nein
www.prototypejs.org

Prototype ist ein freies, sehr umfangreiches JavaScript-Framework, das von Sam Stephenson im Jahre 2005 entwickelt wurde. Es stellt sowohl verschiedene Programmierhilfen für Ajax zur Verfügung als auch Möglichkeiten den JavaScript-Quelltext zu verkürzen. Es ist ein integraler Bestandteil von Ruby on Rails, aus dessen Reihen es entstanden ist. Inzwischen dient Prototype als Grundlage für zahlreiche Projekte wie beispielsweise script.aculo.us und Rico.

Funktionen

Prototype stellt viele Funktionen für die Entwicklung von JavaScripts bereit. Dies reicht von Kurzbefehlen (Shortcuts) bis hin zu aufwändigeren Funktionen wie z.B. die für XMLHttpRequest.

Funktionsbeispiele

Die $()-Funktion

Um ein DOM-Element einer HTML-Seite anzusprechen, wird üblicherweise diese Funktion angewandt:

 document.getElementById("id_of_element")

Die $()-Funktion von Prototype verkürzt die Anwendung folgendermaßen:

 $("id_of_element")

Die Funktion kann als Ersatz für die getElementById() Funktion verwendet werden, um z.B. die CSS Textfarbe zu ändern:

 $("id_of_element").style.color = "#ffffff";

Oder noch kürzer, nach "Prototype Art":

 $("id_of_element").setStyle({color: '#ffffff'});

Vor Version 1.5 sah dies wie folgt aus:

 Element.setStyle("id_of_element", {color: "#ffffff"});

Die $F()-Funktion

Aufbauend auf die $()-Funktion kann mittels $F() der Wert eines Form-Elements angesprochen werden. Bei einem Textfeld liefert die Funktion die im Feld befindlichen Daten; bei einem Select-Objekt (Dropdown-Menü) den aktuell ausgewählten Eintrag.

 $F("id_of_input_element")

Das Ajax Objekt

Zum Ziel wurde hierbei gesetzt, den Umgang mit der XMLHttpRequest-Funktion zu erleichtern und eine auf unterschiedliche Browser individuell zugeschnittene Programmierung überflüssig zu machen.

Es stehen folgende zwei Arten zum Abruf zur Verfügung: Ajax.Request liefert die rohe und unformatierte XML-Ausgabe; Ajax.Updater schreibt die Server-Response direkt in ein angegebenes [[DOM]-Objekt.

Der Ajax.Request-Aufruf im folgenden Beispiel liest zuerst die Werte aus den Formular-Textfeldern aus, ruft eine Webseite vom Webserver ab, wobei die Formulardaten als Post-Werte gesendet werden und ruft schlussendlich die definierte Funktion showResponse() auf, sobald die Anfrage erledigt wurde:

var value1 = escape($F("name_of_id_1"));
var value2 = escape($F("name_of_id_2"));
var url = "http://www.example.com/path/server_script";
var pars = "value1=" + value1 + "&value2=" + value2;
 
var myAjax = new Ajax.Request(
   url,
       {
		method: "post",
		parameters: pars,
		onComplete: showResponse
       });

Objekt orientierte Programmierung

Prototype bietet Unterstützung für klassische objektorientierte Programmierung.

Die Methode Class.create() im folgenden Beispiel legt eine neue Klasse an:

var FirstClass = Class.create();
FirstClass.prototype = {
   // The initialize method serves as a constructor
   initialize: function () {
       this.data = "Hello World";
   }
};
 
var DataWriter = Class.create();
DataWriter.prototype = {
    printData: function () {
        document.write(this.data);
    }
};
Object.extend(DataWriter, FirstClass);

Weblinks

• http://www.prototypejs.org – Offizielle Prototype-Webseite
• Developer Notes for prototype.js (englisch)