Hauptmenü

Untermenü

OOP/DOM-Scripting JavaScript - Praxistutorial 4 - Das Ende

1. Die Abschnitte

2. Die Lösung

... des im vorherigen Abschnitts geschilderten Problems ist ganz einfach. Man definiert eine Bedingung, die prüft, ob es im Array order das Element(klick + 1) gibt. Dann wird der bisherige Code ausgeführt. Ansonsten ruft man die Methode finishGlorification auf.


function moveForward(klick)
{
  if (order[(klick 1)])
  {
    ...
  }
  else
  {
    finishGlorification(klick);
  }
}

3. Die Methode finishGlorification


function finishGlorification(klick)
{
  var ele document.getElementById('navi').parentNode 
  ele.removeChild(document.getElementById('navi'));
  data.content.innerHTML data.texte[input[klick]];
}

Erläuterung

Wenn der letzte Link ("Zitat") angeklickt wurde, so wird das Elternelement von document.getElementById ('navi').parentNode> angesteuert, also das <div class="wrapper">. Dann entfernen wir die komplette Navigation aus dem DOM-Baum mittels ele.removeChild (document.getElementById ('navi'));. Gut, das gehört genau genommen zur DOM-Manipulation, ich zeige es euch auch nur kurz. Der Vorteil bei dieser Lösung liegt darin, dass die Navigation in den Orkus befördert wurde und nun keiner mehr auf den Link "Zitat" klicken kann. Ist auch eine Möglichkeit.

Außerdem prangt jetzt für alle Ewigkeit ein Text in euerm Browser, den ihr nie loswerden werdet. ... OK, vergesst das. Ein Hinweis noch zu dem tierisch langen String von data.texte.zitat. Der muss in einer(!) Zeile stehen! Denn sonst fliegt euch eine Fehlermeldung um die Ohren. Leider kann man hier auch nicht mit einer Zeichenkettenverknüpfung arbeiten. Ist halt so.

4. Globale Überwachung

Nein, ich rede jetzt nicht von dem, was diverse Regierungen gerne machen, sondern von etwas, mit dem man zum Beispiel ein Klick-Event im gesamten Dokument abfangen kann. Dazu platziere man in diesem Beispiel außerhalb jedweder Konstruktorfunktion den folgenden Code.


document.onclick = function(evt)
{
  var evt = (window.event) ? window.eventevt;
  var ele = (evt.target) ? evt.target evt.srcElement;
  if (ele.id)
  {
    console.log(ele.id);
  }
}

Erläuterung

Leider wurde das event in den einzelnen Browsern mal wieder völlig unterschiedlich implementiert. Normalerweise wird es nämlich beim Aufruf der Funktion als Parameter (evt) übergeben. Nur nicht beim Internet Explorer 8. Der benötigt einen direkt Verweise darauf (window.event: evt).

Das gilt leider auch für die Ermittlung des Elements, auf dem der Event ausgelöst wurde. Das W3C sagt target, Winzigweich dagegen srcElement. Egal, ich habe mich schon genug über deren proprietäre Formate ausgelassen. Also, wenn in diesem Fall das angeklickte(!) Element über eine ID verfügt, so wird die zumindest im Firefox über Firebug ausgegeben. Wenn ihr andere Browser benutzt, so macht aus dem console.log einfach ein alert. Oder was Vergleichbares.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt