Prototype (Klassenbibliothek)

Prototype
[[Datei:|150px]]
Basisdaten
Maintainer
Entwickler	Sam Stephenson
Erscheinungsjahr
Aktuelle Version	()
Aktuelle Vorabversion	()
Betriebssystem	plattformunabhängig
Programmier­sprache	JavaScript
Kategorie	JavaScript-Klassenbibliothek
Lizenz	MIT-Lizenz
prototypejs.org

Prototype ist eine freie, umfangreiche JavaScript-Klassenbibliothek, die von Sam Stephenson im Jahr 2005 entwickelt wurde. Sie stellt sowohl verschiedene Programmierhilfen für Ajax zur Verfügung als auch Möglichkeiten, den JavaScript-Quelltext zu verkürzen. Sie entstand im Kontext von Ruby on Rails und war bis Version 3.1 dessen integraler Bestandteil. Zwischenzeitlich diente 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 Zugriff auf ein DOM-Element einer HTML-Seite zu erhalten, wird üblicherweise diese Funktion angewandt:

<syntaxhighlight lang="javascript">

document.getElementById("id_des_elements")

</syntaxhighlight>

Die $()-Funktion von Prototype liefert ebenfalls DOM-Elemente über IDs, erweitert die zurückgelieferten Elemente aber noch mit nützlichen Funktionen:

<syntaxhighlight lang="javascript">

$("id_des_elements")

</syntaxhighlight>

Um z. B. die Textfarbe zu ändern:

<syntaxhighlight lang="javascript">

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

</syntaxhighlight>

Die $F()-Funktion

Mittels $F() erhält man den Wert eines Form-Elements. Bei einem Textfeld liefert die Funktion die im Feld befindlichen Daten; bei einem Select-Objekt (Dropdown-Menü) den aktuell ausgewählten Eintrag.

<syntaxhighlight lang="javascript">

$F("id_of_input_element")

</syntaxhighlight>

Das Ajax-Objekt

Das Ajax-Object bietet vom Browser unabhängige Unterstützung für XMLHttpRequest.

Es stehen folgende zwei Arten zum Abruf zur Verfügung: Ajax.Request liefert die rohe Server-Antwort; Ajax.Updater schreibt die Server-Antwort 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:

<syntaxhighlight lang="javascript"> var params = $H({ value1: $F("id_1"), value2: $F("id_2") });

var myrequest = new Ajax.Request("http://www.example.com/server_script", { method: "POST", parameters: params, onComplete: showResponse }); </syntaxhighlight>

Objektorientierte Programmierung

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

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

<syntaxhighlight lang="javascript" > var FirstClass = Class.create({

  // Die Methode "initialize" dient als Konstruktor
  initialize: function () {
      this.data = "Hello World";
  }

});

var DataWriter = Class.create(FirstClass, {

   printData: function () {
       document.write(this.data);
   }

});

</syntaxhighlight>

Einzelnachweise

<references />

Weblinks

• Offizielle Webpräsenz (englisch)
• Developer Notes for prototype.js bezieht sich auf die veraltete Version 1.5.0 (englisch)