Du merkst vielleicht, dass du jedes Mal,
wenn du dein Programm animieren wolltest, eine bestimmte Funktion verwendet hast -
die "draw"- Funktion.
Zur Erinnerung hier nochmal unser animiertes Auto-Programm.
Es hat die Variable x, die bei 11 anfängt.
Und in der "draw"-Funktion malt es das Auto bei dieser Variable x
und fügt dann jedes Mal drei zu dieser Variable x hinzu.
Und dadurch bekommen wir ein Auto,
das sich konstant drei Pixel schnell über den Bildschirm bewegt.
So funktioniert das.
Aber jetzt, wo du gelernt hast, eigene Funktionen zu machen,
könntest du dich fragen, "Was ist diese "draw"-Funktion?"
"Warum heißt sie immer "draw"?"
"Ist das eine vorgegebene Funktion?"
Und das sind gute Fragen.
Weißt du, in der ProcessingJS-Bibliothek
ist die "draw"-Funktion eine von wenigen vordefinierten Funktionen,
die unseren Programmen mehr Kontrolle darüber geben, was passiert.
Eine vordefinierte Funktion ist eine Funktion, die schon von der
ProcessingJS-Bibliothek definiert wurde.
Aber sie fängt üblicherweise als eine leere Definition an.
Zum Beispiel gibt es in der ProcessingJS- Bibliothek Code, der so aussieht:
'var draw = function() { }'
und dann ist sie einfach leer, komplett leer.
Wir laden die ProcessingJS-Bibliothek in jedes Programm hier auf Khanacademy,
also siehst du diesen Code nie.
Aber glaub mir, er existiert.
Den Code verstecke ich mit "comment", da ProcessingJS das schon für uns macht.
Wenn du jetzt in deinem eigenen Programm "draw" neu definierst, überschreibt
diese neue Definition die alte.
Und jetzt macht die "draw"-Funktion
spannende Dinge, zB. malt sie ein Auto.
Jetzt ist die Frage: Warum wird die "draw"-Funktion immer wiederholt?
Nun ja, in der ProcessingJS-Bibliothek ist auch Code, der einen
Browser-Timer setzt und die "draw"-Funktion wiederholt aufruft,
wieder und wieder und wieder.
Wir müssen die Funktion "draw" nennen, weil das der Name
der Funktion ist, die ProcessingJS wiederholt aufruft.
Wenn wir ihr einen neuen Namen geben, nehmen wir "drawCar",
bekommen wir einen undefinierten Fehler, also sagen wir 'var drawCar.
Jetzt kannst du sehen, dass wir, wenn wir sie zu "drawCar" umbenennen,
keine Animation mehr sehen.
Und das liegt daran, dass die Funktion
nicht wiederholt aufgerufen wird, weil sie nicht "draw" heißt.
Also müssen wir Code, den wir mehrmals aufrufen wollen,
in eine Funktion namens "draw" einfügen.
Also werde ich das wieder tun und einfach "drawCar" von hier aufrufen.
Aha! Wir haben es wieder.
Okay, also muss es "draw" heißen,
und das heißt auch, dass du deine eigenen Funktionen nicht "draw" nennen solltest,
es sei denn, du willst, dass sie besonders behandelt und wiederholt aufgerufen werden.
Und denk dran, du kannst nicht mehrere Funktionen haben, die "draw" heißen.
Nur die letzte Definition zählt.
Wenn wir hierdrin ein "rect" hätten--
Jetzt können wir sehen, dass unser Auto nicht mehr gemalt wird
und stattdessen nur das Rechteck, weil nur die letzte Definition zählt.
Also lass uns das löschen.
"draw" ist nicht die einzige vordefinierte Funktion,
die dieses besondere Verhalten hat.
Es gibt auch einen Haufen Funktionen,
die auf Mausbewegungen und Tastatur reagieren.
Zum Beispiel wollen wir ein Programm, das eine farbige Ellipse dahin malt,
wo der Nutzer seine Maus hinbewegt.
Das könnten wir mit einer solchen Funktion machen.
[tippt]
Okay, oh, das ist schön.
Jetzt wird diese Funktion immer wieder aufgerufen,
selbst wenn der Nutzer die Maus gar nicht bewegt, so wie jetzt.
Und dieses Programm funktioniert, es tut, was wir wollen
es malt diese tollen Ellipsen überall auf den Bildschirm.
Aber tatsächlich gibt es eine bessere Art, das Gleiche zu tun,
die effizienter ist.
Ändern wir die "draw"-Funktion zu "mouseMoved"
funktioniert es immer noch.
Es ist so, unsere Umgebung überprüft Programme,
um zu sehen, ob eine "mouseMoved"-Funktion darin definiert wurde, und wenn ja,
ruft sie die Funktion auf, wenn die Maus bewegt wird.
Aber sie wird nicht aufgerufen werden, wenn der Nutzer die Maus nicht bewegt.
Also, vorher haben wir den Code in der "draw"-Funktion aufgerufen,
als wir es nicht mussten, immer wieder.
Und jetzt rufen wir nur diesen Code in "mouseMoved" auf,
wenn mouseX oder mouseY sich tatsächlich ändern.
Also ist unser Programm effizienter, und das ist gut.
Allgemein, wenn du nur dann den Programm-Output ändern willst,
wenn der Nutzer die Maus bewegt, ist es besser, diesen Code
in der "mouseMoved"-Funktion zu haben.
Und es gibt noch viel mehr vordefinierte Funktionen,
von denen du Beispiele in der Dokumentation sehen kannst.
So wie "mousePressed", "mouseReleased", "keyPressed" und weitere.
Also denk dran, wenn du eine spezielle vordefinierte Funktion verwenden willst,
wie "mouseMoved" oder "draw", dann schreibe und verwende sie richtig.
Wenn du das nicht willst, stell sicher, dass deine eigenen Funktionen
neue, einzigartige Namen haben.