ECMAScript-Objekte (allgemein)

Ein Objekt kann z.B. ein Ding, Gegenstand bedeuten.

Edsger W. Dijkstra:
"... die Gesellschaft lechzt nach Schlangenöl. Natuerlich hat das Schlangenöl die eindrucksvollsten Namen — sonst würde man es nicht verkaufen können — wie "Strukturierte Analyse und Design", "Software Engineering", "Maturity Models", "Management Information Systems", "Integrated Project Support Environments", "Object Orientation" und "Business Process Re-engineering" (die letzten drei auch bekannt als IPSE, OO and BPR)."

Welche Objekte gibt es?

Ein "Objekt" ist ein universeller Begriff (betrachtetes Ding, Untersuchungsgegenstand, Sache, Substanz, Tatsache, Gebilde, Organismus, Phänomen, Erscheinungsform, usw.), der spezifiziert auf "etwas konkretes" zeigt. Eine Objekt steht in Beziehung "zu etwas" (Subjekt, Theorie, anderen Objekten, Methoden, Wechselwirkungen, usw.).

Zu einer "Computer-Sprache" gehören Objekt, die im Sinne einer Vorratsbibliothek (eingebaute Objekte, build-in-objects) verfügbar sind. Ein Objekt hat einen Zustand (Attribute, Wechselwirkungen), ein Verhalten (Menge von Methoden) und eine Identität (Unterscheidungsmöglichkeit).

Zu ECMAScript gibt es firmenspezifische Erweiterungen und Unterschiede, die über die derzeitige Normierung hinausgehen (ActiveXObject Object, Enumerator Object, Error Object, VBArray Object, usw.).

Mit Hilfe einer "Computer-Sprache" können neue Objekte (user-object) erstellt werden. Oft liegen auch bereits viele Objekte vor, die modifiziert werden können. Z.B. besteht eine XHTML -Seite aus Objekten, die als XHTML-Quelltext als tag-Objekte und als DOM -Objekte als node-Objekte bezeichnet werden.

Die eingebauten (verfügbaren) ECMAScript-Objekte und die vom Anwender erschaffenen ECMAScript-Objekte sind von den DOM -Objekten einer XHTML -Seite (oder XML -Seite) zu unterscheiden. Es gibt hierarchisch geordnete Browser-XHTML -Objekte (wie z.B. window, window.document, window.document.forms[], usw.), wobei Browser-spezifische Erweiterungen von den DOM-Objekten zu unterscheiden sind. JavaScript kann z.B. über das hierarchie-höchste-window-Objekt auf weitere Objeklte der XHTML -Seite zugreifen und diese manipulieren.

Die ECMAScript-Language-Specification ist unter ECMA-262.pdf beschrieben.

Welche DOM-Objekte gibt es? ... Element, Node, Knoten

Jeder XML-Tag (Element, Node, Knoten) entspricht einem DOM-Objekt. Jedes XHTML-Tag (Element, Node, Knoten) entspricht einem DOM-Objekt.

Welche ECMAScript-Objekte gibt es? ... Funktionen, Methoden, Werte, Member

Eingebauten (verfügbaren) ECMAScript-Objekte (Datenelemente, Eigenschaften, Funktionen=Methoden) sind z.B. Datums- und Zeitrechnung, Link-Objekte, mathematische Objekte, Zeichenketten-Objekte, usw.

ECMAScript-Objekte:
Datenelemente, Eigenschaften, Funktionen=Methoden) sind z.B. Datums- und Zeitrechnung, Link-Objekte, mathematische Objekte, Zeichenketten-Objekte, Array Object, Function Object, auch Funktionsargumente als Object, Boolean Object, Number Object, Math Object, String Object, Date Object, RegExp Object.

Übersicht zur Date-Objekt-Untertützung ... zahlreiche Namen

Zu Date- und Time-Objekten (ECMA-Script) gibt es zahlreiche Funktionen ( getDate, getDay, getFullYear, getHours, getMilliseconds, getMinutes, getMonth, getSeconds, getTime, getTimezoneOffset, getYear, getUTCDate, getUTCDay, getUTCFullYear, getUTCHours, getUTCMilliseconds, getUTCMinutes, getUTCMonth, getUTCSeconds, setDate, setFullYear, setHours, setMilliseconds, setMinutes, setMonth, setSeconds, setTime, setYear, setUTCDate, setUTCFullYear, setUTCHours, setUTCMilliseconds, setUTCMinutes, setUTCMonth, setUTCSeconds, toGMTString, toLocaleString, toUTCString, parse, UTC)

