Javascript Objekte

Eigene Objekte mit Eigenschaften und Methoden

Die Objekt-orientierte Programmierung ist ein Grund-Element moderner Informatik. Diese Seite zeigt an einigen Beispielen die Erzeugung und Verwendung von Objekten mit Javascript.
Javascript ECMAScript für HTML und XML
Objekt Objekt-orientierte Programmierung
Klasse und Objekt Erzeugung einfacher Klassen und Objekte
Objekt-Variable Zuweisung an Variable, Übergabe an Funktionen
Eigenschaften Eigenschaften (properties) von Objekten, Initialisierung
Globale Methoden Methoden mit externen Funktionen, Callback-Funktionen
Private Methoden Methoden mit intern gekapselten Funktionen
Gleiche Namen von Eigenschaften und Objekten unterschiedlicher Objekt-Klassen
Lesen & Schreiben Methoden zum Lesen und (sicheren) Schreiben von Eigenschaften
Argumente Optionale Argumente und Standard-Werte für Argumente
JSON Syntax-Variante - Senden von Objekten über das Internet
Verwandte Themen Die Javascript Objekte style, stylesheet, XMLHttpRequest (Ajax)
Links Ausgewählte Links zum Thema 'Objekt'

Objekt-orientierte Programmierung
Es gibt zahlreiche ausgezeichnete Artikel zur objektorientierten Programmierung. Hier wird daher lediglich an einige Aspekte erinnert, die bei der Programmierung von Objekten mit Javascript wichtig sind.
Der Text sollte knapp und verständlich sein, erfüllt jedoch keine Ansprüche an wissenschaftliche Genauigkeit. 		Javascript wird zwar normalerweise als "objektorientiert" eingestuft, es gibt jedoch Kritiker. Tatsächlich bieten z.B. C++ oder Java wesentlich erweiterte Möglichkeiten.
Es ist zu hoffen, dass Javascript in einer zukünftigen Version auch damit ergänzt wird.
Eine Klasse ist ein Oberbegriff zur abstrakten Beschreibung einer Gruppe zusammengehörender realer Objekte.
Die Klasse ist daher so etwas wie eine Zusammenfassung von Regeln zur Beschreibung einer bestimmten Gruppe von Objekten.
In der Praxis wird das am besten durch Beispiele erklärt. 		Auf dieser Seite werden Beispiele geometrischer Objekte verwendet, z.B. Kreise und Rechtecke.
Die Klasse "Kreis" wird als Oberbegriff für sämtliche möglichen realen Kreise verwendet, die Klasse "Rechteck" als Oberbegriff für alle Rechtecke.
Ein Objekt ist eine Instanz einer Klasse, d.h. so etwas wie eine real existierende Kopie der allgemeinen Klasse, von welcher es abgeleitet wurde. Von jeder Klasse lassen sich normalerweise beliebig viele Objekte ableiten.

Alle Objekte einer Klasse haben gemeinsame Eigenschaften - Jeder Kreis hat einen Mittelpunkt und eine Kreislinie, deren Punkte gleich weit von ihm entfernt sind.

Die einzelnen Objekte einer Klasse unterscheiden sich in ihren Individuellen Eigenschaften - z.B. Lage des Mittelpunkts, Länge des Radius, usw. 		Ein wichtiges Objekt-Prinzip ist die Kapselung:

Jedes Objekt enthält sowohl seine Daten (Eigenschaften) als auch die zur Anwendung notwendigen Programme (Methoden).
Gekapselte Objekte sind sehr zuverlässig, weil man sich zu ihrer Verwendung auf die darin enthaltenen Methoden stützen muss. Diese sind genau an das Objekt angepasst, nur dafür verwendbar und daher viel weniger anfällig gegen Fehler.

