Prototype Einführung at Maschinendenk

Prototype Einführung

Das Prototype Javascript Framework bietet eine Fülle von nützlichen Funktionen bei der Entwicklung dynamischer Webanwendungen.
Allerdings erschliesst sich vielen der grosse Funktionsumfang nicht sofort. Diese Einführung soll einen Überblick über die wichtigsten Funktionen und Methoden des Protoype Frameworks bieten.

Einbindung

Die Einbindung von Prototype ist denkbar einfach.
Das Script wird einfach im HEAD Bereich der HTML Seite eingebunden.

<head>
<script type = "text/javascript" src = "prototype.js"></script>
</head>

Helfermethoden

Prototype bietet eine Reihe von Helfermethoden, die im folgenden näher besprochen werden:

$
$$
$F
try.these
$w
document.getElementsByClassName

Die Helfermethoden sind im wesentlichen Shortcuts für häufig benötigte DOM Funktionen.
Die bekannteste, und wohl am häufigsten verwendete Methode ist dabei $(), die benutzt wird um Element IDs oder, DOM References im Dokument zu manipulieren. $() geht dabei weit über einen Shortcut zu document.getElementById() hinaus.

$

Beispiel:

$(element1,element2).style.visibility = 'hidden';

Der $() Methode können beliebig viele Referenzen zu Elementen (Element ID oder DOM Referenz) übergeben werden.
In diesem Beispiel würden element1 und element2 unsichtbar gemacht, indem ihr “visibility” parameter auf “hidden” gesetzt wird.

Ein weiteres Beispiel:

<head>
<script type = "text/javascript">
function rotmachen(element)
{
$(element).style.color = '#FF0000';
return true;
}
</head>
<body>
<p id = "absatz1" onmouseover = "rotmachen(this);">
Text
noch mehr text
</p>
</body>

Die Funktion rotmachen() nimmt ein beliebiges Element und ändert seine Farbe mittels $() in rot.

$$

Die $$() Funktion nimmt eine beliebige Anzahl von CSS Selektoren auf und gibt ein Array aus, um Prototype Methoden erweiterten, DOM Elementen zurück.
Beispiele:

$$('div');

Alle DIV Elemente im Dokument.

$$('li.blau');

Alle Listenelemente mit der Klasse “blau” .

$F

$F ist im wesentlichen ein Shortcut zu Form.Element.getValue()
Es gibt den Wert eines beliebigen Formularelements zurück.

Beispiel:

var meintext = $F('textfeld');
$('meinabsatz').innerHTML = meintext;

Hier wird der Wert des Feldes “textfeld” im Textabsatz (p) “meinabsatz” angezeigt.

try.these

try.these ist im Grunde eine Abwandlung der try()…catch() Syntax von Javascript.
try.these nimmt eine beliebige Anzahl von Funktionen entgegen, und gibt das ergebnis der ersten Funktion die keinen Fehler wirft zurück.

Beispiel:

try.these(function1(),function2(),alert('function1 und 2 haben false ergeben'));

In diesem Beispiel wird zuerst die Funktion “function1″ dann die die Funktion “function2″ versucht, wenn beide fehlschlagen wird mittels alert() die Nachricht “function1 und 2 haben false ergeben” ausgegeben.

$w

Die $w Methode splittet einen String in ein Array auf. Dabei wird nach jedem Leerzeichen des Strings ein neues Array Element erzeugt.

Beispiel:

meinarray = $w('dies ist ein satz');

Hier wird der String “dies ist ein satz” in ein array “meinarray” das schliesslich die einzelnen Worte als Elemente enthält aufgesplittet.

document.getElementsByClassName

Die document.getElementByClassName() Methode erlaubt es alle Elemente in einem Dokument, die eine bestimmte CSS Klasse haben manipulieren.
Beispiel:

document.getElementsByClassName('klasse').style.color='#FF0000';

In diesem Beispiel wird die Farbe aller Elemente mit der Klasse “klasse” auf rot geändert.

Maschinendenk