====== 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 ===== 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** Externes Script

Externes JavaScript

**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). Async & Defer

Async vs. Defer

===== 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