Andererseits wird durch Objekte die klassische Forderung nach Trennung von Daten und Programmen verletzt. Moderne Programmiersprachen bieten daher oft beide Möglichkeiten: Objekt-orientierte oder klassiche (prozedurale) Programmierung.
Jedes Objekt kann Eigenschaften haben.
Manche Eigenschaften sind für alle Objekte einer Klasse gleich (meist aus der übergeordneten Klasse geerbt), manche können für jedes Objekt unterschiedlich sein (meist neu in dieser Klasse dazugekommen). 		Auf dieser Seite werden Kreis-Objekte mit einer einzigen Eigesnchaft (dem Radius) verwendet. Es ist möglich, beliebig viele Kreis-Objekte zu definieren, und zwar sowohl mit gleichen als auch mit unterschiedlichen Radien.
Zur praktischen Anwendung verfügen die meisten Objekte auch über Methoden.
Das sind Programme (in Javascript Funktionen) zur Manipulation der Objekte. Die Methoden sind meist im Objekt gekapselt, d.h. man kann sie zwar im Sinne ihrer Programmierung verwenden, jedoch nicht verändern oder auf andere Objekte anwenden. 		Typische Methoden für Kreis-Objekte sind z.B. die Berechnung von Umfang und Fläche.
In der Umgangssprache werden diese Begriffe ebenso wie der Radius als Eigenschaften bezeichnet. In der Informatik sind es Methoden, weil sie nicht als Zahlenwerte vorgegeben sondern durch Funktionen berechnet werden.
Auch die Berechnung des Radius aus Umfang oder Fläche ist eine Methode.
Mit Vererbung wird die Übernahme von Eigenschaften und Methoden bezeichnet.
Klassen werden in der Praxis niemals völlig neu erschaffen, sondern stets aus einer Basis-(parent)-Klasse abgeleitet. Dabei werden sämtliche vorhandenen Eigenschaften und Methoden übernommen.
In der neuen Sub-Klasse können die vorhandenen Eigenschaften und Methoden überschrieben und durch neue ergänzt werden. 		Auf diese Weise entstehen hierarchische Bäume von Klassen, die nach oben (zur Basis-Klasse) immer allgemeiner formuliert sind, nach unten immer spezieller.

Für die Beispiele dieser Seite wäre es z.B. möglich, zuerst eine allgemeine Klasse "Ebene Objekte" zu definieren, und von dieser die Sub-Klassen "Ellipse" und "Rechteck" abzuleiten. Von Ellipse ließe sich der Sonderfall "Kreis" ableiten, von Rechteck der Sonderfall "Quadrat".

Klasse und einfaches Objekt

Definition einer Objekt-Klasse

Das Beispiel rechts zeigt die Definition der Objekt-Klasse kreis
• Die Definition erfolgt leider durch die missverständliche Anweisung function, ebenso wie die einer 'gewöhnlichen' Funktion.
• In der Definition ist bereits eine Eigenschaft mit dem Namen r (für Radius) enthalten. Sie erhält im Beispiel den Wert 0
• Das Wort this bezeichnet immer das aktuelle Objekt.
• Objekt-Syntax: Die Namen von Eigenschaften und Methoden des Objekts werden nachgestellt und mit einem . Punkt getrennt.
Beispiel: this.r ist eine Eigenschaft.
• Der Operator typeof liefert für jede Klasse den Wert function.

Live--Test dieses Beispiels.
Objekt-Klasse kreis mit der Eigenschaft r
function kreis() {
this.r = 0;
}

Anwendung:
alert(typeof kreis);

Erzeugung von Objekten

Nachdem eine Klasse definiert wurde (oben), können beliebig viele Objekte dieser Klasse erzeugt werden.
• Ein Objekt wird mit der Konstruktor-Anweisung new erzeugt.
• Dabei (Initialisierung) wird der Code der Klassen-Definition durchlaufen. Er besteht im Beispiel lediglich aus der Anweisung this.r=0;
Jedes neue Objekt der Klasse kreis verfügt daher über eine einzige Eigenschaft r mit dem Anfangs-Wert 0
• Der Operator typeof liefert für jedes Objekt den Wert object.
Erzeugung von Objekten der Klasse kreis
var k1 = new kreis();
var k2 = new kreis();
alert(typeof k1);

Objekt-Variable und -Argumente

Zuweisung an Variable

▲ Wenn ein Javascript Objekt an eine Variable zugewiesen oder an ein Unterprogramm übergeben wird, dann wird die Adresse des Objekts weitergegeben, nicht sein Wert.

