forked from OpenTechSchool/js-beginners-1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
page2_de.html
326 lines (254 loc) · 12.7 KB
/
page2_de.html
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
<!doctype html>
<head>
<title>Kursmaterial — Seite 2</title>
<link rel=stylesheet href="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 2, Bilder</h1>
<p>Die vorige Seite hat Dir genau, Wort für Wort, gesagt was Du
tun sollst, ohne Dir eine Wahl zu lassen. Wir entschuldigen uns
für diese schamlose Unterdrückung deiner künstlerischen Identität.
Jetzt, da Du die Grundlagen schon kennst, wird
das Kursmaterial etwas weniger linear sein und Dir
mehr Spielraum zum Experimentieren lassen.</p>
<h2 class=step>Den Bilder-Spielplatz öffnen</h2>
<h3 class=goal>Ziel</h3>
<p>Mache Dich mit unserer visuellen Programmierumgebung vertraut.</p>
<h3 class=inst>Anweisungen</h3>
<p>Öffne die <a href="sandbox/#drawing_de.js" target=_blank>Spielplatz-Seite</a>
in einem neuen Tab.</p>
<p>Frohlocke.</p>
<p>Lies den ersten Abschnitt des JavaScript-Programms im unteren
Teil des Bildschirms.</p>
<p>Spiel ein bisschen mit dem Inhalt der <code>drawing</code>-Funktion
herum. Verändere hier und da die Werte und Farben und klicke
auf 'Render' um das Ergebnis zu sehen. Lies Dir danach den Text
unter dem Programm durch und füge ein paar neue Formen hinzu.</p>
<h3 class=ex>Erklärung</h3>
<p>Die Idee hier ist, ein Gefühl für Konzepte der Programmierung
zu bekommen, indem wir sie auf etwas anwenden, das leicht
zu beobachten ist: Grafiken.
Die Spielumgebung hat eine Anzahl praktischer
Zeichen-Operationen für uns vordefiniert und lädt uns ein,
mit ihnen zu experimentieren.</p>
<p>Im unteren Teil des Programms gibt es mehrere Zeilen,
die mit zwei Schrägstrichen (<code>//</code>) anfangen. Man nennt
sie <em>Kommentare</em>. Sie helfen dabei, Programme verständlicher
zu machen, sind aber nicht selbst Teil des Programms.
In Kommentaren kannst Du schreiben was auch immer Du willst—der
Computer schaut sich das sowieso nie an.</p>
<p>Die Programme, die Du in der Spielumgebung eingibst, laufen nicht
im Vakuum. Für diesen Kurs haben wir eine Reihe von einfachen
Funktionen vordefiniert, mit denen man grafische Operationen
ausführen kann. Sie sind im Kommentar des Beispiels beschrieben
und können von Deinem Programm verwendet werden.</p>
<p>Das Code-Stück <code>function drawing()</code> definiert
eine Funktion mit dem Namen <code>drawing</code>. Ein paar
Schritte weiter werden wir mehr über die Definition von Funktionen
erfahren, aber diese eine Definition ist speziell: Sie wird
immer ausgeführt, wenn Du den 'Render'-Button klickst. Dort
gehören also die Anweisungen (englisch: Statements) hin, die
Dein Bild produzieren.</p>
<h2 class=step>Die Schleife</h2>
<h3 class=goal>Ziel</h3>
<p>Lernen was eine Schleife ist, und wie man sie in JavaScript ausdrückt.</p>
<p>Das Problem: Wir wollen zwanzig Punkte malen ohne
<code>circle(x, y, something)</code> zwanzigmal hinzuschreiben.</p>
<h3 class=inst>Anweisungen</h3>
<p>Öffne <a href="sandbox/#drawing_loop_de.js" target=_blank>diesen Link</a>,
um zu einer <code>drawing</code>-Funktion mit folgendem Programm zu
gelangen:</p>
<pre>color("red");
var count = 0;
while (count < 20) {
circle(count * 10, 0, 4);
count = count + 1;
}</pre>
<h3 class=ex>Erklärung</h3>
<p>Solange man seinem Programm nichts anderes beibringt, wird es
Anweisungen einfach von oben nach unten ausführen.
Das Großartige daran, einen Computer für uns arbeiten zu lassen,
ist, dass er uns eintönige Aufgaben abnehmen kann.
Daher wollen wir gar nicht erst anfangen, <code>circle(0, 0, 4); circle(10, 0, 4);</code>
usw. zu schreiben, um unsere Punkte zu malen.</p>
<p>Mit dem Wort <code>while</code> kann man eine besondere
Art von Anweisungen einleiten, die man <em>Schleifen</em> nennt
(englisch: <em>loop</em>). Eine Schleife besteht aus einer
<em>Bedingung</em> (englisch: <em>condition</em>) und einem
<em>Schleifenkörper</em> (englisch: <em>body</em>). Im Beispiel
ist <code>count < 20</code> die Bedingung und der Körper ist
alles, was zwischen den geschweiften Klammern steht.
Eine Schleife hält sich nicht an die gewöhnliche Top-Down-Reihenfolge.
Stattdessen wiederholt sie den Körper so lange, wie die Bedingung
gültig ist.</p>
<p>Die geschweiften Klammern halten die zwei Anweisungen im
Inneren der Schleife zusammen—sie machen deutlich, dass beide
zum Schleifenkörper gehören. Wahrscheinlich ist Dir aufgefallen,
dass diese Zeilen etwas eingerückt sind. Das macht man, um
Programme leichter lesbar zu machen (in diesem Fall, um es
offensichtlicher zu machen wo der Block anfängt und aufhört).
Unbedingt erforderlich ist es aber nicht.</p>
<p>Im Beispiel verwendet die Schleife eine Variable als inneren
Fortschritts-Anzeiger. Die Variable <code>count</code> fängt
mit dem Wert null an und wird jedesmal, wenn der Schleifenkörper
ausgeführt wird, um eins erhöht. Eine Bedingung ist ein ganz
normaler Ausdruck und das Symbol <code><</code> ist ein
gewöhnlicher Operator, der zwei Ausdrücke miteinander vergleicht
und als Wert etwas zurückgibt, dass angibt ob der Wert auf der
linken Seite kleiner ist als der auf der rechten Seite.
Wir würden also erwarten, dass der Schleifenkörper genau
zwanzigmal ausgeführt wird—beim ersten Mal mit <code>count</code>
bei null, dann bei eins und so weiter, bis 19.
Wenn <code>count</code> 20 erreicht, ist die Bedingung nicht
mehr gültig und das Programm wird hinter der Schleife fortgesetzt
(was in unserem Fall das Ende des Beispiels ist).</p>
<p>Es gibt noch ein paar wissenswerte Dinge zum
<code><</code>-Operator: Der Wert, den er produziert,
ist keine Zahl und kein String, sondern ein neuer Typ, genannt
<em>Boolean</em>. Dieser Typ hat nur zwei mögliche Werte:
<code>true</code> und <code>false</code>. Andere Operatoren,
die solche Werte produzieren, sind <code>></code> (größer als)
und <code>==</code> (gleich).</p>
<p><strong>Übung:</strong> Versuche ein Programm zu schreiben,
das, statt nur eine gepunktete Linie zu malen, ein <em>Raster</em>
mit 20 mal 20 Punkten malt. Dafür brauchst Du zwei Schleifen
und zwei Variablen zum Zählen. Hinweis: Du kannst eine Schleife
innerhalb einer anderen Schleife schreiben.</p>
<p>Während Du Programme in der Spielumgebung ausprobierst, halte
ein Auge auf die Browser-Konsole. Wenn der Computer nicht
versteht, was Dein Programm ihm sagen will, wird er Dir das
dort (in mehr oder weniger verständlicher Form) mitteilen.
Wenn nach einem Klick auf 'Render' nichts passiert,
hast Du Dich wahrscheinlich irgendwo vertippt.</p>
<h2 class=step>Bedingte Ausführung</h2>
<h3 class=goal>Ziel</h3>
<p>Als Nächstes wollen wir jeden zweiten Punkt unserer Punkt-Linien
in einer anderen Farbe malen. Es soll immer ein Punkt schwarz sein
und der nächste grau.</p>
<p>Dafür werden wir etwas über bedingte Anweisungen lernen.</p>
<h3 class=inst>Anweisungen</h3>
<p>Ein Programm, das tut was wir wollen, wenn wir es in die
<code>drawing</code>-Funktion packen, findest Du
<a href="sandbox/#drawing_if_de.js" target=_blank>hier</a>.
So sieht es aus:</p>
<pre>var count = 0;
while (count < 20) {
if (count % 2 == 0) {
color("black");
} else {
color("gray");
}
circle(count * 10, 0, 4);
count = count + 1;
}</pre>
<h3 class=ex>Erklärung</h3>
<p>Das erste neue Konzept hier ist der Operator <code>%</code>,
gesprochen 'Modulo'. Man braucht ihn nicht so häufig, aber hier
ist er nützlich. Er teil die Zahl auf der linken Seite durch die
auf der rechten Seite und gibt den Rest der Division zurück.
Mit <code>count % 2 == 0</code> kann man also prüfen, ob
<code>count</code> eine gerade Zahl ist, denn dann ist der
Rest null, wenn man sie durch zwei teilt.</p>
<p>Das eigentlich <em>wichtige</em> neue Konzept hier ist die
Anweisung <code>if</code>/<code>else</code>. Genau wie eine
Schleife, benötigt auch sie eine Bedingung.
Wenn die Bedingung wahr (<code>true</code>) ist, wird die
darauf folgende Anweisung ausgeführt. Wenn nicht, führt es
die Anweisung aus, die nach dem Wort <code>else</code> kommt.</p>
<p>Der <code>else</code>-Teil kann auch weggelassen werden, um
anzuzeigen, dass gar nichts passieren soll, wenn die Bedingung
nicht gilt.</p>
<p><strong>Übung:</strong> Erweitere das Beispiel-Programm so,
dass jeder dritte Punkt um 10 Einheiten nach oben verschoben
erscheint. Hinweis: Definiere eine Variable <code>height</code>
und setze ihren Wert innerhalb einer bedingten Anweisung.</p>
<h2 class=step>Funktionen</h2>
<h3 class=goal>Ziel</h3>
<p>Was machen wir, wenn wir mehrere fröhliche Gesichter
(englisch: Smileys) an verschiedenen Stellen auf dem Bildschirm
platzieren wollen? Wir könnten natürlich die sechs Anweisungen
wiederholen, die zum Malen einer solchen Form benötigt werden,
aber wir wollen ja den Computer für uns <strong>arbeiten</strong>
lassen.</p>
<p>Wir werden lernen, wie man neue Funktionen definiert, um
nützliche Operationen für uns auszuführen.</p>
<h3 class=inst>Anweisungen</h3>
<p>Hier ist die <code>smiley</code>-Funktion:</p>
<pre>function smiley(x, y) {
moveTo(x, y);
color("yellow");
circle(0, 0, 50);
color("black");
circle(-20, 10, 7);
circle(20, 10, 7);
lineWidth(3);
path("g -20 -10 q 20 -10 0 -50 c");
goBack();
}</pre>
<p>Du kannst sie in Deinen Code vor (oder hinter) die
<code>drawing</code>-Funktion packen und diese so umschreiben,
dass sie die neue Funktion aufruft.
<a href="sandbox/#drawing_function_de.js" target=_blank>So zum Beispiel</a>:</p>
<pre>function drawing() {
smiley(0, 0);
smiley(-100, 20);
smiley(100, 50);
}</pre>
<h3 class=ex>Erklärung</h3>
<p>Eine Funktion ist im Prinzip eine abgekürzte Schreibweise
für ein Stück Code. Man definiert sie mit dem Wort
<code>function</code>, wie oben zu sehen ist. Das erzeugt
eine Variable mit dem gewählten Namen (in diesem Fall
<code>smiley</code>), der für das Stück Code steht.
Die Wörter hinter dem Funktionsnamen—<code>(x, y)</code>—sind
die <em>Parameter</em> der Funktion.
Sie erhalten ihren Wert, wenn die Funktion aufgerufen wird.
Zum Beispiel würde <code>smiley(0, 0)</code> den Körper der
Funktion ausführen und dabei sowohl <code>x</code> als auch
<code>y</code> den Wert null geben.</p>
<p>Eine Sache, die man beachten muss, ist, dass Variablen, die
innerhalb von Funktionen definiert werden (einschließlich ihrer
Parameter), <em>lokal</em> zu dieser Funktion sind.
Also wenn Du eine zweite Funktion hast, die auch einen
<code>x</code>-Parameter hat, wie zum zum Beispiel
<code>circle</code>, dann sind die beiden <code>x</code>-Variablen
unabhängig voneinander und beeinflussen sich nicht gegenseitig.
Innerhalb von <code>smiley</code> steht <code>x</code>
immer für das <code>x</code>, das in <code>smiley</code> definiert ist,
und in einer anderen Funktion würde eben das <code>x</code>
gemeint sein, das im Kontext dieser Funktion als Variable
existiert.</p>
<p><strong>Übung:</strong> Definiere eine Funktion
<code>smileySquadron</code>, die zwei Parameter nimmt (<code>x</code>
und <code>y</code>) und fünf Smileys oder so nebeneinander malt.
Verwende dafür eine <code>while</code>-Schleife.
Und wenn das funktioniert, male so viele Smileys wie Du möchtest!</p>
<h2 class=step>Kreativ-Zone</h2>
<h3 class=goal>Ziel</h3>
<p>Erfinde Dein eigenes, unterhaltsames, grafisches Programm.</p>
<h3 class=inst>Anweisungen</h3>
<p>Hier sind ein paar Dinge, die nützlich sein könnten:</p>
<p><code>Math.random()</code> produziert Zufallszahlen zwischen 0 und 1.
<code>Math.random() * 10</code> gibt also eine unvorhersehbare Zahl
zwischen null und zehn zurück, usw.</p>
<p>Mit <code>setInterval(func, n)</code> kann man eine Funktion
alle <code>n</code> Millisekunden abfahren. In Verbindung
mit der Funktion <code>clear</code> kannst Du damit
Animationen erstellen. Ein Beispiel dafür findest Du
<a href="sandbox/#drawing_animate_de.js" target=_blank>hier</a>.</p>
<p>Die Funktionen <code>moveTo</code>, <code>rotate</code>,
<code>scale</code> und <code>goBack</code>, die in der
Spielumgebung definiert sind, können mit Funktionen kombiniert
werden, die sich selbst aufrufen, um so sehr einfach hierarchische,
fraktale Grafiken zu erstellen.
Schau Dir als Beispiel
<a href="sandbox/#drawing_tree_de.js" target=_blank>diesen Baum</a>
an.</p>
<h3 class=ex>Erklärung</h3>
<p>Am meisten lernt man, wenn man selbst etwas tut.
Tob Dich aus. Denk Dir etwas Aufwändiges aus.
Und wenn Du nicht genau weißt, wie Du Deine Pläne umsetzen kannst:
Nun, dafür sind die Coaches da.</p>
<h2>Und weiter geht's…</h2>
<p><a href="page3_de.html">→ …mit der dritten Seite</a>.</p>