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

1
2
3
4
<button onclick="history.back()">Zurück</button>
<button onclick="history.forward()">Vorwärts</button>
<button onclick="history.go(-2)">Zwei Seiten zurück</button>
<button onclick="history.go(0)">Seite neu laden</button>

So sieht es im Browser aus


Drucken

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.

<button onclick="print()">Seite drucken</button>

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.

1
2
3
4
5
<p>Die Fenstergröße beträgt: <span id="windowSize"></span></p>
<script>
  document.getElementById("windowSize").textContent = 
    innerWidth + "px x " + innerHeight + "px";
</script>

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:

// Langversion
window.history.back();

// identisch zur Kurzversion
history.back();

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.