Skip to content
This repository
tree: fa54d956df
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 366 lines (285 sloc) 14.864 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365

<!doctype html>

<head>
  <title>Kursmaterial — Seite 3</title>
  <link rel=stylesheet href="http://fonts.googleapis.com/css?family=Averia+Serif+Libre:300,400">
  <link rel=stylesheet href=style.css>
  <meta http-equiv=Content-Type content="text/html; charset=utf-8">
</head>

<h1>Kursmaterial: Seite 3, Daten</h1>

<p>In der Welt des Computers gibt es nur Daten. Was nicht Daten ist,
ist nicht. Programme sind Daten. Programmen erschaffen neue Daten. Es
ist ein eigenartiger, auf Silikon basierender Kreislauf des Lebens.</p>


<h2 class=step>Datenstrukturen</h2>

<h3 class=goal>Ziel</h3>

<p>Lerne mehrere Werte in einer Datenstruktur zu gruppieren und diese
Gruppierung zu verwenden.</p>

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

<h3 class=inst>Anweisungen</h3>

<p>Das ist der naive Ansatz:</p>

<pre>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);
}</pre>

<p>Das ist nicht falsch, aber es ist einfach nicht richtig. Es ist
voller Wiederholungen. Hier ist <a href="sandbox/#rainbow.js" target=_blank>eine
bessere Variante</a>:</p>

<pre>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;
  }
}</pre>

<h3 class=ex>Erklärung</h3>

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

<p>Die Werte in einem Array werden seine <em>Elemente</em> 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 <code>"red"</code> die
Position 0 hat, und <code>"white"</code> (das siebte Element) die
Position 6. Die Schreibweise <code>colors[1]</code> wird benutzt um auf
die Elemente in einem Array zuzugreifen — in diesem Fall wäre es
<code>"orange"</code>.</p>

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

<p>Die <code>while</code>-Schleife läuft eines nach dem anderen über die
Elemente des Arrays und verwendet dabei die Variable <code>count</code>
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.</p>

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

<pre>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);
  }
}</pre>

<p>In einer <code>for</code>-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.</p>

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


<h2 class=step>Benannte Eigenschaften</h2>

<h3 class=goal>Ziel</h3>

<p>Lerne Objekte zu erzeugen und auf ihre Eigenschaften zuzugreifen.</p>

<h3 class=inst>Anweisungen</h3>

<p>Öffne die Konsole wieder, falls du sie geschlossen hast.</p>

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

<p>Führe <code>myObject.name</code> und <code>myObject.score</code> aus.</p>

<p>Führe zudem <code>myObject["name"]</code> und <code>myObject["sco" +
  "re"]</code> aus.</p>

<p>Gib dem Objekt mit <code>myObject.color =
"purple"</code> eine Eigenschaft hinzu. Dann führe
<code>myObject.color</code> aus.</p>

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

<h3 class=ex>Erklärung</h3>

<p>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.</p>

<p>Die Schreibweise <code>{property1: value1, property2: value2}</code>
wird verwendet um ein Objekt zu erzeugen. Es gibt zwei Arten um auf die
Eigenschaften eines Objektes zuzugreifen. Die Art mit Punkt,
<code>object.property</code>, wird verwendet, wenn der Name der
Eigenschaft schon beim Schreiben des Programms bekannt ist.
Die Art mit Klammern, <code>object["property"]</code>, 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.</p>

<p>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.
</p>

<p><strong>Übung:</strong> Überlege dir eine JavaScript-Repräsentierung
eines Schachbretts. Es gibt mehrere gute Lösungen.</p>


<h2 class=step>Wir haben Daten</h2>

<h3 class=goal>Ziel</h3>

<p>Mache eine einfache Visualisierung eines Datensatzes</p>

<h3 class=inst>Anweisungen</h3>

<p>In unserer Spielumgebung haben wir eine neue Variable zur Verfügung,
<code>countryData</code>. Sie enthält ein Array von Objekten mit
Informationen (Bevölkerung, Lebenserwartung) über die meisten Länder der
Erde.</p>

<p>Jedes Objekt stellt ein Land dar und enthält eine
<code>name</code>-Eigenschaft mit einem String, sowie
<code>population</code>- und
<code>life_expectancy</code>-Eigenschaften die Arrays mit Zahlen
enthalten. Diese Zahlen geben die Werte der entsprechenden Statisiken
(Bevölkerungszahl und Lebenserwartung in Jahren) für die Jahre 1960 bis
2011 an.</p>

