JavaScript-Browserumgebung, Spezifikationen
JavaScript ist ein sehr wichtiges Werkzeug, um Websites interaktiv zu gestalten. Dieser Leitfaden hilft Ihnen zu verstehen, wie JavaScript in einem Webbrowser funktioniert, und behandelt wichtige Themen wie das Document Object Model (DOM), das Browser Object Model (BOM) sowie die Manipulation beider über JavaScript. Außerdem zeigen wir Ihnen einige einfache Codebeispiele, damit Sie schnell einsteigen können.
Was ist das Document Object Model (DOM)?
Das Document Object Model (DOM) ist wie eine Karte des Inhalts einer Website. Mit dem DOM können Sie den Inhalt, die Struktur und das Design einer Website mit JavaScript ändern.
Beispiel: Hinzufügen und Ändern von Elementen
So fügen Sie ein neues Element zu einer Webseite hinzu und ändern dessen Inhalt. Wie Sie im folgenden Beispiel sehen können, befindet sich im body-Bereich zunächst kein 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>Result
Was ist das Browser Object Model (BOM)?
Das Browser Object Model (BOM) ermöglicht es JavaScript, mit dem Browser zu interagieren. Es umfasst mehrere Objekte, die Skripten Funktionen ermöglichen, die sich auf den Browser selbst beziehen und nicht nur auf den Inhalt der Webseite. Zum BOM gehören auch Standardobjekte wie history zur Verwaltung der Browser-Navigation und screen zum Zugriff auf die Anzeigedimensionen. Zur frühen Abgrenzung: Das DOM konzentriert sich auf die Struktur und den Inhalt der Webseite, während sich das BOM auf das Browserfenster selbst konzentriert.
Komponenten des BOM
window
Das window-Objekt repräsentiert das Browserfenster. Es enthält Funktionen zur Steuerung des Browsers, einschließlich der Manipulation von Größe und Position des Browserfensters. So können Sie mit dem window-Objekt ein neues Browserfenster ö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>Result
Hinweis: Moderne Browser blockieren
window.open()in der Regel, wenn es nicht direkt durch eine Benutzeraktion wie einen Klick ausgelöst wird.
navigator
Das navigator-Objekt enthält Informationen über den Browser, wie Name, Version und Browserfunktionen wie Cookie-Unterstützung. So verwenden Sie das navigator-Objekt, um zu prüfen, ob Cookies aktiviert sind:
Location
Das location-Objekt liefert Informationen zur aktuellen URL und kann verwendet werden, um den Browser zu einer anderen Adresse umzuleiten. In diesem Beispiel werden verschiedene Komponenten der URL (wie Protokoll, Hostname und Pfad) auf der Webseite angezeigt.
Weitere Möglichkeiten zur Nutzung des DOM
JavaScript ermöglicht es Ihnen außerdem, Website-Inhalte dynamisch über Ereignisse und Datenattribute zu verwalten.
Beispiel: Verarbeiten von Klicks und Verwenden von Daten
So richten Sie Klickereignisse 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>Result
Dieser Code richtet ein Klickereignis für das div-Element ein und zeigt eine Meldung an, wenn es angeklickt wird.
Fazit
Das Verständnis der Interaktion von JavaScript mit dem Browser ermöglicht es Ihnen, reaktionsfähige, benutzerorientierte Websites zu erstellen. Durch die Beherrschung von DOM und BOM in Kombination mit modernen Best Practices können Sie zuverlässige und ansprechende Webanwendungen entwickeln.
Praxis
Was ist die Rolle des DOM in der Browserumgebung von JavaScript?