Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m288:learningunits:lu01:02 [2025/08/18 10:30] – angelegt vdemir
+++ modul:m288:learningunits:lu01:02 [2025/08/18 11:00] (aktuell) – [3. Extern in einer separaten .js-Datei] vdemir
@@ Zeile 7: / Zeile 7: @@
   - Intern im <script>-Tag
   - Extern in einer separaten .js-Datei
   - Mit defer und async
 ===== 1. Inline im HTML-Tag=====
-JavaScript direkt als Attribut in einem Element. 👉 Nicht die eleganteste Lösung, aber für schnelle Tests ganz praktisch.
+Der JavaScript-Code wird direkt als Attribut in einem Element reingeschrieben. 👉 Das ist nicht die eleganteste Lösung, aber für schnelle Tests praktisch.
   <!DOCTYPE html>
@@ Zeile 23: / Zeile 23: @@
+===== 2. Intern im <script>-Tag =====
+JavaScript wird direkt im HTML-Dokument, meist im <head> oder besser am Ende von <body> platziert, damit das DOM schon geladen ist.
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <title>Internes Script</title>
+    </head>
+    <body>
+      <h1>Beispiel mit Script-Tag</h1>
+      <script>
+        document.body.style.backgroundColor = "lightblue";
+      </script>
+    </body>
+  </html>
+===== 3. Extern in einer separaten .js-Datei =====
+Dieser Ansatz ist der saubere Standardweg: Gemäss der Maxime //Teile und herrsche// wird HTML und JS in separaten Dateien gehalten. So bleibt der HTML-Code übersichtlich und JavaScript kann wiederverwendet werden.
+**HTML-Datei**
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <title>Externes Script</title>
+      <script src="script.js" defer></script>
+    </head>
+    <body>
+      <h1>Externes JavaScript</h1>
+    </body>
+  </html>
+**Script.js**
+  document.addEventListener("DOMContentLoaded", () => {
+    console.log("Externes Script wurde geladen!");
+    alert("Hallo aus script.js!");
+    }
+  );
+===== 4. Mit defer und async =====
+  * **defer**: Script wird nach dem Laden des HTML ausgeführt (Reihenfolge bleibt erhalten).
+  * **async:** Script wird parallel geladen und sobald fertig, sofort ausgeführt (Reihenfolge nicht garantiert).
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <title>Async & Defer</title>
+      <script src="defer-script.js" defer></script>
+      <script src="async-script.js" async></script>
+    </head>
+    <body>
+      <h1>Async vs. Defer</h1>
+    </body>
+  </html>
@@ Zeile 31: / Zeile 83: @@
 ===== Zusatzmaterial =====
   * [[https://www.w3schools.com/js/js_whereto.asp|W3School-Where_to_bind]]
+  * [[https://wiki.selfhtml.org/wiki/JavaScript_in_HTML_einbinden|SelfHTML-JS einbinden]]