01 – Einführung & Ausgabe 🖨️
Wo JavaScript hingehört und wie du Inhalte ausgibst
🎯 1. Was ist JavaScript-Ausgabe?
Ausgabe bedeutet, dass JavaScript Inhalte anzeigt – sei es für Entwickler (Konsole) oder Benutzer (Webseite). Die Wahl der richtigen Methode ist entscheidend für Benutzerfreundlichkeit und Wartbarkeit.
📊 2. Übersicht: Ausgabemethoden in JavaScript
| Methode | Verwendung | Vorteile | Nachteile |
|---|---|---|---|
console.log() |
Für Entwickler (Debugging) | Keine Unterbrechung der Seite | Nur für Entwickler sichtbar |
alert() |
Einfache Benachrichtigung | Leicht zu verwenden | Blockiert die ganze Seite! |
document.write() |
Nur beim Seitenladen | Einfach für Anfänger | Löscht ganze Seite nach Ladung! → Vermeiden! |
innerHTML |
Dynamische Webseiten | Professionell, flexibel, sicher | Benötigt Element-ID |
🎯 3. Einleitung & W3Schools
In diesem Kapitel lernst du, wann du welche Ausgabemethode verwenden sollst – mit Fokus auf moderne, professionelle Techniken.
🧠 4. KI-Prompt-Training
Aufgabe: Formuliere einen Prompt, mit dem du KI um Hilfe bitten würdest,
um die Unterschiede zwischen console.log(), alert(),
document.write() und innerHTML zu erklären –
und warum innerHTML die professionelle Wahl ist.
🛠️ 5. console.log() – für Entwickler
Die Konsole ist das wichtigste Werkzeug zum Debuggen (Fehlersuchen). Öffne sie mit F12 → Reiter „Konsole“.
function demoConsole() {
console.log("Hallo aus der Konsole! 👋");
console.log("Dieser Text ist nur für Entwickler sichtbar.");
}⚠️ 6. alert() – einfache Benachrichtigung
alert() zeigt ein Popup-Fenster an – aber es blockiert die ganze Seite,
bis der Benutzer auf „OK“ klickt. Deshalb sollte es selten verwendet werden.
function demoAlert() {
alert("Hallo aus einem Popup! ⚠️\\n(Dieses Blockieren der Seite ist oft unerwünscht.)");
}⌨️ 6b. prompt() – Eingabe vom Benutzer
Mit prompt() kannst du den Benutzer nach einer Eingabe fragen.
Die Funktion gibt den eingegebenen Text als String zurück.
prompt() blockiert die Seite –
wie alert(). In professionellen Anwendungen nutzt man stattdessen
Formularfelder (siehe Kapitel 12 im HTML/CSS-Tutorial).
function demoPrompt() {
const name = prompt("Wie heißt du?");
if (name) {
document.getElementById("ausgabe-prompt").innerHTML =
`<p>Hallo, <strong>${name}</strong>! Schön, dich kennenzulernen. 😊</p>`;
} else {
document.getElementById("ausgabe-prompt").innerHTML =
"<p>Du hast keinen Namen eingegeben. 😕</p>";
}
}❌ 7. document.write() – vermeiden!
document.write() funktioniert nur während des Seitenladens.
Wird es danach aufgerufen, löscht es die ganze Seite!
→ In der Praxis nie verwenden.
function demoDocumentWrite() {
if (document.readyState === 'loading') {
// Funktioniert nur beim Laden
document.write("<h2>Neue Seite durch document.write!</h2>");
} else {
// Nach dem Laden: Warnung anzeigen
document.getElementById("ausgabe-write").innerHTML =
"<p class='warnung'>❌ document.write() funktioniert nur während des Seitenladens!</p>";
}
}✅ 8. innerHTML – die professionelle Methode
innerHTML ändert den Inhalt eines HTML-Elements –
ideal für dynamische Webseiten (z. B. To-Do-Listen, Chat).
function demoInnerHTML() {
const bereich = document.getElementById("ausgabe-inner");
bereich.innerHTML = "<p style='color: #27ae60;'><strong>Erfolg!</strong> Dieser Text wurde dynamisch mit JavaScript eingefügt. 🎉</p>";
}