Weiterführende Themen

JavaScript-DOM

Das DOM (Document Object Model) ist eine vom W3C (World Wide Web Consortium) definierte plattform- und sprachenunabhängige Schnittstelle, die es Skripten erlaubt, dynamisch auf Dokumente zuzugreifen und deren Inhalt, Struktur und Aussehen zu verändern. Beim Laden einer Webseite erstellt der Browser aus dem HTML-Dokument das DOM, eine Baumstruktur von Objekten, basierend auf den HTML-Elementen des HTML-Dokuments. Die Elemente im DOM können dann mit Hilfe von JavaScript angesprochen, manipuliert und gelöscht werden. Außerdem können mit JavaScript auch neue Objekte dem DOM hinzugefügt werden. Diese Änderungen finden aber nur im Browser auf dem Rechner des Besuchers einer Webseite statt, während die HTML-Dokumente auf dem Webserver unangetastet bleiben:

Mit Hilfe von JavaScript kann über das DOM auf einer HTML-Seite HTML-Elemente, -Attribute und -Events sowie CSS-Anweisungen erstellt, geändert und gelöscht werden. Ein einfaches Beispiel ist das Auslesen und Setzen des Inhalts von HTML-Elementen mit Hilfe der Methode „getElementById“:

HTML-Datei:

Ergebnis:

Kapitel 1

...

JavaScript-BOM

Das BOM (Browser Object Model) ist eine Eigenschaft von Browsern, die es Skripten erlaubt, mit dem Browser zu interagieren. Das BOM ist keine standardisierte Schnittstelle und kann von Browser zu Browser variieren. Es besteht aus den Objekten „document“, „screen“, „location“ „history“ und „navigator“, die wiederum zum Objekt „window“ gehören. Über diese Objekte kann das Browser-Fenster manipuliert und dessen Eigenschaften ausgelesen werden. Ein Teil des BOM ist das DOM (Document Object Model), das durch das „document“-Objekt repräsentiert wird:

Das „window“-Objekt wird von allen namhaften Browsern unterstützt. Mit JavaScript kann auf das „window“-Objekt zugegriffen und so mit dem Browser-Fenster interagiert werden. Ein einfaches Beispiel ist das Auslesen der Größe des Browser-Fensters mit „innerHeight“ und „innerWidth“:

HTML-Datei:

Ergebnis:

Höhe: Pixel

Breite: Pixel

JavaScript-HTML5

HTML5 ist die fünfte Version von HTML, die 2014 vom W3C (World Wide Web Consortium) vorgestellt wurde. HTML5 hat HTML4 um Elemente zur Audio- und Video-Wiedergabe sowie zur Anzeige von Vektorgraphiken erweitert. Weiter kamen Funktionen wie Positions-ermittelung, Drag and Drop, lokaler Speicher, Anwendungs-Cache, Web-Worker, Server-Sent-Events sowie Möglichkeiten zur Anzeige dynamischer Grafiken und Karten hinzu. Zur Nutzung dieser neuen Funktionen von HTML5 ist i. d. R. JavaScript erforderlich, weshalb diese Themen eher im Bereich JavaScript als im Bereich HTML zu sehen sind.

Geolocation

Mit Geolocation kann die Position (GPS-Koordinaten) des Anwenders ermittelt werden:

HTML-Datei:

Ergebnis:

Geolocation

Latitude:

Longitude:

Status:

Drag und Drop

Seit HTML5 können Elemente per „Drag and Drop“ (engl. für Ziehen und Ablegen) verschoben werden:

HTML-Datei:

Ergebnis:

Web-Storage

Mit Web-Storage können Web-Applikationen Daten lokal speichern:

HTML-Datei:

Ergebnis:

Webstorage


Application-Cache

Mit Application-Cache kann eine Web-Applikation im Cache gespeichert werden, wodurch diese dann auch ohne Internetverbindung funktioniert. Dazu wird eine spezielle Datei, die sog. Manifest-Datei, angelegt, welche die Informationen dazu enthält, welche Elemente einer Webseite in den Cache geladen werden sollen und welche nicht.

Auf dem Webserver die Endung der Manifestdatei mit dem richtigen MIME-Typ verbinden:

 Das „manifest-Attribut“ in das „html“-Element integrieren:

Beispiel einer Manifest-Datei:

Web-Worker

Mit Web-Worker können Skripte im Hintergrund ausgeführt werden, so dass die Webseite währenddessen weiter bedient werden kann:

HTML-Datei:

JavaScript-Datei:

Ergebnis:

SSE

Mit Server-Sent-Events kann eine Webseite automatisch von einem Server Updates erhalten:

PHP-Datei:

HTML-Datei:

Ergebnis:

Canvas

Mit dem „canvas“-Element können Grafiken auf einer Webseite zur Laufzeit erstellt werden:

HTML-Datei:

Ergebnis:

Canvas

SVG

Mit SVG (Scalable Vector Graphics) können vektorbasierende Grafiken auf einer Webseite dargestellt werden:

HTML-Datei:

Ergebnis:

SVG

WEB Technologien Sorry, your browser does not support inline SVG.

Google-Maps-API

Mit der Google-Maps-API können Karten auf Webseiten eingebunden werden:

HTML-Datei:

Ergebnis:

Google-Maps

JavaScript-JSON

JSON steht für JavaScript Object Notation und ist ein textbasiertes, sprachenunabhängiges und leichtgewichtiges Datenformat für das Speichern und den Austausch von Daten. Dabei können JSON-Objekte direkt aus JavaScript-Objekten erstellt werden. JSON eignet sich besonders gut zum Datenaustausch zwischen Webservern und Webapplikationen und zum Speichern von Daten innerhalb von Webapplikationen:

HTML-Datei:

Ergebnis:

Adress-Daten

Vorname:
Nachname:
Strasse:
Hausnummer:
PLZ:
Wohnort:

JavaScript-AJAX

AJAX steht für Asynchronous JavaScript and XML und ist ein Konzept zur asynchronen Datenübertragung zwischen Browser und Server. Mit AJAX kann der Inhalt einer Webseite aktualisiert werden, ohne die ganze Seite neu zu laden:

HTML-Datei:

Text-Datei:

Ergebnis:

Quellen