Method	Description
date( )	Returns the current date and time
getDate( )	Returns the date, between the days of 1 and 31
getDay( )	Returns the day of the week, numbered 0 to 6
getMonth( )	Returns the month, numbered 0 to 11
getFullYear( )	Returns the year as a four digit number
getYear( )	Returns the year as a two digit number
getHours( )	Returns the current hour from 0 to 23
getMinutes( )	Returns the current minutes from 0 to 59
getSeconds( )	Returns the current seconds from 0 to 59
getMilliseconds( )	Returns the current milliseconds from 0 to 999
getTime( )	Returns the milliseconds since January 1, 1970
getTimezoneOffset( )	Returns the difference in time between local time and GMT
getUTCDate( )	Displays the day of the month from a Date object specified by universal time - from 1-31
getUTCDay( )	Displays the day of the week from a Date object specified by universal time - from 0-6
getUTCMonth( )	Displays the month from a Date object specified by universal time - from 0-6
getUTCFullYear( )	Displays the four digit year from a Date object specified by universal time
getUTCHours( )	Displays the hour of a Date object specified by universal time - from 0-23
getUTCMinutes( )	Displays the minutes of a Date object specified by universal time - from 0-59
getUTCSeconds( )	Displays the seconds of a Date object specified by universal time - from 0-59
getUTCMilliseconds( )	Displays the milliseconds of a Date object specified by universal time - from 0-999
parse( )	Uses a date string and displays the number of milliseconds since January 1, 1970
setDate( )	Specifies the day of the month 1-31
setMonth( )	Specifies the day of the month 0-11
setFullYear( )	Specifies the year in a Date object - four digits
setHours( )	Specifies the hour in a Date object - 0-23
setMinutes( )	Specifies the minutes in a Date object - 0-59
setSeconds( )	Specifies the seconds in a Date object - 0-59
setMilliseconds( )	Specifies the milliseconds in a Date object - 0-999
setTime( )	Figures a date and time by adding or subtracting milliseconds from January 1, 1970
setUTCDate( )	Specifies the day of the month in a Date object specified by universal time - from 1-31
setUTCMonth( )	Specifies the month in a Date object specified by universal time - from 0-11
setUTCFullYear( )	Specifies the year in a Date object specified by universal time - four digits
setUTCHours( )	Specifies the hour in a Date object specified by universal time - from 0-23
setUTCMinutes( )	Specifies the minutes in a Date object specified by universal time - from 0-59
setUTCSeconds( )	Specifies the month in a Date object specified by universal time - from 0-59
setUTCMilliseconds( )	Specifies the milliseconds in a Date object specified by universal time - from 0-999
toSource( )	Denotes the source code of an object
toString( )	Changes a Date object into a string
toUTCString( )	Changes a Date object into a string specified by universal time
toLocaleString( )	Changes a Date object into a string according to local time
UTC( )	Takes a date and returns the number of milliseconds, according to universal time, since January 1, 1970
valueof( )	Supplies the primitive value of a Date object

Beispiel: Date-Objekt Date, .toLocaleString, .lastModified

Zu Date- und Time-Objekten (ECMA-Script) gibt es zahlreiche Funktionen. Hier werden lediglich new Date(), .toLocaleString, .lastModified verwendet. Bei <!-- HTML 4.0 --> wird wegen PCDATA die Klammerung
<script type="text/javascript"> <!-- ... //--> </script> verwendet.
Bei <!-- XHTML --> wird wegen CDATA die Klammerung
<script type="text/javascript"> /*<![CDATA[*/ ... /*]]>*/ </script> verwendet.

js-Beispiel

Beschreibung, Anzeige

<!-- HTML 4.0 --> <script type="text/javascript"> <!-- function anzeige1() { var d = new Date(); var s1 = "<b>" + d + "<\/b>"; var s2 = d.toLocaleString().bold(); var s3 = document.lastModified.bold(); document.write("<br>s1=" + s1); document.write("<br>s2=" + s2); document.write("<br>s3=" + s3); } anzeige1(); //--> </script>