▲ Das zugewiesene Objekt ist daher nicht eine Kopie, sondern nur ein Alias-Name für das Original.
Jede Änderung am Alias wirkt auf das Original !
Beispiel:
Zunächst wird ein Standard Date-Objekt d erzeugt.
Danach wird versucht, davon eine Kopie e zu erzeugen und diese zu ändern (Addition von 10 Sekunden).
var d = new Date();
var e = d;
e.setSeconds(e.getSeconds()+10);
Ergebnis:
Die Zeit wurde in beiden Variablen d,e um +10 Sekunden geändert, da beide das gleiche Objekt bezeichnen.

Übergabe an Unterprogramme

▲ Auch bei der Übergabe eines Objekts als Argument wird seine Adresse übergeben.
Das Unterprogramm (Javascript-function) erhält daher das Original-Objekt und nicht eine Kopie (wie bei skalaren Variablen).

▲ Wenn das Unterprogramm Änderungen am Objekt durchführt, dann betreffen diese das Original !
Ein ähnliches Verhalten zeigen auch Javascript → Arrays.
Funktion (bearbeitet das Original-Objekt !)
function double_r(kobj) {
kobj.r = kobj.r * 2;
}
Anwendung:
var k = new kreis();
k.r = 10;
double_r(k);
Ergebnis: Der Radius k.r des Objekts wurde verdoppelt.

Rückgabe von Unterprogrammen

Funktionen können mit der return-Anweisung auch Objekte zurückgeben. Das ist nur dann sinnvoll, wenn das Objekt durch die Funktion erzeugt wurde.
Wenn ein Objekt durch eine Funktion geändert wurde, dann braucht man es nicht zurückgeben: Die Änderung erfolgte ohnehin bereits am Original-Objekt.
Beispiel:
function kreis_100() {
var kobj = new kreis(100);
return kobj;
}

Eigenschaften (properties) von Objekten

Initialisierung durch konstanten Anfangswert

Die betreffende Eigenschaft (hier r ) wird bei Erzeugung jedes Objekts dieser Klasse auf einen fixen Anfangswert gesetzt. Die nachfolgende Zuweisung anderer Werte ist möglich - In diesem Fall wird die erste Anweisung überschrieben wie bei jeder anderen Variablen).
function kreis() {
this.r = 0;
}
Anwendung:
var k = new kreis();

Initialisierung mit Argumenten

Bei der Erzeugung wird für jede Eigenschaft ein Argument übergeben. Der Anfangswert der Eigenschaft wird auf den Wert des Arguments gesetzt.
♣ Tipp: Es ist möglich, jedoch nicht empfehlenswert, für Argument (radius) und Eigenschaft (r) gleichlautende Namen zu verwenden (abgeschaltete Zeile).
function kreis(radius) {
this.r = radius;
// this.radius=radius;
}
Anwendung:
var k1 = new kreis(12);
var k2 = new kreis(34);

Initialisierung durch Argument oder Standard-Wert

• Wenn bei der Erzeugung (new) ein Argument in () übergeben wurde, dann wird es der Eigenschaft zugewiesen.
• Wenn das Argument fehlt, dann wird der Wert nach dem || ODER-Operator (in diesem Fall die Zahl 0) zugewiesen.
♣ Diese Variante der Initialisierung ist empfehlenswert !
function kreis(radius) {
this.r = radius || 0;
}
Anwendung:
var k1 = new kreis(12);
var k2 = new kreis();

Lesen & Schreiben von Eigenschaften

Eigenschaften lassen sich genauso lesen und schreiben wie jede andere Variable.
Das ist einfach, hat aber den Nachteil, dass auch illegale Werte zugewiesen werden können, z.B. k.r="abc" ein String an Stelle der erwarteten positiven Zahl. 		Anwendung: Lesen und Schreiben der Eigenschaft r des Objekts k
k.r = 12;
alert(k.r);
k.r = 23;
alert(k.r);

Professionelle Variante

In professionell erstellten Objekten werden Eigenschaften nicht direkt verwendet sondern ausschließlich über speziell dazu erstellte Methoden gelesen (z.B. get_property ) und geschrieben (z.B. set_property ). 		In die Schreib-Methode sind alle notwendigen Sicherheits-Maßnahmen eingebaut.
Im Beispiel kreis dürfen z.B. nur Zahlen >= 0 an die Eigenschaft r zugewiesen werden.

Globale Methoden mit externen Funktionen

