Tanári útmutató: Bevezetés a JS-be – Interaktív programok

Mit fognak megtanulni a diákok?

• Hogyan használhatják a mouseX és mouseY változókat olyan program létrehozásához, amely az egérkurzor aktuális helyzete alapján hoz létre alakzatokat, mint egy festő applikáció.

A diákok az alábbiakhoz hasonló kódok megírására lesznek képesek:

Mi okozhat nehézséget a diákoknak?

• Lehetséges, hogy a diákok megpróbálják majd a mouseX-et és mouseY-t a draw függvényen kívül használni, ilyen esetekben viszont csalódottan vehetik majd tudomásul, hogy programjuk nem működik. Ha ezeket a draw függvényen kívül alkalmazzuk, akkor csak az egérkurzor kezdeti helyzetét tartalmazzák. Ezeket a változókat mindenképpen a draw függvényen belül kell használnunk, így a program észleli a hozzájuk tartozó értékek változását, és ennek megfelelően frissül.
• A diákoknak nehézséget okozhat, hogyan használják a mouseX és mouseY változókat az alakzataik színének módosítására. Emlékeztesd őket, hogy az RGB színek értékei 0 és 255 között mozoghatnak, a mouseX és mouseY pedig 0-400 között változik. Javasold, hogy kísérletezzenek azzal, hogy változóikat a függvény különböző paramétereiként állítják be, és nézzék meg, ez milyen eredményekkel jár. Mutasd meg, hogy a fill() negyedik paraméterével az áttetszőséget is beállíthatják, így még izgalmasabb effektusokat próbálhatnak ki.

Kiegészítő módszer: Vitaindító kérdések

• Ha vannak kéznél rajzeszközök, akkor rajzoljatok vagy fessetek, és kérdezd meg a diákokat, hogyan hoznának létre olyan programot, amely a saját kezű műalkotás-készítést utánozza.

Kiegészítő módszer: Villámkérdések