modul:m288:learningunits:lu01:02

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


Vorhergehende Überarbeitung
—modul:m288:learningunits:lu01:02 [2025/08/18 11:00] (aktuell) – [3. Extern in einer separaten .js-Datei] vdemir
Zeile 1: Zeile 1:
 +====== LU01b - JavaScript in HTML einbinden ======
 +
 +===== Einleitung =====
 +Es gibt verschiedene Möglichkeiten, JavaScript in eine HTML-Seite einzubinden. Die wichtigsten sind:
 +
 +  - Inline im HTML-Tag
 +  - 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.
 +
 +  <!DOCTYPE html>
 +  <html>
 +    <head>
 +      <title>Inline JavaScript</title>
 +    </head>
 +    <body>
 +      <button onclick="alert('Hallo, Welt!')">Klick mich</button>
 +    </body>
 +  </html>
 +
 +
 +===== 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>
 +
 +
 +
 +===== 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]]
 +
 +
 +----
 +[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir
 +