Events and Animations CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple...

Events and AnimationsCSc 2320Fall 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 chapterEvents in JavaScriptAnimation

Events handlerElement with attribute onclick.Onclick with call functionFunction defined in your script or

library.

How the event worksOne example

How the annoying pop up window worksAdvertisement pages

Problems with event handlerMore than one handler with one

element

AnimationThe principles of animationsDisplay n frames or pictures per

second

AnimationControl time with JavaScript

AnimationSet the timerFunction

◦SetTimeout(function, time);◦E.g.,

AnimationTime in a function

AnimationDefine function inside functions

AnimationStop the timer

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

AnimationCreate repeating timer

◦Use function setInterval(function, time);

Stop repeating timer◦Use function clearInterval(timer);◦E.g.,

AnimationPicture animations

AnimationPicture animations(cont.)

AnimationAnother example

Bonus homeworkDo 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