CS 21A
This presentation is the property of its rightful owner.
Sponsored Links
1 / 71

CS 21A PowerPoint PPT Presentation


  • 89 Views
  • Uploaded on
  • Presentation posted in: General

CS 21A. Beginning JavaScript Programming. Project 3 Enhancing the Use of Image and Form Objects. Sonny Huang. 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

Download Presentation

CS 21A

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Cs 21a

CS 21A

  • Beginning JavaScript Programming

Project 3 Enhancing the Use of Image and Form Objects

Sonny Huang


Project 3 enhancing the use of image and form objects

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


Project 3 enhancing the use of image and form objects1

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


Introduction

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) )


Introduction1

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.


Introduction2

Introduction

Using the Notepade to open the Cater.htm file.


Rolling banners

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.


Rolling banners1

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"%]


Rolling banners2

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.


Rolling banners3

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


Rolling banners4

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.


Rolling banners5

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.


Rolling banners6

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.


Rolling banners7

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.


Rolling banners8

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"}


Rolling banners9

Rolling Banners

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


Rolling banners10

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)">


Rolling banners11

Rolling Banners

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


Rolling banners12

Rolling Banners


Rolling banners13

Rolling Banners


Rolling banners14

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.


Rolling banners15

Rolling Banners


Rolling banners16

Rolling Banners


Rolling banners17

Rolling Banners


Rolling banners18

Rolling Banners


Creating a dynamic greeting

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.


Creating a dynamic greeting1

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


Creating a dynamic greeting2

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:


Creating a dynamic greeting3

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.


Creating a dynamic greeting4

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.


Creating a dynamic greeting5

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.


Creating a dynamic greeting6

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;


Creating a dynamic greeting7

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>");


Creating a dynamic greeting8

Creating a Dynamic Greeting

The Switch statement


Creating a dynamic greeting9

Creating a Dynamic Greeting


Creating a dynamic greeting10

Creating a Dynamic Greeting


Creating a dynamic greeting11

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


Creating a dynamic greeting12

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()


Creating a dynamic greeting13

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.


Creating a dynamic greeting14

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.


Creating a dynamic greeting15

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.


Creating a dynamic greeting16

Creating a Dynamic Greeting

Creating the HolidayDays() Function

See figure 3-10(J 3.15) for logic


Creating a dynamic greeting17

Creating a Dynamic Greeting

Subscripts and superscripts: the SUB and SUP elements.


Creating a dynamic greeting18

Creating a Dynamic Greeting


Creating a dynamic greeting19

Creating a Dynamic Greeting


Creating a dynamic greeting20

Creating a Dynamic Greeting


Creating a dynamic greeting21

Creating a Dynamic Greeting


Creating a dynamic greeting22

Creating a Dynamic Greeting

Calling the Holiday Function


Creating a dynamic greeting23

Creating a Dynamic Greeting


The onmouseover event handler

The onmouseover Event Handler

See Appendix A. J A.5 for more information


The onmouseover event handler1

The onmouseover Event Handler

Entering the onmouseover Even Handler


The onmouseover event handler2

The onmouseover Event Handler

Entering the Functions


The onmouseover event handler3

The onmouseover Event Handler


The onmouseover event handler4

The onmouseover Event Handler


Using selection lists to display menu items

Using Selection Lists to Display Menu Items


Using selection lists to display menu items1

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()

}


Using selection lists to display menu items2

Using Selection Lists to Display Menu Items


Using selection lists to display menu items3

Using Selection Lists to Display Menu Items


Using selection lists to display menu items4

Using Selection Lists to Display Menu Items


Using selection lists to display menu items5

Using Selection Lists to Display Menu Items

Entering 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() }


Using selection lists to display menu items6

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()

}


Using selection lists to display menu items7

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() }


Calculating the extended price function

Calculating the Extended Price Function


Calculating the extended price function1

Calculating the Extended Price Function


Calculating the extended price function2

Calculating the Extended Price Function

Calculating the Extended Price


Calculating the extended price function3

Calculating the Extended Price Function


Calculating the extended price function4

Calculating the Extended Price Function


The dollarformat function

The dollarFormat Function


The dollarformat function1

The dollarFormat Function


The dollarformat function2

The dollarFormat Function


The dollarformat function3

The dollarFormat Function


  • Login