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

       Define rolling banner       Create an image object       Write a rolling banner function       Define array       Describe how to create an array instance       Call the rolling banner function       Create a dynamic greeting       Describe the Switch statement       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       Discuss the getMonth() and getTime() methods       Describe the onmouseover event handler       Write a user-defined function that changes an image when

the mouse pointer passes over a related link       Write a user-defined function that displays a menu of items

and displays the price for an item that is selected from the menu

       Describe the onchange event handler       Write a user-defined function that calculates the total cost of

an item selected from a menu       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

1. Dynamic banner and greeting information(can get it through animated GIF file software) )

5

Introduction

2. Category image changes when mouse move over.

3. 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:

(1)Create and image object;

(2)Write the rolling banner function;

(3)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].src   imageNum++   if(imageNum > 10) {      imageNum = 1   }}

function slower() {   delay+=10   if(delay > 4000) delay = 4000}

17

Rolling Banners

function faster() {   delay-=10   if(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

1. Define an array of images.

2. Establish a counter.

3. Increase the counter by 1.

4. Test the counter against the number of items in the array.

5. assign the array element of the counter to the image object

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

1. Initialize a generic greeting.

2. Create a Date() object instance.

3. Determine the month number.

4. Based on the month to set up a holiday day.

5. Get the day difference in between current day and the holiday.

27

Creating a Dynamic Greeting

6. If the current day before the holiday, calculate the days to the holiday.

7. Assign a new message.

Repeat steps 2 through 7 for each of the four holiday

28

Creating a Dynamic Greeting

switch Statement

A 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

51

The onmouseover Event Handler

Entering the onmouseover Even Handler

52

The onmouseover Event Handler

Entering the Functions

53

The onmouseover Event Handler

54

The onmouseover Event Handler

55

Using Selection Lists to Display Menu Items

56

Using Selection Lists to Display Menu Items

function setPicnicPrice(myForm) {

document.PicnicPrice.Price.value = ""

document.PicnicQuantity.PicExtPrice.value = ""

document.PicnicQuantity.PicQty.value = ""

var itemSelect = myForm.PicnicItem.selectedIndex;

document.PicnicPrice.Price.value = picPrices[itemSelect]

document.PicnicQuantity.PicQty.focus()

}

57

Using Selection Lists to Display Menu Items

58

Using Selection Lists to Display Menu Items

59

Using Selection Lists to Display Menu Items

60

Using Selection Lists to Display Menu ItemsEntering the User-Defined Functions for the onchange Event Handler

picPrices = new Array("None Selected", "Please Call", "$10.95 per person", "$10.95 per person", "$11.95 per person", "$13.95 per person")

function setPicnicPrice(myForm) {

document.PicnicPrice.Price.value = ""

document.PicnicQuantity.PicExtPrice.value = ""

document.PicnicQuantity.PicQty.value = ""

var itemSelect = myForm.PicnicItem.selectedIndex;

document.PicnicPrice.Price.value = picPrices[itemSelect]

document.PicnicQuantity.PicQty.focus() }

61

Using Selection Lists to Display Menu Items

dinnerPrices = new Array("None Selected", "$13.95 per person", "$16.95 per person", "$18.95 per person", "$12.95 per person", "$12.95 per person")

function setDinnerPrice(myForm) {

document.DinnerPrice.Price.value = ""

document.DinnerQuantity.DinExtPrice.value = ""

document.DinnerQuantity.DinQty.value = ""

var itemSelect = myForm.DinnerItem.selectedIndex;

document.DinnerPrice.Price.value = dinnerPrices[itemSelect]

document.DinnerQuantity.DinQty.focus()

}

62

Using Selection Lists to Display Menu Items

weddingPrices = new Array("None Selected", "$13.95 per person", "$16.95 per person", "$18.95 per person", "$28.95 per person")

function setWeddingPrice(myForm) {

document.WeddingPrice.Price.value = ""

document.WeddingQuantity.WedExtPrice.value = ""

document.WeddingQuantity.WedQty.value = ""

var itemSelect = myForm.WeddingItem.selectedIndex;

document.WeddingPrice.Price.value = weddingPrices[itemSelect]

document.WeddingQuantity.WedQty.focus() }

63

Calculating the Extended Price Function

64

Calculating the Extended Price Function

65

Calculating the Extended Price Function

Calculating the Extended Price

66

Calculating the Extended Price Function

67

Calculating the Extended Price Function

68

The dollarFormat Function

69

The dollarFormat Function

70

The dollarFormat Function

71

The dollarFormat Function