Unterrichtsleitfaden: Einführung in JS - Interaktive Programme

Was gelernt wird

• Wie man mouseX und mouseY benutzt, um ein Programm zu schreiben, das Formen, wie eine Mal-App, an der aktuellen Mausposition zeichnet.

Die Lernenden werden in der Lage sein, Programmcode zu schreiben wie:

Wo die Lernenden Probleme haben

• Schüler können versuchen, mouseX und mouseY außerhalb der draw Funktion zu verwenden und enttäuscht sein, dass ihr Programm nicht funktioniert. Wenn sie außerhalb der Draw-Funktion verwendet werden, werden sie nur den Anfangswert der Mausposition halten. Diese Variablen müssen innerhalb der Draw-Funktion verwendet werden, damit das Programm sieht, wie sich ihre Werte im Laufe der Zeit ändern und entsprechend aktualisiert werden.
• Die Schüler haben vielleicht Schwierigkeiten zu verstehen, wie man mouseX und mouseY verwendet, um die Farbe ihrer Formen zu ändern. Erinnere sie daran, dass RGB-Farben von 0-255 gehen, und mouseX und mouseY von 0-400 variieren. Ermutige sie dazu, mit den Variablen als verschiedene Parameter für ihre Funktionen zu experimentieren und zu sehen, was als Ergebnis passiert. Zeig ihnen, dass sie auch den vierten Parameter von fill() benutzen können, um die Deckkraft zu verändern, für noch coolere Effekte.

Zusätzliches Material: Diskussionsfragen

• Wenn du Bastelmaterial zur Verfügung hast, kannst du etwas zeichnen oder malen und die Schüler fragen, wie sie ein Programm erstellen würden, welches das Kunstwerk vor Ort nachahmt.

Zusätzliches Material: Quizfragen