Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m288:learningunits:lu01:02 [2025/08/29 11:16] – [1. Inline im HTML-Tag] vdemir
+++ de:modul:m288:learningunits:lu01:02 [2025/08/29 11:44] (aktuell) – [1. Inline im HTML-Tag] vdemir
@@ Zeile 7: / Zeile 7: @@
   - Intern im <script>-Tag
   - Extern in einer separaten .js-Datei
-  - Mit defer und async
 ===== 1. Inline im HTML-Tag=====
 Der JavaScript-Code wird direkt als Attribut in einem Element reingeschrieben. 👉 Das ist nicht die eleganteste Lösung, aber für schnelle Tests praktisch.
+**HTML-Datei**
   <!DOCTYPE html>
   <html>
     <head>
-      <title>Inline JavaScript</title>
+      <title>Beispiel</title>
     </head>
     <body>
-    <!-- JavaScript-Code mit einer-alert-box wird ausgegeben, wenn auf Button geklickt -->
+      <p onclick="document.body.style.backgroundColor = 'lightblue';">
-    <!-- Bitte Browser wie Chrom, Firefox, .... verwenden zum Testen. -->
+        Klick mich, um den Hintergrund blau zu machen!
-    <button onclick="alert('Hallo, Welt!')">Button für Alert Box</button>
+      </p>
     </body>
   </html>
@@ Zeile 29: / Zeile 28: @@
 JavaScript wird direkt im HTML-Dokument, meist im <head> oder besser am Ende von <body> platziert, damit das DOM schon geladen ist.
+**HTML-Datei**
   <!DOCTYPE html>
   <html>
@@ Zeile 36: / Zeile 36: @@
     <body>
       <h1>Beispiel mit Script-Tag</h1>
+      <h3>Beim Laden der Seite  wird die Hintergrundfarbe auf "lightblue" geändert.</h3>
       <!-- JS-Code-Bereich wird irgendwo definiert, hier direkt dort wo es gebraucht wird, und gleich ausgefüllt.
-           In diesem Falle wird einfach Hintergrundfarbe mittels JS verändert--->
+           In diesem Falle wird einfach Hintergrundfarbe mittels JS verändert --->
       <script>
         document.body.style.backgroundColor = "lightblue";
@@ Zeile 45: / Zeile 46: @@
-===== 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.
@@ Zeile 53: / Zeile 54: @@
     <head>
       <title>Externes Script</title>
-      <script src="script.js" defer></script>
     </head>
     <body>
       <h1>Externes JavaScript</h1>
+      <h3>Hintergrundfarbe wird auf "lightblue" geändert</h3>
+      <!-- JS-Code wird direkt aus der Datei geholt und im body verarbeitet -->
+      <script src="scripts/script.js" ></script>
     </body>
   </html>
 **Script.js**
-  document.addEventListener("DOMContentLoaded", () => {
+    document.body.style.backgroundColor = "lightblue";
-    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>
 ===== Zusatzmaterial =====
   * [[https://www.w3schools.com/js/js_whereto.asp|W3School-Where_to_bind]]