1
00:00:00,115 --> 00:00:03,180
Du merkst vielleicht, dass du jedes Mal,

2
00:00:03,180 --> 00:00:07,202
wenn du dein Programm animieren wolltest,
eine bestimmte Funktion verwendet hast -

3
00:00:07,202 --> 00:00:09,191
die "draw"- Funktion.

4
00:00:09,191 --> 00:00:13,436
Zur Erinnerung hier nochmal
unser animiertes Auto-Programm.

5
00:00:13,436 --> 00:00:16,992
Es hat die Variable x, die bei 11 anfängt.

6
00:00:16,992 --> 00:00:22,648
Und in der "draw"-Funktion malt es
das Auto bei dieser Variable x

7
00:00:22,648 --> 00:00:26,638
und fügt dann jedes Mal drei zu
dieser Variable x hinzu.

8
00:00:26,638 --> 00:00:28,501
Und dadurch bekommen wir ein Auto,

9
00:00:28,501 --> 00:00:32,447
das sich konstant drei Pixel schnell
über den Bildschirm bewegt.

10
00:00:32,447 --> 00:00:34,723
So funktioniert das.

11
00:00:34,723 --> 00:00:37,683
Aber jetzt, wo du gelernt hast,
eigene Funktionen zu machen,

12
00:00:37,683 --> 00:00:41,583
könntest du dich fragen,
"Was ist diese "draw"-Funktion?"

13
00:00:41,583 --> 00:00:44,109
"Warum heißt sie immer "draw"?"

14
00:00:44,109 --> 00:00:45,904
"Ist das eine vorgegebene Funktion?"

15
00:00:45,904 --> 00:00:48,894
Und das sind gute Fragen.

16
00:00:48,894 --> 00:00:51,985
Weißt du, in der ProcessingJS-Bibliothek

17
00:00:51,985 --> 00:00:56,132
ist die "draw"-Funktion eine von wenigen
vordefinierten Funktionen,

18
00:00:56,132 --> 00:01:01,009
die unseren Programmen mehr Kontrolle
darüber geben, was passiert.

19
00:01:01,009 --> 00:01:04,831
Eine vordefinierte Funktion ist eine
Funktion, die schon von der

20
00:01:04,831 --> 00:01:07,209
ProcessingJS-Bibliothek definiert wurde.

21
00:01:07,209 --> 00:01:11,149
Aber sie fängt üblicherweise als
eine leere Definition an.

22
00:01:11,149 --> 00:01:17,045
Zum Beispiel gibt es in der ProcessingJS-
Bibliothek Code, der so aussieht:

23
00:01:17,045 --> 00:01:19,434
'var draw = function() { }'

24
00:01:19,434 --> 00:01:23,266
und dann ist sie einfach leer,
komplett leer.

25
00:01:23,266 --> 00:01:28,620
Wir laden die ProcessingJS-Bibliothek
in jedes Programm hier auf Khanacademy,

26
00:01:28,620 --> 00:01:30,904
also siehst du diesen Code nie.

27
00:01:30,904 --> 00:01:33,647
Aber glaub mir, er existiert.

28
00:01:33,647 --> 00:01:41,049
Den Code verstecke ich mit "comment",
da ProcessingJS das schon für uns macht.

29
00:01:41,049 --> 00:01:45,308
Wenn du jetzt in deinem eigenen Programm
"draw" neu definierst, überschreibt

30
00:01:45,308 --> 00:01:46,809
diese neue Definition die alte.

31
00:01:46,809 --> 00:01:49,809
Und jetzt macht die "draw"-Funktion

32
00:01:49,809 --> 00:01:51,632
spannende Dinge,
zB. malt sie ein Auto.

33
00:01:51,632 --> 00:01:55,497
Jetzt ist die Frage: Warum wird die
"draw"-Funktion immer wiederholt?

34
00:01:55,497 --> 00:02:01,375
Nun ja, in der ProcessingJS-Bibliothek
ist auch Code, der einen

35
00:02:01,375 --> 00:02:05,964
Browser-Timer setzt und die
"draw"-Funktion wiederholt aufruft,

36
00:02:05,964 --> 00:02:11,111
wieder und wieder und wieder.

37
00:02:11,111 --> 00:02:13,998
Wir müssen die Funktion "draw" nennen,
weil das der Name

38
00:02:13,998 --> 00:02:19,239
der Funktion ist, die ProcessingJS
wiederholt aufruft.

39
00:02:19,239 --> 00:02:22,073
Wenn wir ihr einen neuen Namen geben,
nehmen wir "drawCar",

40
00:02:22,073 --> 00:02:27,543
bekommen wir einen undefinierten Fehler,
also sagen wir 'var drawCar.

41
00:02:27,543 --> 00:02:33,730
Jetzt kannst du sehen, dass wir, wenn wir
sie zu "drawCar" umbenennen,

42
00:02:33,730 --> 00:02:37,087
keine Animation mehr sehen.

43
00:02:37,087 --> 00:02:39,651
Und das liegt daran, dass die Funktion

44
00:02:39,651 --> 00:02:44,692
nicht wiederholt aufgerufen wird,
weil sie nicht "draw" heißt.

45
00:02:44,692 --> 00:02:47,188
Also müssen wir Code, den wir
mehrmals aufrufen wollen,

46
00:02:47,188 --> 00:02:50,796
in eine Funktion namens "draw" einfügen.

47
00:02:50,796 --> 00:02:55,912
Also werde ich das wieder tun und einfach
"drawCar" von hier aufrufen.

