Prototype Einführung
Anzeige Hier werben
Was ist Prototype
Prototype ist ein sehr umfangreiches Javascript-Framework und wurde 2005 von Sam Stephenson zur vereinfachten Nutzung von Javascript und zur Verbesserung der Browserkompatibilität entwickelt. Prototype bringt viele nützliche Funktionen mit sich, z.B. stellt es Programmierhilfen für Ajax zur Verfügung. Desweitern werdet Ihr sehen, dass Prototype nicht nur eine Vereinfachung ist, sondern auch den Quellcode erheblich kürzt.
Prototype wird mittlerweile als Grundlage vieler Projekte, wie z.B. http://script.aculo.us/ benutzt.
Weitere Information findet Ihr auf der Webseite von Prototype, die leider nur auf Englisch vorhanden ist!
Was brauche ich damit ich Prototype benutzen kann?
Um Prototype benutzen zu können, müsst Ihr Euch die aktuellste Version des Prototype-Frameworks auf dessen Webseite herunterladen. Grundwissen über Javascript oder anderen Programmiersprachen ist nützlich, aber nicht unbedingt von Nöten.
Das Framework wird innerhalb des <head>-Tags in das HTML-Dokument eingebunden.
1 2 3 4 5 6 7 8 9 10 11 12 | <html>
<head>
<title>Prototype-Framework</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
/* hier kann Javascript-, bzw. Prototypecode angewendet werden */
</script>
</head>
<body>
<!-- HTML -->
</body>
</html>
|
Auf HTML-Elemente zugreifen
Die $-Methode greift auf das HTML-Element mit der entsprechenden ID (hier: 'meinElement') zu. Das entspricht der Funktion document.getElementById() in Javascript. Hierzu ein Beispiel :
1
2
3
4
5
6
7 | // Zugriff auf das Element 'mein Element' ohne Prototype
document.getElementById('meinElement');
// Zugriff auf das Element 'mein Element' mit Prototype
$('meinElement');
<div id="meinElement">Das ist mein Element</div>
|
Auf Klassen zugreifen
Die $$-Methode greift auf Klassen (hier: 'meineKlasse') von HTML-Elementen zu. Hierzu ein Beispiel :
1
2
3
4
5
6 | // Zugriff auf die Klasse 'meineKlasse'
$$('.meineKlasse');
<div class="meineKlasse">1</div>
<div class="meineKlasse">2</div>
<div class="meineKlasse">3</div>
|
Ganz wichtig hierbei ist, dass man bei dieser Methode den kompletten Selektor angeben muss! Sollte man dies vergessen, passiert folgendes :
Das folgende Beispiel zeigt, wie man es nicht machen sollte.
1
2
3
4
5
6 | // Zugriff auf die Klasse 'meineKlasse' mit unvollständigem Selektor
$$('meineKlasse');
<div class="meineKlasse">1</div>
<div class="meineKlasse">2</div>
<div class="meineKlasse">3</div>
|
Hierbei versucht Prototype auf alle <meineKlasse>-HTML-Tags im Dokumment zuzugreifen. Diesen Typ eines HTML-Elements gibt es jedoch im semantischen Web nicht.
Auf Werte zugreifen
Die $F-Methode greift auf den Wert eines HTML-Elements mit der entsprechenden ID zu. Sie entspricht dem Zugriff durch document.getElementById().value in Javascript. Hierzu ein Beispiel :
1
2
3
4
5
6
7 | // Zugriff auf den Wert des Elements 'meinElement' (ohne Prototype)
document.getElementById('meinElement').value;
// Zugriff auf den Wert des Elements 'meinElement' (mit Prototype)
$F('meinElement');
<input type="text" id="meinElement" value="Webmasterpro ist super!"/>
|
Der Aufruf würde in diesem Fall 'Webmasterpro ist super!' zurückgeben.
Zeichenketten teilen
Die $W-Methode teilt Zeichenketten und verwendet als Trennzeichen standardmäßig das Leerzeichen. Sie ist vergleichbar mit der Funktion explode() in PHP.
1 2 | // Zeilen der Zeichenkette 'Webmasterpro ist super!'
$w("Webmasterpro ist super!");
|
Dieser Aufrufe würde ein Array mit dem Inhalt {'Webmasterpro';'ist';'super!'} zurückgeben.
Ereignisbehandlung
Mit observe() (engl. 'Überwachen') kann man HTML-Elemente, bzw. deren Ereignisse überwachen. Es ersetzt in für Javascript gebräuchliche HTML-Attribute wie onhelp, onmousemove, onmousedown, onmouseout, onkeypress, onkeydown, onmouseup, onclick, onkeyup, ondblclick, onmouseover.
Ohne das Prototype-Framework würde man zur Ausgabe von 'Hallo Welt' bei Anklicken des Elements folgenden Code verwenden :
1 | <div id="meinDiv" onclick="alert('Hallo Welt!');">hier klicken</div>
|
Unter Einsatz von Prototype sieht das Beispiel wie folgt aus :
1
2
3
4
5
6
7
8
9 | <script type="text/javascript">
document.observe('dom:loaded', function () {
$('meinDiv').observe('click', function () {
alert('Hallo Welt!');
});
});
</script>
<div id="meinDiv">hier klicken</div>
|
Weitere Beispiele
Die bisher erlernten Grundlagen können wir nun in einem weiteren Beispiel anwenden. Der Inhalt aller Container der Klasse 'meineKlasse' soll durch 'Aktualisiert' ersetzt werden.
Dazu verwendet man die $$-Methode in Verbindung mit der Funktion each() :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type="text/javascript">
document.observe('dom:loaded', function () {
$$('.meineKlasse').each( function ( einElement) {
einElement.innerHTML = 'Aktualisiert';
});
});
</script>
<div class="meineKlasse">Das ist meine Klasse</div>
<div class="meineKlasse">Das ist meine Klasse</div>
<div class="meineKlasse">Das ist meine Klasse</div>
<div class="meineKlasse">Das ist meine Klasse</div>
<div class="meineKlasse">Das ist meine Klasse</div>
<div class="meineKlasse">Das ist meine Klasse</div>
|
Wenn Ihr nun den Quellcode ausführt, werdet Ihr sehen, dass in den Div's nicht mehr "Das ist meine Klasse" steht, sondern "Aktualisiert". Das liegt daran, dass wir auf jedes Element aus dem Array $$('.meineKlasse') ein innerHTML ausführen.
Die Funktion each() entspricht der foreach()-Schleife in PHP. In Pseudocode hieße dies 'Für jedes Element der Klasse meineKlasse tue .. '. Innerhalb der Funktion kann man über die Referenz 'einElement' auf das aktuelle Element zugreifen.
Wenn wir nur ein bestimmtes Div mit der Klasse 'meineKlasse' aktualisieren wollen, müssen wir einen zusätzlichen Parameter (Index) übergeben, dieser gibt den Index des aktuellen Elements an. Da ein Array mit 0 beginnt ändern wir in diesem Beispiel das dritte Div der Klasse "meineKlasse".
1 2 3 4 5 6 7 8 9 10 | document.observe('dom:loaded', function () {
$$('.meineKlasse').each( function ( element, Index ) {
if(Index == 2)
{
element.innerHTML = 'Aktualisiert';
}
});
});
|
Auf den Entwicklungsseiten von Webmasterpro finden sich viele schöne Beispiele für den Einsatz von Prototype:
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "Prototype Einführung" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Prototype Einführung" hier bearbeiten.
-
Ich arbeite als Webentwickler bei der REGIOCAST GmbH & Co KG, seit Aprill 2008. Dort bin ich zuständig für die Seiten des Radiozentrum Kiel's.
-
Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.
-
Student der Biochemie und seit einigen Jahren im Hobby-Entwicklerbereich tätig. Stärken in XHTML/CSS und PHP, alles was mit Grafik zu tun hat, gehört nicht dazu.
-
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
rss zeigt unveröffentliche beiträge
ich wundere mich schon öfters weshalb ich unfertige beiträge zu lesen kriege. ich finds natürlich toll dass ich immer so auf dem laufenden bin aber vllt sollte man mal die rss-feed funktion überprüfen. denn darüber komme ich an die beiträge oder sind die doch schon veröffentlicht?
grüße,
david
Re: rss zeigt unveröffentliche beiträge
Also am 11.6 wurde der Beitrag hier veröffentlicht. Hat glaub ich alles schon seine Richtigkeit.
Was fehlt noch?
Hi Marcel,
was muss noch gemacht werden bis zur Veröffentlichung. Der Artikel ist klasse und es wäre
schade wenn er "verstaubt".
Grüße Fabian
Re: Was fehlt noch?
ich weiß nicht... Irgend was fehlt da noch finde ich.. aber ich schreibe den noch diese Woche zu Ende versprochen ;)