OOP/DOM-Scripting JavaScript - Praxistutorial 1 - Die Methoden im Detail
1. Die Abschnitte
- Einführung
- Vorbereitung
- Die Konstruktorfunktion
- Die Event-Handler
- Die Variablen
- Die Methoden im Detail
- Alternative Event-Handler
2. Ein Tipp vorab
Sehr oft machen Anfänger (und nicht nur die) den Fehler, ihre Funktionen/Methoden mit allen möglichen Dingen zu überfrachten. Die Folge davon sind riesengroße Codeblöcke, durch die man irgendwann nicht mehr durchblickt. Bemüht euch, die so klein wie möglich zu halten. Lieber 20 Funktionen/Methoden à 30 Zeilen Code als 4 à 150 Zeilen Code. Versucht, mit einer Funktion eine Aufgabe zu lösen und greift dann bei Bedarf auf andere zurück, die genau so arbeiten. Obwohl das in diesem Tutorial ein wenig schwer wird, weil wir nicht viel Code haben, so möchte ich es euch doch zeigen.
3. this.menue
this.menue = function (id, anzahl, posi)
{
hovered = id;
fieldnum = anzahl;
start_point = posi;
handler();
}
Erläuterung
Eine Aufgabe pro Funktion. In diesem Fall legen wir einfach nur die Ausgangswerte fest, hovered
für die aktuelle
ID des Untermenüs, fieldnum
für die Anzahl der Einträge und start_point
für die Ursprungsposition.
Für die weitere Verarbeitung rufen wir dann die Methode/Funktion handler
auf.
4. handler
function handler ()
{
if (last_hovered != hovered)
{
rutschRunter();
}
if (last_hovered && last_hovered != hovered)
{
rutschRauf();
}
last_hovered = hovered;
last_fieldnum = fieldnum;
}
Erläuterung
Hier wird nur eine einfache Fallunterscheidung getroffen, also welches Element hoch- oder runterrutscht. Dafür werden dann
die entsprechenden Methoden/Funktionen rutschRunter
und rutschRauf
aufgerufen. last_hovered
und last_fieldnum
stehen dabei für die ID des aktuell ausgeklappten Untermenüs sowie dessen Anzahl an Einträgen.
Damit das auch sauber funktioniert, werden diese Variablen erst nach den Funktionsaufrufen definiert.
5. rutschRunter
, rutschRauf
function rutschRunter()
{
document.getElementById(hovered).style.top = start_point + 'px';
for (i = start; i < stop; i++)
{
runter = parseInt(document.getElementById(hovered).style.top)
+ (i * fieldnum);
setTimeout("document.getElementById('" + hovered
+ "').style.top = '"+ runter + "px';" , i * zeit);
}
}
function rutschRauf ()
{
document.getElementById(last_hovered).style.top =
parseInt(document.getElementById(last_hovered).style.top)
- 1 + 'px';
for (i = start; i < stop; i++)
{
rauf = parseInt(document.getElementById(last_hovered).
style.top) - (i * last_fieldnum);
setTimeout("document.getElementById('" + last_hovered
+ "').style.top = '" + rauf + "px';" , i * zeit);
}
}
Erläuterung
Oberhalb der for
-Schleife setze ich eine Anfangspositionen, um eine saubere Verarbeitung zu gewährleisten.
Dann könnt ihr auch wie die Bekloppten mit eurer Maus über die Menüs fahren und trotzdem funktioniert es. Der Rest ist einfache
Mathematik, wo wir in den Schleifen einfach der CSS-Anweisung style.top
entsprechend die jeweils neuen Werte
übergeben. Da das aber mit DOM-Scripting im eigentlichen Sinne herzlich wenig tun hat, werde ich auf die Details nicht weiter
eingehen. Wen es interessiert, der kann es sich ja genauer ansehen.
Ein Hinweis
Dieses elende Rumgetippe mit document.getElementById
kann man auch vereinfachen. Allerdings gibt es da ein paar
Probleme mit der setTimeout
-Syntax, die herrgottnochmal unbedingt die entsprechende Anweisung in Anführungszeichen
gesetzt haben will. Und dann klappt das nicht mehr mit einer entsprechenden Referenz. Sobald ich Zeit und Muße habe, nehme ich
mich dessen mal an.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt