JavaScript/Tutorials/Web Animations/Extras
Wenn der Bildwechsler auf mehreren Seiten einer Webpräsenz eingesetzt werden soll, dann ist es sehr umständlich, den JavaScript-Code dafür immer im Kopf einer jeden Datei zu notieren. Auch Änderungen an der Funktionalität lassen sich so nur sehr schwer pflegen. Daher ist es sinnvoll, den JavaScript-Code in eine externe Datei auszulagern, die dann bei Bedarf ins HTML-Dokument nachgeladen wird.
Eine solche Vorgehensweise entspräche auch dem Ideal von "Unobtrusive JavaScript" (bedeutet in etwa "unaufdringliches" oder "unauffälliges" JavaScript), indem Sie JavaScript-Funktionalität als eine zusätzliche "Verhaltens"-Schicht einer Webseite von der reinen Inhaltsschicht und der rein visuellen Präsentationsschicht trennen. Der Nachvollziehbarkeit der Beispiele in diesem Artikel wegen wird das aber erst gegen Ende tatsächlich so gehandhabt werden.
Für dieses Projekt wäre es daher ganz praktisch, wenn man eine Rahmenapplikation hätte, die sich dann beim Laden der Seite selbst initialisiert, um sowohl den Bildwechsler einzurichten (und vielleicht sogar automatisch zu starten), als auch den benötigten CSS-Code automatisch ins Dokument zu integrieren. Auf diese Weise bräuchte sie vom Browser nur einmal geladen werden, auch wenn sie auf mehreren Unterseiten Verwendung findet.
Ein mit anderen Scripten kompatibler Autostart
Früher wurden Skripte entweder mit HTML-Attributen oder mit window.onload im Skriptbereich eingebunden. Dies hatte den Nachteil, dass evtl. vorher vorhandene Skripte nicht geladen wurden.
Darum wurden im Vorgänger-Tutorial eventuell vorhandene Werte aus window.onload in eine Variable "gerettet", um ihn zu gegebener Zeit auszuführen, damit die Funktionalität anderer Scripte gewahrt bleibt.
var oldWindowOnload = window.onload;
window.onload = function () {
if (typeof(oldWindowOnload) == "function") {
oldWindowOnload();
}
neuerJavaScriptCode();
};
Die schon im ersten Teil des Tutorials angesprochene Verwendung einer anonymen Verpackungsfunktion ("immediately invoked function expression" (IIFE)), in der unser Skript "verpackt" ist, umgeht diese Schwierigkeiten.
(function () {
function init() {
...
};
document.addEventListener(
"DOMContentLoaded",
function () { init(); }
);
}());
window.onload das Anhängen beliebig vieler Funktionen.Das Bildwechsler-Skript ist in einer anonymen Funktion verpackt. Dies hat den Vorteil, dass Variablen nie einen globalen Scope erhalten können und mit gleichnamigen Variablen in anderen Skripten kollidieren können.
Eine CSS-Datei nachladen
Eine CSS-Datei nachzuladen bedeutet, ein link-Element dynamisch zu erstellen, ihm die notwendigen Attribut-Werte zuzuweisen, und es in den head-Bereich des Dokuments einzuhängen. Der Browser lädt dann diese Datei nach und aktualisiert die Darstellung des Dokuments.
Die Erzeugung eines neuen HTML-Elements geschieht mit der document-Methode createElement(), der als Parameter der Name des Elements (in diesem Fall "link") übergeben wird. Mit der Methode appendChild() kann das so erzeugte Element einem anderen Element als Kindelement am Ende angefügt werden.
function cssNachladen() {
var e = document.createElement('link');
e.rel = 'stylesheet';
e.href = 'beispiel.css';
document.querySelector('html > head').appendChild(e);
}
Die Funktion cssNachladen, die durch einen Klick auf den Link aufgerufen wird, erzeugt ein link-Elementobjekt und speichert es in der Variablen e. Anschließend werden dem link-Objekt die für ein link-Element wichtigen Attribute wie type, rel und href als Objekt-Eigenschaften verliehen. Schlussendlich wird das Element über appendChild an das Ende des head-Elements angehängt.
Die Reihenfolge, in der Stylesheets im head einer Datei referenziert werden, kann Auswirkungen auf die Darstellung haben. CSS-Regeln einer vorher referenzierten Datei können nämlich durch anderslautende Regeln einer danach referenzierten Datei überschrieben werden.
Im Standardumfang von JavaScript existiert zwar ein Objekt document.body, jedoch kein Objekt document.head, weshalb hier der Umweg über document.querySelector('html > head') genommen wurde, um das head-Element anzusprechen.
window.onloadwird in einer Variablen gespeichert, damit eventuell vorhandene Funktionsreferenzen nicht verloren gehen. Zuerst wirdwindow.onloadmit einer neuen Funktion gefüllt, die in obigem Code-Beispiel als anonyme Funktion direkt an Ort und Stelle definiert wird. In dieser anonymen Funktion wird zuerst mit demtypeof-Operator geprüft, ob in der Variablen auch wirklich eine Funktionsreferenz enthalten ist, um diese im Bedarfsfalle auszuführen (man beachte das Klammernpaar hinteroldWindowOnload()!). Danach wird die selbstdefinierte FunktionneuerJavaScriptCodeausgeführt.Die ursprüngliche Reihenfolge der Funktionen bleibt gewahrt. Die anonyme neue Funktion kapselt sowohl eine bereits vorhandene Funktion als auch die zusätzlich auszuführende Funktion in einer Weise, dass die bereits vorher vorhandene Funktion zuerst ausgeführt wird.