Prototype

aus Wikipedia, der freien Enzyklopädie

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.

[Bearbeiten] 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.

[Bearbeiten] Funktionsbeispiele

[Bearbeiten] Die $()-Funktion

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

document.getElementById("id_des_elements")

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

$("id_des_elements")

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

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

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

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

Vor Version 1.5 sah dies wie folgt aus:

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

[Bearbeiten] 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")

[Bearbeiten] 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 params = $H({
        value1: $F("name_of_id_1"),
        value2: $F("name_of_id_2")
});
 
var url = "http://www.example.com/path/server_script";
 
var myrequest = new Ajax.Request(url, {
        method: "post",
        parameters: params,
        onComplete: showResponse
});

[Bearbeiten] Objektorientierte 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({
   // Die Methode "initialize" dient als Konstruktor
   initialize: function () {
       this.data = "Hello World";
   }
});
 
var DataWriter = Class.create(FirstClass, {
    printData: function () {
        document.write(this.data);
    }
});

[Bearbeiten] Weblinks

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