1. 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

2. In this chapter Events in JavaScript Animation

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

4. How the event works One example

5. How the annoying pop up window works Advertisement pages

6. Problems with event handler More than one handler with one element

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

8. Animation Control time with JavaScript

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

10. Animation Time in a function

11. Animation Define function inside functions

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

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

14. Animation Picture animations

15. Animation Picture animations(cont.)

16. Animation Another example

17. 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