Es fehlt noch unsere eigentliche Baustelle: Unsere JavaScript-Datei mit unserem eigentlichen Script.
Für diesen ersten Teil möchte ich nur ein sehr rudimentäres Script anbieten, welches im nächsten Teil weiter ausgebaut werden wird.
Auch hier wieder ein paar Überlegungen:
1.) Das Script sollte als ein großes Objekt definiert werden, damit wir alle unsere Variablen nicht als globale Einzelvariablen im Dokument "herumliegen" haben, sondern damit alles, was mit unserem Script zu tun hat, auch unter dessen Namen zu finden ist. Deshalb definieren wir eine globale Variable, nämlich unser großes Objekt. Nennen wir es "FaderFramework", denn es ist ja eine Rahmenapplikation, die uns individuelle Fader herstellen und bereitstellen kann.
An dieser Stelle empfehle ich sehr dringlich, im Firefox mit dem Firebug-Plugin zu arbeiten. Mit dem Firebug kann man sich sehr bequem anschauen, welche Variablen und Funktionen im Dokument definiert worden sind.
2.) Das Script soll sich nach dem Einbinden über ein <script>-Element selbst initialisieren. Das darf nicht dadurch geschehen, indem wir <body onload="FaderFramework.onload()">
notieren, da damit unser Ziel mit dem "unobtrusive" nicht erreicht wäre. Außerdem könnten andere Scripte, die sich ähnlich nach dem Laden selbst starten sollen, ebendieses nicht (mehr). Also lösen wir das anders, nämlich über das window-Objekt und dessen onload-Eigenschaft bzw. -Methode.
3.) Falls in window.onload bereits eine Funktion abgelegt worden sein sollte, dann müssen wir sicherstellen, dass diese Funktion weiterhin nach dem Laden des Dokuments ausgeführt wird. Aber es soll ja auch unsere Funktion dazu ausgeführt werden! Das lösen wir, indem wir einfach eine neue Funktion definieren, in der wir zuerst die alte Funktion aufrufen, um dann unsere Funktion ausführen zu lassen.
Damit sich das Ganze nicht in die Quere kommt, müssen wir erst den Inhalt von window.onload in einer Variablen abspeichern. Dazu benutzen wir unser großes FaderFramework-Objekt, dem wir einfach eine Eigenschaft "oldWinOnLoad" verpassen, in die wir den gegenwärtigen Inhalt von window.onload abspeichern. Später können wir dann wieder darauf zurückgreifen (siehe unten).
Hier eine erste Version unseres FaderFrameworks (Datei "Testordner/fader-framework/fader-framework.js"):
var FaderFramework = {
oldWinOnLoad: false, // hier steht später vielleicht eine abgespeicherte Funktion
// Initialisier-Funktion - startet das FaderFramework indem sie das onload-Verhalten im Dokument regelt (wird noch während des Ladens der Seite ausgeführt)
start: function () {
// "this" bezieht sich auf "FaderFramework"
this.oldWinOnLoad = window.onload; // alte onload-Funktion abspeichern (falls vorhanden)
// neue (anonyme!) onload-Funktion erstellen um eventuelle alte Funktion(en) zu kapseln
window.onload = function () {
// War bereits eine Funktion in window.onload abgelegt worden?
if (typeof(FaderFramework.oldWinOnLoad) == "function") {
// hier kann man nicht "this" benutzen, da diese Funktion nicht zu einem größeren Objekt gehört!
FaderFramework.oldWinOnLoad(); // gespeicherte onload-Funktion ausführen
}
FaderFramework.onload(); // unsere onload-Funktion ausführen
};
},
// onload-Funktion wird unmittelbar nach dem vollständigen Laden des Dokuments ausgeführt
onload: function () {
alert("Script geladen!");
},
// Funktion zum Einrichten eines Faders (wird noch während des Ladens der Seite ausgeführt - eventuell mehrmals)
init: function (einstellungen) {
alert("Noch kann kein Fader eingerichtet werden...");
}
}
FaderFramework.start();
Liebe Grüße aus Ellwangen,
Felix Riesterer.
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)