Dies ist eine alte Version des Dokuments!
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.
<!DOCTYPE html>