48
00:02:55,912 --> 00:03:00,594
Aha! Wir haben es wieder.

49
00:03:00,594 --> 00:03:03,237
Okay, also muss es "draw" heißen,

50
00:03:03,237 --> 00:03:07,206
und das heißt auch, dass du deine eigenen
Funktionen nicht "draw" nennen solltest,

51
00:03:07,206 --> 00:03:12,970
es sei denn, du willst, dass sie besonders
behandelt und wiederholt aufgerufen werden.

52
00:03:12,970 --> 00:03:18,228
Und denk dran, du kannst nicht mehrere
Funktionen haben, die "draw" heißen.

53
00:03:18,228 --> 00:03:23,528
Nur die letzte Definition zählt.

54
00:03:23,528 --> 00:03:27,889
Wenn wir hierdrin ein "rect" hätten--

55
00:03:27,889 --> 00:03:30,813
Jetzt können wir sehen, dass unser Auto
nicht mehr gemalt wird

56
00:03:30,813 --> 00:03:35,143
und stattdessen nur das Rechteck,
weil nur die letzte Definition zählt.

57
00:03:35,143 --> 00:03:40,495
Also lass uns das löschen.

58
00:03:40,495 --> 00:03:43,166
"draw" ist nicht die einzige
vordefinierte Funktion,

59
00:03:43,166 --> 00:03:48,289
die dieses besondere Verhalten hat.

60
00:03:48,289 --> 00:03:50,499
Es gibt auch einen Haufen Funktionen,

61
00:03:50,499 --> 00:03:52,682
die auf Mausbewegungen und
Tastatur reagieren.

62
00:03:52,682 --> 00:03:56,692
Zum Beispiel wollen wir ein Programm, das
eine farbige Ellipse dahin malt,

63
00:03:56,692 --> 00:04:01,624
wo der Nutzer seine Maus hinbewegt.

64
00:04:01,624 --> 00:04:04,716
Das könnten wir mit einer solchen
Funktion machen.

65
00:04:04,716 --> 00:04:09,042
[tippt]

66
00:04:09,042 --> 00:04:15,666
Okay, oh, das ist schön.

67
00:04:19,998 --> 00:04:22,545
Jetzt wird diese Funktion immer wieder
aufgerufen,

68
00:04:22,545 --> 00:04:27,224
selbst wenn der Nutzer die Maus
gar nicht bewegt, so wie jetzt.

69
00:04:27,224 --> 00:04:31,176
Und dieses Programm funktioniert,
es tut, was wir wollen

70
00:04:31,176 --> 00:04:34,703
es malt diese tollen Ellipsen überall
auf den Bildschirm.

71
00:04:34,703 --> 00:04:37,902
Aber tatsächlich gibt es eine bessere Art,
das Gleiche zu tun,

72
00:04:37,902 --> 00:04:42,114
die effizienter ist.

73
00:04:42,114 --> 00:04:44,288
Ändern wir die "draw"-Funktion
zu "mouseMoved"

74
00:04:44,288 --> 00:04:51,892
funktioniert es immer noch.

75
00:04:51,892 --> 00:04:54,577
Es ist so, unsere Umgebung überprüft
Programme,

76
00:04:54,577 --> 00:04:58,361
um zu sehen, ob eine "mouseMoved"-Funktion
darin definiert wurde, und wenn ja,

77
00:04:58,361 --> 00:05:00,754
ruft sie die Funktion auf, wenn die Maus
bewegt wird.

78
00:05:00,754 --> 00:05:05,457
Aber sie wird nicht aufgerufen werden,
wenn der Nutzer die Maus nicht bewegt.

79
00:05:05,457 --> 00:05:10,029
Also, vorher haben wir den Code in der
"draw"-Funktion aufgerufen,

80
00:05:10,029 --> 00:05:13,423
als wir es nicht mussten, immer wieder.

81
00:05:13,423 --> 00:05:15,908
Und jetzt rufen wir nur diesen Code
in "mouseMoved" auf,

82
00:05:15,908 --> 00:05:20,265
wenn mouseX oder mouseY
sich tatsächlich ändern.

83
00:05:20,265 --> 00:05:23,292
Also ist unser Programm effizienter,
und das ist gut.

84
00:05:23,292 --> 00:05:27,313
Allgemein, wenn du nur dann den
Programm-Output ändern willst,

85
00:05:27,313 --> 00:05:30,728
wenn der Nutzer die Maus bewegt,
ist es besser, diesen Code

86
00:05:30,728 --> 00:05:34,525
in der "mouseMoved"-Funktion zu haben.

87
00:05:34,525 --> 00:05:37,212
Und es gibt noch viel mehr
vordefinierte Funktionen,

88
00:05:37,212 --> 00:05:40,987
von denen du Beispiele in der
Dokumentation sehen kannst.

89
00:05:40,987 --> 00:05:44,655
So wie "mousePressed", "mouseReleased",
"keyPressed" und weitere.

90
00:05:44,655 --> 00:05:48,872
Also denk dran, wenn du eine spezielle
vordefinierte Funktion verwenden willst,

91
00:05:48,872 --> 00:05:53,993
wie "mouseMoved" oder "draw",
dann schreibe und verwende sie richtig.

92
00:05:53,993 --> 00:05:59,244
Wenn du das nicht willst, stell sicher,
dass deine eigenen Funktionen

93
00:05:59,244 --> 00:06:03,410
neue, einzigartige Namen haben.