JavaScript/JSON

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

JSON steht für "JavaScript Object Notation" und definiert ein Datenformat, in dem Informationen wie Objekte, Arrays und sonstige Variablen in lesbarer Form gespeichert werden können. In den meisten Sprachen gibt es Parser, die den JSON String in eine entsprechende Variable verwandeln.

Die Notation von JSON weicht in einigen Punkten von der JavaScript-Syntax ab:

  • Alle Eigenschaftsnamen in einem Objekt müssen in doppelten Anführungszeichen notiert sein.
  • Führende Kommas in Objekten und Arrays sind verboten.
  • Bei Zahlen sind führende Nullen verboten und einem Dezimalpunkt muss mindestens eine Ziffer folgen.
  • Strings müssen durch doppelte Anführungszeichen begrenzt sein. Es darf nur ein beschränktes Set von Zeichen escaped werden. Bestimmte Kontrollzeichen sind ganz verboten. Der Unicode Zeilen Separator (U+2028) und Paragraph Separator (U+2029) sind erlaubt.

JSON wird häufig in Verbindung mit Ajax genutzt, um einfach Informationen zwischen dem Clienten und dem Server auszutauschen und ist eine praktische Alternative zu XML.

Datenstruktur und Notation[Bearbeiten]

Variablen, die mittels JSON gespeichert werden können verschiedene Typen haben:

  • Null: Mit dem Schlüsselwort null kann einer Variable der Nullwert zugewiesen werden, mit welchem angezeigt werden kann, dass sich kein Wert in der Variable befindet. Dies ist ein Unterschied zum Zahlenwert 0 oder einem leeren String.
  • Boolean: Mittels den Schlüsselwörtern true und false kann der Variable ein boolescher Wert zugewiesen werden.
  • Zahl: Der Variable kann auch ein Zahlenwert zugewiesen werden. Die Zahl muss in einem Format vorliegen, bei dem diese nur aus den Ziffern 0-9 und, falls benötigt, einem - Vorzeichen und/oder einem Punkt besteht. Optional kann die Zahl um einen Exponenten erweitert werden. (Bsp: 1.3e+4)
  • Zeichenkette: Eine Zeichenkette (auch String genannt) wird zwischen zwei doppelten Anführungszeichen notiert.
  • Array: Um ein Array zu deklarieren werden beliebig viele Werte durch Kommas getrennt in eckigen Klammern ([]) notiert. Für jeden Eintrag im Array kann man einen beliebigen, für JSON zugelassenen Typ verwenden (Null, Boolean, Zahl, Zeichenkette, Array, Objekt).
  • Objekt: Ein Objekt wird in geschweiften Klammern ({}) eingeschlossen. Ebenso wie beim Array kann man in einem Objekt beliebig viele Werte speichern. Der Unterschied liegt darin, dass es für jeden Wert einen eindeutigen Schlüssel geben muss, über diesen auf den Wert zugegriffen werden kann. Dieser sollte von doppelten Anführungszeichen umgeben sein. Ein Schlüssel-Werte-Paar wird, durch einen Doppelpunkt getrennt, notiert ("Schlüssel": Wert) und mehrere dieser Paare werden mittels Komma getrennt. Wie beim Array kann der Wert ein beliebiger, für JSON zugelassener Datentyp sein.
Beispiel
{
  "name": "Georg",
  "alter": 47,
  "verheiratet": false,
  "beruf": null,
  "kinder": [
    {
      "name": "Lukas",
      "alter": 19,
      "schulabschluss": "Realschule"
    },
    {
      "name": "Lisa",
      "alter": 14,
      "schulabschluss": null
    }
  ]
}

Objektorientierung und Vererbung in Javascript[Bearbeiten]

Objektklassen[Bearbeiten]

Objektklassen sollten in einzelnen Javascript-Dateien abgespeichert werden und diese werden dann über <script src="myclass.js"></script> eingebunden. In der Praxis führt dies jedoch zum dem Problem, dass der Browser zusätzliche Requests zum Laden der kompletten Webseite benötigt, was die Ladezeit negativ beeinflusst.

