Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m288:learningunits:lu01:02 [2025/08/29 11:23] – vdemir
+++ de:modul:m288:learningunits:lu01:02 [2026/08/25 12:15] (aktuell) – vdemir
@@ Zeile 11: / Zeile 11: @@
 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>
+**HTML-Datei: LU01b_bsp1.html**
-  <html>
+<code html>
-    <head>
+<!DOCTYPE html>
-      <title>Inline JavaScript</title>
+<html>
-    </head>
+  <head>
-    <body>
+    <title>Beispiel</title>
-    <!-- JavaScript-Code mit einer-alert-box wird ausgegeben, wenn auf Button geklickt -->
+  </head>
-    <!-- Bitte Browser wie Chrom, Firefox, .... verwenden zum Testen. -->
+ <body>
-    <button onclick="alert('Hallo, Welt!')">Button für Alert Box</button>
+    <p onclick="document.body.style.backgroundColor = 'lightblue';">
-    </body>
+      Click me to turn the background-colour to lightblue!
-  </html>
+      <!-- The JS code is included within the html-tag --><body>
+     </p>
-**Hiweis:** Der obige sollte im einem regulären Browser getestet werden, //VS Code Live Preview// erlaubt keine PopUp Fenster wie alertbox, etc.
+  </body>
+</html>
+</code>
 ===== 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-Datei: LU01b_bsp2.html**
-  <html>
+<code html>
-    <head>
+<!DOCTYPE html>
-      <title>Internes Script</title>
+<html>
-    </head>
+  <head>
-    <body>
+    <title>Internes Script</title>
-      <h1>Beispiel mit Script-Tag</h1>
+  </head>
-      <h3>Beim Laden der Seite  wird die Hintergrundfarbe auf "lightblue" geändert.</h3>
+  <body>
-      <!-- JS-Code-Bereich wird irgendwo definiert, hier direkt dort wo es gebraucht wird, und gleich ausgefüllt.
+    <h1>Beispiel mit Script-Tag</h1>
-           In diesem Falle wird einfach Hintergrundfarbe mittels JS verändert --->
+    <h3>Beim Laden der Seite  wird die Hintergrundfarbe auf "lightblue" geändert.</h3>
-      <script>
+      <!-- JS-Code-Bereich wird irgendwo definiert, hier dort wo es gebraucht wird, und
-        document.body.style.backgroundColor = "lightblue";
+           gleich ausgeführt. In diesem Falle wird die  Hintergrundfarbe mittels JS verändert --->
-      </script>
+    <script>
-    </body>
+      document.body.style.backgroundColor = "lightblue";
-  </html>
+    </script>
+  </body>
+</html>
+</code>
-===== 3. Extern in einer separaten .js-Datei =====
+===== 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**
+**HTML-Datei: LU01b_bsp3.html**
-  <!DOCTYPE html>
-  <html>
+<code html>
-    <head>
+<!DOCTYPE html>
-      <title>Externes Script</title>
+<html>
-      <script src="script.js" defer></script>
+  <head>
-    </head>
+    <title>Externes Script</title>
-    <body>
+  </head>
-      <h1>Externes JavaScript</h1>
+  <body>
-    </body>
+    <h1>Externes JavaScript</h1>
-  </html>
+    <h3>Hintergrundfarbe wird auf "lightblue" geändert</h3>
+    <!-- JS-Code wird direkt aus der Datei geholt und im body verarbeitet -->
+    <script src="scripts/LU01b_bsp3.js" ></script>
+  </body>
+</html>
-**Script.js**
+</code>
-  document.addEventListener("DOMContentLoaded", () => {
-    console.log("Externes Script wurde geladen!");
+**JS-Datei: LU01b_bsp3.js**
-    alert("Hallo aus script.js!");
-    }
+<code javascript>
-  );
+document.body.style.backgroundColor = "lightblue";
+</code>
 ===== Zusatzmaterial =====