 Module auslagern 01
Identische Inhalte die auf mehreren Webseiten innerhalb Ihres Projekts verwendet werden, kann man an zentraler Stelle 'deponieren' und mit JavaScript in die entsprechenden Seiten einbinden, um sie dort anzeigen zu lassen.
|
|
Häufig verwendete Seitenmodule 'auslagern'
Diese Technik ist immer dann empfehlenswert, wenn diese Module regelmäßig aktualisiert werden sollen und man diesen Arbeitsschritt nur ein Mal durchführen möchte. Ein zeitraubendes Einkopieren in unzählige Seiten entfällt damit. Die Module können neben Text natürlich auch andere Elemente enthalten.
Übrigens könnte man auf die gleiche Weise auch ein Menü einbinden. Nach einer Erweiterung müssen nicht mehr sämtliche Seiten, in denen das Menü angezeigt wird, überarbeitet werden. Eine ernorme Arbeitsersparnis!
Beispiel: Innerhalb Ihrer Seiten gibt es eine "Info-Spalte" mit aktuellen Terminen, wichtigen Updates oder Neuigkeiten, ähnlich wie in meiner Seite der Grundschule Würm (Screenshots). Die Infospalte habe ich mit einem roten Rahmen markiert.
Wenn sich die Terminliste ändert, muss ich die Daten nur ein Mal überarbeiten und auf jeder Seite erscheint sofort die aktualisierte Liste.
Seiteninhalte als Module 'auslagern' und später in eine Seite einbinden. Sie entscheiden welche Module auf einer Seite angezeigt werden. Bei Bedarf rufen Sie eine der Schreibanweisungen auf, die genau den Text in die HTML-Seite schreibt, den Sie einbinden möchten.
Ich realisiere das mit einer externen JavaScript-Datei, die mehrere Funktionen mit Schreibanweisungen beinhaltet. Für jedes Modul eine.
externe JavaScript-Datei
Die Texte die man in verschiedenen Seiten verwenden möchte stehen in einer externen JavaScript-Datei. Die Datei heißt hier in meinem Beispiel "texte.js". Diese Datei wird als reine Textdatei gespeichert und muss die Endung ".js" haben.
In der Datei "texte.js" notiert man Funktionen die nichts anderes tun als einen Text zu schreiben und gibt den einzelnen Funktionen unterschiedliche Namen.
function Text01() {
document.write('AAA Texte hier ohne (harte) Zeilenumbrüche eintragen');
}
function Text02() {
document.write('BBB Texte hier ohne (harte) Zeilenumbrüche eintragen');
}
function Text03() {
document.write('CCC Texte hier ohne (harte) Zeilenumbrüche eintragen');
}
Natürlich kann man auch CSS-Formatierungen und HTML-Tags verwenden.
function Text04() {
document.write('<h1>Überschrift</h1>Texte hier<br>eintragen!<p>Absatztext</p>');
}
Bindeglied zwischen JavaScript-Datei und HTML-Seite
Damit ein Bezug zu dieser Datei hergestellt werden kann, muss im HEAD-Bereich der Dateien, in denen Inhalte aus der externen Datei "texte.js" angezeigt werden sollen, eine Referenz auf diese Datei eingetragen werden.
im HEAD-Bereich
...
<script type="text/javascript" language="JavaScript" src="texte.js"></script>
</head>
Bei einem Aufruf der Schreibanweisung für das Modul 3 kann der Browser nun die Informationen aus der externen JavaScript-Datei entnehmen.
Innerhalb der HTML-Seiten, in denen bereits die Referenz auf die externe "texte.js" eingetragen wurde, kann man nun mit JavaScript die Funktion zum Schreiben der Textmodule notieren (auch mehrere). Dazu ruft man die entsprechende Funktion (mit dem vergebenen Namen) auf und notiert den Aufruf an der Stelle im Body, wo der Text angezeigt werden soll:
im Body-Bereich
<script type="text/javascript" language="JavaScript">
<!-- Begin
Text03()
// End -->
</script>
mehrere Aufrufe:
<script type="text/javascript" language="JavaScript">
<!-- Begin
Text01()
Text04()
// End -->
</script>
Mehr als nur Text
Nicht nur (formatierter) Text kann auf diese Weise 'ausgelagert' und eingebunden werden. Die Schreibanweisungen können ebenso Grafiken oder Resultate aus weiteren JavaScript-Funktionen enthalten:
- Zufallsbilder
- letztes Update
- Terminlisten
- aktuelle Nachrichten
- letzte Änderungen
- Querverweise
... und wie ich oben schon sagte: Man könnte ebenso ein komplettes Menü (oder mehrere Menüs) auslagern und mittels Schreibanweisung in den Unterseiten anzeigen lassen.
Meine Infospalte (rechts) mit interessanten Updates ist nach diesem Prinzip aufgebaut. Ich lasse die Infos (zeitverzögert) in der rechten Spalte einblenden.
Das war's schon! Wenn sie mehr über Funktion und Anpassungen erfahren möchten, lesen sie ab hier weiter. Sie können bei meinem Beispiel die Anzahl der Module erweitern, indem sie weitere Einträge für Schreibanweisungen notieren.
Ein Menü auslagern:
Meine Beispieldatei zum Thema 'Module auslagern 01' enthält übrigens auch eine solche Anweisung zum Schreiben eines Menüs inklusive der CSS-Anweisungen (Seite 04). Die Beispieldateien sind als ZIP-Downlod verfügbar.
Die Links finden Sie im Kopfbereich dieser Seite.
|
|
Ein entsprechendes (ausführliches) Beispiel ist bereits in Arbeit und erscheint demnächst!
Ihr Menü wird möglicherweise so ähnlich aussehen:
<a href="seite01.htm">seite01</a>
<a href="seite02.htm">seite02</a>
<a href="seite03.htm">seite03</a>
<a href="seite04.htm">seite04</a>
<a href="seite05.htm">seite05</a>
<a href="seite06.htm">seite06</a>
<a href="seite07.htm">seite07</a>
Wenn das in eine JavaScript-Schreibanweisung gepackt werden soll, dürfen keine "harten" Zeilenumbrüche vorkommen! Am einfachsten ist es, alles in einer Zeile zu notieren.
In der externen JavaScript-Datei notieren Sie die Schreibanweisung:
function SchreibeMenue() {
document.write(' xxx ');
}
function SchreibeMenue() {
document.write('<a href="seite01.htm">seite01</a> ... seite07.htm">seite07</a>');
}
Im Body-Bereich Ihrer Seiten notieren Sie den Aufruf an der Stelle, wo das Menü angezeigt werden soll:
<script type="text/javascript" language="JavaScript">
<!-- Begin
SchreibeMenue()
// End -->
</script>
Das Script schreibt dann den HTML-Code für Ihr Menü in die Seite!
 Terminliste 06 - 4 Ausgabeoptionen, Termindaten in einer externen JS-Datei
Grundlagen externe JS-Datei
|
Home • Script • Module 01
Demo
DOWNLOAD
