Download Introduction to Java Script Part IV - Lecture Notes | CGS 3175 and more Study notes Computer Science in PDF only on Docsity!

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 1

© Mark Llewellyn

CGS 3175: Internet Applications

Fall 2007

Introduction To JavaScript – Part 4School of Electrical Engineering and Computer Science

University of Central Florida

Instructor :

Dr. Mark [email protected] 236, 407-823-2790http://www.cs.ucf.edu/courses/cgs3175/fall

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 2

© Mark Llewellyn

26. Modify the example XHTML document onpage 20 so that it uses a function to printTiffany’s name.

Things to Try Yourself

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 3

© Mark Llewellyn

Things to Try Yourself - #26 Solution

Thanks for using JavaScript

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 4

© Mark Llewellyn

-^ The functions we’ve seen so far have been functions which required noparameters. In other words, we did not need to send any information to thefunction in order for the function to accomplish its task. (Recall that whena function is invoked (called) it simply performs the task it was designed toaccomplish.)•^ In Practice Problem #26 the function printed Tiffany’s name. Suppose thatwe wanted the function to be able to print any visitor’s name.

To

accomplish this, we would need to ask the user to enter their name andthen send their name as a parameter to the function.• Just like the variables we’ve already seen in JavaScript, a parameter is alsoa variable, but this variable belongs only to the function in which it isdefined.• Let’s rewrite Practice Problem #26 using a function with a parameter inwhich we will send the function the visitor’s name.

More On JavaScript Functions

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 5

© Mark Llewellyn

More On JavaScript Functions

encoding="UTF-8"?>

html^ PUBLIC

"-//W3C//DTD

XHTML^ 1.

Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html^ xmlns="http://www.w3.org/1999/xhtml">

<script^ type="text/javascript">function

writeVisitorName(name)

{

document.write("

"^ +^ name

+^ "^ ");

}

Thanks^ for

using^ JavaScript

<img^ src="smiley1.jpg"

alt="a^ smiley

face"^ />^

