Index
Was ist Prototype?
Bei Prototype handelt es sich um ein Standardkompatibles JavaScript Framework, das von Sam Stephenson entwickelt wurde. Prototype liegt zur Zeit in der Version 1.4.0 vor und kann von der Webseite des Entwicklers bezogen werden. Der bestens durchdachte und optimiert geschriebene Code hilft Ihnen bei der Entwicklung von interaktiven Webanwendungen, welche die Techniken von Web 2.0 charakterisieren. Die Bibliothek bietet zahlreiche vordefinierte Objekte und utility-Funkionen an, deren Hauptaufgabe es ist, Ihnen Tipparbeit abzunehmen. Die Dokumentation für die Prototype-Bibliothek ist leider sehr dürftig ausgefallen, weswegen der Start anfangs schwerfällt. Im folgenden soll ein kurzer Überblick über Funktion, Anwendung und die Vorteile bei der Arbeit mit Prototype gegeben werden.
Die $() - Funktion
Bei der $()-Funktion handelt es sich um eine Abkürzung für die häufig benötigte document.getElementById Funktion des Document Object Model (DOM). Genauso wie das Vorbild, liefert die Funktion eine Referenz zu einem Element zurück, welches über das id-Attribut als Argument übergeben wurde. Im Gegensatz zur Vorbild-Funktion des DOM, wo immer nur ein Element angefordert werden kann, ist es hier auch möglich, mehrere Elemente anzufordern. $() gibt dann ein Array mit den entsprechenden Elementen zurück.
Anwendungsbeispiel
Anwendungsbeispiel mehrere Elemente
Anwendungsbeispiel
<script src="prototype.js"></script>
<script type="text/javascript">
function getElement1() {
var element1 = $('einElement');
alert(element1.innerHTML);
}
</script>
<script type="text/javascript">
function getElement1() {
var element1 = $('einElement');
alert(element1.innerHTML);
}
</script>
Anwendungsbeispiel mehrere Elemente
<script src="prototype.js"></script>
<script type="text/javascript">
function getElement2() {
var elemente = $('einElement', 'einWeiteresElement');
for(i=0; i<elemente.length; i++) {
alert(elemente[i].innerHTML);
}
}
</script>
<script type="text/javascript">
function getElement2() {
var elemente = $('einElement', 'einWeiteresElement');
for(i=0; i<elemente.length; i++) {
alert(elemente[i].innerHTML);
}
}
</script>
Die $F() - Funktion
Auch die $F() Funktion ist eine willkommene Abkürzung. Sie gibt den Wert beliebiger Formularelement des Typs input (z.B. Textfelder oder Auswahlmenüs) zurück. Die Funktion erwartet als Argument entweder die ID des Elements oder das Element als Objekt selbst.
<script type="text/javascript">
function ftest() {
alert( $F('username') );
}
</script>
<input type="text" id="username" value="Ernie" />
function ftest() {
alert( $F('username') );
}
</script>
<input type="text" id="username" value="Ernie" />
Die $A() - Funktion
Die $A() Funktion konvertiert ein übergebenes Argument in ein Array-Objekt. Zusammen mit den Erweiterungen der Arrayklasse wird damit das kopieren oder konvertieren von Listen in Array Objekte vereinfacht. Ein Anwendungsbeispiel ist das Konvertieren einer DOM NodeLists in ein Array.
Erweiterung zur Array Klasse
<script>
function optionenliste() {
var NodeListe = $('users').getElementsByTagName('option');
var nodes = $A(NodeListe);
nodes.each(function(node) {
alert(node.nodeName + ': ' + node.innerHTML);
});
}
</script>
<select id="users" size="10">
<option value="5">Müller, Herbert</option>
<option value="8">Ziegler, Monika</option>
<option value="1">Becker, Thomas</option>
</select>
<input type="button" value="Liste der Optionen" onclick="optionenliste();" />
function optionenliste() {
var NodeListe = $('users').getElementsByTagName('option');
var nodes = $A(NodeListe);
nodes.each(function(node) {
alert(node.nodeName + ': ' + node.innerHTML);
});
}
</script>
<select id="users" size="10">
<option value="5">Müller, Herbert</option>
<option value="8">Ziegler, Monika</option>
<option value="1">Becker, Thomas</option>
</select>
<input type="button" value="Liste der Optionen" onclick="optionenliste();" />
Erweiterung zur Array Klasse
| Methode | Argumente | Beschreibung |
|---|---|---|
| clear() | (none) | Leert das Array und gibt es zurück |
| compact() | (none) | Gibt das Array ohne Werte die Null oder Nicht Definiert sind zurück. Die Methode ändert das Array nicht. |
| first() | (none) | Gibt das erste Element des Arrays zurück |
| flatten() | (none) | Gibt ein flaches, eindimensionales Array zurück. Dafür wird das Array rekursiv nach Elementen die selbst Arrays sind durchsucht, und deren Elemente in das zurückzugebene Array eingefügt. |
| indexOf(wert) | wert: Suchbegriff | Gibt die Position des Suchbegriffs im Array zurück (Beginnend bei 0). Gibt -1 zurück, wenn der Suchbegriff nicht gefunden wird. |
| inspect() | (none) | Gibt eine formatierte String Darstellung mit den Elementen des Arrays zurück. |
| last() | (none) | Gibt das letzte Element des Arrays zurück. |
| reverse([applyToSelf]) | applyToSelf: Legt fest ob auch das Array selbst umgekehrt wird. | Gibt das Array in umgekehrter Reihenfolge zurück. Wenn kein Argument oder trueübergeben wird, wird das Array selbst auch umgekehrt, ansonsten bleibt es unverändert. |
| shift() | (none) | Gibt das erste Arrayelement zurück und entfernt dieser Aus dem Array. Die Arraylänge wird dabei um 1 reduziert. |
| without(wert1 [, wert2 [, .. wertN]]) | wert1 .. wetN: Werte die Ausgeschlossen werden, falls im Array vorhanden | Gibt das Array ohne die Elemente, die als wert1 .. wertN übergeben werden, zurück. |
Die $H() - Funktion
Die $H() Funktion konvertiert mehrere Objekte in Hash-Objekte, die einem assoziativen Array ähneln. Die Funktion wird anhand eines Beispiels schnell deutlich.
Ausgegeben wird: first=10&second=20&third=30
Das Hash Objekt
Jeder Eintrag in einem Hash Objekt ist ein Array mit zwei Elementen. Diese stellen jeweils eine Schlüssel-Wert Zuordnung (key : value) dar.
<script type="text/javascript">
function testHash() {
var a = { // erstellen des Objektes
first: 10,
second: 20,
third: 30
};
var h = $H(a); // umwandeln in einen Hash-Wert
alert(h.toQueryString());
}
</script>
function testHash() {
var a = { // erstellen des Objektes
first: 10,
second: 20,
third: 30
};
var h = $H(a); // umwandeln in einen Hash-Wert
alert(h.toQueryString());
}
</script>
Ausgegeben wird: first=10&second=20&third=30
Das Hash Objekt
Jeder Eintrag in einem Hash Objekt ist ein Array mit zwei Elementen. Diese stellen jeweils eine Schlüssel-Wert Zuordnung (key : value) dar.
| Methode | Argumente | Beschreibung |
|---|---|---|
| keys() | (none) | Gibt ein Array zurück, das die Schlüssel (keys) aller Einträge enthält. |
| values() | (none) | Gibt ein Array zurück, das die Werte (values) aller Einträge enthält. |
| merge(otherHash) | otherHash: Hash Objekt | Kombiniert das Hash Objekt mit dem übergebenen Hash Objekt und gibt das neu entstandene Hash Objekt zurück. |
| toQueryString() | (none) | Gibt alle Einträge des Hash als formatierter String zurück (Beispiel: schlüssel1=wert1&schlüssel2=wert2&schlüssel3=wert3) |
| inspect() | (none) | Gibt eine formatierte String Darstellung mit den Elementen (jeweils Schlüssel:Wert Paare) des Hash aus. |
Die $R() - Funktion
Die $R() Funktion ist eine Vereinfachung für die Schreibweise new ObjectRange(lowerBound, upperBound, excludeBounds). Das folgende Beispiel zeigt die Anwendung.
<script type="javascript">
function demoDollar_R() {
var range = $R(10, 20, false);
range.each(function(value, index) {
alert(value);
});
}
</script>
<input type="button" value="Test $R" onclick="demoDollar_R();" />
function demoDollar_R() {
var range = $R(10, 20, false);
range.each(function(value, index) {
alert(value);
});
}
</script>
<input type="button" value="Test $R" onclick="demoDollar_R();" />
Die Try.these() - Funktion
Die Try.these() Funktion erlaubt es Ihnen, nacheinander verschiedene Funktionsaufrufe auszuführen. Dies geschieht so lange, bis einer der Aufrufe erfolgreich beendet wird. Die Try.these() Funktion erwartet eine Anzahl von Funktionen als Argumente. Diese werden dann der Reihe nach aufgerufen bis die erste Erfolgreich war.
Die Funktion xmlNode.text wird in einigen Browsern erfolgreich ausgeführt. Falls der Aufruf jedoch nicht erfolgreich ist, so erfolgt der Aufruf von xmlNode.textContent.
Die Funktion xmlNode.text wird in einigen Browsern erfolgreich ausgeführt. Falls der Aufruf jedoch nicht erfolgreich ist, so erfolgt der Aufruf von xmlNode.textContent.
<script>
function getXmlNodeValue(xmlNode) {
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;}
);
}
</script>
function getXmlNodeValue(xmlNode) {
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;}
);
}
</script>
Validation Info
Dieses Dokument entspricht den aktuellen HTML / CSS Standards.
