CS 21A

1. CS 21A • Beginning JavaScript Programming Project 3 Enhancing the Use of Image and Form Objects Sonny Huang

2. Project 3 Enhancing the Use of Image and Form Objects Outline l       Define rolling banner l       Create an image object l       Write a rolling banner function l       Define array l       Describe how to create an array instance l       Call the rolling banner function l       Create a dynamic greeting l       Describe the Switch statement l       Write a user-defined function that calculates the number of days to a future date

3. Project 3 Enhancing the Use of Image and Form Objects Outline l       Discuss the getMonth() and getTime() methods l       Describe the onmouseover event handler l       Write a user-defined function that changes an image when the mouse pointer passes over a related link l       Write a user-defined function that displays a menu of items and displays the price for an item that is selected from the menu l       Describe the onchange event handler l       Write a user-defined function that calculates the total cost of an item selected from a menu l       Write a user-defined function to format the total cost as currency

4. Introduction • Visit the barbie.com web site. • Project Three — Creating the Midwest Catering Web Page • Dynamic banner and greeting information(can get it through animated GIF file software) )

5. Introduction • Category image changes when mouse move over. • Each food service has its own form. Each of the forms perform a simple calculation to display an estimated cost for that food service. Those actions are through the use of the event handlers.

6. Introduction Using the Notepade to open the Cater.htm file.

7. Rolling Banners • A rolling banner is a set of images, all the same size, that display in the same location for a few second, one after the other. • To create a rolling banner, perform the following three steps: • Create and image object; • Write the rolling banner function; • Add the even handler to call the function. • The order is not critical, but need all three.

8. Rolling Banners Creating an Image Object Image Object. An image on an HTML form. HTML syntax To define an image, use standard HTML syntax with the addition of JavaScript event handlers: <IMG[NAME="imageName"]SRC="Location"[HEIGHT="Pixels"|"Value"%][WIDTH="Pixels"|"Value"%]

9. Rolling Banners HTML attributes NAME="imageName" specifies the name of the Image object. You can access this value using the name property, and you can use this name when indexing the images array. SRC="Location" specifies the URL of the image to be displayed in the document. You can access this value using the src property. HEIGHT="Pixels"|"Value"% specifies the height of the image either in pixels or as a percentage of the window height. If necessary, Navigator scales the image to fit the space specified by this attribute. You can access this value using the height property.

10. Rolling Banners WIDTH="Pixels"|"Value"% specifies the width of the image either in pixels or as a percentage of the window width. If necessary, Navigator scales the image to fit the space specified by this attribute. You can access this value using the width property. Syntax To create an Image object: imageName = new Image([width, height])To use an Image object's properties: 1. imageName.propertyName2. document.images[index].propertyName

11. Rolling Banners 3. formName.elements[index].propertyNameTo define an event handler for an Image object created with the Image() constructor: 1. imageName.onabort = handlerFunction2. imageName.onerror = handlerFunction3. imageName.onload = handlerFunction Parameters imageName is either the name of a new object or a property of an existing object. When using an Image object's properties, imageName is the value of the NAME attribute of an Image object or the imageName specified with the Image() constructor.

12. Rolling Banners width is the image width, in pixels. height is the image height, in pixels. formName is either the value of the NAME attribute of a Form object or an element in the forms array. index, when used with the images array is an integer representing an Image object or the name of an Image object as specified by the NAME attribute. index, when used with the elements array, is an integer representing an Image object on a form.

13. Rolling Banners propertyName is one of the properties listed below. handlerFunction is the keyword null, the name of a function, or a variable or property that contains null or a valid function reference. Property of document Description Image objects do not have onClick, onMouseOut, and onMouseOver event handlers. However, if you define an Area object for the image or place the <IMG> tag within a Link object, you can use the Area or Link object's event handlers.

14. Rolling Banners JavaScript animation. The following example uses JavaScript to create an animation with an Image object by repeatedly changing the value the src property. The script begins by preloading the 10 images that make up the animation (image1.gif, image2.gif, image3.gif, and so on). When the Image object is placed on the document with the <IMG> tag, image1.gif is displayed and the onLoad event handler starts the animation by calling the animate function. Notice that the animate function does not call itself after changing the src property of the Image object. This is because when the src property changes, the image's onLoad event handler is triggered and the animate function is called.

15. Rolling Banners <SCRIPT>delay = 100imageNum = 1// Preload animation imagestheImages = new Array()for(i = 1; i < 11; i++) {theImages[i] = new Image()theImages[i].src = "image" + i + ".gif"}

16. Rolling Banners function animate() {document.animation.src = theImages[imageNum].srcimageNum++if(imageNum > 10) {imageNum = 1}}function slower() {delay+=10if(delay > 4000) delay = 4000}

