Verwendung von JSON-Daten innerhalb einer JavaScript-Anwendung

JSON (JavaScript Object Notation) in ein kompaktes Datenformat, mit dem komplexe Datenstrukturen abgebildet und zwischen Anwendungen ausgetauscht werden können. JSON erfreut sich zunehmender Beliebtheit, da im Vergleich zu XML weniger Verwaltungsdaten (Overhead) benötigt werden. In diesem Artikel stelle ich kurz vor, wie JSON innerhalb einer JavaScript-Anwendung verwendet werden kann.

Zunächst zeige ich die manuelle Erstellung eines JSON-Objektes. Im Anschluss gebe ich ein Beispiel dafür, wie ein JSON-Objekt durch die Instanziierung einer JavaScript-Klasse erzeugt werden kann. Im letzten Beispiel wird das JSON-Objekt durch Parsen eines JSON-Strings erzeugt.

Eine allgemeine Beschreibung des JSON-Formates ist auf JSON.org zu finden. Zudem wird in zahlreichen Artikeln auf StackOverflow das Thema JSON behandelt (JSON valid chars, Illegal characters in object or JSON key, Are there limitations for key names in JSON-files?).

Manuelle Erstellung

Im folgenden wird zunächst ein JSON-Objekt (manuell) erzeugt.
Mit Hilfe der Ausgabe-Funktion (ausgabe()) soll der Zugriff auf die einzelnen Teile des Objektes demonstriert werden.

Hinweis: ich verwende generell den UTF-8 Zeichensatz. Beim Nachprogrammieren muss dieser eventuell angepasst werden (siehe W3.org).

<html>
<head>
	<title>JavaScript und JSON</title>
	<meta charset="utf-8"/>
</head>
<body>
 
JSON-Demonstration.
<script>
/** Objekt mit dem Namen 'manuell'. */
manuell = {
  name: "Peter",
  tiernamen: ["Bello", "Miezie"],
  /* Felder können weitere Objekte enthalten. */
  auto: {
    /* Benennung der Felder ist Case-sensitiv. */
    SITZE: 4,
    kennzeichen: "A-BC-123"
  }
};
 
/** Ausgabefunktion */
function ausgabe(objekt) {
  alert(
    'Hallo!\n'
    + objekt.name + ' hat ' + objekt.tiernamen.length + ' Haustiere.\n'
    + 'Eines davon heißt: ' + objekt.tiernamen[0] + '.\n'
    + '\n'
    + 'Das Auto hat ' + objekt.auto.SITZE + ' Sitze.\n'
  );
}
 
ausgabe(manuell);
</script>
 
</body>
</html>

Objektoreintierte Programmierung in JavaScript

Zunächst werden die JavaScript-Klassen Person und Auto erstellt. Details zur Objektorientierten Programmierung mit JavaScript gibt es auf WebmasterPro.de.

/** Definition der Klassen. */
function Person(name, tiere, auto) {
	this.name      = name;
	this.tiernamen = tiere;
	this.auto      = auto;
}
function Auto(Sitze, Kennzeichen) {
	this.SITZE       = Sitze;
	this.kennzeichen = Kennzeichen;
}

Im Anschluss wird das Objekt instanziiert.

/* Objekt erzeugen. */
klasse = new Person(
             "Gerda",
             ["Fips", "Felix"],
             new Auto(7, "D-EF-456")
         );

Die Ausgabe erfolgt dann über:

ausgabe(klasse);

Parsen eines JSON-Strings

Strings, die ein JSON-Objekt repräsentieren, können mit Hilfe der jQuery-Funktion parseJSON() in ein JSON-Objekt umgeformt werden. Dabei ist zu beachten, dass die Schlüssel (keys) in Anführngszeichen stehen (also: {"name": "Gustav"} anstatt {name: "Gustav"}).

Zunächst muss jQuery in den Quelltext eingebunden werden. Dazu wird folgende Programmzeile innerhalb von <head>...</head> hinzugefügt.

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

Im Anschluss wird der String (hier aus der Variable json) geparst:

json =	'{'
     + '"name": "John",'
     + '"tiernamen": ["Flipper", "Blubb", "Goldie"],'
     + '"auto": {'
       + '"SITZE": 2,'
       + '"kennzeichen": "G-HI-789"'
       + '}'
     + '}';
jquery = jQuery.parseJSON(json);

Die Ausgabe der Daten erfolgt dann über:

