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

0:00:03.180,0:00:07.202
wenn du dein Programm animieren wolltest,[br]eine bestimmte Funktion verwendet hast -

0:00:07.202,0:00:09.191
die "draw"- Funktion.

0:00:09.191,0:00:13.436
Zur Erinnerung hier nochmal[br]unser animiertes Auto-Programm.

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

0:00:16.992,0:00:22.648
Und in der "draw"-Funktion malt es[br]das Auto bei dieser Variable x

0:00:22.648,0:00:26.638
und fügt dann jedes Mal drei zu[br]dieser Variable x hinzu.

0:00:26.638,0:00:28.501
Und dadurch bekommen wir ein Auto,

0:00:28.501,0:00:32.447
das sich konstant drei Pixel schnell[br]über den Bildschirm bewegt.

0:00:32.447,0:00:34.723
So funktioniert das.

0:00:34.723,0:00:37.683
Aber jetzt, wo du gelernt hast,[br]eigene Funktionen zu machen,

0:00:37.683,0:00:41.583
könntest du dich fragen,[br]"Was ist diese "draw"-Funktion?"

0:00:41.583,0:00:44.109
"Warum heißt sie immer "draw"?"

0:00:44.109,0:00:45.904
"Ist das eine vorgegebene Funktion?"

0:00:45.904,0:00:48.894
Und das sind gute Fragen.

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

0:00:51.985,0:00:56.132
ist die "draw"-Funktion eine von wenigen[br]vordefinierten Funktionen,

0:00:56.132,0:01:01.009
die unseren Programmen mehr Kontrolle[br]darüber geben, was passiert.

0:01:01.009,0:01:04.831
Eine vordefinierte Funktion ist eine[br]Funktion, die schon von der

0:01:04.831,0:01:07.209
ProcessingJS-Bibliothek definiert wurde.

0:01:07.209,0:01:11.149
Aber sie fängt üblicherweise als[br]eine leere Definition an.

0:01:11.149,0:01:17.045
Zum Beispiel gibt es in der ProcessingJS-[br]Bibliothek Code, der so aussieht:

0:01:17.045,0:01:19.434
'var draw = function() { }'

0:01:19.434,0:01:23.266
und dann ist sie einfach leer,[br]komplett leer.

0:01:23.266,0:01:28.620
Wir laden die ProcessingJS-Bibliothek[br]in jedes Programm hier auf Khanacademy,

0:01:28.620,0:01:30.904
also siehst du diesen Code nie.

0:01:30.904,0:01:33.647
Aber glaub mir, er existiert.

0:01:33.647,0:01:41.049
Den Code verstecke ich mit "comment",[br]da ProcessingJS das schon für uns macht.

0:01:41.049,0:01:45.308
Wenn du jetzt in deinem eigenen Programm[br]"draw" neu definierst, überschreibt

0:01:45.308,0:01:46.809
diese neue Definition die alte.

0:01:46.809,0:01:49.809
Und jetzt macht die "draw"-Funktion

0:01:49.809,0:01:51.632
spannende Dinge,[br]zB. malt sie ein Auto.

0:01:51.632,0:01:55.497
Jetzt ist die Frage: Warum wird die[br]"draw"-Funktion immer wiederholt?

0:01:55.497,0:02:01.375
Nun ja, in der ProcessingJS-Bibliothek[br]ist auch Code, der einen

0:02:01.375,0:02:05.964
Browser-Timer setzt und die[br]"draw"-Funktion wiederholt aufruft,

0:02:05.964,0:02:11.111
wieder und wieder und wieder.

0:02:11.111,0:02:13.998
Wir müssen die Funktion "draw" nennen,[br]weil das der Name

0:02:13.998,0:02:19.239
der Funktion ist, die ProcessingJS[br]wiederholt aufruft.

0:02:19.239,0:02:22.073
Wenn wir ihr einen neuen Namen geben,[br]nehmen wir "drawCar",

0:02:22.073,0:02:27.543
bekommen wir einen undefinierten Fehler,[br]also sagen wir 'var drawCar.

0:02:27.543,0:02:33.730
Jetzt kannst du sehen, dass wir, wenn wir[br]sie zu "drawCar" umbenennen,

0:02:33.730,0:02:37.087
keine Animation mehr sehen.

0:02:37.087,0:02:39.651
Und das liegt daran, dass die Funktion

0:02:39.651,0:02:44.692
nicht wiederholt aufgerufen wird,[br]weil sie nicht "draw" heißt.

0:02:44.692,0:02:47.188
Also müssen wir Code, den wir[br]mehrmals aufrufen wollen,

0:02:47.188,0:02:50.796
in eine Funktion namens "draw" einfügen.

0:02:50.796,0:02:55.912
Also werde ich das wieder tun und einfach[br]"drawCar" von hier aufrufen.

0:02:55.912,0:03:00.594
Aha! Wir haben es wieder.

