Kursmaterial: Seite 3, Daten

In der Welt des Computers gibt es nur Daten. Was nicht Daten ist, ist nicht. Programme sind Daten. Programme erschaffen neue Daten. Es ist ein eigenartiger, auf Silicium basierender Kreislauf des Lebens.

Datenstrukturen

Ziel

Lerne mehrere Werte in einer Datenstruktur zu gruppieren und diese Gruppierung zu verwenden.

Aufgabe: Zeichne einen Regenbogen indem du sieben konzentrische Kreise mit den Farben red, orange, yellow, green, cyan, purple, white zeichnest, wobei jeder Kreis kleiner als der zuvor ist.

Anweisungen

Der naive Ansatz wäre:

function rainbow(x, y) {
  color("red");
  circle(x, y, 150);
  color("orange");
  circle(x, y, 145);
  color("yellow");
  circle(x, y, 140);
  color("green");
  circle(x, y, 135);
  color("cyan");
  circle(x, y, 130);
  color("purple");
  circle(x, y, 125);
  color("white");
  circle(x, y, 120);
}

Das ist nicht falsch, aber es ist auch nicht richtig. Es kommt ständig zu Wiederholungen. Hier ist eine bessere Variante:

function rainbow(x, y) {
  var colors = ["red", "orange", "yellow", "green", "cyan", "purple", "white"];
  var count = 0;
  while (count < colors.length) {
    color(colors[count]);
    circle(x, y, 150 - 5 * count);
    count = count + 1;
  }
}

Erklärung

Das Ding mit den eckigen Klammern ([ und ]) wird ein Array genannt. Ein Array ist ein Wert der andere Werte enthält - in diesem Fall enthält er sieben Strings die Farben benennen.

Die Werte in einem Array werden seine Elemente genannt. Die Elemente in einem Array sind geordnet, was bedeutet, dass jedes Element eine Position innerhalb des Arrays hat. Die Positionen in einem Array werden ab Null gezählt, so dass im Beispiel oben "red" die Position 0 hat, und "white" (das siebte Element) die Position 6. Die Schreibweise colors[1] wird benutzt um auf die Elemente in einem Array zuzugreifen — in diesem Fall wäre es "orange".

Eine weitere neue Schreibweise ist der Punkt in colors.length, auch wenn wir den bei Math.random schon gesehen haben. Er wird verwendet um auf andere Arten von Werten zuzugreifen, die Eigenschaften (properties) genannt werden. Bei Math.random wird es nur zur Gruppierung verwendet: Eine ganze Sammlung von mathematischen Funktionen sind als Eigenschaften von Math verfügbar (zum Beispiel Math.round zum Runden von Zahlen). Aber im Fall von colors.length wird auf eine Eigenschaft zugegriffen, die in direkter Verbindung zum Array colors steht: die Gesamtzahl der Elemente im Array (sieben).

Die while-Schleife läuft eines nach dem anderen über die Elemente des Arrays und verwendet dabei die Variable count um ihre Position zu speichern. Bei jedem Schritt werden die Elemente benutzt um die aktuelle Farbe zu setzen und anschließend wird ein Kreis der passenden Größe gezeichnet.

Weil diese Art von Schleife (Variable erzeugen, in der while-Bedingung prüfen, und aktualisieren) sehr häufig vorkommt, gibt es eine kompaktere Schreibweise dafür. Dieses Programm ist äquivalent zu dem Vorherigen:

function rainbow(x, y) {
  var colors = ["red", "orange", "yellow", "green", "cyan", "purple", "white"];
  for (var count = 0; count < colors.length; count = count + 1) {
    color(colors[count]);
    circle(x, y, 150 - 5 * count);
  }
}

In einer for-Schleife werden das Initialisieren der Variablen der Schleife, das Prüfen der Bedingung, und das Aktualisieren der Werte zusammen gruppiert, damit einfacher gesehen werden kann, dass sie gemeinsam die Schleife ausmachen.

Übung: Spiele ein bisschen mit dem Aussehen der Regenbögen. Sorge z.B. dafür, dass die Streifen etwas dicker werden.

Benannte Eigenschaften

Ziel

Lerne Objekte zu erzeugen und auf ihre Eigenschaften zuzugreifen.

Anweisungen

Öffne die Konsole wieder, falls du sie geschlossen hast.

Erzeuge eine Variable indem du folgendes in die Konsole eingibst: var myObject = {name: "Larry", score: 100};

Führe myObject.name und myObject.score aus.

Führe zudem myObject["name"] und myObject["sco" + "re"] aus.

