JavaScript in HTML einbinden: script-Tag und erstes Hello World
geprüft am 7 September 2026 · 6 Min.
Um einer HTML-Seite JavaScript hinzuzufügen, leg eine Datei app.js an und lade sie mit <script src="app.js" defer></script> im head, oder direkt vor </body> ohne defer. Schreib console.log('Hello World'); in die Datei, öffne die Seite und die Konsole (F12): Die Nachricht erscheint.
Dieses erste Kapitel richtet alles ein, was die folgenden brauchen: eine HTML-Seite, eine damit verbundene JavaScript-Datei und zwei Wege, eine Nachricht auszugeben, um zu prüfen, dass die Verbindung steht. Zwanzig Minuten reichen. Am Ende hast du dein erstes JavaScript-Programm geschrieben und in einem Browser ausgeführt.
Was JavaScript ist (und was nicht)
JavaScript ist die Programmiersprache der Webbrowser. HTML beschreibt den Inhalt einer Seite, CSS ihr Aussehen, JavaScript ihr Verhalten: auf einen Klick reagieren, ein Formular prüfen, den Text eines Elements ändern, Daten laden. Jeder Browser bringt eine Engine mit, die diesen Code liest und ausführt.
Zwei Klarstellungen, die dir unnötige Suchen ersparen:
- JavaScript hat nichts mit Java zu tun. Der Name stammt aus dem Jahr 1995 und aus einer Marketing-Entscheidung. Die beiden Sprachen teilen weder Syntax noch Einsatzgebiet.
- Es beschränkt sich nicht mehr auf den Browser. Mit Node.js schreibt dieselbe Sprache Server und Werkzeuge. Dieses Tutorial bleibt im Browser: Das ist die einfachste Umgebung zum Lernen, sie ist auf deinem Rechner schon installiert.
Die HTML-Seite für den Anfang anlegen
Öffne einen Code-Editor (Visual Studio Code eignet sich gut) und leg einen Ordner tutoriel-js an. Darin eine Datei index.html mit dem minimalen Grundgerüst eines Dokuments:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon premier script</title>
</head>
<body>
<h1>Bonjour</h1>
<!-- Le contenu de votre site ira ici -->
</body>
</html>Öffne diese Datei in deinem Browser (Doppelklick, oder zieh sie ins Fenster). Die Seite zeigt „Bonjour“. Von JavaScript ist bisher nichts dabei.
Das script-Tag: wohin mit dem JavaScript
JavaScript kommt über das Tag <script> in eine Seite. Es kann den Code direkt enthalten oder mit dem Attribut src auf eine externe Datei zeigen. Drei Platzierungen sind möglich, und die Wahl hat Folgen.
Am Ende des body: einfach und sicher
<body>
<h1>Bonjour</h1>
<script src="app.js"></script>
</body>Der Browser liest das HTML von oben nach unten. Wenn er beim Tag ankommt, existiert das h1 bereits: Das Skript kann es verändern. Das ist die klassische Platzierung, und sie funktioniert immer.
Im head mit defer: die moderne Schreibweise
<head>
<meta charset="UTF-8">
<title>Mon premier script</title>
<script src="app.js" defer></script>
</head>defer weist den Browser an, die Datei sofort herunterzuladen, sie aber erst auszuführen, wenn das HTML vollständig gelesen ist. Man bekommt das Beste aus beidem: Der Download beginnt früh, der Code läuft, wenn die Seite bereit ist. Skripte mit defer laufen in der Reihenfolge, in der sie notiert sind.
Im head ohne alles: der klassische Fehler
<head>
<script src="app.js"></script> <!-- s'exécute avant que le body existe -->
</head>Hier läuft das Skript, bevor das h1 aufgebaut ist. Jeder Versuch, es auszulesen, liefert null, und in der Konsole erscheint der Fehler „Cannot read properties of null“. Wenn du diesen Fehler in Kapitel 9 siehst, prüf zuerst die Platzierung deines Tags.
async lädt ebenfalls parallel herunter, führt das Skript aber aus, sobald es angekommen ist, ohne auf das HTML oder die anderen Skripte zu warten. Das taugt für ein unabhängiges Skript (eine Reichweitenmessung zum Beispiel), nicht für Code, der die Seite verändert. Für dieses Tutorial merk dir defer.
Inline-Skript oder externe Datei?
Der Code lässt sich auch direkt in die Seite schreiben:
<script>
console.log('Hello World');
</script>Praktisch für einen Test von drei Zeilen, schlecht für alles andere: Der Code ist von Seite zu Seite nicht wiederverwendbar, wird vom Browser nicht zwischengespeichert und mischt sich unter das HTML. Ab diesem Kapitel arbeiten wir in einer eigenen Datei, app.js, die neben index.html liegt.
Erster Code: „Hello World“ mit alert()
Leg app.js im selben Ordner wie index.html an und binde die Datei mit dem oben gezeigten defer-Tag ein. In der Datei:
alert('Hello World!');Lade die Seite neu: Ein Dialogfenster zeigt die Nachricht. alert() ist eine Funktion des Browsers, die die Seite blockiert, bis man auf OK klickt. Sie dient dazu, zu prüfen, dass ein Skript läuft; in einer echten Website benutzt man sie nicht, dort unterbricht sie den Nutzer.
Das eigentliche Werkzeug: console.log() und die Browserkonsole
Ersetze den Inhalt von app.js:
console.log('Hello World!');
console.log('Titre de la page :', document.title);
console.log(2 + 3);Lade neu: Auf dem Bildschirm ändert sich nichts. Öffne die Entwicklerwerkzeuge mit der Taste F12 (oder Rechtsklick, „Untersuchen“), dann den Tab Konsole. Dort erscheinen die drei Zeilen:
Hello World!
Titre de la page : Mon premier script
5Die Konsole ist der Ort, an dem JavaScript spricht. Sie zeigt, was du mit console.log() anforderst, aber auch sämtliche Fehler, mit Dateiname und Zeilennummer. Lass sie während des ganzen Tutorials offen: Sie ist dein erstes Werkzeug zum Debuggen, und du kannst darin sogar direkt JavaScript tippen, ohne Datei, um eine Idee auszuprobieren.
Deine ersten Fehler, und wie du sie liest
Wenn nichts erscheint, sagt dir die Konsole, warum. Die drei häufigsten Fälle an dieser Stelle:
- „Failed to load resource: 404“: Die Datei
app.jswird nicht gefunden. Prüf, dass sie im selben Ordner wieindex.htmlliegt und dass der Name genau stimmt, Groß- und Kleinschreibung eingeschlossen. - „Uncaught SyntaxError“: ein Tippfehler im Code, oft eine nicht geschlossene Klammer oder ein nicht geschlossenes Anführungszeichen. Die Zeilennummer führt dich hin.
- Gar nichts, nicht einmal ein Fehler: Der Browser zeigt eine Fassung aus dem Cache. Lade mit Strg+F5 neu (Cmd+Umschalt+R auf dem Mac).
Zusammenfassung
- JavaScript kommt über
<script src="app.js" defer></script>imheadin eine Seite, oder über dasselbe Tag ohnedeferam Ende desbody. - Eine externe Datei ist besser als ein Inline-Skript, sobald der Code über ein paar Zeilen hinausgeht.
alert()bestätigt, dass ein Skript läuft;console.log()und die Konsole (F12) sind die Werkzeuge für den Alltag.- Einen Fehler liest man in der Konsole: Datei, Zeile, Meldung.
Im nächsten Kapitel, Variablen und Datentypen, beginnt das Programm, sich Werte zu merken. Und wenn du zuerst einen Überblick über den ganzen Weg willst: Der Guide zum JavaScript-Lernen stellt die zwölf Kapitel und einen Plan über dreißig Tage vor.
document.title den Titel der Seite anzeigt. Prüf, dass die Reihenfolge der beiden Nachrichten genau der in deinem Code entspricht.Häufige Fehler
script im head ohne defer läuft, bevor die Seite aufgebaut ist: document.querySelector('h1') liefert null. Ergänze defer, oder setz das Tag ans Ende des body.src="app.js" sucht die Datei neben der HTML-Seite. Der Tab Netzwerk der Entwicklerwerkzeuge zeigt den 404; die Konsole meldet „Failed to load resource“.App.js und app.js sind auf den meisten Servern zwei verschiedene Dateien, auch wenn Windows sie lokal verwechselt.