Von Joseph K. Myers / Übersetzung & Überarbeitung: N8i (nightfire)

Wie erreiche ich es, Inhalte von Webseiten, die ich auf mehreren Webseiten einsetze, nur einmal schreiben zu müssen?
Mir soll es möglich sein, Inhalte an einer Stelle zu ändern und die Änderung wird in allen Dokumenten, wo sie zum Einsatz kommt, automatisch wirksam.

Im professionellen Webdesign werden hierfür teure ContentManagementSysteme (CMS) eingesetzt, die Inhalt vom Design trennen, zumeist Datenbank basierend sind und das komfortable Bearbeiten von Webseiten ermöglichen.

Jsinc: JavaScript Includes

Die etwas ineffizientere, dafür um so billigere und bei kleineren Webseiten gut praktikable Lösung, um gleiche Inhalte in mehreren Dokumenten "on the fly" zu ändern, besteht darin, die Inhalte in JavaScript- Dateien auszulagern und sie in den betreffenden HTML- Dokumenten wiederum mittels JavaScript einzulesen.

Da JavaScript ein aktives Element einer Webseite ist, können Sie dasselbe Script in mehreren Bereichen Ihres Webangebots einbinden (include), ohne den Scriptcode zwischen HTML- Seiten hin und herkopieren oder mehrfach schreiben zu müssen.

Der Nachteil des nachfolgenden Prinzips ist, dass Sie die Quelle Ihrer Inhalte auf dem lokalen Computer speichern müssen, und allfällige Änderungen durch den Konverter in JavaScript umwandeln lassen müssen.

Trotzdem wird Jsinc für diejenigen, die es anwenden, den Prozess vereinfachen.

Der HTML to Script Converter

Die nachfolgenden Formularfelder erlauben es Ihnen, HTML in JavaScript zu konvertieren. Nach Eingabe Ihres HTML- Codes im ersten Feld wird der JavaScript- Code generiert und in den weiteren Feldern ausgegeben. Diesen können Sie kopieren und in Ihre Webseiten einfügen.

1. Kopieren Sie Ihren HTML- Code in das erste Formularfeld
2. Tragen Sie einen Dateinamen für das JavaScript- File (muss Endung .js haben) ein.
3. Generieren Sie den Code
4. Kopieren Sie den Code aus dem zweiten Feld in eine Textdatei und speichern Sie unter dem worher gewählten Dateinamen ab.
5. Kopieren Sie den Code aus dem dritten Feld in Ihre Webseiten, die die JavaScript Includes enthalten sollen.

Wenn Sie zu einem späteren Zeitpunkt die Inhalte ändern wollen, konvertieren Sie den HTML- Text erneut, kopieren den Code in Ihr .js File und speichern dieses auf dem Server ab. Alle Seiten, die die JavaScript Includes enthalten, werden automatisch die Modifikationen anzeigen.

Weitere Möglichkeiten

JavaScript ist ein aktives Element einer Webseite und es ist im Gegensatz zu HTML programmierbar. Wenn Sie Ihr HTML mit Jsinc in ein Script konvertieren, dann ist das Script so konzipiert, dass Sie hier auch eigene Scripts hinzufügen können.

So kö,nnen Sie beispielsweise ein Script schreiben, welches entscheidet, welches spezielle HTML- File "included" werden soll, z.Bsp. eins für Besucher, ein anderes für registrierte User, eins für morgens, eins für mittags oder eins für abends.

Um so zu verfahren, konvertieren Sie mehrere HTML Inhalte und kopieren Sie zusammen in ein JavaScript- File. Jedes generierte File enthält von Grund auf eine Zeile mit der Markierung

"// end_var_declaration."

Wenn Sie mehrere konvertierte Files zu einem zusammenfassen, entfernen Sie jeweils diese Zeile.

Beispiel

Die Datei morning.js enthält folgenden Code

inc_morning_js =
'<p>Good morning!</p>\n';

// end_var_declaration
document.write(inc_morning_js);

Sie löschen den Teil beginnend mit // end_var_declaration, so dass nur noch folgendes übrigbleibt:

inc_morning_js =
'<p>Good morning!</p>\n';

Verfahren wir so weiter, bis unser Beispiel am Ende so aussieht:

inc_morning_js =
'<p>Good morning!</p>\n';

inc_afternoon_js =
'<p>Good afternoon!</p>\n';

inc_evening_js =
'<p>Good evening!</p>\n';

Speichern Sie die neue Datei unter einem beliebigen Namen, bspw. netstrings.js, und fügen folgenden Code in jedes Dokument ein, in welchem die netstrings.js zur Geltung kommen soll.

<script type="text/javascript" src="netstrings.js">
</script>

Da dieses Script anderen Scripts zur Verfügung gestellt werden soll, setzen Sie den eben beschriebenen Befehl am besten in die Head- Sektion Ihres HTML- Dokuments ein.

Bis hierhin passiert noch nichts, da das neue File lediglich mehrere HTML- Inhalte enthält, aber noch nicht feststeht, was mit Ihnen passieren soll.

Höchste Zeit also, etwas zu programmieren...

Das Script weiter unten, welches wir greeting.js nennen werden, ruft je nach Tageszeit einen der HTML- Inhalte aus der Datei netstrings.js auf.

<script type="text/javascript">
// greeting.js

d = new Date();
hours = d.getHours();

greeting = inc_morning_js;
if (hours > 11)
greeting = inc_afternoon_js;
if (hours > 17)
greeting = inc_evening_js;

document.write(greeting);

</script>

Ein Beispiel am lebenden Objekt: Um diese Tageszeit sagt man:

Hm, scheint zu funktionieren :-))

Ein Downloadmöglichkeit der Jsinc finden Sie hier