Noch ein kleiner, zweiter Teil zu OOP mit JavaScript. Und zwar möchte ich kurz erklären, wie es mit Prototypen möglich ist nachträglich noch Variablen und Methoden zu einem Objekt hinzuzufügen.

Beispiel

Zuerst habe ich hier ein kleines Objekt, welches als Basis des Beispiels dient. Darin hat es eine Variable und eine Methode, die beide Public sind.

// Das Objekt (Klasse) erstellen
meinObjekt=function()
{
    // Eine Variable erstellen
    this.variable="Variable";
    
    // Eine Methode
    this.methode=function()
    {
        alert("Methode");
    }

    return true;
}

Variabeln / Methoden hinzufügen

Nun kann man dem bestehenden Objekt (oder einer Referenz) mit dem Stichwort Prototype neune Variabeln oder Mehthoden hinzufügen. Diese sind dann immer Public, also von überall verfügbar. Das sieht dann so aus:

// Eine neue Variable hinzufuegen
meinObjekt.prototype.neueVariable="Eine neue Variable";

// Eine neue Methode hinzufuegen
meinObjekt.prototype.neueMethode=function()
{
    alert(this.neueVariable);
}

Variabeln / Methoden aufrufen

Um auf die neuen Variabel oder Methoden zuzugreifen erstellt man wie übliche eine Referenz und hat sie nun ganz nortmal zur Verfügung.

// Referenz erstellen
var obj=new meinObjekt;

// Ausgabe der Variable
alert(obj.neueVariable);

// Aufruf der Methode
obj.neueMethode();

Ich bin gerade etwas mit den Scriptaculous Libraries am Pröbeln. Eine sehr nette, und einfache Sache. Einige Teile sind sicher etwas Eyecandy, aber das kommt je länger desto mehr. Auch im Webbereich.
Mit Scriptaculous kann man "Aufklappeffekte" wie ich sie bei meiner Tourenverwaltung habe, ganz einfach und noch etwas schöner realisieren. Dazu benötigt man nur die neusten Scriptaculous (blödes Wort) Libraries. Dieso kopiert man zusammen mit der Datei prototype.js in einen Ordner. Vorzugsweise javascript/. Wie man erahnen kann, basiert Scriptaculous auf Prototype, allerdings muss Prototype nicht zusätzlich heruntergeladen werden.
Nun müssen die Libraries noch in die Seite eingebunden werden. Dies funktioniert wie bei jedem JavaScript. Bei Scriptaculous kann noch angegeben werden, welche Module geladen werden sollen. Dies macht man mit dem load Parameter. Wenn dieser Parameter nicht angegeben wird, werden alle Module geladen. Ich benötige aber nur das Effects Modul also lade ich auch nur dieses.

<script type="text/javascript" language="JavaScript" src="js/prototype.js"></script>
<script type="text/javascript" language="JavaScript" src="js/scriptaculous.js?load=effects"></script>

Auf der Scriptaculous Homepage hat es schon diverse Beispiele zu den verschiedenen Effekten. Mich interessierte der Effekt toggle mehr, da es damit möglich ist, ein Element auf und zu zu klappen. Mit einem Klick auf ein Element kann so ein anderes Element geöffnet oder geschlossen werden. Hier ein simples Codebeispiel.

<div onClick="new Effect.toggle($('element'),'blind')">click</div>
<div id="element"><div>test test test</div></div>

Damit kann man mit einem Click das Element element öffnen und wieder schliessen. Hier wird der Effekt blind verwendet. Wichtig ist, dass im zu öffnenden Element noch ein zusätzlicher Divcontaoiner ist, sonst funktionieren einige Effekte nicht korrekt. Das Beispiel sieht mit etwas zusätzlichem CSS dan so aus:

Oft möchte man es ja so haben, dass das Element von Anfang an geschlossen ist. Dazu kann man ganz einfach das CSS Element display mit dem Wert none benutzen. Das sieht dann so aus.

Zusätzlich gibt es noch die Effekte slide und appear welche mich persönlich nicht so ansprechen. Mit gefällt blind am besten. Zum Schluss aber noch je ein Beipsiel.

Achtung: Lightbox2 verwendet schon Scriptaculous und Prototype. So muss man diese Libraries nicht mehr laden.