Hauptmenü

Untermenü

OOP/DOM-Scripting JavaScript - Praxistutorial 1 - Einführung

1. Die Abschnitte

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

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.

weiter zum nächsten Abschnitt