Lädt...

JavaScript-Ausgabe

Sie können ein Skript auf die Seite legen. Als Nächstes: wo erscheint das Ergebnis? Auf der Seite für Besuchende, in einem Dialog zum Wegklicken, oder nur in der Console für Sie. Eine Sprache — vier sehr verschiedene Orte.

Wie zeigen Sie JavaScript-Ergebnisse?

Für Besuchende ändern Sie ein vorhandenes Element — textContent für einfachen Text, innerHTML nur wenn Sie Markup einfügen müssen. Für eine blockierende Meldung window.alert. Zum eigenen Prüfen console.log. document.write ist ein älterer Strom: während der Datei gelesen wird oft harmlos, nach dem Laden gefährlich, weil das Dokument ersetzt werden kann.

Wo sieht man das Ergebnis?

📊 Häufige Orte für die Ausgabe

Methode Wer sieht es Anfänger-Standard
textContent an einem Element Besuchende, auf der Seite Ja — alltägliche sichtbare Ausgabe
innerHTML an einem Element Besuchende, inklusive HTML-Tags Nur bei Markup, das Sie selbst schreiben
window.alert Besuchende, in einem Dialog Selten — die Seite wartet auf OK
console.log Sie, in der DevTools-Console Ja zum Debuggen; Besuchende sehen nichts
document.write der HTML-Strom Nach dem Laden meiden

Ausgabe auf der Seite (Standard für Besuchende)

Lassen Sie eine echte Überschrift oder einen Absatz in HTML. Wenn das Skript läuft (Ende von body wie zuvor), ändern Sie diesen Knoten. Besuchende sehen den neuen Text ohne DevTools.

Sichtbarer Text mit textContent

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — Page</title>
</head>
<body>
<h1 id="msg">Waiting…</h1>
<script>
document.getElementById("msg").textContent =
"Hello from JavaScript";
</script>
</body>
</html>

Warum zuerst textContent

  • Scheitert das Skript, bleibt „Waiting…“ im HTML
  • Anführungszeichen und < bleiben Text, keine Tags
  • Dasselbe Muster wie beim Skript am Ende von body
  • Das DOM-Modul kommt später; hier reicht „Ergebnis hierhin“

innerHTML — wenn das Ergebnis Markup ist

innerHTML liest eine Zeichenkette als HTML. Nutzen Sie es, wenn Sie absichtlich Tags einfügen, die Sie geschrieben haben. Rohe Nutzereingaben nicht in innerHTML kippen. Für Namen oder Preise bleibt textContent richtig.

Markup mit innerHTML einfügen

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — innerHTML</title>
</head>
<body>
<p id="box">Empty</p>
<script>
document.getElementById("box").innerHTML =
"<strong>Ready</strong> — markup inside the paragraph";
</script>
</body>
</html>

document.write — kennen, selten nutzen

document.write schreibt in den HTML-Strom, während die Datei noch geparst wird. Rufen Sie es nach dem Laden auf (später Klick), öffnen viele Browser einen neuen Strom und löschen die Seite. Für Updates ein Element ändern — diese Gewohnheit nicht annehmen.

document.write kann eine geladene Seite löschen

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — write</title>
</head>
<body>
<p>This paragraph exists first.</p>
<button type="button" id="wipe">Call document.write after load</button>
<script>
document.getElementById("wipe").onclick = function () {
document.write("The previous page content is gone");
};
</script>
</body>
</html>

Öffnen Sie die Demo, klicken Sie, und sehen Sie: der erste Absatz ist weg. Deshalb nutzen wir document.write in späteren Beispielen dieses Kurses nicht.

alert — ein Dialog, der die Seite anhält

window.alert (meist alert) öffnet einen Systemdialog. Die Seite wartet auf OK. Einmal nützlich, um zu beweisen, dass das Skript lief. Als einzige Oberfläche schwach: nicht gestaltbar, störend in Serie, unterbricht Screenreader und Tastatur. Echte Meldungen auf die Seite schreiben.

Ein einmaliger alert

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — Alert</title>
</head>
<body>
<p>The page pauses until you dismiss the dialog.</p>
<script>
alert("Script ran — click OK to continue");
</script>
</body>
</html>

console.log — für Sie, nicht für Besuchende

Die Console ist ein Entwicklerwerkzeug. console.log schreibt dorthin. Kundinnen am Handy sehen das nicht. Gut, um beim Lernen eine Zahl oder Zeichenkette zu prüfen. Ein erfolgreiches Log heißt nicht „die App hat das Ergebnis gezeigt“.

Nur für Entwickler

javascript 
console.log("Visible in DevTools, not on the page");
console.log(2 + 2);

DevTools öffnen (oft F12), Tab Console, neu laden, Zeilen lesen. Ändern Sie nur console.log und die Überschrift bleibt „Waiting…“, sehen Besuchende weiterhin „Waiting…“.

Selbst ausprobieren

  1. Die textContent-Seite speichern, öffnen, die Zeichenkette ändern, neu laden.
  2. Die Zeile auf innerHTML mit <strong> umstellen und prüfen, ob das Wort fett wirkt.
  3. Console öffnen und das console.log-Beispiel ausführen — im Seitenkörper nichts Neues.
  4. Das alert-Beispiel einmal; dann alert durch eine Überschriftenänderung ersetzen, damit die Seite nicht blockiert.
  5. Optional: den document.write-Button ausprobieren, das Löschen spüren — dann das Muster aus eigenen Dateien entfernen.

Typische Fehler

  • Ergebnisse nur mit console.log zeigen und sich über leere Seiten wundern
  • Fremden Text (Formulare, URLs, Chat) in innerHTML statt textContent schreiben
  • document.write nach dem Laden und das ganze Layout verlieren
  • alert bei jedem Tastendruck
  • Verwechslung mit Where To: dort wo das Skript steht; hier wo das Ergebnis erscheint

Zusammenfassung

  • Sichtbarer Standard für Besuchende: Element mit textContent ändern
  • innerHTML fügt Markup ein, das Sie kontrollieren — keine untrusted Strings
  • alert blockiert; sparsam verwenden
  • console.log ist für Entwickler in den DevTools
  • Nach dem Laden kein document.write; das Dokument kann verschwinden
  • Üben: dieselbe Nachricht von Console → alert → Überschrift

🧠 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 3 von 4
Javascript Tutorial