Gib dem Objekt mit myObject.color = "purple" eine Eigenschaft hinzu. Dann führe myObject.color aus.

Verändere die score-Eigenschaft mit myObject.score = 105. Führe dann wieder myObject.score aus um sicher zu gehen, ob es geklappt hat.

Erklärung

Objekte sind ebenfalls Gruppierungen von Werten. Sie verlangen aber, dass jeder Wert einen Namen hat. Arrays sind nützlich um irgendeine Menge von Werten in einer homogenen Gruppe zu sammeln. Objekte dagegen sind besser geeignet wenn jeder Wert eine klar bestimmte Rolle in der Gruppierung spielt. Zum Beispiel ist eine Tüte Chips ein Array, aber die Teile eines Autos (Motor, Räder, etc.) bilden ein Objekt.

Die Schreibweise {property1: value1, property2: value2} wird verwendet um ein Objekt zu erzeugen. Es gibt zwei Arten um auf die Eigenschaften eines Objektes zuzugreifen. Die Art mit Punkt, object.property, wird verwendet, wenn der Name der Eigenschaft schon beim Schreiben des Programms bekannt ist. Die Art mit Klammern, object["property"], lässt zu, dass der Name der Eigenschaft als beliebiger Ausdruck angegeben wird und ist daher nützlich, wenn der Name erst noch erstellt werden muss.

Zusammen bieten Objekte und Arrays die Möglichkeit, eine große Bandbreite an Informationen darzustellen. Ein Beispiel: Eine Liste von Spielern in einem Spiel würde üblicherweise ein Array von Objekten sein, worin jedes Objekt einen Spieler repräsentiert. Falls eine Liste von Ergebnissen mit einzelnen Spielern verbunden wird, wäre diese wiederum ein Array in jedem der Spieler-Objekte. So kann man beliebig fortfahren.

Übung: Überlege dir eine JavaScript-Repräsentation eines Schachbretts. Es gibt mehrere gute Lösungen.

Wir haben Daten

Ziel

Mache eine einfache Visualisierung eines Datensatzes.

Anweisungen

In diesem Beispiel haben wir eine neue Variable, weatherData. Sie enthält ein Array mit 3 Objekten - welche Informationen zum kommenden Wetter beinhalten.

Jedes Object (stellvertretend für einen Tag) hat eine date Eigenschaft bestehend aus einem String, sowie Zahlen Werte für temperature und humidity.

Das Program zeichnet ein Balkendiagramm und stellt die Temperatur jeden Tages dar.

var width = 600, height = 400;

var weatherData = [
  {
    date: "2012-08-21",
    temperature: 30,
    humidity: 10
  },
  {
    date: "2012-08-22",
    temperature: 24,
    humidity: 45
  },
  {
    date: "2012-08-23",
    temperature: 28,
    humidity: 30
  }
];

function barChart(x, y, barWidth) {
  var gutter = 2,
    xPosition = x,
    yPosition = y;

  var barHeight = -1 * weatherData[0].temperature;
  box(xPosition, yPosition, barWidth, barHeight);

  barHeight = -1 * weatherData[1].temperature;
  xPosition = xPosition + gutter + barWidth;
  box(xPosition, yPosition, barWidth, barHeight);

  barHeight = -1 * weatherData[2].temperature;
  xPosition = xPosition + gutter + barWidth;
  box(xPosition, yPosition, barWidth, barHeight);
}

function drawing() {
  color("red");
  barChart(0, 0, 20);
}

Du kannst es dir hier anschauen.

Erklärung

Um das Ganze ein wenig übersichtlich zu halten, wurden am Anfang erstmal die Breite und Höhe der Zeichenfläche festgelegt (600 und 400 Einheiten).

Die barChart Funktion nimmt die Position und die Breite der Balken als Parameter. Danach wird jeweils ein Balken mithilfe der box Funktion gezeichnet. Die Höhe des Balken entspricht dabei der Temperatur, daher am ersten Tag weatherData[0].temperature.

Auf die gleiche Weise wird anschließend die Temperatur für den zweiten und dritten Tag dargestellt.

Übung: Jeden einzelnen Tag selber aufzurufen ist recht unflexibel. Ändere die barChart Funktion so, dass sie eine while Schleife verwendet um durch die Sammlung von Daten zu iterieren und diese automatisch zu zeichnen.

Um zu schauen ob deine Funktion so arbeitet wie du es erwartest, füge ein paar zusätzliche Tage zu dem Datensatz hinzu. Du kannst welche im Netz finden.

Und damit kommen wir…

→ …zur letzte Seite.