In einer HTML-Page wird ECMAScript -Code zwischen <script> und </script> eingefügt. <script> ... </script> darf (mehrfach) im HTML-Header und/oder (mehrfach) im HTML-Body vorkommen. Was zwischen <script> ... </script> steht wird vom Browser nicht als Anzeigetext, sondern als ECMAScript -Code interpretiert. ECMAScript -Bereiche sollten im Programmkopf (HTML-Head) eingerichtet werden, wenn dort Variable deklariert werden sollen, die innerhalb des Body-Bereichs einer HTML-Seite (mehrfach) gebraucht werden, oder wenn Funktionen definiert werden sollen, die später durch Ereignisse (Maus, Timer) abgearbeitet werden sollen. Bei vielen Browser darf <!--, //-->, \, type="text/javascript" weggelassen werden. Anzeige:

Beispiel: Date-Objekt und Prototype Date.prototype.toString

Implizite Deklaration werden oft als Prototyp bezeichnet.

js-Beispiel

Beschreibung, Anzeige

<!-- XHTML --> <script type="text/javascript"> /*<![CDATA[*/ Date.prototype.wochenTagName = function () { var a=["So","Mo","Di","Mi","Do","Fr","Sa"]; return a[this.getDay()]; } Date.prototype.monatName = function () { var a=["Jan","Feb","Mär","Apr","Mai","Jun", "Jul","Aug","Sep","Okt","Nov","Dez"]; return a[this.getMonth()]; } Date.prototype.toString = function () { var obj = new getDate().toLocaleString(); var s = obj + "."; s += obj.monatName() + "."; s += obj.getYear(); return s; } function anzeige2() { var d = new Date(); var s4 = d.toLocaleString(); var s5 = d.monatName(); var s6 = d.wochenTagName(); document.write("<br>s4=" + s4 ); document.write("<br>s5=" + s5 ); document.write("<br>s6=" + s6 ); } anzeige2(); /*]]>*/ </script>

In einer HTML-Page wird ECMAScript -Code zwischen <script> und </script> eingefügt. <script> ... </script> darf (mehrfach) im HTML-Header und/oder (mehrfach) im HTML-Body vorkommen. Was zwischen <script> ... </script> steht wird vom Browser nicht als Anzeigetext, sondern als ECMAScript -Code interpretiert. ECMAScript -Bereiche sollten im Programmkopf (HTML-Head) eingerichtet werden, wenn dort Variable deklariert werden sollen, die innerhalb des Body-Bereichs einer HTML-Seite (mehrfach) gebraucht werden, oder wenn Funktionen definiert werden sollen, die später durch Ereignisse (Maus, Timer) abgearbeitet werden sollen. Eine function monat() {...} kann mit Date.prototype.monat = monat; dem Date-Objekt als Member-Funktion zugeordnet werden. Auch kann die default-Methode toString durch eine User-Methode function Date.prototype.toString() {...} überschrieben werden. Anzeige:

Beispiel: Funktions mit .call und .apply cheese = new f3("feta", 5, "food");

Die .call- und die .apply-Methode führen einen Funktionsaufruf aus, wobei in der Ausführung der übergebene this-Parameter verwendet wird. Die .apply-Methode kann arguments verwenden. Beispiel:

function f1(wert) {
    this.wert = wert + " Euro";
}

function f2(name, val) {
    this.name = name;
    this.val = val;
}

function f3(name, val, dept) {
    this.dept = dept;
    f2.call(this, name, val);
    // entspricht:
    // this.name = name;
    // this.val = val;
    // führe f1 aus, verwende this von f3
    // und nur val der f3-Parameter
    f1.apply(this, [val]); //(this, arguments);
}
f3.prototype = new f2();

var cheese = new f3("feta", 5, "food");
var car = new f3("honda", 5000, "auto");

var s = "typeof(car)=" + typeof (car)
  + "<br />car.name=" + car.name + ", typeof car.name = " + typeof car.name
  + "<br />car.wert=" + car.wert + ", typeof car.wert = " + typeof car.wert
  + "<br />car.val=" + car.val + ", typeof car.val = " + typeof car.val
  + "<br />car.dept=" + car.dept + ", typeof car.dept = " + typeof car.dept;
document.write(s);

Hier eine Testausgabe:

Beispiel: Objekt-'debuggen' Prototype für toString

Existiert z.B. ein Objekt var obj1 = {a0:0,a1:1,a2:2}; so sollen zum "elementaren Debuggen" die einzelnen Elemente (name,wert) des Objektes angezeigt werden, etwa gemäß alert(obj1.toString())

Achtung! Nachfolgend lediglich das Prinzip. Es gibt zahlreiche Verbesserungsmöglichkeiten.

