Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:blc:informatik:glf22:web-tech:globalnav-in-js [2023/05/09 15:09]
Ivo Blöchliger
+++ lehrkraefte:blc:informatik:glf22:web-tech:globalnav-in-js [2023/05/11 11:28] (current)
Ivo Blöchliger [Vorbereitungen]
@@ Line 1: / Line 1: @@
-Im ''<head>'' das Script einbinden:
+====== Gemeinsamer HTML-Code auf unterschiedlichen Seiten ======
+Typischerweise ist das Navigationsmenü und der Footer auf allen Seiten gleich. Wenn diese Elemente angepasst werden, muss die Anpassung auf allen Seiten durchgeführt werden, was nicht nur einfach mühsam, sondern auch fehleranfällig ist.
+Sinnvollerweise werden diese Teile in separaten Dateien gepflegt. Dafür gibt es verschiedene Möglichkeiten. Eine davon ist die Inhalte dynamisch mit JavaScript einzufügen. Diese Möglichkeit wird hier aufgezeigt
+===== Vorbereitungen =====
+Im ''<head>''-Bereich jeder Seit muss das Script eingebunden werden:
 <code html>
-  <script src="navigation.js">
+  <script src="common.js"></script>
 </code>
-Die Navigation mit der id ''mainnavigation'' versehen.
+Die HTML-Elemente, die gemeinsamen HTML-Code beinhalten (z.B. <nav>....</nav>), müssen mit einer eindeutigen id versehen werden:
 <code html>
-  <nav id="mainnavigation">
+  <nav id="mein_nav_menu">
-      <--! Wird durch javascript automatisch befüllt -->
+      <--! Wird durch das Script automatisch befüllt. Allfälliger Inhalt wird überschrieben -->
   </nav>
 </code>
-Und das script, das die Navigation einfügt:
+===== Das Script =====
+Und schliesslich das Script, das die Codes einfügt:
-<code javascript navigation.js>
+<code javascript common.js>
-window.addEventListener('load', function() {
+window.addEventListener('load', function() {  // Erst starten, wenn das ganze Dokument geladen ist.
-   document.getElementById("mainnavigation").innerHTML =
+   function insertHTML(id, html) {  // Funktion, die den HTML-Code in das Element mit id einfügt
-   `<ul><li><a href="index.html>Home</a>....`;
+      let el = document.getElementById(id);
+      if (el) { // Nur, wenn es ein solches Element auch gibt
+        el.innerHTML = html;
+      }
+   }
+   // Gebrauch der Funktion:  (Text zwischen Backticks, rückwärts gerichtete Apostrophs: `bla`)
+   insertHTML(`mein_nav_menu`, `<ul>
+     <li><a href="index.html">Home</a></li>
+     <li><a href="news.html">News</a></li>
+    </ul>`);  // Beachten Sie den schliessenden Backtick und die schliessende Klammer der Funktion
+    // Funktion kann mehrfach verwendet werden:
+    insertHTML(`mein_footer`, `Das ist mein footer! <i>Proudly made by typing HTML-Code ;-)</i>`);
 });
 </code>