![]() ![]() ![]() | |
![]() |
Fader-Framework - kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts |
![]() |
|
![]() |
E-Mail: | ![]() |
---|---|
Homepage-URL: | ![]() |
Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!
Dieser Artikel versteht sich als konkretes Fallbeispiel zu dem vom Autor sehr geschätzten Artikel Organisation von JavaScripten von Mathias Schäfer.
Dabei richtet sich dieser Artikel vor allem an Anfänger, die bereits erste Erfahrungen mit Javascript-Elementen wie Schleifen oder Verzweigungen haben und nun tiefer in eine objektorientierte Programmierung in JavaScript einsteigen möchten.
Daher werden in diesem Artikel grundlegende Kenntnisse um die Sprachelemente von JavaScript sowie HTML und CSS vorausgesetzt und nicht näher besprochen. Es seien an dieser Stelle aber folgende Kapitel der Dokumentation zum Nachschlagen empfohlen:
Ziel dieses Artikels ist ein JavaScript, das aus einer externen Datei in ein Dokument eingebunden werden kann, sich dort selbst initialisiert und ein vorhandenes Bild in eine Art Bilder-Slideshow umwandeln kann. Dabei soll das Script einerseits modular aufgebaut sein, um beliebig viele Slideshows steuern zu können. Andererseits soll durch explizites Aufrufen von Scriptteilen ein manuelles Überblenden der Bilder (quasi eine Einzelbild-Funktion) zur Verfügung stehen. Zu guter Letzt soll das Script benötigte Zusatzdateien wie z.B. eine CSS-Datei dynamisch selbständig nachladen.
Den Slideshow-Mechanismus, den das Script bereitstellt, nennen wir einfach "Fader".
So soll unser Endergebnis in etwa aussehen:
Anzeigebeispiel: So sieht's aus
Anhand einiger einfacher Code-Beispiele wird untersucht, wie man in JavaScript Animationen realisieren kann, um dann konkret auf die Überblendungstechnik einzugehen.
Im weiteren Verlauf werden dann die Funktionen der Code-Beispiele in Objekten zusammengefasst, um den objektorientierten Programmierstil zu veranschaulichen. Schließlich wird ein Rahmenobjekt erstellt, das unsere Fader-Objekte verwaltet und initialisiert. Quasi als Anhang wird eine "Komfort-Version" vorgestellt, die weitere Zusatzmöglichkeiten bietet.
Es ist für einen Anfänger nicht notwendig, den kompletten Artikel in einem Stück durchzuarbeiten. Es scheint dem Verfasser viel sinnvoller, immer nur bis zu dem Beispiel voranzuarbeiten, das noch verstanden und nachvollzogen werden kann. Meistens bieten die Beispiele eine gebrauchsfähige Lösung an, die in dieser Art auch in eigenen Projekten so eingesetzt werden kann. Nur wenn technische Grenzen eine bessere oder offenere Lösung erfordern, ist es eventuell hilfreich, in diesem Artikel weiterzuarbeiten.
Es sei Einsteigern aber grundsätzlich ans Herz gelegt, sich mit dem
Gedanken der Auslagerung von JavaScript-Code auseinanderzusetzen, wie
es im Kapitel Projekt: FaderFramework im größeren Stil vorgeschlagen wird.
Die Idee zu diesem Artikel entstand im SELFHTML-Forum,
von wo viele Anregungen in diesen Artikel eingeflossen sind. Das
tiefergehende Verständnis von JavaScript ist dem Autor erst durch
langjähriges Mitlesen in diesem Forum überhaupt möglich geworden. Hier
ganz herzlichen Dank an "Struppi", "Peter Seliger" und auch "molily".
Bei der Arbeit an diesem Artikel wurde der Autor insbesondere von der SELFHTML-Redaktion unterstützt, allen voran von Mathias Schäfer (alias molily).
Ohne diese Unterstützungen wäre der Artikel längst nicht das geworden, was er jetzt ist. Danke.
© 2008 Impressum, für diese Seite:
Felix.Riesterer@gmx.net