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
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>
</head>
<body>
<!-- JavaScript-Code mit einer-alert-box wird ausgegeben, wenn auf Button geklickt -->
<!-- Bitte Browser wie Chrom, Firefox, .... verwenden zum Testen. -->
<button onclick="alert('Hallo, Welt!')">Button für Alert Box</button>
</body>
</html>
Hiweis: Der obige sollte im einem regulären Browser getestet werden, VS Code Live Preview erlaubt keine PopUp Fenster wie alertbox, etc.
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.
HTML-Datei
<!DOCTYPE html>
<html>
<head>
<title>Internes Script</title>
</head>
<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 --->
<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"></script>
</head>
<body>
<h1>Externes JavaScript</h1>
</body>
</html>
Script.js
alert("Hallo aus script.js!");
