OOP/DOM-Scripting JavaScript - Praxistutorial 1 - Einführung
1. Die Abschnitte
- Einführung
- Vorbereitung
- Die Konstruktorfunktion
- Die Event-Handler
- Die Variablen
- Die Methoden im Detail
- Alternative Event-Handler
2. Jetzt wird es anspruchsvoller
In den ersten beiden Einstiegstutorials haben wir uns mit elementaren Prinzipien des DOM-Scriptings und der OOP beschäftigt. Jetzt wollen wir einen ersten Einstieg in die Feinheiten wagen. Zu diesem Zweck greife ich auf das Rutsch-Rauf-Rutsch-Runter Beispiel zurück, das mittlerweile in die ewigen Jagdgründe eingegangen ist, da die Qualität doch sehr zu wünschen übrig ließ. Trotzdem habe ich den Lösungscode für euch noch parat, damit ihr euch mal die die Unterschiede ansehen könnt. In diesem Tutorial werden wir einfach ein paar Dinge durchspielen, damit ihr die Unterschiede zum alten Beispiel und die Vor- bzw. Nachteile erkennen könnt.
3. Die Daten
Den Basiscode und die Lösung für dieses Tutorial findet ihr rechts unter dem Punkt "Daten". Folgendes muss vorhanden sein. Das gilt natürlich auch für das ehemalige Praxistutorial 2.
Dateien
menue.htm
menue.js
styles.css
-
pics
(Ordner)bg.gif
menue.gif
submenue.gif
4. Das Ziel
Diesmal werden wir unsere Kenntnisse bei den Sichtbarkeitsstufen vertiefen und ihr werdet lernen, dass es wie bei JavaScript üblich, ein paar Besonderheiten gibt, die auf den ersten Blick recht seltsam erscheinen. Auch werden wir die Unzulänglichkeiten aus dem oben erwähnten "toten" Praxis-Tutorial beseitigen.
Ein Tipp
Schaut euch den Quellcode des dahingeschiedenen Praxistutorials mal kurz an (dauert wirklich nicht lange), damit ihr über ein paar Dinge Bescheid wisst, die ich in diesem Beispiel nicht mehr erläutern werde. Außerdem werde ich im Folgenden kurz auf die Unterschiede eingehen, da wir diesmal nach dem MVC-Prinzip arbeiten.
5. Der HTML- und CSS-Code
... unterscheidet sich vom mehrmals erwähnten Praxis-Tutorial durch ein paar Dinge. Im HTML-Code fehlen die
style="top:...;"
-Angaben, und die Hauptmenüpunkte haben alle eine eindeutige ID (id="b_irgendwas"
), was
auch für die Untermenüs gilt (id="m_irgendwas">
). Die brauchen wir später für eine eindeutige Identifizierung.
Außerdem haben wir die menue.js
an Ende des Codes eingebaut. Die Gründe dazu habe ich ja schon beim
Einstiesgstutorial 1 unter Punkt 5 erläutert.
Beim CSS-Code sind die top
-Angaben hinzugekommen, die wir aus dem HTML-Code entfernt haben. Damit hätten wir schon mal
eine strikte Trennung von Model (HTML), View (CSS) und Control (JavaScript).
6. Eine Herausforderung
Versucht mal, dieses Tutorial durchzuarbeiten, ohne zwischendurch einen Blick in den HTML- oder CSS-Code werfen zu müssen. Schaut euch
in der menue.htm
nur mal die ID-Bezeichnungen der einzelnen Menüpunkte an und in der styles.css
die Positionsangaben der einzelnen Untermenüs. Und merkt euch natürlich alles.