Object.prototype.toString = function () 
{
 var s="{ ", flag=false;
 for ( var name in this ) {
   if ( this[ name ] == undefined ) continue;
   if(flag) s += ", "; else flag=true; 
   s += name + ":" + this[ name ];
 } return s +" }";
}

Prototyp-basierte Programmierung (elegant) Object.create, differenzielle Vererbung

Für Programmieranfänger von ECMAScript kann "new" seine Tücken haben. Objekte werden stets per Referenz übergeben. Es findet keine inhaltliches kopieren statt. Anstelle eines unübersichtlichen prototype ist es günstiger, eine "Factory-Methode" Object.create() zu verwenden. Dadurch wird das prototype und new in Object.create() versteckt. Dadurch vereinfachen sich Datenkapselung (Encapsulation, information hiding), Vererbung (Inheritance), object composition ("has a" relationship), Association ("sending a message", "invoking a method", "calling a member function"), Aggregation (object contains another object), Polymorphism (dynamische Types).

Code Snippet: Object.create(o)

1. if (typeof Object.create !== 'function') {
2.   Object.create = function( o ) {
3.     function F(){}
4.     F.prototype = o;
5.     return new F();
6.   };
7. }
8.  
9. var obj1 = { a : 11, 'b' : 12, c: 13 };
10. var obj2 = Object.create(obj1);
11.   
12. obj2.c = 23;  
13. obj2.d = 24;
15. delete obj1.a;  // löscht       obj1.a
16. delete obj2.b;  // löscht nicht obj1.b
17. obj2.a = '21';  // neu          obj2.a
18.   
19. var s = "obj1.a = " + obj1.a + "\nobj1.b = " + obj1.b +
20.   "   obj1.hasOwnProperty('b') = " + obj1.hasOwnProperty('b') +
21.   "\nobj1.c = " + obj1.c + "\nobj1.d = " + obj1.d + "\n" +     
22.   "\n\nobj2.a = " + obj2.a + "\nobj2.b = " + obj2.b +
23.   "   obj2.hasOwnProperty('b') = " + obj2.hasOwnProperty('b') +
24.   "\nobj2.c = " + obj2.c + "\nobj2.d = " + obj2.d;
25.   document.getElementById("mit_clone").innerHTML = s;

Liefert die Ausgabe:

Beispiel: Objekte in ein Objekt einmischen ... bei "flacher" Objekt-Komponenten-Struktur

Um mehrere Objekte "zusammen zu mischen" müssen elementweise Object-Object-Ersetzungen/Erweiterungen durchgeführt werden. Zum Ausgabgsobjekt { } werden die weiteren Objekte hinzu gemischt, wobei hier lediglich eine "flache" Objekt-Komponenten-Struktur betrachtet wird.

Aus var obj1 = {a0:0,a1:1,a2:2};
und var obj2 = {a3:"33",a2:"22"}; liefert
var obj = extend({},obj1,obj2); mit obj.toString() ={ a0:0, a1:1, a2:22, a3:33 }
typeof(obj.a0) =number
typeof(obj.a3) =string

// lediglich ein add_obj
function extend(obj, add_obj) { var k;
  for (k in add_obj) {
    if (add_obj.hasOwnProperty(k)) {
      obj[k] = add_obj[k]; 
    }
  } return obj;
}

// für mehrere add_Objekte 
function extend() { var obj = arguments[0] || {},
                    i, k, add_obj, len = arguments.length;
for (i = 1; i < len; i += 1) {  add_obj = arguments[i];
  if (typeof add_obj !== 'object') { continue; }
  for (k in add_obj) {
    if (add_obj.hasOwnProperty(k)) { obj[k] = add_obj[k]; }
  }
} return obj;
}

Beispiel

// Ausgabe von:
// var obj1 = {a0:0,a1:1,a2:2};
// var obj2 = {a3:"33",a2:"22"};
// var objA = extend({},   obj1,obj2);
// var objB = extend(obj1, obj2);   // liefert

Beispiel: DOM-NodeTypen Welche gibt es?

Das DOM kennzeichnet jeden Knotentyp (Node) durch eine zugeordnete Kennzahl. Diese Kennzahlen können durch ein User-Objekt benannt werden:

