Events and Animations CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from W3schools. Edited by Guoliang Liu, Only for Course CSc2320 at GSU CS Department

In this chapter Events in JavaScript Animation

Events handler Element with attribute onclick. Onclick with call function Function defined in your script or library.

How the event works One example

How the annoying pop up window works Advertisement pages

Problems with event handler More than one handler with one element

Animation The principles of animations Display n frames or pictures per second

Animation Control time with JavaScript

Animation Set the timer Function ◦ SetTimeout(function, time); ◦ E.g.,

Animation Time in a function

Animation Define function inside functions

Animation Stop the timer ◦ Use function clearTimeout(timer); ◦ E.g.,

Animation Create repeating timer ◦ Use function setInterval(function, time); Stop repeating timer ◦ Use function clearInterval(timer); ◦ E.g.,

Animation Picture animations

Animation Picture animations(cont.)

Animation Another example

Bonus homework Do an animation. ◦ Make one object moving in a circle repeatedly.  E.g., like a soccer ball moving a circle in the grass ground. ◦ Due on 11/26/2014