7.5.1 Einfache Beispiele mit JavaScript
Wir beginnen mit einfachen JavaScript-Beispielen.
History-Methoden
Die History oder Chronik eines Browsers zeigt die Seiten, die der Benutzer in einem bestimmten Zeitabschnitt besucht hat. Mit dem JavaScript-Objekt history
können wir innerhalb dieser Chronik navigieren. Dazu gibt es die Funktionen back()
, forward()
und go()
. Egal, ob wir vor- und zurückblättern in einem Online-Shop oder in einem Online-Fragebogen, die History-Objekte werden sehr oft verwendet.
History-Methoden | Beschreibung |
---|---|
back() |
Mit history.back() springt man im Verlauf eine Seite nach hinten („zurück“). |
forward() |
Mit history.forward() rückt man eine Seite nach vorne. |
go() |
history.go() erwartet einen Zahlen-Parameter, der angibt, wie viele Seiten zurück (negativ) oder vorwärts (positiv) gesprungen werden soll. |
go(0) |
Mit history.go(0) wird die aktuelle Seite neu geladen. |
Einfaches Beispiel: Navigation
So sieht es im Browser aus
Die Funktion print()
bietet die Möglichkeit, den Druck-Dialog des Browserfensters zu starten. Dadurch erleichtern Sie dem Benutzer das Drucken der Website. Er muss nicht mehr über die Kontextmenüs zum Druck-Dialog gelangen.
So sieht es im Browser aus
Browserfenster-Größe anzeigen
Zeigen Sie die aktuelle Breite und Höhe des Browserfensters direkt auf der Webseite an.
window
-Objekt
Die bisherigen Beispiele haben eine Gemeinsamkeit: das window
-Objekt.
Da das window
-Objekt das globale Objekt im Browser ist, sind seine Methoden und Eigenschaften automatisch überall verfügbar. Dies bedeutet, dass man history.back()
ohne das Präfix window.
schreiben kann. Beide Varianten sind identisch in ihrer Funktion:
Die Tabellen enthalten die wichtigsten window
-Anweisungen in JavaScript (die alle auch ohne window.
geschrieben werden können). Die ersten fünf window
-Anweisungen kennen wir bereits.
Bekannte Anweisungen | Beschreibung |
---|---|
window.alert(message) |
Zeigt ein modales Dialogfeld mit einer Nachricht und einem "OK"-Button an. |
window.history |
Ermöglicht Navigation im Browser-Verlauf (z. B. window.history.back() oder window.history.forward() ). |
window.print() |
Öffnet den Druckdialog des Browsers, um die aktuelle Seite zu drucken. |
window.innerHeight |
Liefert die Höhe des Anzeigebereichs (Viewport) in Pixeln. |
window.innerWidth |
Liefert die Breite des Anzeigebereichs (Viewport) in Pixeln. |
Weitere Anweisungen | Beschreibung |
---|---|
window.confirm(message) |
Zeigt ein Bestätigungsdialog mit "OK" und "Abbrechen". Gibt true (OK) oder false (Abbrechen) zurück. |
window.prompt(message, default) |
Zeigt ein Eingabefeld an, in dem der Benutzer Text eingeben kann. Gibt den Text oder null zurück. |
window.open(url, name, specs) |
Öffnet ein neues Fenster oder Tab mit der angegebenen URL und Konfiguration. |
window.close() |
Schließt das aktuelle Browserfenster (nur wenn es durch window.open() geöffnet wurde). |
window.scrollBy(x, y) |
Scrollt die Seite relativ zur aktuellen Position um x Pixel horizontal und y Pixel vertikal. |
window.scrollTo(x, y) |
Scrollt die Seite auf die angegebenen Koordinaten. |
window.setTimeout(function, delay) |
Führt eine Funktion einmalig nach einer bestimmten Verzögerung (in Millisekunden) aus. |
window.clearTimeout(id) |
Stoppt einen mit setTimeout gestarteten Timer. |
window.setInterval(function, delay) |
Führt eine Funktion wiederholt in bestimmten Intervallen (in Millisekunden) aus. |
window.clearInterval(id) |
Stoppt einen mit setInterval gestarteten wiederholten Timer. |
window.focus() |
Bringt das Fenster in den Fokus. |
window.blur() |
Entfernt den Fokus vom Fenster. |
window.location |
Bietet Zugriff auf die URL des aktuellen Dokuments (z. B. window.location.href ). |
window.navigator |
Gibt Informationen über den Browser und das Betriebssystem zurück. |
window.localStorage |
Ermöglicht das Speichern von Daten im lokalen Speicher des Browsers (bleibt auch nach dem Schließen erhalten). |
window.sessionStorage |
Ermöglicht das Speichern von Daten für die aktuelle Sitzung (wird gelöscht, wenn der Tab geschlossen wird). |
window.console |
Bietet Zugriff auf die Browserkonsole (z. B. window.console.log("Test") ). |
window.onerror |
Ermöglicht das Abfangen von Fehlern in JavaScript. |
Weitere Informationen window
-Anweisungen finden sich bei MDN.