var NodeType = {  
 ELEMENT: 1,                ATTRIBUTE: 2,  
 TEXT: 3,                   CDATA_SECTION: 4,  
 ENTITY_REFERENCE: 5,       ENTITY: 6,  
 PROCESSING_INSTRUCTION: 7, COMMENT: 8,  
 DOCUMENT: 9,               DOCUMENT_TYPE: 10,  
 DOCUMENT_FRAGMENT: 11,     NOTATION: 12
};

Beispiel: ECMAScript und Formulare Zugriff auf Form-Elemente

ECMAScript erlaubt Zugriffe auf die Elemente von Formularen. Hier werden traditionelle Formular-Zugriffe (ohne DOM) verwendet.

ECMAScript -Zugriffe auf Formulare document.MYFORM.FIND.value, document.MYFORM.TEXT.value, document.MYFORM.REPL.value Zugriffe mit f = this.form oder z.B. mit document.MYFORM.FIND.value

<form name="MYFORM" id="MYFORM"> ersetze : <input type="text" name="FIND" value="HALLO" />in TEXT: <textarea rows="5" cols="15" name="TEXT">HALLO- HALLO! Geben Sie was ein... </textarea> durch : <input type="text" name="REPL" value="hallo"> /> <input type="button" name="ACTION" value="Ersetzen" onClick="replaceIt(this.form);" /> <input type="button" name="INVERS" value=" Zurueck " onClick="replaceIt_inv(this.form);" /> <input type="hidden" name="V1" value="" /> </form> <script type="text/javascript"> function replaceIt(f) { var s = f.TEXT.value; var find = f.FIND.value; if(find.length<1)return; var repl = f.REPL.value; while(s.indexOf(find) > -1) { pos = s.indexOf(find); s = (s.substring(0,pos)+repl +s.substring((pos+find.length), s.length)); } f.TEXT.value = s; } function replaceIt_inv(f) { var s = f.TEXT.value; var repl = f.FIND.value; var find = f.REPL.value; if(find.length<1)return; while(s.indexOf(find) > -1) { pos = s.indexOf(find); s = (s.substring(0,pos)+repl +s.substring((pos+find.length), s.length)); } f.TEXT.value = s; } </script>

Anzeige: ersetze : in TEXT: HALLO- HALLO! Geben Sie was ein... durch :

Beispiel: Formular-Daten auslesen .getElementsByTagName("input")

Formular (Beispiel) <form name="MYFORM" id="MYFORM"> ersetze : <input type="text" name="FIND" value="HALLO" />in TEXT: <textarea rows="5" cols="15" name="TEXT">HALLO- HALLO! Geben Sie was ein... </textarea> durch : <input type="text" name="REPL" value="hallo"> /> <input type="button" name="ACTION" value="Ersetzen" onClick="replaceIt(this.form);" /> <input type="button" name="INVERS" value=" Zurueck " onClick="replaceIt_inv(this.form);" /> <input type="hidden" name="V1" value="" /> </form>
Auslesen mit Browser-Objekten (Beispiel):
var s = "nutze Browser-Objekte:"; var ele = document.MYFORM.elements; for (var i=0; i< ele.length; i++) { s += "<br />Element-name = " + document.MYFORM.elements[i].name + "<br />Element-value = " + document.MYFORM.elements[i].value } document.write(s);
Auslesen mit DOM-Objekten (Beispiel):
var s = "DOM: input-Tags"; var ff = document.getElementById("MYFORM"); var ele = ff.getElementsByTagName("input"); for (var i=0; i< ele.length; i++) { s += "<br />Element-name="+ele[i].name + "<br />Element-value="+ele[i].value } s += "<br />DOM: input-Tags: textarea-Tags"; ele = ff.getElementsByTagName("textarea"); for (var i=0; i< ele.length; i++) { s += "<br />Element-name="+ele[i].name + "<br />Element-value="+ele[i].value } document.write(s);

Beispiel: Einfaches User Objekt erde={u:function(r) {...}, ... }

Objekte können "bedarfsspezifisch" erstellt werden. Hier wird als Beispiel ein Objekt erde in literaler Objektnotation angelegt, das die Komponenten r (Radius als Zahl) und u (Umfang als Funktion) hat. Die Strings str1, str2 können mit eval() in die Objekte gaia1, gaia2 umgewandelt werden.

User Objekte