<p>Dieses Programm wählt ein paar Länder aus und stellt den Trend ihrer
jeweiligen Lebenserwartung für den verfügbaren Zeitraum als
Punktdiagramm dar.</p>

<pre>var width = 600, height = 300;

function showCountry(country) {
  var step = width / country.life_expectancy.length;
  for (var pos = 0; pos < country.life_expectancy.length; pos = pos + 1) {
    var le = country.life_expectancy[pos];
    circle(step * pos, le * height / 100, 2);
  }
}

function drawing() {
  moveTo(-width / 2, -height / 2);
  color("red");
  showCountry(countryData[66]); // Germany
  color("green");
  showCountry(countryData[81]); // India
  color("blue");
  showCountry(countryData[150]); // Russian Federation
}</pre>

<p>Du kannst es <a href="sandbox/#life_expectancy_de.js"
target=_blank>hier</a> in Aktion sehen.</p>

<h3 class=ex>Erklärung</h3>

<p>Um die Zeichnung mit ein wenig Disziplin zu erstellen, definiert das
Programm zunächst die Breite und Höhe des Bereichs in den gezeichnet
werden soll. 600 auf 300 Einheiten.</p>

<p>Die Funktion <code>showCountry</code> nimmt ein Land-Objekt als
Parameter und läuft in einer Schleife über alle Lebenserwartungs-Werte
dieses Landes. Es berechnet den horizontalen Abstand den es zwischen
Punkten lassen will und speichert ihn in der Variable <code>step</code>.
Unter der Annahme, dass die Lebenserwartung stets zwischen 0 und 100 Jahren
liegen wird, teilt es die Höhe des Zeichenbereichs durch 100 um die Zahl
der Einheiten zu bestimmen, die ein Jahr Lebenserwartung darstellen.</p>

<p>Die Funktion <code>drawing</code> bewegt zuerst das Koordinatensystem
so, dass (0,0) die linke untere Ecke des Zeichenbereichs und damit des
Graphen ist. Es ruft dann <code>showCountry</code> auf drei
verschiedenen Ländern auf, wobei es jedem eine andere Farbe gibt.</p>

<p><strong>Übung:</strong> Die Position eines Landes in der Sammlung
kennen zu müssen um es anzeigen zu können ist irgendwie unpraktisch.
Schreibe eine Funktion <code>findCountry</code> die einen String mit
einem Ländernamen als Parameter nimmt und durch das Array <code>countryData</code>
läuft, und das Objekt für das genannte Land zurück gibt.</p>

<p>Um das tun zu können, musst du wissen, dass das Stichwort
<code>return</code> benutzt werden kann, um eine Anweisung zu schreiben,
die einen Wert an die Stelle im Code zurück gibt, die die Funktion
aufgerufen hat. Zum Beispiel:</p>

<pre>function timesThree(x) {
  return x * 3;
}
console.log(timesThree(3)); // Logs 9</pre>

<p><strong>Übung:</strong> Ein großes Problem mit unseren Graphen ist,
dass man gar nicht erkennen kann, wofür die Punkte eigentlich stehen.
Schreibe zusätzlichen Code der graue horizontale Linien zeichnet (mit
der Funktion <code>line(x1, y1, x2, y2)</code>), so dass hinter dem
Graph zu sehen ist, wo 10, 20, ..., usw. bis 100 Jahre Lebenserwartung
liegen. Benutze die Variablen <code>width</code> und <code>height</code>
um die Linien richtig zu platzieren.</p>

<p>Wenn du magst, kannst du auch noch Beschriftungen mit der Funktion
<code>text(x, y, string)</code> hinzufügen oder eine Skala für den
Zeitraum zeichnen lassen.</p>

<p><strong>Übrung:</strong> Passe die Funktion <code>showCountry</code>
so an, dass sie eine durchgehene Linie statt einer Folge von Punkten
zeichnet..</p>


<h2 class=step>Daten transformieren</h2>

<h3 class=goal>Ziel</h3>

<p>Schreib auf eigene Faust ein Programm, dass einen Datensatz zusammen
fasst.</p>

<h3 class=inst>Anweisungen</h3>

<p>Im <a href="sandbox/#transform.js" target=_blank>Programm für diesen
  Schritt</a>, gibt es die Funktion <code>visualizeHistory</code>,
