CS 21A
Download
1 / 71

CS 21A - PowerPoint PPT Presentation


  • 109 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' CS 21A' - suelita-ypina


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






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 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 greeting22
Creating a Dynamic Greeting

Calling the Holiday Function



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





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 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 function2
Calculating the Extended Price Function

Calculating the Extended Price








ad