var erde = { r:6373, u:function(r){return 2*r*Math.PI.toFixed(1);} }; var str1 = "{r:6373, u:function(r) {" + " return 2*r*Math.PI.toFixed(1);}" + "}"; var gaia1 = eval("(" + str1 + ")"); eval("gaia2 = " + str1); var s = "erde.r=" + erde.r+"<br />"; s += "erde.u(erde.r)=" + erde.u(erde.r); s += "<br /><br />"; s += "gaia1.r=" + gaia1.r+"<br />"; s += "gaia1.u(gaia1.r)=" + gaia1.u(gaia1.r); s += "<br /><br />"; s += "gaia2.r=" + gaia2.r+"<br />"; s += "gaia2.u(gaia2.r)=" + gaia2.u(gaia2.r); document.write(s);

Anzeige:

ECMAScript-Objekt-Notation (allg)

Die ECMAScript-Language-Specification ECMA-262.pdf beschriebt für den HTTP -Datenaustausch zwischen Browser und Server ein einfaches Textformat für den Austausch von Textdaten.

Diese (J)ava(S)cript-(O)bjekt-(N)otation wird durch JSON abgekürzt. Das JSON -Austauschformat für Textdaten ist unabhängig von einer Programmiersprache.

Wegen der einfachen JSON -String-Objekt-Wandlung (Serialisierung, Parser meist < 3kB) ist JSON (oft eine günstige) Alternative zum XML-Format. JSON ist eine Teolmenge von JavaScript. Im Wesnentlichen übernimmt die ECMAScript -Funktion eval() das Parsen und das Umwandeln eines Striing in ein ECMAScript -Objekt.

JavaScript-Objekt-Notation (JSON)

Die ECMAScript-Language-Specification ECMA-262.pdf beschreibt für den HTTP -Datenaustausch zwischen Browser und Server ein einfaches Textformat für den Austausch von Textdaten.

JSON ist eine Abkürzung für (J)ava(S)cript-(O)bjekt-(N)otation. Das JSON -Austauschformat für Textdaten ist unabhängig von einer Programmiersprache.

Beispiel: Vergleich zwischen XML- und JSON-Darstellung, zunächst eine XML-Darstellung

<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book id="1">
        <title>Code Generation in Action</title>
        <author><first>Jack</first><last>Herrington</last></author>
        <publisher>Manning</publisher>
    </book>


    <book id="2">
        <title>PHP Hacks</title>
        <author><first>Jack</first><last>Herrington</last></author>
        <publisher>O'Reilly</publisher>
    </book>


    <book id="3">
        <title>Podcasting Hacks</title>
        <author><first>Jack</first><last>Herrington</last></author>
        <publisher>O'Reilly</publisher>
    </book>
</books>

hier die zugehörige JSON-Darstellung

   "books" : {
      "book" : [ {
         "@attributes" : {
            "id" : "1"
         }, 
         "title" : "Code Generation in Action", 
         "author" : {
            "first" : "Jack", "last" : "Herrington"
         }, 
         "publisher" : "Manning"
      }, {
         "@attributes" : {
            "id" : "2"
         }, 
         "title" : "PHP Hacks", "author" : {
            "first" : "Jack", "last" : "Herrington"
         }, 
         "publisher" : "O'Reilly"
      }, {
         "@attributes" : {
            "id" : "3"
         }, 
         "title" : "Podcasting Hacks", "author" : {
            "first" : "Jack", "last" : "Herrington"
         }, 
         "publisher" : "O'Reilly"
      }
   ]}
}

Wegen der einfachen JSON -String-Objekt-Wandlung (Serialisierung, Parser meist < 3kB) ist JSON oft eine günstige Alternative zum XML-Format. JSON ist eine Teilmenge von JavaScript.
Im Wesententlichen übernimmt die ECMAScript -Funktion eval() das Parsen und das Umwandeln eines String in ein ECMAScript-Objekt.