Funktion

Das Beispiel zeigt die 'echte' Funktion umfang zum Vergleich mit der ähnlich aussehenden Definition einer Objekt-Klasse.
• Der Operator typeof liefert ebenso wie für eine Klasse den Wert function.
• Die Funktion liefert für jedes Argument radius den dafür berechneten Umfang. Als Argument kann auch eine Variable oder Objekt-Eigenschaft k.r verwendet werden.
• Da genau diese Funktion oft im Zusammenhang mit einem Kreis verwendet wird, ist es sinnvoll, sie als Methode in die Definition der Objekt-Klasse aufzunehmen. 		Eine 'gewöhnliche' Funktion:
function umfang(radius) {
return 2*radius*Math.PI;
}
Anwendung:
alert(typeof umfang);
alert(umfang(12));
alert(umfang(k.r));
Das Beispiel zeigt die Ergänzung der Klasse kreis durch die Methode umfang

• In der Objekt-Definition wird der Methode (hier this.umfang ) die externe Funktion (hier get_umfang ) ohne () Klammern zugeordnet.
• Wenn eine Funktion auf Eigenschaften des Objekts Bezug nehmen soll, dann wird dazu Objekt-Syntax verwendet, z.B. hier this.r in der Funktion get_umfang
• Für Methode und Funktion wurden absichtlich verschiedene Namen gewählt, um eine Verwechslung auszuschließen.
• Bei Anwendung einer Methode müssen die () Klammern angegeben werden. Wie an jede andere Funktion lassen sich auch an Methoden in den () Argumente übergeben.

Live--Test dieses Beispiels. 		Objekt kreis mit Eigenschaft r und Methode umfang
function kreis(radius) {
this.r = radius;
this.umfang = get_umfang;
}
function get_umfang() {
return 2*this.r*Math.PI;
}

Anwendung:
var k = new kreis(20);
alert(k.r);
alert(k.umfang());
Die Programmierung von Methoden mit externen Funktionen ist wenig empfehlenswert:
• Oft werden Methoden mit gleichen Namen für unterschiedliche Objekte benötigt, z.B. (Beispiel unten) muss die Methode umfang für die Objekte kreis, dreieck, rechteck ganz anders berechnet werden.
• Solche Funktionen sind global verfügbar. Das kann zu Problemen führen, wenn sie für andere Zwecke angewendet werden als für jenes Objekt, für welches sie programmiert wurden.
• Zur Programmierung eigener Objekte verwenden sie daher besser nur ↓ interne Funktionen (nächstes Kapitel). 		Warum ist umfang() eine Methode ?
• Beachten sie die Sprache der Informatik: Was mit einer Funktion berechnet wird, ist eine Methode !
• In Umgangssprache und Geometrie bleibt der Umfang weiterhin eine Eigenschaft jedes Kreises.

Callback-Funktionen

Es gibt einen Bereich, wo externe Funktionen nicht ersetzbar sind - Die Ergänzung vorhandener Objekte (z.B. Javascript Standard Objekte) durch eigene Methoden.
Der Name der eigenen (externen) Funktion wird an ein unzugängliches Obejkt übergeben.
So kann man erreichen, dass die eigene Funktion unter den gewünschten Bedingungen ausgeführt wird.
Beispiel Sortieren:
my_array.sort(my_sort);
Die Anweisung legt fest welche eigene Funktion die Reihenfolge der Sortierung bestimmen soll (hier die eigene Funktion my_sort ).

Beispiel Ajax:
ajax_obj.onreadystatechange = my_receive;
Die Anweisung legt fest, welche eigene Funktion beim → Ereignis (Event) 'Daten eingetroffen' ausgeführt werden soll (hier die eigene Funktion my_receive ).

Private Methoden mit internen Funktionen
Im Beispiel rechts wurde die Funktion umfang in das Objekt integriert: Sie beginnt und endet innerhalb des Objekts.
• Damit ist sie 'gekapselt' und nur mehr innerhalb des Objekts verwendbar.
• Von außen (global) ist die Funktion nicht verwendbar, sie ist privat für das Objekt.
Das ist wünschenswert, da gleichnamige Methoden für Objekte anderer Klassen (Rechteck, Dreieck) anders berechnet werden müssen.
• Hier wird eine unterschiedliche Syntax verwendet: Die Funktion selbst braucht keinen eigenen Namen, sie wird direkt der Methode this.umfang zugewiesen.