die der Funktion <code>showCountry</code> die wir zuvor benutzt haben
sehr ähnlich ist, die aber einen Graphen für beliebige Daten zeichnen
kann. Sie nimmt als Parameter ein Array mit Zahlen und eine vertikale
Einheit entgegen. Die vertikale Einheit gibt an, wieviel vertikalen Raum
eine Einheit des Zahlen-Arrays einnimmt.</p>

<p>Vervollständige die Funktion <code>showWorldPopulation</code>. Sie
soll die Weltbevölkerung für jedes der Jahre im Datensatz berechnen,
die Ergebnisse in ein Array speichern und damit die Funktion
<code>visualizeHistory</code> aufrufen.</p>

<p>Um ein Array aufzufüllen kannst du folgende Technik verwenden</p>

<pre>var newArray = []; // empty
for (var i = 0; i < 10; i = i + 1) {
  newArray.push(i);
}</pre>

<p>Die Funktion <code>push</code> ist eine Eigenschaft
(<em>Methode</em>) jedes Arrays und fügt dem Array einen Wert hinzu.</p>

<p>Um die richtige vertikale Einheit für deinen Graph zu bestimmen,
musst du die maximale Weltbevölkerung, der dein Programm begegnet,
speichern. Das kanst du entweder mit <code>if</code> und dem
<code>></code>-Operator tun, oder mit der Funktion
<code>Math.max</code>, die zwei Zahlen als Parameter nimmt und die
größere der beiden zurück gibt.</p>

<h3 class=ex>Erklärung</h3>

<p>Die Daten sind nicht im geeignetsten Format um die Bevölkerung pro
Jahr zusammen zu zählen. Dafür hätten wir lieber die Möglichkeit, eine
Sammlung aller Bevölkerungszahlen eines Jahres direkt zu erhalten.</p>

<p>Trotzdem kommen wir an die Daten heran, indem wir eine Schleife in
einer Schleife verwenden, wobei die äußere Schleife über die Jahre läuft
(zum Beispiel mit <code>countryData[0].population.length</code> als
Gesamtzahl des Zeitraums), und die innere Schleife über die Länder.
So kann die Bevölkerungszahl für das aktuelle Jahr aus jedem Land
geholt werden und zur Gesamtzahl für das Jahr addiert werden. Es ist
wichtig, dass der Zähler für die Gesamtzahl eines Jahres am Beginn der
äußeren Schleife zurück gesetzt wird.</p>

<p>Probier es aus! Falls du nicht weiterkommst, stelle einen Coach auf
die Probe.</p>

<p>Einige andere Ideen um interessante Darstellungen aus diesen Daten zu
erschaffen:</p>

<ul>
  <li>Jedes Land hat eine <code>region</code>-Eigenschaft. Das ist
  eine dreistellige Abkürzung die die Welt in sieben Regionen aufteilt.
  (Den vollen Namen kannst du mit der Funktion <code>regionName</code>
  aus der Abkürzung erzeugen.) Versuch ein Diagramm zu zeichnen, dass
  die Anteile der Weltbevölkerung zeigt, die in jeder dieser Regionen
  leben, unterteilt nach Jahreszahlen. Zum Beispiel kannst du einen
  vertikalen Stapel von farbigen Balken pro Jahr zeichnen.</li>
  <li>Die Land-Objekte enthalten zudem eine
  <code>fertility</code>-Eigenschaft die für jedes Jahr die
  Fruchtbarkeitsrate angibt.
  Zeichne eine zweidimensionale Darstellung für jedes Jahr, die die
  Korrelation zwischen Lebenserwartung und Fruchtbarkeitsrate zeigt,
  d.h. Lebenserwartung auf der x-Achse, Fruchtbarkeit auf der
  y-Achse.</li>
  <li>Animiere eine Visualisierung über die Jahre hinweg, zum Beispiel
  die aus dem letzten Vorschlag. Benutze dazu den
  <code>setTimeout</code>-Trick, der in
  <a href="sandbox/#drawing_animate_de.js" target=_blank>diesem Beispiel
    aus der letzten Seite</a> gezeigt wird. Schreite dazu jede
  Zehntelsekunde zum nächsten Jahr fort und zeichne ein Bild für das
  aktuelle Jahr. Mit einem Aufruf von <code>text</code> kannst du das
  aktuelle Jahr auch noch dazu schreiben.</li>
</ul>

<h3>Und damit kommen wir zu</h3>

<p><a href="page4_de.html">→ Vierte und letzte Seite für Samstag</a>.</p>
Something went wrong with that request. Please try again.