Vergleiche zwischen JSON und XML Beispiele von json.org/example ◥
JSON	XML
{"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }}	<menu id="file" value="File"> <popup> <menuitem value="New" onclick="CreateNewDoc()" /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup> </menu>
{ "glossary": { "title": "example glossary", "GlossDiv": { "title": "S", "GlossList": { "GlossEntry": { "ID": "SGML", "SortAs": "SGML", "GlossTerm": "Standard Generalized Markup Language", "Acronym": "SGML", "Abbrev": "ISO 8879:1986", "GlossDef": { "para": "A meta-markup language", "GlossSeeAlso": ["GML", "XML"] }, "GlossSee": "markup" } } } } }	<!DOCTYPE glossary PUBLIC "-//OASIS//DTD DocBook V3.1//EN"> <glossary><title>example glossary</title> <GlossDiv><title>S</title> <GlossList> <GlossEntry ID="SGML" SortAs="SGML"> <GlossTerm>Standard Generalized Markup Language</GlossTerm> <Acronym>SGML</Acronym> <Abbrev>ISO 8879:1986</Abbrev> <GlossDef> <para>A meta-markup language</para> <GlossSeeAlso OtherTerm="GML"> <GlossSeeAlso OtherTerm="XML"> </GlossDef> <GlossSee OtherTerm="markup"> </GlossEntry> </GlossList> </GlossDiv> </glossary>
{"widget": { "debug": "on", "window": { "title": "Sample Konfabulator Widget", "name": "main_window", "width": 500, "height": 500 }, "image": { "src": "Images/Sun.png", "name": "sun1", "hOffset": 250, "vOffset": 250, "alignment": "center" }, "text": { "data": "Click Here", "size": 36, "style": "bold", "name": "text1", "hOffset": 250, "vOffset": 100, "alignment": "center", "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;" } }}	<widget> <debug>on</debug> <window title="Sample Konfabulator Widget"> <name>main_window</name> <width>500</width> <height>500</height> </window> <image src="Images/Sun.png" name="sun1"> <hOffset>250</hOffset> <vOffset>250</vOffset> <alignment>center</alignment> </image> <text data="Click Here" size="36" style="bold"> <name>text1</name> <hOffset>250</hOffset> <vOffset>100</vOffset> <alignment>center</alignment> <onMouseUp> sun1.opacity = (sun1.opacity / 100) * 90; </onMouseUp> </text> </widget>

Beispiel: JSON -Objekt in einen Link wandeln

Das ECMAScript -Objekt meine_links ist

var meine_links = {"links":[
    {"uri":"https://homepages.fh-giessen.de/~hg54/index_main.htm","title":"Bachmann Homepage"},
    {"uri":"http://company.com", "title":"company homepage" }
]};

Das Objekt meine_links soll nach HTML gewandelt werden. Hierzu

muss z.B. aus

{ "link": "<a href=\"{links.uri}\">{links.title}</a>" }

das Anker-Tag

<a href="http://company.com">company homepage</a>

and using a processor like 
jsonT(data, rules) 
we can apply the given rule to the 
JSON
 data resulting in the output string above.

erstellt werden.

Teste: Browser-Internas Erkunden von Browser-Internas

Zu den verügbaren Objekten (eingebaute Objekte) gehören Datenelemente, Eigenschaften und Methoden (Funktionen). Es gibt das DOM-Objekte und browserspezifischen Objekte. Browserspezifische Objekte sind wegen der mangelden Interkompatibilität möglichst nicht (oder mit Bedacht) zu verwenden.

Objekte (Datenelemente, Eigenschaften, Funktionen=Methoden) sind z.B. Datums- und Zeitrechnung, Link-Objekte, mathematische Objekte, Zeichenketten-Objekte. In ECMAScript gibt es das hierarchie-höchste window-Objekt.

Teste: Erkunden von Browser-Objekten. Die DOM-, ECMASCript- sowie die browserspezifischen Elemente von Objekten können angezeigt werden:

<script type="text/javascript"> 
function show_sub_objekte(oName) {
  var i, str="", obj = eval(oName);
  for ( i in obj ) {
    if (obj.hasOwnProperty(i)) {
      str += oName + "." + i + "=";
      str += obj[i] + "<br>";
    }
  } 
  document.write(str + "...<br>");
}
show_sub_objekte("document");
//show_sub_objekte("window.top");
</script>

Anzeige:

Hinweis: Serientest für Browsern ... erwartete/tatsächliche Werte

Durch Aufruf der test()-Funktion kann eine Kontrolle erfolgen, wobei nur Fehler gelistet werden.

function test(p, v) { 
  // p: property to test 
  // v: expected value  
  var r = (eval(p) == v); 
  if (r == false) {
    s += "<br />" + p + " == " + v 
      + "<br /> : "+r+" Actual value: "+eval(p);
  } 
}

Aufrufbeispiele, wie z.B. test('Object.length', 1); test('Function.length', 1); ... siehe Quelltext. Ausgabe-Beispiel (bitte in verschiedenen Browsern anzeigen lassen):
Zeige alle test-Ergebnisse an. Zeige nur falsche test-Ergebnisse an