Live--Test dieses Beispiels. 		Objekt kreis mit Eigenschaft r und Methode umfang
function kreis(radius) {
this.r = radius;
this.umfang = function(){
return (2*this.r*Math.PI);
}
}

Anwendung:
var k = new kreis(20);
alert(k.r);
alert(k.umfang());

Argumente

Eine Methode arbeitet wie eine Funktion, d.h. sie wird mit () aufgerufen und kann auch mit Argumenten verwendet werden.
Bekannte Beispiele sind z.B. die Methoden der Standard-Klasse Math 		Verwendung von Methoden mit Argumenten in ()
var x = Math.sqrt(2);
var y = Math.round(Math.random()*100);
var z = Math.pow(10,3);

Private Variable und Funktionen

Innerhalb einer Klasse können auch Variable und Funktionen verwendet werden.
• Variable (hier gruss ) sind (nur) innerhalb der Klasse verfügbar, auch für alle privaten Methoden und Funktionen.
• Funktionen tragen Namen (hier test ) und sind (nur) innerhalb der Klasse verfügbar.
In einer derartigen Funktion sind die Eigenschaften der Klasse unbekannt, d.h. ein Austausch von Daten erfolgt über Argumente und die return-Anweisung.
function kreis(radius) {
this.r = radius;
var gruss = "Hallo !";
this.umfang = function() {
return(2*this.r*Math.PI);
test();
}
function test() {alert(gruss);}
}
Zur Programmierung von Methoden werden private (interne) Funktionen empfohlen:
• Für beliebig viele verschiedene Objekte können gleichnamige Methoden mit jeweils unterschiedlicher Verarbeitung programmiert werden.
• Die Methode kann nur innerhalb des Objekts verwendet werden. Daher ist es wesentlich einfacher, alle denkbaren Fälle zu berücksichtigen. Gekapselte Methoden sind viel weniger anfällig gegen Fehler. 		• In professioneller Software werden darüber hinaus auch alle Eigenschaften gekapselt: Sie sind nur mehr über Methoden wie (get_radius, set_radius) zugänglich.
Ein Beispiel: Im einfachen Objekt kreis kann man den Radius z.B. mit
k.r = -123;
auf illegale Werte setzen. Wenn man dagegen set_radius(-123) anwenden muss, dann enthält diese Methode bei guter Programmierung einige Kontrollen, welche die Zuweisung eines illegalen Radius zuverlässig verhindern.

Gleichnamige Methoden für unterschiedliche Objekt-Klassen
Das Beispiel rechts zeigt eine Kombination der oben gezeigten Beispiele.

• Die beiden Kreise k1 und k2 sind ein Beispiel für die Verwendung mehrerer Objekte der gleichen Klasse.
• Die Methoden umfang und flaeche zeigen, wie gleichnamige Methoden für unterschiedliche Objekte angewendet werden - und zwar mit jeweils anderer Berechnung.

Zusätzlich sind einige Details ergänzt:
• Die Argumente werden vor der Verwendung auf einfache Weise überprüft: Zuerst Umwandlung allfälliger Texte in Zahlen, danach Absolut-Wert zur Vermeidung negativer Werte.
• Der || Operator (logisches ODER) dient dazu, der Eigenschaft einen Standard-Wert zuzuweisen, wenn bei der Initialisierung kein Argument mitgegeben wurde. 		Objekte kreis,rechteck - Mit verschiedenen Eigenschaften, jedoch den gleichen Methoden umfang,flaeche
function kreis(radius) {
this.r = Math.abs(parseFloat(radius)) || 0;
this.umfang = function() {
return (2*this.r*Math.PI);
}
this.flaeche = function() {
return (this.r*this.r*Math.PI);
}
}

