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.
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.
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; } }
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.
Lerne Objekte zu erzeugen und auf ihre Eigenschaften zuzugreifen.
Ö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.
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.
Mache eine einfache Visualisierung eines Datensatzes.
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.
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.