Schnelleinstieg (Objekte)

Neben elementaren Variablen und Funktionen bilden Objekte (Objekt-Literale) den innersten ECMAScript-Kern.

Ein Objekt hat Name:Wert-Paare (auch properties:value-Paare genannt).

 Name kann ein beliebiger String (einschließlich leerer String) sein.
 Wert kann jeder ECMScript-Wert außer undefined sein.

Objekt-Literale Schreibweisen für Property-Zugriffe

Für Objekte gibt es 2 Property-Zugriffsarten: obj.a oder obj['a']. Bei obj.a muß a den Konvetionen eines Variablennamens entsprechen. Bei obj['a'] kann ein beliebiger String (einschließlich des leeren Strings) als "zufriffskey" verwendet werden.

function teste_obj_property () {
  var s, br = '<br />', my_property, obj = { };
  my_property = 'b';
  obj.a = "X";
  obj.b = 'Y';
  obj[''] = 'hallo leerer key';

  s  = '<pre>';
  s += 'obj[my_property] = ' + obj[my_property]+ br;
  s += 'obj.a = ' + obj.a + br;
  s += "obj.b = " + obj.b + br;
  s += "obj[''] = " + obj[""] + '</pre>';
  document.write(s);
}

teste_obj_property();

Diese Funktion teste_obj_property() liefert die Ausgabe:

Beispiele ( Objekt-Literale ) Zugriff, delete, === Vergleiche

Das folgende Beispiel verwendet 2 Objekte o1, o2 und die Properties a, b, "c string". Im Beispiel wird o1.c mit delete o1.c gelöscht. Es werden die Vergleichsoperatoren == und === gegenüber gestellt. === führt einen Wert-Vergleich und einen Typ-Vergleich aus.

var o1 = { };
  o1.c = 'C';
  o1.b = 0;
  o1.a = "A"; delete o1.c;

var o2 = {"c string": /\s/g,  a: "A",  b: "0",
           eq2:function (a,b) { return a  == b;}, 
           eq3:function (a,b) { return a === b;} 
         }; 
var br = "<br />", 
    br2 = br + br, t=" |    ", 
    s = "<pre>"; 

s += "o1.c = " + o1.c+br2;  
s += "o2['c string'] = " + o2['c string'] +
     "  mit RegExp typeof o2['c string'] = " + (typeof o2['c string'])+br2;
s += "o2.eq2(null,1) = " + o2.eq2(null,0) + br2;

s += "     | == o2.a | === o2.a" +br;
s += "-----|---------|---------" +br;
s += "o1.a" + t + (o1.a == o2.a) +t + (o1.a === o2.a)+br2;

s += "     | == o2.b | === o2.b" +br;
s += "-----|---------|---------" +br;
s += "o1.b" + t + (o1.b == o2.b) +t + (o1.b === o2.b) + "</pre>";
document.write(s);

Ausgabe:

Beispiele ( Object.keys ) Object.keys() ermitteln

Nachfolgend wird eine eigene Object.my_keys-Funktion betrachtet, die für das Argument o lediglich ein einfaches Daten-Objekt, wie z.B. { a : "A", 'b' : "B"} verwendet.

ECMAScript 5 kennt die Funktion Object.keys( ), die die Key-Strings als Array zurück gibt. Object.keys( ) ist nicht bei älteren Browsern verfügbar, siehe z.B. die ECMAScript Kompatibilitätstabelle kangax-es5-compat-table

<script>
if(!Object.my_keys) {
  Object.my_keys = (function(o) { 'use strict';
    return function (o) { var r = [ ], p;
      for (p in o) {
        if( o.hasOwnProperty(p) ) { 
            r.push(p);// +' '+typeof p); 
        }
    } return r;
  };
}());
}
var r = [ ],
  obj = { 65 : "A0",  'b' : "B1",  "" : "C2" },
  arr = [      "u0",        "v1",       "w2" ],
  mykeys = Object.my_keys, 
  eskeys = Object.keys;
r.push( Object.keys({ a : "A",  'b' : "B"})  );
r.push( mykeys(obj) ); 
r.push( mykeys(arr) ); 
r.push( eskeys(obj)[2] === mykeys(obj)[2] ); 
r.push( obj[eskeys(obj)[2]] === obj[""] ); 

document.write(r.join('<br />') );
</script>

Anzeige:

Beispiele ( DOM-Elemente als Objekte ) Attribut-Anzeige

Hier wird als Beispiel ein a-Tags verwendet und mit onclick und href zugegriffen. Wenn onclick return true zurück gibt, so wird nachfolgend auch das href ausgeführt. Was wird durch das folgende a-Tags angezeigt?