ausgabe(jquery);

JavaScript und jQuery in einem WordPress-Blog verwenden

Wie man JavaScript in einem WordPress-Blog einbindet, erschließt sich dem Anfängen nicht ohne weiteres. Insbesondere dann, wenn man die Bibliothek jQuery für seine Skripte verwenden möchte. In diesem Artikel werde ich zunächst zeigen, wie man JavaScript direkt in den Quelltext einfügt. Im zweiten Teil zeige ich, wie man JavaScript-Dateien in einen WordPress-Blog einbaut.

Direkter Einbau in den Quelltext

Es wird oftmals davon abgeraten, Skripte direkt in den Quelltext einzubauen. Dennoch werde ich diese Methode kurz vorstellen, um einen Fallstrick beim Einbau von jQuery in WordPress-Blogs zu zeigen.

Das folgende JavaScript kann direkt in den Quelltext einen Artikels oder einer Seite kopiert werden. Beim neu laden der Seite wird dann ein Fenster mit der Nachricht „JavaScript funktioniert!“ angezeigt.

<script>
alert('JavaScript funktioniert!');
</script>

In WordPress-Blogs wird jQuery im No Conflict Mode gestartet (siehe auch Blog von Matthew Ruddy). Daher funktioniert das $-Zeichen als Alias für jQuery() nicht mehr. An den entsprechenden Stellen muss man jQuery() verwenden.

Im folgenden Beispiel wird beim Klicken auf den Text jedes Mal das Wort „neu“ vor den eigentlichen Text gestellt:

<p id="meinTest">Klicke auf diesen Text.</p>
<script>
  jQuery("#meinTest").click(function(){
    jQuery(this).before("neu ");
  });
</script>

Um das Dollarzeichen wieder als Alias für jQuery() in den eigenen Skripten verwenden zu können, muss man beim registrieren seiner Funktionen (mittels jQuery(document).ready) der ersten Funktion das Dollarzeichen als Parameter mitliefern.

<p id="meinTest">Klick auf diesen Text</p>
<script>
jQuery(document).ready(function($) {
  $("#meinTest").click(function(){
    $(this).before("neu ");
  });
})
</script>

Einbinden von Skript-Dateien

Wenn man eigene JavaScript-Dateien einbauen möchte, sollte man die von WordPress zur Verfügung gestellten Funktionen nutzen. Mit ihnen kann man relativ leicht seine Skripte hinzuladen und aktivieren. Zudem stellt man sicher, dass alle benötigten Skript-Dateien (z.B. jQuery) rechtzeitig und in der richtigen Reihenfolge geladen werden.

  1. Zunächst erstellt man sich eine JavaScript-Datei (z.B. meinScript.js) mit der gewünschten Funktion. Durch das folgende Skript werden die H1-Überschriften versteckt, sobald man auf sie klickt.
    jQuery(document).ready(function($) {
      $("h1").click(function(){
        $(this).hide();
      });
    });

    Die Datei meinScript.js habe ich in den Ordner js/ meines eigenen Child-Themes gelegt (siehe auch StackOverflow).

  2. Im Anschluss kann man die Datei zu WordPress hinzufügen, indem man folgenden Quelltext in seine functions.php-Datei schreibt:
    function mein_script_laden() {
    wp_enqueue_script(
      // Name des Scripts (benötigt man z.B. zum Entfernen, etc.)
        'handlerMeinesScripts',
      // Ort der Script-Datei
        get_stylesheet_directory_uri() . '/js/meinScript.js',
      // Liste der Scripts, welche von der Script-Datei benötigt werden.
      // In diesem Falle das von Wordpress geladene jqeury
        array('jquery')
    );
    }
     
    add_action( 'wp_enqueue_scripts', 'mein_script_laden' );

    Da ich ein Child-Theme verwende, habe ich zur Ermittlung des Theme-Pfades die Funktion get_stylesheet_directory_uri() verwendet. Erstellt man ein komplett eigenes Theme, sollte man die Funktion get_template_directory_uri() verwenden.

  3. In Deinem Blog kannst Du auch andere Versionen von jQuery einbinden. Siehe hierzu: Die netzialisten.de und den Blog von Wlad Leirich.
  4. Du kannst auch die JavaScript-Datei im Theme-Editor sichtbar machen. Danach hast Du die Möglichkeit, die JavaScript-Datei direkt aus WordPress heraus zu editieren.