JavaScript-Tutorium:Browser

Ziel

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten bei der JavaScript-Entwicklung im Browser zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

Einführung

Native vs. Host

In einer JavaScript-Umgebung existieren immer zwei unterschiedliche Arten von Objekten und Funktionen. Native Objekte werden von der JavaScript-Engine zur Verfügung gestellt und sind durch den ECMAScript-Standard abgedeckt. Host-Objekte sind hingegen nicht zwingend standardisiert und werden von der Umgebung bereitgestellt. Im Browser handelt es sich bei Host-Objekten um Schnittstellen für den Zugriff auf den Browser selbst und externe Geräte.

HTML5-Standard

Das bedeuteut, dass obwohl die Sprache selbst dem ECMAScript-Standard folgt, musste man bis vor wenigen Jahren noch davon ausgehen dass sich die verfügbaren APIs je nach Browser sehr stark unterscheiden können. Durch die steigende Entwicklungsgeschwindigkeit der Browser-Hersteller und den allgemein akzeptierten HTML5-Standard verbessert sich diese Situation jedoch zunehmend.

Heutzutage kann man davon ausgehen, dass jeweils die neuesten Versionen von Firefox, Chrome und Internet Explorer die DOM-API und viele der neu verfassten HTML5-APIs bereits standardkonform unterstützen.

Inline Code vs. externe Dateien

Eine im Browser angezeigte Web-Seite besteht meist aus HTML, CSS und JavaScript, wobei nur HTML zwingend verlangt ist. Der JavaScript-Code kümmert sich normalerweise um die dynamischen Aspekte, wie Interaktionen und das Nachladen von Inhalten.

Beim Besuch einer Website lädt der Browser das HTML-Dokument unter der angegeben URL herunter und evaluiert es. Das Dokument enthält dann wiederum optional Verweise auf CSS-Dateien, Bilder, JavaScript-Dateien und andere Medien. Neben Verweisen auf externen JavaScript-Code kann das Dokument auch Inline-Code-Blöcke enthalten. Ob es sich um externe Dateien oder Inline-Code handelt wirkt sich auf die Ladezeiten und das Caching des Browser aus, die enthaltenen Anweisungen und Ausdrücke werden jedoch nicht davon beeinflusst.

JavaScript-Kontext

Für jede geladene Web-Seite, unabhängig davon ob sie im separaten Fenster oder als ein weiterer Tab angezeigt wird, erzeugt der Browser einen separaten und isolierten JavaScript-Kontext, in dem der geladene Code ausgeführt wird. Das bedeutet dass alle Objekte und Funktionen nur so lange am Leben sind bis die Seite neu geladen oder verlassen wird. Ein Zugriff auf andere Seiten in anderen Fenstern oder Tabs ist aus Sicherheitsgründen nicht erlaubt.