1. ECA 225 Applied Interactive Programming ECA 225 Applied Online Programming images

2. ECA 225 Applied Interactive Programming Review Given these variables: var first_name = “Michael”; var last_name = “Barath”; var feet = 5; var height = 7; What is the code to print the following sentence using the variables? My name is Michael Barath. I am 5’ 7” tall.

3. ECA 225 Applied Interactive Programming HTTP  client side initiates request  connection to server  server response is to download files, including.jpg or.gif  files stored in browser cache What happens if we have a rollover, where one image is swapped with a second as the mouse rolls over it? If we have not downloaded the second image at the time of the original download, the browser must make another request.

4. ECA 225 Applied Interactive Programming Image object  When we insert an image into HTML code, we create an image object. creates an Image object whose name is image1 and src is halle.jpg

5. ECA 225 Applied Interactive Programming Image object cont …  Since we will be using a second image to replace the original image, we must create a second Image object. use the new constructor to create a new Image( ) then assign the src property of the new Image to a file this image is automatically downloaded to the cache Marley = new Image( ); Marley.src = “marley.jpg”;

6. ECA 225 Applied Interactive Programming Image object cont …  using dot syntax to access the various properties of an Image( ) object to access the width property: to access the src property myWidth = document.image1.width; mySrc = document.image1.src;

7. ECA 225 Applied Interactive Programming Image object cont …  using dot syntax to change the src of an Image( ) the following code changes the src attribute from its original value of halle.jpg to the src of the Marley object, marley.jpg document.image1.src = Marley.src;

8. ECA 225 Applied Interactive Programming Image object cont …  to associate a change of images with a mouseOver event event handlers are called from HTML code, so the event handler is placed in HTML code, not inside the tags if you do not want the link to work leave out the href

9. ECA 225 Applied Interactive Programming Image object cont …  In browsers prior to IE 5+ and Netscape 6: onMouseOver and onMouseOut event handlers must be placed inside tags, not inside the tag swapped images must have the same width and height dimensions

10. ECA 225 Applied Interactive Programming Image object cont …  to use a function to swap images Halle = new Image( ); Halle.src = ‘halle.jpg’; Marley = new Image( ); Marley.src = ‘marley.jpg’; function swapImages( currentImage ){ document.image1.src = currentImage; }

11. ECA 225 Applied Interactive Programming Timers  setInterval( )  once called, it automatically fires at specific intervals  not supported by browsers prior to IE4 and NN4  setInterval( ) takes two parameters  the function to be called  the amount of time, in milliseconds, between firings setInterval( function, milliseconds );

12. ECA 225 Applied Interactive Programming Timers cont … var counter = 1; setInterval( “startTimer( )”, 1000 ); function startTimer( ){ document.form1.counter.value = counter++; }

13. ECA 225 Applied Interactive Programming Timers cont …  setInterval( ) has a corresponding method named clearInterval( ) which can be used to stop the timer  when setInterval( ) is called it returns a unique ID number  to stop setInterval pass the ID number returned by setInterval( ) to clearInterval( )

14. ECA 225 Applied Interactive Programming Timers cont … var counter = 1; var myInterval = setInterval( “startTimer( )”, 1000 ); function startTimer( ){ document.form1.counter.value = counter++; } function stopTimer( ){ clearInterval( myInterval ); }

15. ECA 225 Applied Interactive Programming Timers cont …  setTimeout( )  once called, it fires only one time  to set up a timer that fires more than once, setTimeout( ) must be called again  setTimeout( ) takes two parameters  the function to be called  the amount of time, in milliseconds, until the function is called setTimeout( function, milliseconds );

16. ECA 225 Applied Interactive Programming Timers cont … var counter = 1; setTimeout( “startTimer( )”, 1000 ); function startTimer( ){ document.form1.counter.value = counter++; setTimeout( “startTimer( )”, 1000 ); }

17. ECA 225 Applied Interactive Programming Timers cont …  setTimeout( ) has a corresponding method named clearTimeout( ) which can be used to stop the timer  when setTimeout( ) is called it returns a unique ID number  to stop setTimeout pass the ID number returned by setTimeout( ) to clearTimeout( )

18. ECA 225 Applied Interactive Programming Timers cont … var counter = 1; var myTimeout = setTimeout( “startTimer( )”, 1000 ); function startTimer( ){ document.form1.counter.value = counter++; myTimeout = setTimeout( “startTimer( )”, 1000 ); } function stopTimer( ){ clearTimeout( myTimeout ); }