Javascript und Codeerzeugung mit Javascript[Bearbeiten]

Objektklassen, die ebenfalls die Vererbung von Klassen ermöglichen, können beispielsweise auch online erzeugt werden. Bei der Namensgebung der Methoden wird das Überschreiben von Methoden durch geeignete Namensgebung unter Berücksichtigung der Klassennamen automatisch generiert. Durch die Wahl der Bezeichnungen sollen Namenskonflikte bei den Methodendefinitionen vermieden werden.

  • Javascript Class Generator ist eine HTML-Datei mit eingebettetem JavaScript-Code zur Codeerzeugung (Lizenz GPL V3)
  • Im Browser können Sie mit "Speichern unter ..." die HTML-Datei mit dem eingebetteten JavaScript-Code für die Code-Erzeugung in ihr lokales Dateisystem kopieren und diese Datei an Ihre Anforderungen anzupassen.
  • Das folgende Beispiel zeigt die Definition einer Klasse "MyClass", die von einer Oberklasse "MySuperClass" abgeleitet wurde.
Beispiel
function MyClass () {
	//--------------------------------------
	//---Super Class------------------------
	this.SuperClass = MySuperClass;
	this.SuperClass();
	//--------------------------------------
	
	//---Attributes-------------------------
	this.attribut1 = 5;
	this.attribut2 = "test";
	this.myArray   = new Array(4);

	//---Methods----------------------------
	this.method1	 = method1_MyClass;
	this.my_method2	 = my_method2_MyClass;

	//--------------------------------------
}

Die Methoden-Definitionen erhalten automatisch eine angehängte Klassenbezeichnung, um Namenskonflikte beim Überschreiben von Methoden (Vererbung) zu vermeiden.

Beispiel
function method1_MyClass() {
       	
   // ...    	

}

function my_method2_MyClass(pParam1,pParam2) {
   
  // ...  	
}

Der JavaScript Class Generator ist eine einzelne HTML-Datei mit eingebettetem Javascript und dient der Code-Erzeugung für Objektklassen in Javascript. Der Javascript-Code kann nach der Erzeugung aus einer Textarea in eine Javascript-Datei kopiert werden.

Methoden[Bearbeiten]

JSON.parse()[Bearbeiten]

JSON.parse() parst einen String in JSON und erstellt ein Objekt.

Eine wichtige Einschränkung besteht: Das zu parsende Objekt darf keine Funktionen enthalten.

Beispiel
var jsonString = '{ "foo": 1, "bar": { "baz" : 1 } }';
var jsObject = JSON.parse( jsonString );

JSON.stringify()[Bearbeiten]

JSON.stringify() konvertiert ein Objekt in einen String.

Beispiel
var foo = { 
     "foo" : 1,
     "bar" : { "baz" : 1 }
   };
var jsonString = JSON.stringify(foo);


Einbindung[Bearbeiten]

PHP[Bearbeiten]

In PHP muss man den JSON-String der Funktion json_decode als Parameter mitgeben. Der Rückgabewert entspricht dem zum JSON passenden Wert. Die Funktion json_encode liefert die JSON-Repräsentation einer (fast) beliebigen Variable.

JavaScript[Bearbeiten]

Anders als bei PHP kann man bei JavaScript den JSON-code direkt in den Programm-code einbinden (var json = {...}).

Sollte das JSON nur als String vorliegen kann man es bei den meisten Browsern mithilfe von JSON.parse() dekodieren.

JSON.stringify() gibt die JSON-Repräsentation einer Variablen zurück.

Sollte die Möglichkeit mithilfe des JSON-Objektes nicht zur Verfügung stehen haben einige JavaScript-Frameworks einen eigenen JSON-Parser integriert. Alternativ kann man auch die eval-Funktion benutzen, welche jedoch alle Art von JavaScript-Code ausführt und daher ein Sicherheitsrisiko birgt, sollte der JSON-String von einer fremden Quelle stammen.

Quellen[Bearbeiten]