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.event: evt;
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