OOP/DOM-Scripting JavaScript - Praxistutorial 4 - Einführung
1. Die Abschnitte
2. Das Ziel
In diesem Tutorial werden wir mal verschiedene Techniken der OOP miteinander kombinieren. Und was besonders wichtig ist, hier zeige ich euch, wie man dynamisch mit Event-Listenern arbeitet und was es dabei für Problem gibt.
3. Vorrausetzungen
Bevor ihr euch wie ausgehungerte Wölfe auf dieses Tutorial stürzt, solltet ihr vorher auf jeden Fall die Theorie zum DOM-Scripting und zu OOP mit JavaScript durchgearbeitet haben. Denn die grundsätzlichen Dinge werde ich hier nicht mehr erklären.
Der Internet Explorer
Wer über Windows Vista oder 7 verfügt und schon den IE 9 oder höher am Laufen hat, sollte irgendwie zusehen, dass er/sie noch eine ältere Version zur Verfügung hat. Denn bei denen gibt es einen gravierenden Unterschied zum neuesten Machwerk aus dem Hause Winzigweich.
3. Die Vorgehensweise
Diesmal werdet ihr mich lobpreisen! Und ähnlich wie in vielen Religionen geschieht das nach einem vorgegebenen Schema. Nicht dass ich jetzt größenwahnsinnig geworden bin, aber mir ist nichts Besseres eingefallen.
Ein wichtiger Hinweis
Neben den Problemen beim Event-Listening werde ich in diesem Tutorial unterschiedliche Möglichkeiten der Programmierung miteinander kombinieren. Und dabei nehme ich keinerlei Rücksicht darauf, ob das nun sinnvoll ist oder nicht. Das wirkt an der einen oder anderen Stelle vielleicht irritierend, aber nur so lernt ihr, die verschieden Varianten kennen zu lernen. Und dabei werdet ihr von ganz allein im Laufe der Zeit herausfinden, wann man was sinnvoll einsetzt.
Außerdem möchte ich hier im praktischen Einsatz auf die Probleme hinweisen, die es bei der Verwendung von this geben kann.
Einen ersten Einstieg dazu habe ich hier schon abgeliefert.
4. Die Daten
Den Basiscode und die Lösung für dieses Tutorial findet ihr rechts unter dem Punkt "Daten". Folgende Dateien müssen vorhanden sein.
Dateien
listener.htmlistener.jsstyles.css-
pics(Ordner)moi.jpg
5. Bereits vorhandener Code
HTML/CSS
Wie auch schon in anderen Tutorials habe ich ein wenig für euch schon vorbereitet. Die Stylesheet-Anweisungen existieren bereits, ebenso
wie der HTML-Code. Auch wenn es mal wieder greulich aussieht. Gut, hier könnte ich auch die korrekte Rechtschreibung nehmen und von gräulich
reden. Mache ich aber aus Prinzip nicht. Den HTML-Code solltet ihr euch auf jeden Fall ansehen. Konzentriert euch dabei
auf alle Elemente, die über das Attribut id verfügen.
JavaScript
Darüber hinaus gibt es auch schon ein klein wenig JavaScript-Code. Dabei handelt es sich um ein pisseliges Objektliteral, wo ich schon die Inhalte in Form von HTML-Code bereitgestellt habe. Warum ich das so strukturiert habe und warum der Code so dermaßen in die Breite gezogen ist, erfahrt ihr später.
6. Noch ein Hinweis
innerHTML
Auch wenn ich diese Microsoft-Erweiterung an der einen oder anderen Stelle ziemlich runter gemacht habe, so werden hier damit arbeiten. Und zwar aus einem einzigen Grund. Ich hatte schlichtweg keine Lust, hier noch mal den ganzen Sermon aus dem Bereich DOM-Manipulation durchzukauen.