function rechteck(laenge,breite) {
this.a = Math.abs(parseFloat(laenge)) || 0;
this.b = Math.abs(parseFloat(breite)) || 0;
this.umfang = function() {
return (2*this.a+2*this.b);
}
this.flaeche = function() {
return (this.a*this.b);
}
}
Live--Test dieses Beispiels.
Die Variablen radius, laenge, breite werden für jeden Test mit Zufallszahlen erzeugt). 		Anwendung:
var k1 = new kreis(10);
var k2 = new kreis(20);
var r = new rechteck(15,25);
alert(k1.umfang);
alert(k1.flaeche);
alert(k2.umfang);
alert(k2.flaeche);
alert(r.umfang);
alert(r.flaeche);

Standard-Methoden

Man kann eigene Ojekt-Klassen mit Standard-Methoden ausstatten. Das muss nicht einer bestimmten Verwendung entsprechen, liefert aber bei unbeabsichtigter, irrtümlicher oder impliziter Verwendung der Methode wenigstens einen Hinweis. 		Deklaration der Standard-Methode toString() für eine selbst erstellte Objekt-Klasse:
this.toString = function() {return "Kreis-Objekt";}

Gleichnamige Eigenschaften

Analog zu den hier gezeigten gleichnamigen Methoden können Objekte verschiedener Klassen auch gleichnamige Eigenschaften erhalten. 		Beispiel:
Ein Quadrat-Objekt (Seite a), ein Rechteck-Objekt (Seiten a, b) und ein Dreiecks-Objekt (Seiten a,b,c).
Die Eigenschaft a ist in allen Objekten enthalten.
Namens-Verwirrung
In zahlreichen Beispielen (Literatur, Internet) werden die gleichen Namen für unterschiedliche Elemente verwendet.
radius bezeichnet hier das Argument und die Eigenschaft,
umfang bezeichnet Methode und Funktion
• Es ist besser, die Elemente durch Vergabe unterschiedlicher Namen auseinander zu halten. Der Code wird besser verständlich, es treten keine der schwer zu entdeckenden Verwechslungen auf.
Das Beispiel externe Funktion mit doppelt verwendeten Namen:
function kreis(radius) {
this.radius = radius;
this.umfang = umfang;
}
function umfang() {
return 2*this.radius*Math.PI;
}

Methoden zum Lesen & (sicheren) Schreiben von Eigenschaften
Das Beispiel zeigt eine Klasse kreis mit gekapselten Methoden für den Zugriff auf die Eigenschaften.

• Die Eigenschaft r wird zunächst auf den Standardwert (Zahl 0) initialisiert.
• Wenn das Objekt ohne Argument erzeugt wurde (arguments.length==0), folgt keine weitere Initialisierungs-Aufgabe.
• Wenn das Objekt mit Argument erzeugt wurde, dann wird dieses mit einer internen Funktion (hier check_r) geprüft. Nur zulässige Werte werden verwendet, in jedem anderen Fall bleibt die Eigenschaft unverändert. Bei Bedarf kann ein Fehler mit alert angezeigt werden.
• Das Lesen aller Daten erfolgt nur mehr mit Methoden (get_radius, get_umfang, ..).
• Das Schreiben aller Daten erfolgt ebenfalls nur mit Methoden (set_radius).
function kreis() {
this.r = 0; // versteckte Eigenschaft
if(kreis.arguments.length>0) {
this.r=check_r(this.r,kreis.arguments[0]);
}
this.get_radius = function() {return this.r;}
this.get_umfang = function() {
return (2*this.r*Math.PI);
}
this.set_radius = function(rneu) {
this.r=check_r(this.r,rneu);
}
function check_r(ralt,rneu) {
var ineu = parseFloat(rneu);
var ret = ralt;
if(ineu>=0) {ret = ineu;}
else{alert("Fehler...");}
return ret;
}
}
Bei derartiger Programmierung muss man keine der Eigenschaften kennen, da man nicht mehr direkt darauf zugreift.
Lesen und Schreiben von Eigenschaften erfolgt indirekt mit genau abgestimmten Methoden. 		Insbesondere beim Schreiben von Eigenschaften kann man potentielle Fehler abfangen. Das macht die Objekte wesentlich stabiler.
Live--Test dieses Beispiels.  

Optionale Argumente
In gut programmierten Objekten ist die Angabe der Argumente stets optional:
► Man kann bei der Erzeugung eines neues Objekts Argumente übergeben, oder man kann ohne Argumente ein Standard-Objekt erzeugen.

