Special ProcessingJS functions

"Besondere ProcessingJS-Funktionen"

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.