JavaScript/Tutorials/Fader-Framework

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts[Bearbeiten]

Zielvorstellungen[Bearbeiten]

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.

Voraussetzungen[Bearbeiten]

Dabei richtet sich dieses Tutorial 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:

Demonstration[Bearbeiten]

Den Slideshow-Mechanismus, den das Script bereitstellt, nennen wir einfach "Fader".

Beispiel ansehen …
So soll unser Endergebnis in etwa aussehen.

Inhalt des Lehrgangs[Bearbeiten]

Vorgehensweise[Bearbeiten]

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.

Hinweise für Lernwillige[Bearbeiten]

Es ist für einen Anfänger nicht notwendig, den kompletten Artikel in einem Stück durchzuarbeiten. Oft mag es viel sinnvoller sein 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.