Javascript Document Object und Window Object

Javascript Objects: Array, Date, Math

Das Document Object und das Window Object spielen die tragende Rolle in Webseiten. Das Window Object repräsentiert das Browserfenster und das Document Object stellt den HTML-Dokumentenbaum für den Zugriff auf alle Elemente der Webseite dar.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Objekt-orientiert?

Es gibt zwei Typen von vorgefertigten Javascript-Objekten: Objekte, die von der Scriptsprache zur Verfügung gestellt werden, und Objekte, die der Browser zur Verfügung stellt. Array, Boolean, Math, String und Date sind die Objekte, die Javascript in jeder Umgebung mitbringt. Das Document Object Model (DOM) bringt die Objekte mit, aus denen eine Webseite aufgebaut ist.

Document Object, Window Object, Location Object …

Wenn Javascript für Webseiten eingesetzt wird, dann gibt es das Document-Object, das Window-Object, Location- und Screen-Object – das sind die Objekte, mit denen das Browserfenster, die HTML-Seite und die URL der Webseite im Script angesprochen werden.

Schema-Zeichnung ECMAScript-Objekte vs Window-Objekte
Links: Objekte der Javascript-Programmiersprache, die durch ECMAScript definiert werden
Rechts: Objekte, die vom Browser mitgebracht werden.

Heute verwenden wir Objekte wie anchors, applets, forms und images kaum noch, aber sie sind standardisiert und werden von allen Browsern unterstützt.

Javascript: eigene Objekte

Die von ECMAScript definierten Objekte kennen wir mehr oder minder aus allen Programmiersprachen in ähnlicher Form: Object (allgemeinstes Objekt), Array, Boolean, Math, Date, Regex, String und Function. Aus diesen frei Haus gelieferten Objekten können wir eigene Objekte konstruieren und die Datenstrukturen an die eigene Anwendung anpassen.

Die vordefinierten Prototypen stimmen teilweise mit den Basis-Datentypen überein. Javascript String, Number und Boolean können entweder als einfache Werte

let myString = "Hallo Anton"; 

oder als Javscript Object deklariert werden (theoretisch – denn string, number und boolean werden nie mit new String, new Boolean oder new Number »instanziert«, denn sie würden das Programm unnötig kompliziert machen und die Performance versenken).

let myString = new String("Hallo Anton");

Eingebaute Objekte von Javascript

Ganz einfach: Immer wenn's groß geschrieben ist, ist es ein eingebautes Objekt.

Array Array ist der Prototyp für Arrays
Ein Array kann durch literale Notation oder eine Instanzierung erzeugt werden
Boolean Boolean ist der Prototyp für Boolesche Variablen. Boolesche Variablen können durch eine literale Notation oder durch eine Instanzierung erzeugt werden
Date Date ist der Prototyp für den Datentyp »Datum und Uhrzeit«
Function Function ist der Prototyp für Funktionen
Math Math ist der Prototyp für mathematische Berechnungen und Konstanten
Math hat keinen Konstruktor – das Math-Objekt kann ohne Instanziierung des Math-Objekts erzeugt werden.
Number Number() wandelt das Argument in eine Zahl um, die den Wert des Objekts darstellt.
RegExp Ein RegExp-Objekt beschreibt ein Muster (pattern) von Zeichenketten.
let muster = new RegExp(pattern, modifiers);
String String ist der Prototyp für Zeichenketten.
Ein String kann durch literale Notation oder eine Instanzierung erzeugt werden.

Javascript Arrays sind auch nur Objekte

Javascript hat sieben eingebaute Datentypen: boolean, number, string, symbol und null, undefined und eben Objekte. Anders als in vielen anderen Programmiersprachen sind Arrays in Javascript kein Datentyp, sondern nur besonders gehätschelte Objekte. Jedes Element eines Arrays ist nichts anders als eine Eigenschaft des Objekts »Array«. Eigenschaften von Objekten können beliebige Namen haben – seinen es nun Zahlen oder leere Strings. Wenn der Name nicht mit einem Buchstaben anfängt, können wir auf die Eigenschaft nur durch obj[name] zugreifen, nicht aber mit obj.name.

Und genau das ist das Wesen von Arrays, deren Elemente mit obj[0], obj[1] usw. bezeichnet sind. Darum braucht Javascript keinen Datentyp Array.

Das Besonders an Arrays ist ihre Ausstattung: Sie haben eine Eigenschaft length und jede Menge Methoden für die Verarbeitung der Elemente.

Weil Arrays letzten Endes nur Objekte sind, war instanceof immer problematisch. Erst ECMAScript 5 hat Array.isArray(value) ins Leben gerufen.

Funktionen sind Objekte

Auch Javascript-Funktionen sind Objekte, darum können die Parameter von Funktionen selber wieder Funktionen sein.

window.setTimeout (runlock, 3000);

oder 
requestAnimationFrame(runlock);

wobei runlock eine Funktion ist, die als Argument in setTimeout oder requestAnimationFrame aufgerufen wird.