Das Beispiel rechts zeigt, wie das Objekt programmiert wird:
● An die beiden Eigenschaften (sa,sb) wird jeweils eines der Argumente (a,b) zugewiesen.
● Wenn eines der Argumente nicht existiert (undefined, null), dann sorgt der Oder-Operator || dafür, dass der zweite Teil der Anweisung ausgeführt wird. Nach dem Oder-Operator || steht der zu verwendende Standardwert - in diesem Fall die Zahl 0 (Null).
In diesem Beispiel werden die Seiten eines neuen Rechtsecks sa=0 und sb=0 gesetzt, wenn keine Argumente übergeben wurden.
● Unabhängig davon ist es später möglich, die Eigenschaften auf andere Werte zu setzen. 		Rechteck-Objekt mit optionalen Argumenten
function rect(a,b) {
this.sa = a || 0;
this sb = b || 0;
}

Anwendung mit Argumenten zur Erzeugung eines Objekts mit bestimmten Eigenschaften:
r1 = new rect(12,34);

Anwendung ohne Argumente: Für fehlende Argumente werden Standardwerte eingesetzt:
r2 = new rect(56);
r3 = new rect();
Änderung zu einem späteren Zeitpunkt
r3.sa = 89;
Das Beispiel rechts zeigt eine andere Variante der Programmierung.
● Jede Funktion und jedes Objekt enthält das Sub-Objekt arguments
In diesem → Array sind alle Argumente des Objekt-Aufrufs enthalten.
● Die Eigenschaft arguments.length gibt die Anzahl der übergebenen Argumente zurück (hier an die Variable nargs).
● Zunächst werden alle Eigenschaften auf ihre jeweiligen Standardwerte gesetzt (hier sa=0,sb=0).
● Das erste Argument arguments[0] wird nur dann an die Eigenschaft sa zugewiesen, wenn es überhaupt exisiert (wenn nargs>0). Diese einfache Variante (ohne Prüfung) programmiert man jedoch einfacher mit dem Oder-Operator (Absatz oben).
● Für das zweite Argument arguments[1] wird eine andere Variante gezeigt:
• Hier wird nicht nur geprüft, ob dieses Argument übergeben wurde (wenn nargs>1), sondern das Argument wird vor seiner Verwendung überprüft.
• Die Art der Prüfung richtet sich nach der Anwendung, außerdem kann der Wert des Arguments bei Überpfüfung geändert werden (z.B. Umsetzung in Klein- Großbuchstaben, Numerisch Absolutwert, Runden, etc...).
• Kritische Tests (bei denen Fehler auftreten könnten) setzt man am besten in einen try-Block.
• Nur dann, wenn alle Tests erfolgreich passiert wurden, wird das Argument an die Eigenschaft (hier sb) zugewiesen. 		Andere Variante mit Verwendung der arguments
function rect() {
var nargs = rect.arguments.length;
this.sa = 0;
this.sb = 0;

if(nargs>0) {
this.sa = rect.arguments[0];
}

if(nargs>1) {
var test = rect.arguments[1];
try{
test = parseInt(test);
if(test>=0 && test<=100) {
this.sb = test;
}
}
catch(e) {}
}
}
Anwendung:
r1 = new rect(12,34);
r2 = new rect(56);
r3 = new rect();

JSON-Syntax

(Javascript Object Notation)
→ JSON bezeichnet einen kleinen aber interessanten Teil der Standard Javascript Syntax.
Hier wird gezeigt, wie Objekte der oben vorgestellten Klasse rechteck in JSON-Syntax formuliert werden. 		→ JSON kommt meist in Verbindung mit → Ajax zum Einsatz: Dabei werden Daten und Objekte samt dazugehörender Eigenschaften und Methoden über das Internet an ein Javascript Programm gesendet.
♦ Details zu Ajax und JSON
• In dieser alternativen Syntax-Variante werden alle Elemente eines Objekts in {} geschwungende Klammern eingeschlossen.
• Die einzelnen Elemente (Eigenschaften, Methoden) werden voneinander mit , Beistrich getrennt.
• Eigenschaften werden in dieser Form angegeben:
name:wert
• Methoden werden in dieser Form angegeben:
name:function() {}
• Im Zweifel ist es sicherer, die Namen und Daten in "" Anführungszeichen zu setzen:
"name": "wert"

