Lädt...

Wo JavaScript steht

Sie wissen bereits, dass JavaScript Verhalten hinzufügt. Die nächste Frage ist praktisch: Wo liegt der Code, damit der Browser ihn findet und die Elemente, die Sie ändern wollen, schon existieren?

Wo sollte man JavaScript in einer HTML-Seite platzieren?

Legen Sie JavaScript in ein <script>-Element — entweder inline zwischen den Tags oder extern mit src auf eine .js-Datei. Für den Alltag von Anfängern, die die Seite anfassen, setzen Sie das Skript direkt vor das schließende </body>, damit das HTML darüber bereit ist. Wird der Code größer, verschieben Sie ihn in eine externe Datei und behalten dieselbe Gewohnheit am Ende des body (später lernen Sie defer).

Drei Platzierungen auf einen Blick

📊 Wo JavaScript liegen kann

Wahl Wo es sitzt Beste Nutzung für Einsteiger
Inline im head <script> im <head> Nur winziges Setup; riskant, wenn Elemente noch fehlen
Inline am Ende von body <script> direkt vor </body> Standard für kurze Demos, die Überschrift oder Text ändern
Externe .js-Datei <script src="app.js"> (oft Ende von body) Standard, sobald Logik wächst oder Dateien geteilt werden

Skript im head (kennen, vorsichtig nutzen)

Ein Skript im head läuft früh, während der Browser das Dokument noch liest. Das kann sichtbaren Inhalt verzögern. Sucht Ihr Code sofort per getElementById ein Element weiter unten, existiert es oft noch nicht — Ergebnis null oder Fehler.

Skript im head

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — Head</title>
<script>
console.log("Head script ran early");
</script>
</head>
<body>
<h1>Content comes after the head script</h1>
</body>
</html>

Wann ein head-Skript in Ordnung ist

  • Eine Meldung loggen oder einen einfachen Wert setzen, der kein DOM braucht
  • Eine Bibliothek mit modernen Attributen laden (defer / async kommen später)
  • Nicht Ihr Standard für „ändere diesen Absatz“-Demos in diesem Kurs

Skript am Ende von body (Anfänger-Standard)

Zuerst das Markup, das Besucher brauchen. Dann das Skript ausführen. Elemente mit id oberhalb des Skripts sind bereits im Dokument, wenn die Anweisungen laufen.

Skript am Ende von body

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — Body End</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<p>HTML arrives first; then the script updates the heading.</p>
<script>
document.getElementById("title").textContent =
"Ready — script ran at the end of body";
</script>
</body>
</html>

Warum diese Gewohnheit hilft

  • Überschrift und Absatz können vor der Skriptarbeit erscheinen
  • getElementById("title") findet einen echten Knoten
  • Kurze Demos bleiben in einer Datei, während Sie die Sprache lernen
  • Später verschieben Sie dieselben Anweisungen in eine externe Datei, ohne die Idee zu ändern

Externe JavaScript-Datei (Projekt-Standard)

Struktur bleibt in HTML, Logik in app.js. Verweisen Sie mit src. Pfade sind relativ zur HTML-Datei, sofern Sie keinen Ordnerpfad nutzen.

HTML lädt app.js

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — External</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<script src="app.js"></script>
</body>
</html>

Externe app.js

javascript 
document.getElementById("title").textContent =
"Loaded from app.js";

Warum extern mit dem Wachstum gewinnt

  • Eine .js-Datei kann mehrere Seiten bedienen
  • Editoren heben JavaScript in der eigenen Datei klarer hervor
  • Sie vermeiden riesige <script>-Blöcke im Markup
  • Ein falscher src-Pfad scheitert still auf der Seite — prüfen Sie Console und Network, wenn nichts läuft

Die Reihenfolge zählt

Der Browser liest von oben nach unten. Ein Skript läuft, wenn der Parser es erreicht (außer Sie nutzen später fortgeschrittene Attribute). Braucht Zeile 1 Ihres Skripts #title, muss dieses Element über dem Skript im HTML stehen, oder Sie warten auf das fertige Dokument. Ende-von-body ist der einfache Weg zu dieser Reihenfolge.

Selbst ausprobieren

  1. Erstellen Sie where.html mit dem Ende-von-body-Beispiel. Öffnen und prüfen Sie die aktualisierte Überschrift.
  2. Ändern Sie den textContent-String, speichern und aktualisieren.
  3. Erstellen Sie app.js mit dem JavaScript des externen Beispiels. Laden Sie in where.html nur noch <script src="app.js"></script> vor </body>.
  4. Benennen Sie app.js vorübergehend um oder brechen Sie den src-Pfad, aktualisieren und beobachten Sie die Console — dann den Pfad reparieren.
  5. Optional: dasselbe Skript ohne defer in den head legen und sehen, dass getElementById scheitern kann — danach zurück ans Ende von body.

Typische Fehler

  • Ein DOM-aktualisierendes Skript in den head legen, sodass getElementById vor dem Element läuft
  • <script src="app.js"> mit Tippfehler oder falschem Ordner — die Seite sieht gut aus, aber nichts läuft
  • Hunderte Zeilen inline in jeder HTML-Datei statt einer gemeinsamen .js
  • Diese Lektion mit CSS-Verdrahtung verwechseln: Styles nutzen <link> / <style>; Verhalten nutzt <script>

Zusammenfassung

  • JavaScript lebt in einem <script> — inline oder per src zu einer .js-Datei
  • Ende von body ist der einsteigerfreundliche Standard, wenn Code Seitenelemente anfasst
  • Head-Skripte laufen früh; vermeiden Sie dort DOM-Updates, bis Sie Ladeattribute kennen
  • Externe Dateien sind der Projektstandard, sobald Demos wachsen
  • Die Skriptreihenfolge folgt der Dokumentreihenfolge, bis Sie später erweiterte Optionen nutzen
  • Üben Sie, indem Sie eine funktionierende Inline-Demo in HTML + app.js aufteilen

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
6
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 2 von 3
Javascript Tutorial