events and animations csc 2320 fall 2014 disclaimer: all words, pictures are adopted from “simple...
TRANSCRIPT
![Page 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/1.jpg)
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
![Page 2: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/2.jpg)
In this chapterEvents in JavaScriptAnimation
![Page 3: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/3.jpg)
Events handlerElement with attribute onclick.Onclick with call functionFunction defined in your script or
library.
![Page 4: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/4.jpg)
How the event worksOne example
![Page 5: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/5.jpg)
How the annoying pop up window worksAdvertisement pages
![Page 6: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/6.jpg)
Problems with event handlerMore than one handler with one
element
![Page 7: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/7.jpg)
AnimationThe principles of animationsDisplay n frames or pictures per
second
![Page 8: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/8.jpg)
AnimationControl time with JavaScript
![Page 9: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/9.jpg)
AnimationSet the timerFunction
◦SetTimeout(function, time);◦E.g.,
![Page 10: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/10.jpg)
AnimationTime in a function
![Page 11: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/11.jpg)
AnimationDefine function inside functions
![Page 12: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/12.jpg)
AnimationStop the timer
◦Use function clearTimeout(timer);◦E.g.,
![Page 13: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/13.jpg)
AnimationCreate repeating timer
◦Use function setInterval(function, time);
Stop repeating timer◦Use function clearInterval(timer);◦E.g.,
![Page 14: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/14.jpg)
AnimationPicture animations
![Page 15: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/15.jpg)
AnimationPicture animations(cont.)
![Page 16: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/16.jpg)
AnimationAnother example
![Page 17: 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](https://reader035.vdocuments.net/reader035/viewer/2022070401/56649f165503460f94c2cd4c/html5/thumbnails/17.jpg)
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