17. Rolling Banners function faster() {delay-=10if(delay < 0) delay = 0}</SCRIPT><BODY BGCOLOR="white"><IMG NAME="animation" SRC="image1.gif" ALT="[Animation]"onLoad="setTimeout('animate()', delay)">

18. Rolling Banners <FORM><INPUT TYPE="button" Value="Slower" onClick="slower()"><INPUT TYPE="button" Value="Faster" onClick="faster()"></FORM></BODY>

19. Rolling Banners

20. Rolling Banners

21. Rolling Banners • Writing the Rolling Banner Function • Six Steps to write the rolling banner function • Define an array of images. • Establish a counter. • Increase the counter by 1. • Test the counter against the number of items in the array. • assign the array element of the counter to the image object • using the setTimeout() to call this function to create a recursive.

22. Rolling Banners

23. Rolling Banners

24. Rolling Banners

25. Rolling Banners

26. Creating a Dynamic Greeting • Following the following steps to write a dynamic greeting function • Initialize a generic greeting. • Create a Date() object instance. • Determine the month number. • Based on the month to set up a holiday day. • Get the day difference in between current day and the holiday.

27. Creating a Dynamic Greeting • If the current day before the holiday, calculate the days to the holiday. • Assign a new message. • Repeat steps 2 through 7 for each of the four holiday

28. Creating a Dynamic Greeting switch StatementA switch statement allows a program to evaluate an expression and attempt to match the expression's value to a case label. If a match is found, the program executes the associated statement. A switch statement looks as follows:

29. Creating a Dynamic Greeting switch (expression){   case label :statement;      break;   case label :statement;      break;   ...   default : statement;} The program first looks for a label matching the value of expression and then executes the associated statement.

30. Creating a Dynamic Greeting If no matching label is found, the program looks for the optional default statement, and if found, executes the associated statement. If no default statement is found, the program continues execution at the statement following the end of switch. The optional break statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch.

31. Creating a Dynamic Greeting If break is omitted, the program continues execution at the next statement in the switch statement. Example. In the following example, if expr evaluates to "Bananas", the program matches the value with case "Bananas" and executes the associated statement. When break is encountered, the program terminates switch and executes the statement following switch. If break were omitted, the statement for case "Cherries" would also be executed.

32. Creating a Dynamic Greeting switch (expr) {   case "Oranges" :      document.write("Oranges are $0.59 a pound.<BR>");      break;   case "Apples" :      document.write("Apples are $0.32 a pound.<BR>");      break;   case "Bananas" :      document.write("Bananas are $0.48 a pound.<BR>");      break;

33. Creating a Dynamic Greeting case "Cherries" :      document.write("Cherries are $3.00 a pound.<BR>");      break;   default :      document.write("Sorry, we are out of " + i + ".<BR>");} document.write("Is there anything else you'd like?<BR>");

34. Creating a Dynamic Greeting The Switch statement

35. Creating a Dynamic Greeting

36. Creating a Dynamic Greeting

37. Creating a Dynamic Greeting The getMonth() and getTime() Methods getMonth Method. Returns the month in the specified date. Syntax dateObjectName.getMonth() Parameters dateObjectName is either the name of a Date object or a property of an existing object. Method of Date

38. Creating a Dynamic Greeting Description The value returned by getMonth is an integer between zero and 11. Zero corresponds to January, one to February, and so on. getTime Method. Returns the numeric value corresponding to the time for the specified date. Syntax dateObjectName.getTime()

39. Creating a Dynamic Greeting Parameters dateObjectName is either the name of a Date object or a property of an existing object. Method of Date Description The value returned by the getTime method is the number of milliseconds since 1 January 1970 00:00:00. You can use this method to help assign a date and time to another Date object.

40. Creating a Dynamic Greeting ceil Method. Returns the least integer greater than or equal to a number. Syntax Math.ceil(number) Parameters number is any numeric expression or a property of an existing object.

41. Creating a Dynamic Greeting Examples The following function returns the ceil value of the variable x: function getCeil(x) {   return Math.ceil(x)} If you pass getCeil the value 45.95, it returns 46; if you pass it the value -45.95, it returns -45.

42. Creating a Dynamic Greeting Creating the HolidayDays() Function See figure 3-10(J 3.15) for logic

43. Creating a Dynamic Greeting Subscripts and superscripts: the SUB and SUP elements.

44. Creating a Dynamic Greeting

45. Creating a Dynamic Greeting

46. Creating a Dynamic Greeting

47. Creating a Dynamic Greeting

48. Creating a Dynamic Greeting Calling the Holiday Function

49. Creating a Dynamic Greeting

50. The onmouseover Event Handler See Appendix A. J A.5 for more information