<a id="a-test" onclick="alert(this.id);return true;"
   href="javascript:alert(this.document.getElementById('a-test').nodeName);">teste </a> 

teste Merke: Bei href meint this das window-Objekt und bei onclick meint this das a-Element


Zur Property-Anzeige von DOM-Elementen kann natürlich ein Debugger verwendet werden.
Wie erfolgt der ECMAScript-Zugriff auf Properties von DOM-Elementen?
Beispiel:

function zeige_dom_attribute(that, key_arr) { var i, key, tg='', r=["<pre>"]; 
  key_arr = key_arr||['nodeName','id','onclick','href','target','innerHTML'];

  for (i = 0; i < key_arr.length; i += 1) { key = key_arr[i];
    if (that.hasOwnProperty(key)) {
      if (key === 'nodeName') {
        tg = that[key].toLowerCase(); r.push('<' + tg);
      } else if (key === 'innerHTML') {
        r.push('>' + that[key] + '<\/' + tg + '>');
      } else {
        r.push('\n' + key + '="' + that[key].toString().replace(/(\s)/g,' ') + '"');
      } 
    } 
  } r.push("</pre>"); return r.join(""); 
}
Beispiele ( DOM-Zugriffe ) Node-Properties

Das folgende Beispiel wird 2 mal betrachtet (mit geringen Codeunterschieden). Es werden seiten-eindeutige Identifizierer id="myid_a" bzw. id="myid_b" verwendet. Das folgende Beispiel a verwendet den seiten-eindeutigen Identifizierer id="myid_a" für den Zugriff auf das div-Element.

<div id="myid_a" title="nachher">vorher</div>

a) Welche Fehler können in Verbindung mit Objekten (häufig) auftreten? Ist der id-String id="myid_a" korrekt, dann funktioniert mit var div = document.getElementById(id); der Zugriff auf das div-Element. Durch div.innerHTML = div.title wird div.title direkt sichtbar, falls div.title vorhanden ist.

Ist der id-String korrekt, so wäre der var div = document.getElementById(id) - Zugriff auf das browser-interne Objekt div korrekt. Wäre nun im div kein title-attribut vorhanden, so liefert div.title den Wert undefined und (div.title || 'zugriffsfehler') den String 'zugriffsfehler', d.h. es erfolgt div.innerHTML = 'zugriffsfehler'; und dadurch wird im div-innerHTML dann "zugriffsfehler" angezeigt.

Ist der id-String nicht korrekt, so bleibt das (nicht referenzierte) div-Objekt ungeändert. Infolge von div = document.getElementById(id) || {innerHTML:''} das Objekt div = {innerHTML:''} angelegt, das kein div.title-Property hat und (div.title || 'zugriffsfehler') liefert den String 'zugriffsfehler'. Wegen div.innerHTML = 'zugriffsfehler' wird {innerHTML:''} gemäß {innerHTML:'zugriffsfehler'} überschrieben und die alert-Box zeigt div.innerHTML, d.h. 'zugriffsfehler' an.

 var id = "myid_a",
 div = document.getElementById(id) || {innerHTML:''};
 div.innerHTML = div.title || 'zugriffsfehler';
 if (!div.nodeName) { alert(div.innerHTML); }

Ausgabe:

vorher

Das folgende Beispiel b verwendet den seiten-eindeutigen Identifizierer id="myid_b" für den Zugriff auf das div-Element.

<div id="myid_b" title="nachher">vorher</div>

b) Welche Fehler können in Verbindung mit Objekten (häufig) auftreten? Ist der id-String id="myid_b" korrekt, dann funktioniert mit div = document.getElementById(id); der Zugriff auf das div-Element. Durch div.innerHTML = div.title wird div.title direkt sichtbar, falls div.title vorhanden ist.

Ist der id-String korrekt und wäre im div kein title-attribut vorhanden, so liefert div.title den Wert undefined und (div.title || 'zugriffsfehler') den String 'zugriffsfehler'. Im div-innerHTML wird dann "zugriffsfehler" angezeigt.

Ist der id-String nicht korrekt, so löst try {} das catch-Ereignis aus und übergibt in der Variablen e eine eval-Fehlermeldung (etwa "TypeError: Cannot convert 'div' to object"), die in einer alert-Box angezeigt wird. Die Variable e wird nicht definiert, sondern wie ein Funktionsparameter betrachtet, der vom System genutzt wird.

 var div, id = "my_id";
 try {
   div = document.getElementById(id);
   div.innerHTML = div.title || 'zugriffsfehler';
 } catch(e) {
   alert(e);
 }

Ausgabe:

vorher
Beispiele ( Self-Assessment ) Test's

Hier ist eine Self-Assessment-Möglichkeit für ECMAScript (Objekte)