WEBVTT

00:00:00.115 --> 00:00:03.180
Du merkst vielleicht, dass du jedes Mal,

00:00:03.180 --> 00:00:07.202
wenn du dein Programm animieren wolltest,
eine bestimmte Funktion verwendet hast -

00:00:07.202 --> 00:00:09.191
die "draw"- Funktion.

00:00:09.191 --> 00:00:13.436
Zur Erinnerung hier nochmal
unser animiertes Auto-Programm.

00:00:13.436 --> 00:00:16.992
Es hat die Variable x, die bei 11 anfängt.

00:00:16.992 --> 00:00:22.648
Und in der "draw"-Funktion malt es
das Auto bei dieser Variable x

00:00:22.648 --> 00:00:26.638
und fügt dann jedes Mal drei zu
dieser Variable x hinzu.

00:00:26.638 --> 00:00:28.501
Und dadurch bekommen wir ein Auto,

00:00:28.501 --> 00:00:32.447
das sich konstant drei Pixel schnell
über den Bildschirm bewegt.

00:00:32.447 --> 00:00:34.723
So funktioniert das.

00:00:34.723 --> 00:00:37.683
Aber jetzt, wo du gelernt hast,
eigene Funktionen zu machen,

00:00:37.683 --> 00:00:41.583
könntest du dich fragen,
"Was ist diese "draw"-Funktion?"

00:00:41.583 --> 00:00:44.109
"Warum heißt sie immer "draw"?"

00:00:44.109 --> 00:00:45.904
"Ist das eine vorgegebene Funktion?"

00:00:45.904 --> 00:00:48.894
Und das sind gute Fragen.

00:00:48.894 --> 00:00:51.985
Weißt du, in der ProcessingJS-Bibliothek

00:00:51.985 --> 00:00:56.132
ist die "draw"-Funktion eine von wenigen
vordefinierten Funktionen,

00:00:56.132 --> 00:01:01.009
die unseren Programmen mehr Kontrolle
darüber geben, was passiert.

00:01:01.009 --> 00:01:04.831
Eine vordefinierte Funktion ist eine
Funktion, die schon von der

00:01:04.831 --> 00:01:07.209
ProcessingJS-Bibliothek definiert wurde.

00:01:07.209 --> 00:01:11.149
Aber sie fängt üblicherweise als
eine leere Definition an.

00:01:11.149 --> 00:01:17.045
Zum Beispiel gibt es in der ProcessingJS-
Bibliothek Code, der so aussieht:

00:01:17.045 --> 00:01:19.434
'var draw = function() { }'

00:01:19.434 --> 00:01:23.266
und dann ist sie einfach leer,
komplett leer.

00:01:23.266 --> 00:01:28.620
Wir laden die ProcessingJS-Bibliothek
in jedes Programm hier auf Khanacademy,

00:01:28.620 --> 00:01:30.904
also siehst du diesen Code nie.

00:01:30.904 --> 00:01:33.647
Aber glaub mir, er existiert.

00:01:33.647 --> 00:01:41.049
Den Code verstecke ich mit "comment",
da ProcessingJS das schon für uns macht.

00:01:41.049 --> 00:01:45.308
Wenn du jetzt in deinem eigenen Programm
"draw" neu definierst, überschreibt

00:01:45.308 --> 00:01:46.809
diese neue Definition die alte.

00:01:46.809 --> 00:01:49.809
Und jetzt macht die "draw"-Funktion

00:01:49.809 --> 00:01:51.632
spannende Dinge,
zB. malt sie ein Auto.

00:01:51.632 --> 00:01:55.497
Jetzt ist die Frage: Warum wird die
"draw"-Funktion immer wiederholt?

00:01:55.497 --> 00:02:01.375
Nun ja, in der ProcessingJS-Bibliothek
ist auch Code, der einen

00:02:01.375 --> 00:02:05.964
Browser-Timer setzt und die
"draw"-Funktion wiederholt aufruft,

00:02:05.964 --> 00:02:11.111
wieder und wieder und wieder.

00:02:11.111 --> 00:02:13.998
Wir müssen die Funktion "draw" nennen,
weil das der Name

00:02:13.998 --> 00:02:19.239
der Funktion ist, die ProcessingJS
wiederholt aufruft.

00:02:19.239 --> 00:02:22.073
Wenn wir ihr einen neuen Namen geben,
nehmen wir "drawCar",

00:02:22.073 --> 00:02:27.543
bekommen wir einen undefinierten Fehler,
also sagen wir 'var drawCar.

00:02:27.543 --> 00:02:33.730
Jetzt kannst du sehen, dass wir, wenn wir
sie zu "drawCar" umbenennen,

00:02:33.730 --> 00:02:37.087
keine Animation mehr sehen.

00:02:37.087 --> 00:02:39.651
Und das liegt daran, dass die Funktion

00:02:39.651 --> 00:02:44.692
nicht wiederholt aufgerufen wird,
weil sie nicht "draw" heißt.

00:02:44.692 --> 00:02:47.188
Also müssen wir Code, den wir
mehrmals aufrufen wollen,

00:02:47.188 --> 00:02:50.796
in eine Funktion namens "draw" einfügen.

00:02:50.796 --> 00:02:55.912
Also werde ich das wieder tun und einfach
"drawCar" von hier aufrufen.

