[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.12,0:00:03.18,Default,,0000,0000,0000,,Du merkst vielleicht, dass du jedes Mal,
Dialogue: 0,0:00:03.18,0:00:07.20,Default,,0000,0000,0000,,wenn du dein Programm animieren wolltest,\Neine bestimmte Funktion verwendet hast -
Dialogue: 0,0:00:07.20,0:00:09.19,Default,,0000,0000,0000,,die "draw"- Funktion.
Dialogue: 0,0:00:09.19,0:00:13.44,Default,,0000,0000,0000,,Zur Erinnerung hier nochmal\Nunser animiertes Auto-Programm.
Dialogue: 0,0:00:13.44,0:00:16.99,Default,,0000,0000,0000,,Es hat die Variable x, die bei 11 anfängt.
Dialogue: 0,0:00:16.99,0:00:22.65,Default,,0000,0000,0000,,Und in der "draw"-Funktion malt es\Ndas Auto bei dieser Variable x
Dialogue: 0,0:00:22.65,0:00:26.64,Default,,0000,0000,0000,,und fügt dann jedes Mal drei zu\Ndieser Variable x hinzu.
Dialogue: 0,0:00:26.64,0:00:28.50,Default,,0000,0000,0000,,Und dadurch bekommen wir ein Auto,
Dialogue: 0,0:00:28.50,0:00:32.45,Default,,0000,0000,0000,,das sich konstant drei Pixel schnell\Nüber den Bildschirm bewegt.
Dialogue: 0,0:00:32.45,0:00:34.72,Default,,0000,0000,0000,,So funktioniert das.
Dialogue: 0,0:00:34.72,0:00:37.68,Default,,0000,0000,0000,,Aber jetzt, wo du gelernt hast,\Neigene Funktionen zu machen,
Dialogue: 0,0:00:37.68,0:00:41.58,Default,,0000,0000,0000,,könntest du dich fragen,\N"Was ist diese "draw"-Funktion?"
Dialogue: 0,0:00:41.58,0:00:44.11,Default,,0000,0000,0000,,"Warum heißt sie immer "draw"?"
Dialogue: 0,0:00:44.11,0:00:45.90,Default,,0000,0000,0000,,"Ist das eine vorgegebene Funktion?"
Dialogue: 0,0:00:45.90,0:00:48.89,Default,,0000,0000,0000,,Und das sind gute Fragen.
Dialogue: 0,0:00:48.89,0:00:51.98,Default,,0000,0000,0000,,Weißt du, in der ProcessingJS-Bibliothek
Dialogue: 0,0:00:51.98,0:00:56.13,Default,,0000,0000,0000,,ist die "draw"-Funktion eine von wenigen\Nvordefinierten Funktionen,
Dialogue: 0,0:00:56.13,0:01:01.01,Default,,0000,0000,0000,,die unseren Programmen mehr Kontrolle\Ndarüber geben, was passiert.
Dialogue: 0,0:01:01.01,0:01:04.83,Default,,0000,0000,0000,,Eine vordefinierte Funktion ist eine\NFunktion, die schon von der
Dialogue: 0,0:01:04.83,0:01:07.21,Default,,0000,0000,0000,,ProcessingJS-Bibliothek definiert wurde.
Dialogue: 0,0:01:07.21,0:01:11.15,Default,,0000,0000,0000,,Aber sie fängt üblicherweise als\Neine leere Definition an.
Dialogue: 0,0:01:11.15,0:01:17.04,Default,,0000,0000,0000,,Zum Beispiel gibt es in der ProcessingJS-\NBibliothek Code, der so aussieht:
Dialogue: 0,0:01:17.04,0:01:19.43,Default,,0000,0000,0000,,'var draw = function() { }'
Dialogue: 0,0:01:19.43,0:01:23.27,Default,,0000,0000,0000,,und dann ist sie einfach leer,\Nkomplett leer.
Dialogue: 0,0:01:23.27,0:01:28.62,Default,,0000,0000,0000,,Wir laden die ProcessingJS-Bibliothek\Nin jedes Programm hier auf Khanacademy,
Dialogue: 0,0:01:28.62,0:01:30.90,Default,,0000,0000,0000,,also siehst du diesen Code nie.
Dialogue: 0,0:01:30.90,0:01:33.65,Default,,0000,0000,0000,,Aber glaub mir, er existiert.
Dialogue: 0,0:01:33.65,0:01:41.05,Default,,0000,0000,0000,,Den Code verstecke ich mit "comment",\Nda ProcessingJS das schon für uns macht.
Dialogue: 0,0:01:41.05,0:01:45.31,Default,,0000,0000,0000,,Wenn du jetzt in deinem eigenen Programm\N"draw" neu definierst, überschreibt
Dialogue: 0,0:01:45.31,0:01:46.81,Default,,0000,0000,0000,,diese neue Definition die alte.
Dialogue: 0,0:01:46.81,0:01:49.81,Default,,0000,0000,0000,,Und jetzt macht die "draw"-Funktion
Dialogue: 0,0:01:49.81,0:01:51.63,Default,,0000,0000,0000,,spannende Dinge,\NzB. malt sie ein Auto.
Dialogue: 0,0:01:51.63,0:01:55.50,Default,,0000,0000,0000,,Jetzt ist die Frage: Warum wird die\N"draw"-Funktion immer wiederholt?
Dialogue: 0,0:01:55.50,0:02:01.38,Default,,0000,0000,0000,,Nun ja, in der ProcessingJS-Bibliothek\Nist auch Code, der einen
Dialogue: 0,0:02:01.38,0:02:05.96,Default,,0000,0000,0000,,Browser-Timer setzt und die\N"draw"-Funktion wiederholt aufruft,
Dialogue: 0,0:02:05.96,0:02:11.11,Default,,0000,0000,0000,,wieder und wieder und wieder.
Dialogue: 0,0:02:11.11,0:02:13.100,Default,,0000,0000,0000,,Wir müssen die Funktion "draw" nennen,\Nweil das der Name
Dialogue: 0,0:02:13.100,0:02:19.24,Default,,0000,0000,0000,,der Funktion ist, die ProcessingJS\Nwiederholt aufruft.
Dialogue: 0,0:02:19.24,0:02:22.07,Default,,0000,0000,0000,,Wenn wir ihr einen neuen Namen geben,\Nnehmen wir "drawCar",
Dialogue: 0,0:02:22.07,0:02:27.54,Default,,0000,0000,0000,,bekommen wir einen undefinierten Fehler,\Nalso sagen wir 'var drawCar.
Dialogue: 0,0:02:27.54,0:02:33.73,Default,,0000,0000,0000,,Jetzt kannst du sehen, dass wir, wenn wir\Nsie zu "drawCar" umbenennen,
Dialogue: 0,0:02:33.73,0:02:37.09,Default,,0000,0000,0000,,keine Animation mehr sehen.
Dialogue: 0,0:02:37.09,0:02:39.65,Default,,0000,0000,0000,,Und das liegt daran, dass die Funktion
Dialogue: 0,0:02:39.65,0:02:44.69,Default,,0000,0000,0000,,nicht wiederholt aufgerufen wird,\Nweil sie nicht "draw" heißt.
Dialogue: 0,0:02:44.69,0:02:47.19,Default,,0000,0000,0000,,Also müssen wir Code, den wir\Nmehrmals aufrufen wollen,
Dialogue: 0,0:02:47.19,0:02:50.80,Default,,0000,0000,0000,,in eine Funktion namens "draw" einfügen.
Dialogue: 0,0:02:50.80,0:02:55.91,Default,,0000,0000,0000,,Also werde ich das wieder tun und einfach\N"drawCar" von hier aufrufen.
Dialogue: 0,0:02:55.91,0:03:00.59,Default,,0000,0000,0000,,Aha! Wir haben es wieder.
Dialogue: 0,0:03:00.59,0:03:03.24,Default,,0000,0000,0000,,Okay, also muss es "draw" heißen,
Dialogue: 0,0:03:03.24,0:03:07.21,Default,,0000,0000,0000,,und das heißt auch, dass du deine eigenen\NFunktionen nicht "draw" nennen solltest,
Dialogue: 0,0:03:07.21,0:03:12.97,Default,,0000,0000,0000,,es sei denn, du willst, dass sie besonders\Nbehandelt und wiederholt aufgerufen werden.
Dialogue: 0,0:03:12.97,0:03:18.23,Default,,0000,0000,0000,,Und denk dran, du kannst nicht mehrere\NFunktionen haben, die "draw" heißen.
Dialogue: 0,0:03:18.23,0:03:23.53,Default,,0000,0000,0000,,Nur die letzte Definition zählt.
Dialogue: 0,0:03:23.53,0:03:27.89,Default,,0000,0000,0000,,Wenn wir hierdrin ein "rect" hätten--
Dialogue: 0,0:03:27.89,0:03:30.81,Default,,0000,0000,0000,,Jetzt können wir sehen, dass unser Auto\Nnicht mehr gemalt wird
Dialogue: 0,0:03:30.81,0:03:35.14,Default,,0000,0000,0000,,und stattdessen nur das Rechteck,\Nweil nur die letzte Definition zählt.
Dialogue: 0,0:03:35.14,0:03:40.50,Default,,0000,0000,0000,,Also lass uns das löschen.
Dialogue: 0,0:03:40.50,0:03:43.17,Default,,0000,0000,0000,,"draw" ist nicht die einzige\Nvordefinierte Funktion,
Dialogue: 0,0:03:43.17,0:03:48.29,Default,,0000,0000,0000,,die dieses besondere Verhalten hat.
Dialogue: 0,0:03:48.29,0:03:50.50,Default,,0000,0000,0000,,Es gibt auch einen Haufen Funktionen,
Dialogue: 0,0:03:50.50,0:03:52.68,Default,,0000,0000,0000,,die auf Mausbewegungen und\NTastatur reagieren.
Dialogue: 0,0:03:52.68,0:03:56.69,Default,,0000,0000,0000,,Zum Beispiel wollen wir ein Programm, das\Neine farbige Ellipse dahin malt,
Dialogue: 0,0:03:56.69,0:04:01.62,Default,,0000,0000,0000,,wo der Nutzer seine Maus hinbewegt.
Dialogue: 0,0:04:01.62,0:04:04.72,Default,,0000,0000,0000,,Das könnten wir mit einer solchen\NFunktion machen.
Dialogue: 0,0:04:04.72,0:04:09.04,Default,,0000,0000,0000,,[tippt]
Dialogue: 0,0:04:09.04,0:04:15.67,Default,,0000,0000,0000,,Okay, oh, das ist schön.
Dialogue: 0,0:04:19.100,0:04:22.54,Default,,0000,0000,0000,,Jetzt wird diese Funktion immer wieder\Naufgerufen,
Dialogue: 0,0:04:22.54,0:04:27.22,Default,,0000,0000,0000,,selbst wenn der Nutzer die Maus\Ngar nicht bewegt, so wie jetzt.
Dialogue: 0,0:04:27.22,0:04:31.18,Default,,0000,0000,0000,,Und dieses Programm funktioniert,\Nes tut, was wir wollen
Dialogue: 0,0:04:31.18,0:04:34.70,Default,,0000,0000,0000,,es malt diese tollen Ellipsen überall\Nauf den Bildschirm.
Dialogue: 0,0:04:34.70,0:04:37.90,Default,,0000,0000,0000,,Aber tatsächlich gibt es eine bessere Art,\Ndas Gleiche zu tun,
Dialogue: 0,0:04:37.90,0:04:42.11,Default,,0000,0000,0000,,die effizienter ist.
Dialogue: 0,0:04:42.11,0:04:44.29,Default,,0000,0000,0000,,Ändern wir die "draw"-Funktion\Nzu "mouseMoved"
Dialogue: 0,0:04:44.29,0:04:51.89,Default,,0000,0000,0000,,funktioniert es immer noch.
Dialogue: 0,0:04:51.89,0:04:54.58,Default,,0000,0000,0000,,Es ist so, unsere Umgebung überprüft\NProgramme,
Dialogue: 0,0:04:54.58,0:04:58.36,Default,,0000,0000,0000,,um zu sehen, ob eine "mouseMoved"-Funktion\Ndarin definiert wurde, und wenn ja,
Dialogue: 0,0:04:58.36,0:05:00.75,Default,,0000,0000,0000,,ruft sie die Funktion auf, wenn die Maus\Nbewegt wird.
Dialogue: 0,0:05:00.75,0:05:05.46,Default,,0000,0000,0000,,Aber sie wird nicht aufgerufen werden,\Nwenn der Nutzer die Maus nicht bewegt.
Dialogue: 0,0:05:05.46,0:05:10.03,Default,,0000,0000,0000,,Also, vorher haben wir den Code in der\N"draw"-Funktion aufgerufen,
Dialogue: 0,0:05:10.03,0:05:13.42,Default,,0000,0000,0000,,als wir es nicht mussten, immer wieder.
Dialogue: 0,0:05:13.42,0:05:15.91,Default,,0000,0000,0000,,Und jetzt rufen wir nur diesen Code\Nin "mouseMoved" auf,
Dialogue: 0,0:05:15.91,0:05:20.26,Default,,0000,0000,0000,,wenn mouseX oder mouseY\Nsich tatsächlich ändern.
Dialogue: 0,0:05:20.26,0:05:23.29,Default,,0000,0000,0000,,Also ist unser Programm effizienter,\Nund das ist gut.
Dialogue: 0,0:05:23.29,0:05:27.31,Default,,0000,0000,0000,,Allgemein, wenn du nur dann den\NProgramm-Output ändern willst,
Dialogue: 0,0:05:27.31,0:05:30.73,Default,,0000,0000,0000,,wenn der Nutzer die Maus bewegt,\Nist es besser, diesen Code
Dialogue: 0,0:05:30.73,0:05:34.52,Default,,0000,0000,0000,,in der "mouseMoved"-Funktion zu haben.
Dialogue: 0,0:05:34.52,0:05:37.21,Default,,0000,0000,0000,,Und es gibt noch viel mehr\Nvordefinierte Funktionen,
Dialogue: 0,0:05:37.21,0:05:40.99,Default,,0000,0000,0000,,von denen du Beispiele in der\NDokumentation sehen kannst.
Dialogue: 0,0:05:40.99,0:05:44.66,Default,,0000,0000,0000,,So wie "mousePressed", "mouseReleased",\N"keyPressed" und weitere.
Dialogue: 0,0:05:44.66,0:05:48.87,Default,,0000,0000,0000,,Also denk dran, wenn du eine spezielle\Nvordefinierte Funktion verwenden willst,
Dialogue: 0,0:05:48.87,0:05:53.99,Default,,0000,0000,0000,,wie "mouseMoved" oder "draw",\Ndann schreibe und verwende sie richtig.
Dialogue: 0,0:05:53.99,0:05:59.24,Default,,0000,0000,0000,,Wenn du das nicht willst, stell sicher,\Ndass deine eigenen Funktionen
Dialogue: 0,0:05:59.24,0:06:03.41,Default,,0000,0000,0000,,neue, einzigartige Namen haben.