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.

Window

Das globale Objekt window referenziert alle im Browser verfügbaren Objekte und Werte als Eigenschaften (native und host).

console.log(window.Object);
console.log(window.XMLHttpRequest);

Für den Zugriff auf globale Eigenschaften ist es nicht notwendig explizit window zu schreiben.

console.log(Date == window.Date);
console.log(new Date());

Alle nicht innerhalb von Funktionen deklarierten Variablen werden automatisch an das globale Objekt angehängt.

var globaleVariable = 'global';
var globaleFunktion = function() {};
console.log(window.globaleVariable);
console.log(window.globaleFunktion);

Modifikation von Eigenschaften

Da es sich um ein normales Objekt handelt können die meisten Eigenschaften modifiziert und auch gelöscht werden.</source>

Anmerkung: Veränderungen von wichtigen globalen Eigenschaften ist nicht sinnvoll und kann schwere Fehler verursachen.

window.Object = {};
var objekt = new Object();

delete window.Array;
var array = new Array();

Das window-Objekt wird vom Browser mithilfe der Konstruktorfunktion Window erzeugt, welche auch global verfügbar ist.

console.log(window.constructor == window.Window);

Popups und Frames

Neben dem globalen Fenster-Objekt kann eine Web-Seite beliebig viele weitere window-Objekte enthalten. Dabei handelt es sich dann entweder um durch Code erzeugte Popups oder aber um Frames (besser bekannt als iframes).

window.open('https://www.google.com', 'Google im Popup', 'width=400,height=300,resizable=yes');

Frames können entweder durch das entsprechende HTML oder aber auch programmatisch erzeugt werden.

Browser-Schnittstellen

Abgesehen von den nativen Objekten notwendigen Objekte enthält window wichtige Browser- und Geräte-Schinttstellen. Dazu zählen zum Beispiel Funktionen um Dialoge im Browser zu öffnen oder aber um Game-Controller zu verwenden.

var name = window.prompt('Wie ist Ihr Name?');
window.alert('Hello ' + name);
window.alert('Die aktuelle Seite ist ' + window.innerWidth + 'px breit');

console.log(window.Gamepad);

Eine komplette Liste der verfügbaren Eigenschaften finden Sie auf dieser MDN-Seite. In den folgenden Abschnitten werden exemplarisch ein paar wichtige Objekte im Detail beschrieben.