00:02:55.912 --> 00:03:00.594
Aha! Wir haben es wieder.

00:03:00.594 --> 00:03:03.237
Okay, also muss es "draw" heißen,

00:03:03.237 --> 00:03:07.206
und das heißt auch, dass du deine eigenen
Funktionen nicht "draw" nennen solltest,

00:03:07.206 --> 00:03:12.970
es sei denn, du willst, dass sie besonders
behandelt und wiederholt aufgerufen werden.

00:03:12.970 --> 00:03:18.228
Und denk dran, du kannst nicht mehrere
Funktionen haben, die "draw" heißen.

00:03:18.228 --> 00:03:23.528
Nur die letzte Definition zählt.

00:03:23.528 --> 00:03:27.889
Wenn wir hierdrin ein "rect" hätten--

00:03:27.889 --> 00:03:30.813
Jetzt können wir sehen, dass unser Auto
nicht mehr gemalt wird

00:03:30.813 --> 00:03:35.143
und stattdessen nur das Rechteck,
weil nur die letzte Definition zählt.

00:03:35.143 --> 00:03:40.495
Also lass uns das löschen.

00:03:40.495 --> 00:03:43.166
"draw" ist nicht die einzige
vordefinierte Funktion,

00:03:43.166 --> 00:03:48.289
die dieses besondere Verhalten hat.

00:03:48.289 --> 00:03:50.499
Es gibt auch einen Haufen Funktionen,

00:03:50.499 --> 00:03:52.682
die auf Mausbewegungen und
Tastatur reagieren.

00:03:52.682 --> 00:03:56.692
Zum Beispiel wollen wir ein Programm, das
eine farbige Ellipse dahin malt,

00:03:56.692 --> 00:04:01.624
wo der Nutzer seine Maus hinbewegt.

00:04:01.624 --> 00:04:04.716
Das könnten wir mit einer solchen
Funktion machen.

00:04:04.716 --> 00:04:09.042
[tippt]

00:04:09.042 --> 00:04:15.666
Okay, oh, das ist schön.

00:04:19.998 --> 00:04:22.545
Jetzt wird diese Funktion immer wieder
aufgerufen,

00:04:22.545 --> 00:04:27.224
selbst wenn der Nutzer die Maus
gar nicht bewegt, so wie jetzt.

00:04:27.224 --> 00:04:31.176
Und dieses Programm funktioniert,
es tut, was wir wollen

00:04:31.176 --> 00:04:34.703
es malt diese tollen Ellipsen überall
auf den Bildschirm.

00:04:34.703 --> 00:04:37.902
Aber tatsächlich gibt es eine bessere Art,
das Gleiche zu tun,

00:04:37.902 --> 00:04:42.114
die effizienter ist.

00:04:42.114 --> 00:04:44.288
Ändern wir die "draw"-Funktion
zu "mouseMoved"

00:04:44.288 --> 00:04:51.892
funktioniert es immer noch.

00:04:51.892 --> 00:04:54.577
Es ist so, unsere Umgebung überprüft
Programme,

00:04:54.577 --> 00:04:58.361
um zu sehen, ob eine "mouseMoved"-Funktion
darin definiert wurde, und wenn ja,

00:04:58.361 --> 00:05:00.754
ruft sie die Funktion auf, wenn die Maus
bewegt wird.

00:05:00.754 --> 00:05:05.457
Aber sie wird nicht aufgerufen werden,
wenn der Nutzer die Maus nicht bewegt.

00:05:05.457 --> 00:05:10.029
Also, vorher haben wir den Code in der
"draw"-Funktion aufgerufen,

00:05:10.029 --> 00:05:13.423
als wir es nicht mussten, immer wieder.

00:05:13.423 --> 00:05:15.908
Und jetzt rufen wir nur diesen Code
in "mouseMoved" auf,

00:05:15.908 --> 00:05:20.265
wenn mouseX oder mouseY
sich tatsächlich ändern.

00:05:20.265 --> 00:05:23.292
Also ist unser Programm effizienter,
und das ist gut.

00:05:23.292 --> 00:05:27.313
Allgemein, wenn du nur dann den
Programm-Output ändern willst,

00:05:27.313 --> 00:05:30.728
wenn der Nutzer die Maus bewegt,
ist es besser, diesen Code

00:05:30.728 --> 00:05:34.525
in der "mouseMoved"-Funktion zu haben.

00:05:34.525 --> 00:05:37.212
Und es gibt noch viel mehr
vordefinierte Funktionen,

00:05:37.212 --> 00:05:40.987
von denen du Beispiele in der
Dokumentation sehen kannst.

00:05:40.987 --> 00:05:44.655
So wie "mousePressed", "mouseReleased",
"keyPressed" und weitere.

00:05:44.655 --> 00:05:48.872
Also denk dran, wenn du eine spezielle
vordefinierte Funktion verwenden willst,

00:05:48.872 --> 00:05:53.993
wie "mouseMoved" oder "draw",
dann schreibe und verwende sie richtig.

00:05:53.993 --> 00:05:59.244
Wenn du das nicht willst, stell sicher,
dass deine eigenen Funktionen

00:05:59.244 --> 00:06:03.410
neue, einzigartige Namen haben.