OOP/DOM-Scripting JavaScript - Praxistutorial 1 - Vorbereitung
1. Die Abschnitte
- Einführung
- Vorbereitung
- Die Konstruktorfunktion
- Die Event-Handler
- Die Variablen
- Die Methoden im Detail
- Alternative Event-Handler
2. Überlegungen
Immer daran denken
Eine durchdachte Planung hält das Chaos in einigermaßen erträglichen Grenzen [Quelle: Ich]
Flexibilität
In unserem dahingeschiedenen Praxis-Tutorial haben wir ein paar Werte fest in den Funktionen verdrahtet. Das waren der Start- und
Endwert für die Rutsch-Rauf-Rutsch-Runter-Schleifen (1, 31
) sowie die Angabe über die zeitliche Verzögerung (zeit =
5
). Diesmal wollen wir die Sache so angehen, dass diese Angaben auch außerhalb der Konstruktorfunktion gesetzt werden
können. Warum? Nun in diesem Beispiel ist das ziemlich sinnfrei (vielleicht mit Ausnahme der Zeitangabe), da sowohl der Start-
als auch Endwert für die Schleifen abhängig sind von der bestehenden Gestaltung.
Aber nehmt mal folgende Situation an. Ihr seit als Programmierer von lauter Kreativen und Mausschubsern umgeben. Die wollen nun diesen Effekt für ein anderes Design nutzen. Damit ihr euch selber nicht um diesen Pillepups kümmern müsst und eure Kreativen sich nicht durch unzählige Zeilen Code wühlen wollen (von denen sie eh keine Ahnung haben), werden diese Werte an einer zentralen Stelle definiert. Dann könnt ihr euren Leuten sagen.
Daaaaaa, an der Stelle, Zeile xy, daaaaaa müsst ihr die Werte anpassen. [Quelle: ein Programmierer unter lauter Mausschubsern]
Auch wenn ihr es jetzt nicht wahrhaben wollt, das funktioniert wirklich. Glaubt es mir, ich habe das mehrmals mit ehemaligen Kolleginnen (noch nicht mal Männern) durchexerziert und es lief immer sehr gut. Mal abgesehen davon, dass die anschließend glaubten, sie könnten programmieren.
Die Positionsangaben
Ich glaube, ich habe schon mehrmals erwähnt, dass man nicht auf CSS-Eigenschaften von Elementen per JavaScript zugreifen
kann, wenn diese nicht direkt im style
-Attribut definiert sind. Es gibt dennoch eine Möglichkeit. Aber da die nicht
ganz unkompliziert ist, werde ich die in einem späteren Tutorial nachreichen.
Daher müssen wir die benötigten Werte pro Hauptmenüpunkt an eine allgemein zugängliche Hauptmethode unserer "Klasse" übergeben. Warum? Damit bei einem anderen Design ihr euch nicht um diesen Pillepups kümmern müsst und eure Kreativen sich nicht durch ..., ihr wisst, was ich meine. Also benötigen wir drei Angaben, eine für die ID des Elements, eine für Anzahl von Einträgen im jeweiligen Untermenü und eine für die Anfangspositionierung.
3. Schlussfolgerungen
- Die Konstruktorfunktion benötigt drei Parameter.
- Wir brauchen eine öffentliche Hauptmethode mit ebenfalls drei Parametern, um die jeweiligen Werte für ein Untermenü zu übergeben.
- Es muss eine Referenzvariable geben, um die Werte für die Konstruktorfunktion zu setzen.
- Pro Hauptmenüpunkt bedarf es einer Funktion, um die drei Parameter der Hauptmethode festzulegen.
Mit diesem Wissen wollen wir uns nun an den Grundaufbau wagen. Und immer daran denken. Saubere Programmierung verlangt nach einer sauberen Planung. Und zwar vorab! Daher diese so scheinbar unwichtigen und langatmigen Ausführungen. Aber bei mir hat alles einen Sinn ;-).
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt