Javascript modale Fenster / Dialogfenster
Nachrichten an den Benutzer können direkt ins HTML geschrieben (z.B. mit innerHTML) oder mit alert, prompt und confirm in einem modalen Dialogfenster ausgegeben werden. Unter modalen Fenstern versteht man die kleinen Fenster, die der Browser über dem Fenster der Seite öffnet. Der Browser bestimmt, wie das modale Fenster aussieht. Dialogfenster müssen erst bestätigt oder beantwortet werden, bevor der Benutzer wieder auf das Browserfenster zugreifen kann und das Script fortgesetzt wird.
Diese Nachrichtenfenster oder Dialogboxen gibt es seit den Anfängen von Javascript. Heute werden sie nur in Ausnahmefällen benutzt, denn sie stellen schnell Barrieren dar.
alert, confirm, prompt
alert () ist die bekannteste Javascript-Methode zum Öffnen und Schließen von Fenstern – sie wird vor allem für die Fehlersuche in kleinen Scripten eingesetzt, ist aber heute der einfachen Ausgabe in die Console des Browsers gewichen.
- Javascript window.alert (nachricht) zeigt einen Text in einem modalen Fenster,
- Javascript window.confirm (frage) stellt dem Benutzer vor eine Ja / Nein-Alternative,
- Javascript window.prompt (nachricht, standard) stellt ein Feld für eine Texteingabe zur Verfügung.
All diese modalen Fenster entfernen den Fokus vom aktuellen Fenster und zeigen dem Benutzer einfache Dialogboxen, die der Benutzer schließen muss, bevor das Script weiter ausgeführt wird und der Benutzer wieder Zugriff auf die Seite hat.
const button = document.getElementById('mybutton');
const sum = 17 + 4;
button.onclick = function() {
alert ("Nachricht " + sum); // oder
alert (`Nachricht ${sum}`); // als Template Literal oder literaler String
}
alert () kann nicht nur einen literalen String (eine wörtliche Zeichenkette) ausgeben, sondern auch den Wert von Variablen.
Für die Kommunikation mit dem Benutzer sind alert, confirm und prompt nicht geeignet. Aber mit HTML5 haben sie eine flexible und barrierefreie Variante bekommen: die Methoden showModal() und show() des HTML-dialog-Elements. Das details-Element enthält HTML und läßt sich mit CSS anpassen.
console
Die Manipulation von DOM-Elementen und CSS mit Javascript ist HTML-Codierung im Blindflug. Die dringlichsten Fragen sind: Existiert das Element und spreche ich es richtig an?
Die Console unter den Entwickler-Werkzeugen des Browsers ist das einfachste Radarsystem, wenn wir herausfinden wollen, ob HTML-Tags, Attribute oder CSS an der richtigen Stelle eingefügt wurden. Der Javascript-Befehl console.log () gibt eine Nachricht als String mit Variablen in die Consolen von Firefox, Chrome oder Safari (und auch von Internet Explorer aus).
const sum = 21 + 21;
console.log ("Summe " + sum);
oder
console.log ("Summe", sum);
oder
console.log (`Summe ${sum}`);
Ausgaben mit dem Aufruf von Javascript console.log () erscheinen in der Browserkonsole.
- In den Webkit-Browsern öffnet CMD ALT J (Chrome) bzw. CMD ALT C (Safari) die Console auf dem Mac direkt,
- auf dem PC CTRL ALT J,
- bei IE und Edge öffnet F12 die Console.
Mit innerHTML zeigt die Browser-Console Teile der Baumstruktur, mit outerHTML auch mitsamt dem Element selbst. Das ist ein schneller Check, ob das Einfügen oder Entfernen von Elementen mittels Javascript tatsächlich wie gewünscht funktioniert hat.
console.log (document.querySelector("elem.entry").outerHTML);
console.log (document.querySelector("elem.entry").innerHTML);
window print
print () sendet die Seite zum Drucker, so als hätte der Benutzer den Befehl Drucken verwendet.
<button id="print">Drucken</button>
…
document.getElementById('print').onclick = function() {
window.print();
}
javascript print () hat keine Parameter.
