HTML5-Handbuch - die neuen Features von HTML5

Bedeutung der objektorientierten JavaScript-Programmierung hat in den letzten Jahren stark zugenommen.
Beispiel für vordefinierte Objekte
    var Jetzt = new Date();
    var Tag = Jetzt.getDate();
    var Monat = Jetzt.getMonth() + 1;
    var Jahr = Jetzt.getFullYear();
    var Stunden = Jetzt.getHours();
    var Minuten = Jetzt.getMinutes();
    var NachVoll = ((Minuten < 10) ? ":0" : ":");
    var html = "

Guten Tag! Heute ist der ";
    html += html Tag + "." + Monat + "." + Jahr + ". ";
    html += "Es ist jetzt " + Stunden + NachVoll + Minuten + " Uhr

";
Erläuterung
    In diesem Beispiel wird mit dem von JavaScript bereitgestellten Objekt
Date
gearbeitet. Es erlaubt das Arbeiten mit und das Manipulieren von Datums- und Zeitangaben.
    Von den meisten Objekten müssen sogenannte Instanzen erzeugt werden. Das sind gewissermaßen Kopien des Objekts. Die Objektinstanz wird in einer Variablen gespeichert. Über die Variable können Sie dann auf Eigenschaften und Methoden des Objekts zugreifen. Im Beispiel ist das die Variable
Jetzt
. Diese Variable soll auf Daten des
Date
-Objekts zugreifen können. Dies geschieht durch ein Istgleich-Zeichen hinter dem Variablennamen. Dahinter folgen das reservierte Wort
new
und dahinter, durch ein Leerzeichen getrennt, der Aufruf von
Date()
zum Erzeugen einer neuen Instanz des Objekts
Date
.
    Um die einzelnen Daten der Objektinstanz von
Date
, also Tag, Monat, Jahr usw., anzusprechen, stehen entsprechende Methoden zur Verfügung. Diese Methoden, z. B.
getDate()
oder
getHours()
, haben als Rückgabewert jeweils einen Datums-/Uhrzeit-Bestandteil. So liefert
getDate()
den aktuellen Tag des Monats und
getHours()
die aktuelle Stundenzahl des Tages. Im Beispiel wird für jeden der benötigten Bestandteile eine Variable definiert. In der Variablen
Tag
wird durch Aufruf von
Jetzt.getDate()
der aktuelle Tag des Monats gespeichert.
    Die Anweisung im Beispiel, die mit
NachVoll
… beginnt, erzeugt eine saubere Formatierung der Uhrzeit. Wie Sie weiter oben gelesen haben, ist dies eine verkürzte
if
-Anweisung. Es wird überprüft ob die Minutenanzahl ein- bzw.- zweistellig ist und entsprechend dem Resultat eine führende Null erzeugt.
Eigenschaften und Methoden
    Objekte können Eigenschaften haben. Ein selbst definiertes Objekt »Mensch« könnte zum Beispiel Eigenschaften wie Name, Alter, Geschlecht und Muttersprache haben. Vordefinierte JavaScript-Objekte haben ebenfalls Eigenschaften. So hat das Objekt
Math
zum Beispiel eine Eigenschaft
PI
(
Math.PI
). Auf diese Weise lässt sich mit der mathematischen Konstante PI rechnen, ohne deren genauen Wert zu kennen.
    Methoden sind Funktionen, die Aktionen ausführen. Sie sind, aber im Gegensatz zu alleinstehenden Funktionen, an ein bestimmtes Objekt gebunden sind. Viele vordefinierte JavaScript-Objekte haben Methoden. So gibt es zum Beispiel das vordefinierte JavaScript-Objekt
history
, in dem die bereits besuchten URLs eines Browser-Fensters gespeichert sind. Dazu gibt es eine Methode
history.back()
, mit der Sie in JavaScript einen Rücksprung zu einer bereits besuchten Adresse erzwingen können.
Die JSON-Objektnotation
    In modernerem JavaScript-Code werden Sie sehr häufig die sogenannte JavaScript Object Notation (JSON) vorfinden. Diese ist hervorragend geeignet, um komplexe, verschachtelte Datenstrukturen abzubilden. Viele Programmierer und JavaScript-Frameworks nutzen nur noch diese Schreibweise, wodurch die Scripts optisch deutlich anders aussehen als herkömmliches JavaScript. Zusätzlich wird JSON oft zum Datenaustausch mit AJAX zwischen Browser und Server verwendet.
Beispiel
    /* Adresse als JSON-Objekt */
    var Anschrift = {
    "Strasse" : "Phantasiestraße 7",
    "PLZ"     : 10001,
    "Ort"     : "Berlin"
     
};
    alert(Anschrift.Strasse + ", " + Anschrift.PLZ + " " + Anschrift.Ort);
     
    /* eMail als verschachteltes JSON-Objekt */
    var MailObjekt = {
      
"MailHeader": {
     
"from"        : "[email protected]",
     
"to"          : ["[email protected]", "[email protected]"],
     
"contentType" : "text/plain",
     
"subject"     : "Eine kleine Mail",
      
},
      
"MailText": "Hallo! Wollte nur kurz mitteilen, dass … usw.",
      
"MailSendeTimestamp": 1283410414
    };
Erläuterung
    Das erste Beispiel ist recht einfach. Es deklariert ein Objekt mit drei einfachen Eigenschaften, um eine Adresse zu speichern. Nach der Deklaration werden die Eigenschaften des Objekts mit der
alert
-Methode ausgegeben.
    Das zweite Beispiel ist