Hauptmenü

Untermenü

OOP/DOM-Scripting JavaScript - Praxistutorial 1 - Die Methoden im Detail

1. Die Abschnitte

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 (idanzahlposi)
{
  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 (startstopi++)
  {
    runter parseInt(document.getElementById(hovered).style.top) 
             + (fieldnum);
    setTimeout("document.getElementById('" hovered 
             "').style.top = '"runter "px';" zeit);
   }
}
            
function rutschRauf ()
{
  document.getElementById(last_hovered).style.top = 
    parseInt(document.getElementById(last_hovered).style.top) 
      - 'px';
  for (startstopi++)
  {
    rauf parseInt(document.getElementById(last_hovered).
           style.top) - (last_fieldnum);
    setTimeout("document.getElementById('" last_hovered 
           "').style.top = '" rauf "px';" 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