Schlagwort: Objekte

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);

Kleinsten und größten Wert einer ArrayList ermitteln

Manche Zahlen und Objekte speichere ich in einer ArrayList. Hier kann man relativ leicht Objekte hinzufügen (.add()) oder entfernen (.remove()). In diesem Artikel beschreibe ich, wie man den größten und den kleinsten Wert (Minumum und Maximum) einer ArrayList bestimmt.

Für eine ArrayList<Integer>

Am einfachsten ist die Bestimmung des Minimums und des Maximums bei einer Liste von Objekten mit einer natürlichen Reihenfolge, wie z.B. Integer-Zahlen. In dem Falle kann man die statischen Methoden max() und min() der Collections-Klasse verwenden. Je nachdem wie die Liste aufgebaut ist, kann es allerdings auch effizientere Wege geben (siehe Stackoverflow und Zparacha-Blog).

ArrayList<Integer> liste = new ArrayList<Integer>();
liste.add(100);
liste.add(200);
liste.add(110);
liste.add(99);
 
System.out.println("Maximum: " + Collections.max(liste));
System.out.println("Minimum: " + Collections.min(liste));

Vollständiges Beispiel:

package de.fenon.test;
 
import java.util.ArrayList;
import java.util.Collections;
import java.util.Random;
 
/**
 * Beispiel: Kleinsten und größten Wert in einer ArrayList finden.
 * @author fenon.de
 */
public final class HauptProgramm {
  /** Zahl der Messungen. */
  static final Integer STICHPROBE = 10;
  /** Maximalwert. */
  static final Integer MAXIMUM = 10;
  /** Seed des Zufallszahlen-Generators. */
  static final Integer SEED = 1234567891;
 
  /**
   * Privater Konstruktor.
   * Dadurch kann kein Objekt der Klasse "Hauptprogramm" erzeugt werden.
   */
  private HauptProgramm() {}
 
  /**
   * main()-Methode.
   * @param args - Parameter der Kommandozeile.
   */
  public static void main(final String[] args) {
    ArrayList<Integer> liste = new ArrayList<Integer>();
    // Erzeuge zufällige Messwerte
    Random generator = new Random(SEED);
    for (int i = 0; i < STICHPROBE; i++) {
      liste.add(generator.nextInt(MAXIMUM));
    }
    // Gib die Messwerte aus
    for (Integer element:liste) {
      System.out.println(element);
    }
    // Gib Kleinsten und Größten Wert aus
    System.out.println("Maximum: " + Collections.max(liste));
    System.out.println("Minimum: " + Collections.min(liste));
 
  } // ENDE: main()
 
} // ENDE: HauptProgramm

Für eine ArrayList mit komplexeren Objekten

Man kann allerdings auch den minimalen und maximalen Wert eigener/komplexerer Objekte bestimmen. Im folgenden Beispiel habe ich eine Liste von Objekten des eigenen Typs Website. Mit Hilfe eines Comparators (hier: VergleicheHits) kann festgelegt werden, wie die Objekte verglichen werden sollen. Im Beispiel werden die Website-Objekte dann anhand ihrer Zugriffzahlen verglichen.

Klasse: Website

package de.fenon.Website;
 
/**
 * Informationen über Webseite.
 * @author fenon.de
 */
public class Website {
  /** Zahl der Besucher der Website. */
  private Integer hits;
 
  /**
   * Konstruktor.
   * @param besuche - Zahl der Besucher.
   */
  public Website(final Integer besuche) {
    this.setHits(besuche);
  } // ENDE: Konstruktor
 
  /**
   * Gibt die Besucherzahl der Webseite aus.
   * @return Zahl der Besucher der Website.
   */
  public final Integer getHits() {
    return hits;
  } // ENDE: getHits()
 
  /**
   * Setze die Besucherzahl der Webseite.
   * @param besuche - Zahl der Besucher.
   */
  public final void setHits(final Integer besuche) {
    this.hits = besuche;
  } // ENDE: setHits()
 
} // ENDE: Website

Comparator: VergleicheHits

package de.fenon.Website;
 
import java.util.Comparator;
 
/**
 * Vergleiche Website-Objekte anhand ihrer Hits.
 * @author fenon.de
 */
public class VergleicheHits implements Comparator<Website> {
  /** Konstruktor. */
  public VergleicheHits() {}
 
  @Override
  public final int compare(final Website a, final Website b) {
    if (a.getHits() < b.getHits()) {
      return -1;
    } else if (a.getHits().equals(b.getHits())) {
      return 0;
    } else {
      return 1;
    }
  } // ENDE: compare()
 
} // ENDE: VergleicheHits

Das Beispiel

package de.fenon.test;
 
import java.util.ArrayList;
import java.util.Collections;
import java.util.Random;
 
import de.fenon.Website.VergleicheHits;
import de.fenon.Website.Website;
 
/**
 * Beispiel: Kleinsten und größten Wert in einer Liste finden.
 * @author fenon.de
 */
public final class HauptProgramm {
  /** Zahl der Messungen. */
  static final Integer STICHPROBE = 10;
  /** Maximalwert. */
  static final Integer MAXIMUM = 10;
  /** Seed des Zufallszahlen-Generators. */
  static final Integer SEED = 1234567891;
 
  /**
   * Privater Konstruktor.
   * Dadurch kann kein Objekt der Klasse "Hauptprogramm" erzeugt werden.
   */
  private HauptProgramm() {}
 
  /**
   * main()-Methode.
   * @param args - Parameter der Kommandozeile.
   */
  public static void main(final String[] args) {
    ArrayList<Website> seiten = new ArrayList<Website>();
    // Erzeuge zufällige Messwerte
    Random generator = new Random(SEED);
    for (int i = 0; i < STICHPROBE; i++) {
      seiten.add(new Website(generator.nextInt(MAXIMUM)));
    }
    // Gib die Messwerte aus
    for (Website element:seiten) {
      System.out.println("Hits: " + element.getHits());
    }
    // Gib Kleinsten und Größten Wert aus.
    // Mit einem anderen Getter könnte man z.B. den Namen der Website ausgeben.
    System.out.println(
      "Maximum: "
      + Collections.max(seiten, new VergleicheHits()).getHits()
      );
    System.out.println(
      "Minimum: "
      + Collections.min(seiten, new VergleicheHits()).getHits()
      );
  } // ENDE: main()
 
} // ENDE: HauptProgramm