Es gibt verschiedene Möglichkeiten, JavaScript in eine HTML-Seite einzubinden. Die wichtigsten sind:
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>
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>
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!"); } );
<!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>