OOP/DOM-Scripting JavaScript - Praxistutorial 4 - Die weiteren Schritte
1. Die Abschnitte
- Einführung
- Vorbereitung
- Initialisierung
- Beginn der Lobpreisung
- Die weiteren Schritte
- Das Ende
- Fazit
2. Die Sache mit Parameter
Nun wollen wir uns Stück für Stück durch die Navigation klicken und dabei eigentlich immer dasselbe machen. Link mit Event-Listener
belegen, Inhalt einfügen, Event-Listener entfernen und zum nächsten Link hüpfen. Dafür benötigen wir ein Array, in dem wir die entsprechenden
Elemente ablegen. Das erklärt auch den Wert 0 im vorherigen Abschnitt, denn dabei geht es um den ersten Link.
3. Wir haben doch schon die Elemente
..., werden jetzt einige von euch denken. Ja, die existieren, aber nicht als Array! Die Feinheiten dazu findet ihr hier und Punkt 3. Jetzt könnte man auf die Idee kommen, das im Literal abzubilden. Und zwar so.
order : new Array (this.headline, this.text, ...),
Denkste!
Das funktioniert nicht. Denn this verweist mal wieder auf was? Genau, auf das gottverdammte window-Objekt. Wenn
ich den Kerl erwische, der dafür verantwortlich ist! Also bauen wir der Einfachheit halber das Array in die Konstruktorfunktion
Glorification ein.
function Glorification()
{
var order = new Array (data.headline, data.text, ...);
...
}
Und wo wir schon dabei sind, ergänzen wir das um ein weiteres Array, das wir für die Texte benötigen. Was das soll, erzähle ich euch gleich.
var input = new Array ('headline', 'text', ...);
Ach ja, die Pünktchen in den beiden Arrays ergänzt ihr mal selber. Ein Tipp, es geht um die Elemente von headline bis
zitat.
4. Die Methode moveForward
... zeige ich euch erst mal zur Gänze und werde sie dann erklären.
function moveForward(klick)
{
order[klick].style.background = '#fff';
order[klick].style.color = '#000';
order[(klick + 1)].style.background = '#dadada';
data.content.innerHTML += data.texte[input[klick]];
that.addHandler (order[(klick + 1)], 'click', function()
{
moveForward(klick + 1);
that.removeHandler (order[(klick + 1)], 'click', arguments.callee);
}
);
}
Erläuterung
Die ersten drei Zeilen in der Methode sollten euch bekannt vorkommen. Denn hier machen wir nichts anderes als in
startGlorification. Nur greifen wir diesmal auf die Element-Referenzen im Array order zu. Dadurch werden die
aktiven Links optisch hervorgehoben und die inaktiven nicht.
Dann fügen wir mit data.content.innerHTML weiteren HTML-Code aus texte in das entsprechende
<div>-Element mit der ID content ein. Der Rest ist auch nichts Neues, dem nächsten Element
(order[(klick + 1)] wird der Event-Listener verpasst und über das that.removeHandler... beim erstem
Klick wieder entfernt.
Der Clou bei der ganzen Sache ist der Parameter klick, der einfach raufgezählt wird. Und dank der beiden Arrays zur Steuerung
funktioniert das auch wunderbar. Vorausgesetzt, ihr habt eine identische Reihenfolge.
Aber!
Die ganz Schlauen unter euch werden einwenden, dass das irgendwann mal tierisch knallen wird. Nämlich, wenn wir beim letzten Element (dem "Zitat" angekommen sind. Wohl wahr! Und darum werden wir das nun entsprechend abfangen.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt