JavaScript-Browserumgebung und Spezifikationen

JavaScript ist ein unverzichtbares Werkzeug, um Websites interaktiv zu gestalten. Dieser Leitfaden hilft Ihnen zu verstehen, wie JavaScript in einem Webbrowser funktioniert. Er behandelt wichtige Themen wie das Document Object Model (DOM), das Browser Object Model (BOM) und wie wir diese per JavaScript manipulieren können. Außerdem zeigen wir Ihnen einfache Codebeispiele, die Ihnen den Einstieg erleichtern.

Der JavaScript-Kern und die Hostumgebung

Die JavaScript-Sprache selbst — der Teil, der durch die ECMAScript-Spezifikation definiert wird — kennt nur Dinge wie Zahlen, Zeichenketten, Objekte, Arrays, Funktionen, Math, JSON und Ähnliches. Sie hat kein Konzept von einer Webseite, einem Button oder einer URL.

Diese Fähigkeiten stammen aus der Hostumgebung: dem Programm, das Ihren Code ausführt. In einem Webbrowser stellt diese Umgebung JavaScript eine große Menge zusätzlicher Objekte (das DOM und das BOM) zur Verfügung, damit Ihre Skripte die Seite lesen und verändern sowie mit dem Browser kommunizieren können. Ein anderer Host, wie z. B. Node.js, bietet eine völlig andere Menge (Dateisystem, Netzwerkserver) und kennt weder document noch window.

Ein Browserskript besteht daher aus zwei Schichten, die zusammenarbeiten:

ECMAScript-Kern — die Sprachfunktionen, die überall vorhanden sind.
Host-(Browser-)Objekte — window, document, navigator, location und der Rest, bereitgestellt vom Browser, nicht von der Sprache.

window: das globale Objekt

Im Browser ist das übergeordnete Objekt von allem window. Es erfüllt gleichzeitig zwei Rollen:

Es repräsentiert das Browserfenster (seine Größe, die geöffneten Tabs, Dialoge, Timer).
Es ist das globale Objekt — jede globale Variable und jede globale Funktion wird zu einer Eigenschaft von window.

Deshalb beziehen sich alle folgenden Ausdrücke auf dieselbe Sache:

javascript— editable

Die zwei großen Objektfamilien, die von window hängen, sind das DOM (die Seite) und das BOM (der Browser). Der Rest dieses Leitfadens behandelt beide.

Was ist das Document Object Model (DOM)?

Das Document Object Model (DOM) ist wie eine Karte des Inhalts einer Website. Der Browser parst das HTML in einen Baum aus Objekten, und die Wurzel dieses Baums ist das document-Objekt. Jedes Tag wird zu einem Knoten, den Sie per JavaScript lesen, ändern, hinzufügen oder entfernen können — das bedeutet, Sie können Inhalt, Struktur und Design der Website zur Laufzeit verändern.

Eine ausführlichere, praxisnahe Einführung in das Auswählen und Verändern von Knoten finden Sie unter DOM-Manipulation.

Beispiel: Elemente hinzufügen und verändern

So fügen Sie einer Webseite einen neuen Bereich hinzu und ändern seinen Inhalt. Wie Sie im folgenden Beispiel sehen können, gibt es im Body keinen Textabsatz. Der JavaScript-Code fügt jedoch ein neues p-Tag zum document-Objekt hinzu.

<!DOCTYPE html>
<html>
<head>
  <title>Simple DOM Example</title>
</head>
<body>
  <script>
    // Make a new part of the page
    const paragraph = document.createElement("p");
    paragraph.textContent = "Hello, JavaScript!";

    // Add the new part to the page
    document.body.appendChild(paragraph);
  </script>
</body>
</html>

Probier es selbst »

Was ist das Browser Object Model (BOM)?

Das Browser Object Model (BOM) gibt JavaScript die Möglichkeit, mit dem Browser zu interagieren. Es enthält mehrere Objekte, die es Skripten erlauben, Funktionen auszuführen, die den Browser selbst betreffen — nicht nur den Inhalt der Webseite. Das BOM umfasst auch Standardobjekte wie history zur Steuerung der Browsernavigation und screen für den Zugriff auf Displayabmessungen. Um die Grenze frühzeitig klarzustellen: Das DOM befasst sich mit der Struktur und dem Inhalt der Webseite, während das BOM sich auf das Browserfenster selbst konzentriert.

Komponenten des BOM

window

Das window-Objekt repräsentiert das Browserfenster. Es enthält Funktionen zur Steuerung des Browsers, darunter das Auslesen seiner Größe und Position, Scrollen, das Setzen von Timern (setTimeout, setInterval) und das Anzeigen von Dialogen (alert, confirm, prompt). Informationen zur Messung und zum Scrollen des viewport finden Sie unter Fenstergrößen und Scrollen.

So können Sie ein neues Browserfenster mit dem window-Objekt öffnen:

<!DOCTYPE html>
<html>
<head>
    <title>Open New Window Example</title>
</head>
<body>
    <button onclick="openNewWindow()">Click to Open a New Window</button>
    <script>
        function openNewWindow() {
            // Open a new window and specify its properties
            var myWindow = window.open("", "MsgWindow", "width=400,height=200");
            myWindow.document.body.innerHTML = "<p>Welcome to a new pop-up window! This is created using JavaScript.</p>";
        }
    </script>
</body>
</html>

Probier es selbst »

Hinweis: Moderne Browser blockieren window.open() in der Regel, wenn es nicht direkt durch eine Benutzeraktion ausgelöst wird, z. B. durch einen Klick.

navigator

Das navigator-Objekt enthält Informationen über den Browser, wie Name, Version und Browserfunktionen, zum Beispiel die Cookie-Unterstützung. So verwenden Sie das navigator-Objekt, um zu prüfen, ob Cookies aktiviert sind:

javascript— editable

Location

Das location-Objekt liefert Informationen über die aktuelle URL und kann verwendet werden, um den Browser auf eine andere Adresse weiterzuleiten. Dieses Beispiel zeigt verschiedene Bestandteile der URL (wie Protokoll, Hostname und Pfadname) auf der Webseite an.

javascript— editable

history

Das history-Objekt ermöglicht es Ihnen, durch den Sitzungsverlauf des Benutzers zu navigieren — die im aktuellen Tab besuchten Seiten — ohne die eigentlichen URLs preiszugeben. Es ist die Grundlage für die Zurück- und Vorwärts-Schaltflächen des Browsers und bildet die Basis für das clientseitige Routing in Single-Page-Apps.

javascript— editable

screen

Das screen-Objekt beschreibt das gesamte Display des Benutzers (Monitor), nicht das Browserfenster. Es ist nützlich, um zu ermitteln, wie viel Platz verfügbar ist, bevor ein Fenster geöffnet oder positioniert wird.

javascript— editable

Tipp: screen meldet das physische Display. Um den Bereich zu messen, den Ihre Seite tatsächlich nutzen kann, lesen Sie stattdessen den window-viewport aus.

Die Spezifikationen hinter der Browserumgebung

Diese Objekte sind nicht browserspezifisch erfunden — sie werden durch öffentliche Standards definiert, damit Code überall gleich funktioniert:

ECMAScript (gepflegt von TC39) — der JavaScript-Sprachkern: Syntax, Typen und eingebaute Objekte wie Array, Object, Math, JSON.
DOM Living Standard (WHATWG) — document und der Baum aus Elementknoten.
HTML Living Standard (WHATWG) — definiert window, navigator, location, history und wie HTML-Seiten Skripte ausführen.
CSSOM (W3C) — das Objektmodell zum Lesen und Ändern von Stilen per JavaScript.

Wenn man sagt, ein Feature sei „standardisiert", bedeutet das, dass es in einer dieser Spezifikationen erscheint und Browser es entsprechend implementiert haben.

Weitere Möglichkeiten zur DOM-Nutzung

JavaScript ermöglicht es Ihnen auch, Website-Inhalte dynamisch über Events und Datenattribute zu verwalten.

Beispiel: Klicks verarbeiten und Daten verwenden

So richten Sie Click-Events ein und verwenden Datenattribute:

<!DOCTYPE html>
<html>
<head>
  <title>Click Event Example</title>
  <style>
    #first {
      background-color: red;
      max-width: 100px;
    }
  </style>
</head>
<body>
  <div id="first">Click me!</div>
  <script>
    document.getElementById('first').addEventListener('click', function () {
      alert(`Item clicked.`);
    });
  </script>
</body>
</html>

Probier es selbst »

Dieser Code richtet ein Click-Event für das div-Element ein und zeigt eine Meldung an, wenn darauf geklickt wird. Manche Events lösen auch eingebautes Browserverhalten aus (ein Link navigiert, ein Formular wird abgeschickt) — wie Sie das steuern oder verhindern können, erfahren Sie unter Standard-Browseraktionen.

Fazit

Wenn Sie verstehen, wie JavaScript mit dem Browser interagiert, können Sie reaktionsschnelle, benutzergesteuerte Websites erstellen. Durch die Beherrschung von DOM und BOM gemeinsam mit modernen Best Practices können Sie zuverlässige und ansprechende Webanwendungen entwickeln.

Übungen

Übung

Welche Rolle spielt das DOM in der Browserumgebung von JavaScript?

Es ermöglicht JavaScript, mit dem Inhalt der Seite zu interagieren.Es sagt das Verhalten von Benutzerinteraktionen auf der Webseite vorher.Es stellt JavaScript-Frameworks für das Design von Webseiten bereit.Es bietet Methoden zur Manipulation von Seiteninhalten.