0:03:00.594,0:03:03.237
Okay, also muss es "draw" heißen,

0:03:03.237,0:03:07.206
und das heißt auch, dass du deine eigenen[br]Funktionen nicht "draw" nennen solltest,

0:03:07.206,0:03:12.970
es sei denn, du willst, dass sie besonders[br]behandelt und wiederholt aufgerufen werden.

0:03:12.970,0:03:18.228
Und denk dran, du kannst nicht mehrere[br]Funktionen haben, die "draw" heißen.

0:03:18.228,0:03:23.528
Nur die letzte Definition zählt.

0:03:23.528,0:03:27.889
Wenn wir hierdrin ein "rect" hätten--

0:03:27.889,0:03:30.813
Jetzt können wir sehen, dass unser Auto[br]nicht mehr gemalt wird

0:03:30.813,0:03:35.143
und stattdessen nur das Rechteck,[br]weil nur die letzte Definition zählt.

0:03:35.143,0:03:40.495
Also lass uns das löschen.

0:03:40.495,0:03:43.166
"draw" ist nicht die einzige[br]vordefinierte Funktion,

0:03:43.166,0:03:48.289
die dieses besondere Verhalten hat.

0:03:48.289,0:03:50.499
Es gibt auch einen Haufen Funktionen,

0:03:50.499,0:03:52.682
die auf Mausbewegungen und[br]Tastatur reagieren.

0:03:52.682,0:03:56.692
Zum Beispiel wollen wir ein Programm, das[br]eine farbige Ellipse dahin malt,

0:03:56.692,0:04:01.624
wo der Nutzer seine Maus hinbewegt.

0:04:01.624,0:04:04.716
Das könnten wir mit einer solchen[br]Funktion machen.

0:04:04.716,0:04:09.042
[tippt]

0:04:09.042,0:04:15.666
Okay, oh, das ist schön.

0:04:19.998,0:04:22.545
Jetzt wird diese Funktion immer wieder[br]aufgerufen,

0:04:22.545,0:04:27.224
selbst wenn der Nutzer die Maus[br]gar nicht bewegt, so wie jetzt.

0:04:27.224,0:04:31.176
Und dieses Programm funktioniert,[br]es tut, was wir wollen

0:04:31.176,0:04:34.703
es malt diese tollen Ellipsen überall[br]auf den Bildschirm.

0:04:34.703,0:04:37.902
Aber tatsächlich gibt es eine bessere Art,[br]das Gleiche zu tun,

0:04:37.902,0:04:42.114
die effizienter ist.

0:04:42.114,0:04:44.288
Ändern wir die "draw"-Funktion[br]zu "mouseMoved"

0:04:44.288,0:04:51.892
funktioniert es immer noch.

0:04:51.892,0:04:54.577
Es ist so, unsere Umgebung überprüft[br]Programme,

0:04:54.577,0:04:58.361
um zu sehen, ob eine "mouseMoved"-Funktion[br]darin definiert wurde, und wenn ja,

0:04:58.361,0:05:00.754
ruft sie die Funktion auf, wenn die Maus[br]bewegt wird.

0:05:00.754,0:05:05.457
Aber sie wird nicht aufgerufen werden,[br]wenn der Nutzer die Maus nicht bewegt.

0:05:05.457,0:05:10.029
Also, vorher haben wir den Code in der[br]"draw"-Funktion aufgerufen,

0:05:10.029,0:05:13.423
als wir es nicht mussten, immer wieder.

0:05:13.423,0:05:15.908
Und jetzt rufen wir nur diesen Code[br]in "mouseMoved" auf,

0:05:15.908,0:05:20.265
wenn mouseX oder mouseY[br]sich tatsächlich ändern.

0:05:20.265,0:05:23.292
Also ist unser Programm effizienter,[br]und das ist gut.

0:05:23.292,0:05:27.313
Allgemein, wenn du nur dann den[br]Programm-Output ändern willst,

0:05:27.313,0:05:30.728
wenn der Nutzer die Maus bewegt,[br]ist es besser, diesen Code

0:05:30.728,0:05:34.525
in der "mouseMoved"-Funktion zu haben.

0:05:34.525,0:05:37.212
Und es gibt noch viel mehr[br]vordefinierte Funktionen,

0:05:37.212,0:05:40.987
von denen du Beispiele in der[br]Dokumentation sehen kannst.

0:05:40.987,0:05:44.655
So wie "mousePressed", "mouseReleased",[br]"keyPressed" und weitere.

0:05:44.655,0:05:48.872
Also denk dran, wenn du eine spezielle[br]vordefinierte Funktion verwenden willst,

0:05:48.872,0:05:53.993
wie "mouseMoved" oder "draw",[br]dann schreibe und verwende sie richtig.

0:05:53.993,0:05:59.244
Wenn du das nicht willst, stell sicher,[br]dass deine eigenen Funktionen

0:05:59.244,0:06:03.410
neue, einzigartige Namen haben.