<script^ type="text/javascript">/*^ <![CDATA[

*/ var userName;userName^ =^ prompt("Hi!

Please^

tell^ me^ your

name");

document.write("<br

/>^ Welcome

");

writeVisitorName(userName);document.write("

!!<br^ /><br

/>^ <br^ />");

document.write("Welcome

to^ our^ Web

site...We

hope^ you^

enjoy^ your

stay^ ");

writeVisitorName(userName); document.write("!<br

/>");

/*^ ]]>^ */

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 6

© Mark Llewellyn

More On JavaScript Functions

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 7

© Mark Llewellyn

More On JavaScript Functions

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 8

© Mark Llewellyn

•^ To create a slide show on the Web you preloada set of images, which are then played ondemand

as^

the^ visitor

clicks

forward

and

backward buttons.• We’ll add captions to our slides and introducesome

more

JavaScript

features

in

this

Creating A Slide Show Using JavaScriptexample.

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 9

© Mark Llewellyn

Creating A Slide Show Using JavaScript <?xml^ version="1.0"

encoding="UTF-8"?>

html^ PUBLIC

"-//W3C//DTD

XHTML^ 1.

Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html^ xmlns="http://www.w3.org/1999/xhtml">

<style^ type="text/css"><!--^ body

{^ margin:

0px^ 10%^ 0px

10%^ }

--><script^ type="text/javascript">/*^ The^ image

objects^

are^ stored

in^ an^ array.*/

var^ mySlides

=^ new^ Array(); mySlides[1]

=^ new^ Image(); mySlides[2]

=^ new^ Image(); mySlides[3]

=^ new^ Image(); mySlides[4]

=^ new^ Image(); mySlides[5]

=^ new^ Image(); mySlides[6]

=^ new^ Image(); mySlides[7]

=^ new^ Image(); mySlides[8]

=^ new^ Image(); mySlides[1].src

=^ "Pan^ Am

Gold.jpg"; mySlides[2].src

=^ "Finch^

1.jpg"; mySlides[3].src

=^ "Mendosa

1.jpg"; mySlides[4].src

=^ "Cat^ 1.jpg"; mySlides[5].src

=^ "Caitlin

Lowe.jpg"; mySlides[6].src

=^ "Mowatt

1.jpg"; mySlides[7].src

=^ "Lovie^

Jung^ 1.jpg"; mySlides[8].src

=^ "three^

great^ pitchers.jpg";

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 10

© Mark Llewellyn

Creating A Slide Show Using JavaScript /* The text^ captions

are^ stored

in^ another

array.*/

var^ myCaptions

=^ new^ Array(); myCaptions[1]

=^ "Team^

USA^ -^ Pan^

Am^ Gold^ Medalists.";

myCaptions[2]

=^ "Jennie

Finch^ -^ Team

USA^ pitcher.";

myCaptions[3]

=^ "Jessica

Mendosa^

-^ Team^ USA -^ right^ fielder.";

myCaptions[4]

=^ "Cat^ Osterman

-^ Team^ USA

pitcher.";

myCaptions[5]

=^ "Caitlin

Lowe^ -^ Team

USA^ and^

Arizona^ Wildcat.";

myCaptions[6]

=^ "Taryne

Mowatt^ -^

University

of^ Arizona

Wildcats^

-^ pitcher.";

myCaptions[6]

+=^ "^ ESPN

Female^ Athlete

of^ the^ Year

2007.";

myCaptions[7]

=^ "Lovie

Jung^ -^ Team

USA^ -^ Sliding

int^ 2nd^

base^ during

2007 World

Cup.";

myCaptions[8]

=^ "Three

great^ pitchers:

Jennie^ Finch,

Alica^ Hollowell,

and^ Cat^ Osterman.";

var^ slidenumber

=^ 1;

var^ totalslides

=^ mySlides.length

-^ 1;

function^

showSlide(direction){if (direction^ ==

"next"){ (slidenumber

==^ totalslides)

?^ slidenumber

=^1 :^ slidenumber++;

}else{(slidenumber

==^ 1)^?^

slidenumber

=^ totalslides

:^ slidenumber--;

} if^ (document.images){document.slideframe.src

=^ mySlides[slidenumber].src; document.slidecontrols.caption.value

=^ myCaptions[slidenumber];

document.slidecontrols.currentslide.value

=^ slidenumber;

} }

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 11

© Mark Llewellyn

Creating A Slide Show Using JavaScript

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 12

© Mark Llewellyn

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 13

© Mark Llewellyn

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 14

© Mark Llewellyn

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 15

© Mark Llewellyn

-^ The browser loads the

and stores eight new image objects in an

array called

mySlides

beginning with array element 1 (we are not using

array element 0, but it is there).

The^ src

property of each image is then

filled with a jpeg image file. After this step all of the images are preloadedonto the visitors computer.• The next thing that happens is all of the image captions are loaded into anarray called

myCaptions

, again beginning with array position 1 and

corresponding to the correct images in the

mySlides

array.^

Notice the

use of the add-by-value operator (

+=) to store the long caption for the sixth

image.• A global variable, slidenumber is created to hold the number of the currentslide. A second global variable, totalslides, is created to hold the numberof slides in the presentation. Since array element 0 is not used, we need tosubtract 1 from the length of the array to determine the number of slides inthe presentation.• The function

showSlide(direction)

is stored in memory and will

How The Slide Show Script Worksperform its function when called later.

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 16

© Mark Llewellyn

-^ The

fo the document includes an image called

slideframe

and a from

called^ slidecontrols

.^ Wihtin the form is a textarea called caption set to display 2 rows and 50 characters (columns) of text.

An initial text string informs

the visitor that the slide show begins with a picture of the 2007 Pan Am gold medalteam from the USA.• The form includes two buttons, the first button calls the

showSlide()

function

and sends it the value

previous

.^ The second button calls the

showSlide()

function and sends it the value

next.

-^ The

showSlide()

function in the

takes the value of the parameter it

receives (either

previous

or^ next

) and places it in a local (temporary) variable

named^ direction

. If^ direction

has a value of next, the function looks to see

whether the current slide number (stored in the global variable

slidenumber

) is

the last slide in the show.

If it is,

slidenumber

is reset to 1, Otherwise,

slidenumber

is incremented by 1. If

direction

is^ previous

, the function

checks to see if the current slide number is the first slide in the show.

If it is,

slidenumber

is set to the total number of slides. Otherwise,

slidenumber

is

How The Slide Show Script Worksdecremented by 1. if (direction == "next"){

(slidenumber == totalslides)? slidenumber

= 1 : slidenumber++;

}else{(slidenumber == 1)? slidenumber =

totalslides : slidenumber--;

}

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 17

© Mark Llewellyn

-^ Finally, the

showSlide()

function checks to make sure that

the browser supports the

images array.

It then uses the

current value of

slidenumber

to determine which element

of the^

mySlides

array and corresponding element of the myCaptions

array to display.

The^ slidenumber

is also

displayed in the text field called

currentslide

so that the

visitor will see the number of the current slide.• This slide show technique is useful for building pages whereyou want the visitor to proceed through a series of images byclicking

buttons.

Corporate

presentations,

travel

logs,

How The Slide Show Script Worksinstructional demonstrations are just some of the possibleapplications.

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 18

© Mark Llewellyn

-^ Tables are used to format content into rows and columns. In the past theyhave been used to format forms, but as you have learned in this class, usingthe CSS box model and page layout techniques are the better way toperform this task.

However, sometimes you just need to display a table within a page and XHTML tables are the easiest way to do this.• In this last section of notes, we’ll examine the table elements in XHTML.• Tables in XHTML work much the same way they do in a spreadsheet orword processor application and resemble a matrix (grid).• The entire table in XHTML is surrounded by the start table

tag

and the end table tag

.

You choose how many rows and

columns you need for your table.• The^

element is an optional element, and when present, must come directly after the

tag.^ There can only be one caption

element per table.

The^

^

tag.^ Each column within that row

contains the open and end tags for the table data

tag.^ Shown below is the definition for a row that contains three columns.

XHTML Tables

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 20

XHTML Table –Example 1^ © Mark Llewellyn

html^ PUBLIC

"-//W3C//DTD

XHTML^ 1.

Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <div^ style="align:center">

Our

First^ Table

element is used to describe the data

in the table.

XHTML Tables

CGS 3175: Internet Applications (JavaScript – Part 4)

Page 19

© Mark Llewellyn

-^ The table heading element

^ is used to label the rows and columns of a table.^ This element is an optional element for tables, as some tables do not require headings. In most browsers the	^ element automatically centers the content of the element within the table’s cell and makes the textbold.• The main body of a table is made up of rows and columns, like a matrix.In XHTML, you construct your tables one row at a time. Each row beginswith an opening table row
^ element. After the last^	element is closed for the last column, the row ends with the ending^
column 1	^ column 2	^ column 3