• Das erste Beispiel rechts oben zeigt ein einfaches Objekt der Klasse rechteck (allerdings wird bei JSON kein Klassen-Name angegeben) mit den Eigenschaften der beiden Seiten a,b
• Das zweite Beispiel darunter enthält zusätzlich die Methode flaeche

Live--Test dieses Beispiels. 		Definition eines Objekts r mit Eigenschaften (entspricht einem einfachen rechteck-Objekt mit Länge a und Breite b )
var r={a:12, b:34};
// var r={"a": "12", "b": "34"};
alert(r.a);
alert(r.b);

Definition eines Objekts r mit den Eigenschaften a,b und der Methode umfang
var r={a:12, b:34, flaeche: function() {return (this.a*this.b);}};
alert(r.a);
alert(r.b);
alert(r.flaeche);
JSON wird vorzugsweise zusammen mit → Ajax verwendet.
♦ Details zur asynchronen Übertragung von Daten und Objekten an Javascript (Ajax). 		Beispiel für ein PHP Script-Programm zum Senden eines Rechteck-Objekts in JSON-Syntax:
print "a:12, b:34";
• Zur Decodierung der empfangenen Daten werden zunächst die meist noch fehlenden geschwungenen {} Klammern angefügt.
• Danach wird die Live-Interpretation der fertigen Anweisung mit eval ausgeführt.

Das erzeugte Objekt r verhält sich genauso wie die in den anderen Beispielen (mit oder ohne JSON-Syntax) erzeugten Rechteck-Objekte - Der kleine Unterschied: Eigenschaften und Methoden wurden am Server erzeugt und via Internet an den Client gesendet.
♦ Details zu eval 		Beispiel für einen Ajax-Empfänger (Javascript)
Verarbeitung eintreffender JSON-Texte zu einem Array:
// Ajax+JSON Text trifft ein:
var atxt = ajax_obj.responseText;
atxt = "var r = {"+atxt+"}";
// Text intrepretieren
eval(atxt);

Ajax + JSON

werden dazu verwendet, um variable (dynamische) Webseiten herzustellen, die besonders schnell und flexibel interaktiv reagieren können.
Dabei bleibt die Webseite geladen, und bei Bedarf wird jeweils nur ein kleiner Teil geändert - mit Live (asynchron) angeforderten Daten.
Wegen der Möglichkeit, ganze Objekte inklusive Eigenschaften und Methoden genau an die aktuellen Anforderungen des Clients anzupassen, werden nur wenige Daten gesendet, die aber höchst effizient eingesetzt werden können.

Javascript-Bibliothek

Alternativ ist es möglich, Javascript-Code in einer eigenen Datei *.js zu konzentrieren. Diese Datei (Javascript-Library) kann von jeder Webseite geladen werden, z.B.
<script type="text/javascript" src="lib.js"></script>
Eine externe Javascript-Datei wird im <head> einer Webseite geladen, vor den eigenen Javascript-Programmen. So ist es möglich, in den eigenen Programmen die bereits vorher geladenen Anweisungen zu ergänzen und bei Bedarf zu überschreiben.
Fast alle Seiten dieses Webs verwenden eine oder mehrere derartige Bibliotheken.
Ajax+JSON:
Nur die tatsächlich benötigten Daten und Objekte werden übertragen.
• Vorteil, wenn nur wenige Daten aus einem großen Vorrat (Datenbank) benötigt werden, oder wenn die Objekte sehr variabel sind.
• Nachteil, wenn die gleichen Daten oder Objekte mehrfach benötigt werden - Sie werden jedesmal neu übertragen (nur in Ausnahme-Fällen aus dem Cache-Speicher bezogen).

Javascript-Bibliothek:
Alle enthaltenen Klassen, Objekte, Funktionen und Daten werden übertragen.
• Vorteil für Elemente, die mehrfach oder von mehreren Webseiten verwendet werden. - Sie werden nur einmal übertragen und dann aus dem Cache-Speicher des Browsers entnommen.

Ausgewählte Links zum Thema 'Objekt'

  Wikipedia: Objektorientierung, Klasse, Konstruktor, Eigenschaft (Attribut), Methode, objektorientierte Programmiersprachen, Javascript

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   Javascript   >   Objekte