Signatur
Beschreibung
window.alert() weist den Browser an, einen einfachen, modalen Hinweisdialog mit einer optionalen Textnachricht und einer einzigen Schaltfläche („OK“) anzuzeigen. Solange der Dialog offen ist, ist die Ausführung von JavaScript im aktuellen Kontext angehalten. Der Aufruf ist synchron und kehrt erst zurück, wenn der Nutzer den Dialog schließt.
Da alert eine Methode des globalen window-Objekts ist, reicht meist der Kurzaufruf alert("…"). Der übergebene Wert wird in einen String umgewandelt. Objekte erscheinen deshalb als [object Object], außer man serialisiert sie vorher, etwa mit JSON.stringify().
Gut geeignet ist alert() für schnelle Prototypen, Lernbeispiele und einfache Debug-Ausgaben. In produktiven Anwendungen sollte man darauf verzichten: Der Dialog lässt sich nicht gestalten, blockiert die ganze Seite und unterbricht den Nutzer. Besser sind eigene Hinweise im Seiteninhalt oder das HTML-Element <dialog>.
Unter bestimmten Umständen zeigt der Browser den Dialog nicht an oder wartet nicht auf den Nutzer. Das passiert zum Beispiel in Hintergrund-Tabs, wenn der Nutzer weitere Dialoge unterdrückt hat, oder in Iframes ohne die Sandbox-Berechtigung allow-modals.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $message | string | any | "" | Text, der im Dialog angezeigt wird. Andere Werte werden in einen String umgewandelt. Zeilenumbrüche mit \n sind möglich, HTML wird nicht ausgewertet. |
Rückgabewert
undefined). Die Methode kehrt erst zurück, wenn der Dialog geschlossen wurde.Beispiele
Einfacher Hinweis
// Kurzform ohne window.
alert("Willkommen auf programmierung.net!");
console.log("Dialog wurde geschlossen");
Formularvalidierung mit mehrzeiliger Meldung
const form = document.querySelector("#anmeldung");
form.addEventListener("submit", (event) => {
const fehler = [];
if (!form.elements.email.value.includes("@")) fehler.push("- E-Mail ist ungültig");
if (form.elements.passwort.value.length < 8) fehler.push("- Passwort zu kurz (min. 8 Zeichen)");
if (fehler.length > 0) {
event.preventDefault();
window.alert(`Bitte korrigieren:\n${fehler.join("\n")}`);
}
});
Objekte lesbar ausgeben
const nutzer = { name: "Anna", rolle: "Admin" };
alert(nutzer); // zeigt: [object Object]
alert(JSON.stringify(nutzer, null, 2)); // zeigt formatiertes JSON
Blockierendes Verhalten sichtbar machen
const start = performance.now();
alert("Klicke auf OK, wenn du bereit bist.");
const dauer = Math.round(performance.now() - start);
console.log(`Dialog war ${dauer} ms geöffnet`);
// Wichtig · Fallstricke
- Blockierend: Solange der Dialog offen ist, laufen im aktuellen Tab keine Timer, Event-Handler oder Animationen weiter. Für Debugging ist
console.log()meist die bessere Wahl. - Keine Gestaltung: Aussehen, Titel und Schaltfläche legt der Browser fest. Für eigene Dialoge eignet sich
<dialog>mitshowModal(). - Unterdrückung: Browser können wiederholte Dialoge blockieren („Weitere Dialoge verhindern“). In Iframes mit
sandboxohneallow-modalswird der Aufruf ignoriert. Chrome blockiertalert()außerdem in ursprungsfremden (cross-origin) Iframes. - Keine Unterstützung in Workern und Node.js: In Web Workern und Service Workern gibt es
alertnicht, ebenso wenig in Node.js. Deno stellt dagegen eine Konsolen-Variante bereit. - Sicherheit: Die Nachricht wird als reiner Text dargestellt, HTML wird nicht ausgewertet. Trotzdem ist
alert(1)ein klassischer Nachweis für XSS-Lücken. Browser kennzeichnen den Ursprung im Dialog, damit Seiten keine Systemmeldungen vortäuschen können. - Barrierefreiheit und Nutzerführung: Häufige Unterbrechungen stören. Nicht-blockierende Hinweise im Seiteninhalt (z. B. mit
role="alert") sind meist nutzerfreundlicher.