ࡱ > T V S 8 bjbj-- .T O O 0 R R " " " " " 6 6 6 6 4 j < 6 * t * * * * * * * ,
, . >* " >* A " " S* A A A " " * A * A A r ( T h) P G ( ) i* 0 * ( z o/ A o/ h) A " h) >* >* A * o/ R :
JavaScript Tutorial: slide show
Overview
This tutorial explains how to produce a slide show, namely a changing presentation of images.
This application will make use of the following JavaScript and HTML features:
script tag
functions
array variable
elements where the links are JavaScript code
img tag with a name attribute
setinterval and clearinterval functions to starting and stopping timed events
if statement
style sheet
Key Design Issues
Task: Change the image displayed
Logic: To make a slide show, you need to change the image displayed on the Web page. This will be done by changing the image file cited in the img tag.
Solution: The img tag has the src attribute. The img tag will have a name, say pic1. Its value is the name of the image file to be displayed. To change the image displayed, we assign a new value to window.document.pic1.src.
Task: Make something (namely, the change of image) happen after a certain interval of time.
Logic: The need is to set up something that happens based on timing. There are two components: the specification of the timing interval that defines an event and the specification of the handler of the event.
Solution: JavaScript has the setInterval function. It has two arguments. The first one is a string representing the code that is to be executed at each interval of time; the second argument specifies the interval of time. This function returns a value to be used in a call to the clearInterval function to stop the timed event from occurring.
Task: Build a way for the player to start and stop the slide show.
Logic: The starting and stopping of the slide show will be the result of clicking on a hyperlink.
Solution: The tag of HTML has the href attribute that commonly is used to indicate the hyperlink target address. An alternative is to use it to indicate code. The following
href="javascript:startss()"
specifies that the action on clicking this link is to invoke the javascript code: starts(); This is, presumably, a function that will start the slide show.
Task: To implement a slide show, you need to iterate through a set of image file names.
Logic: Establish something that would serve as a list of the image files. Keep track of the current image using a variable. Increment the variable and when it reaches the end, reset it to point to the first in the list.
Solution: The 'something' is an array. The code will define an array variable with each element being the name of an image file. The code will make use of two variables holding integers: one will hold the place in the array of the current image and the other will hold the number of images. The iteration is achieved using the timed event described earlier and incrementing and then checking the variable.
Implementation
You need to do some preparation before testing any code, so you may as well do it right away. Prepare or acquire three image files. You can name them whatever you want. The slide show looks nicest if all the images are the same size (and shape), but you can use whatever you have. You can mix gif and jpg files, but make sure you have the names correct. Make sure all three of these files are in the same folder as the code you are about to produce.
We now describe the coding. We do this using the language of HTML. This is to help you understand the components of the file and not just copy and paste.
[Note: you may see in this and some other examples. This served to comment out the code in the script so that situations in which people had turned off JavaScript or if browsers didnt recognize JavaScript, the code would not be displayed.
You can ignore it.]
Open up NotePad and create the standard boilerplate for an HTML page:
Put in Slide Show as the title.
Insert into the head section, after the , the script tags:
The contents of the script element (what goes after the tag) will be the definition of an array listing the names of the image files and some other variables followed by the definition of three functions.
An array variable is a variable that is a set of elements. The following:
var slides = new Array(
'bird.gif',
'frog.gif',
'heart.gif'
);
defines slides to be an array variable with 3 elements. Each element is a string. Each element in the array is referred to using what is called an index value. Assume that x is a variable holding an index value, then slides[x] indicated the x element of the array.
To add a new element, you just need to add another line (making sure that each element except the last has a comma after it). Note that the slides variable holds just character strings. It does not hold images, just the names of image files.
As was hinted at earlier, your code will make use of two variables. One points to the position or, to say the same thing a different way, holds the index value of the current image file name. The other variable will holding the number elements in the array, that is, the number of image files. Here is where JavaScript and some, but not all, computer languages have a feature that can be confusing. The first element in an array is the zero-th element. So our code sets the variable sn to be 0. This variable will be incremented by one for each change of image for the slide show. The code will compare sn to ns, set to the number of elements in the array. If sn is equal to ns, it will be set (re-set) to zero to re-start the slide show. The index value for the last element of the array is one less than the value of ns.
var sn = 0;
var ns = slides.length;
The last variable to be set will be used to hold what is essentially the number for the interval event. It is set by the setInterval function and used by the clearInterval function. The code
var tid;
does not give tid a value but just sets up the variable to be used later. This often is referred to as a variable declaration.
The general format for a function is
function functionname() {
}
The opening and closing parenthesis after toss indicate that this function does not take any parameters. Another way of putting it is that what it does is not dependent on any information passed to the function. The code of the function goes after the opening curly bracket and before the closing curly bracket.
Three functions are defined: startss, stopss, and change. The startss function consists of just one line: tid=setInterval('change()',800);
This statement specifies that every 800 milliseconds (you can experiment with the timing) the JavaScript code change() is to be executed. To put it another way, the change() function, which we have not discussed yet, is to be called. This function will change the image displayed. One last thing to mention about the statement is that the variable tid will hold a number that can be used to stop this timed event.
The stopss function does what you think it will do: stop the timed event. The contents of this function is a single statement: window.clearInterval(tid);
The statement stops the timed event associated with the number held by tid.
The change function performs the task of changing the image displayed. It is invoked by the JavaScript interpreter each time the time interval (800ms) has elapsed. We know how to change an image by setting the src value of a known image. The complication here is that we want to set the image to be one from the array holding image names. The statement
document.pic1.src = slides[sn];
causes the src attribute of the pic1 img element to be set to the value of the sn element of the slides array. This line will be the first line of the change function. The next task is to increment sn so it is the appropriate value the next time that change is called. Doing this requires two actions: incrementing sn by one and then checking if it is equal to the number of elements in the array. JavaScript has a special operator for incrementing a variable by one: ++. The following if compound statement performs all these tasks:
if (ns<= ++sn) {
sn = 0;
}
The change function consists of the assignment to the src statement and the if statement.
After defining the array variable, the other variables and the functions, all in the script element, the next step is to write the body of the HTML file. It will hold 2 links and one image tag. The text earlier indicate what the links will be:
Start show
Stop Show
The is what is called a character entity. It produces an actual blank space. If you just hit the space bar, HTML would ignore it, as it does other so-called white space and the two links would be too close together.
Lastly, you must put in the image tag, give it a name, and set the src value to an initial value. Note that we also give it an id attribute because we had problems with browsers expecting an id as opposed to a name attribute. This covers 'all bases'.
This is it! Try it and see what happens. If you have problems, make sure you have opened and closed parentheses, curly brackets and opening and closing tags.
Exercises:
Add an image to the slide show. This turns out to be very easy: you just need to add a line with the name of the image file to the lines defining the array. Because your code extracts the length of the array by itself (you don't this length as a constant), you do not need to change anything.
Change the speed of the slide show. Do this by changing the value of the second parameter in the call to setInterval. Make sure you understand the effect of making the number larger versus making the number smaller. Which one makes the slides change faster?
Change the start slide show link and add a new link, so that you have one link for a fast slide show and one link for a slow slide show.
Add a second set of image and links for a second slide show.
Extra feature: preventing viewer hitting start
The code as shown has a bug! If the viewer clicks on the start link, there is a new call to the setInterval command. This will invoke a new, that is, additional, call to change. The prior timing event is still in force so the effect is to speed up the slide show. Think of having two alarm clocks by your bed with each one set to ring every 10 minutes, starting at slighty offset times. To fix this, I use a global variable (var statement outside of any function) that will start off as false when the slide show is not in session and be set to true when it is. The startss function will have code that checks this variable and does nothing (returns immediately) if it is true. See complete code below.
Extra feature: using images instead of text for start and stop AND preventing border
Sometimes it is good to have text for actions and sometimes graphical images, aka icons, are good. The decision may be subjective. Using images is fairly simple. Just make the ![]()
element be the contents of the element, that is, put it between the tag and the tag.
In the case here, a student didnt want to see a border around the images. There are different ways to handle this and there are browser differences. The following code prevents borders around images AND the dotted line around the contents of a elements when the mouse is over them and when the mouse button is clicked. Remove the style section to see the difference. Note: I purposely made the arrow and the stop images be pretty big.
Slide show
( ) @ , K Q
x
{
I b d h j
0 1 6 hXs h`j 5OJ QJ ^J hXs hXs 5OJ QJ ^J hXs h? 5\ h h[ hB h`j h? h? hY h'- h? H ) - K
c d
& F gdB
& F gd? gd? gd? gd?
1 K m
c A N O O c d gdB gdlW gdj gdlW gd? 6 9 Q l m
b c h i @ A I L h R ] N c 3 ; N a % U ¾ºƶƮ¾®ª¾ h-u 5OJ QJ ^J h43 h43 5OJ QJ ^J hTm h43 hB h! hj h[ h'- h>5_ hlW hlW 5\ hXs hXs h? 5OJ QJ ^J hXs hXs 5OJ QJ ^J h? 5\ hXs h? 7
N W a b U V % & 2 J K gd>5_ gdB 8 ( 5 8 E H p u v w | G I M O ! # $ % I J K N g ެެި戁 hr[ hr[ hr[ 5OJ QJ ^J h>5_ h>5_ ha ha 5OJ QJ ^J ha ha hr[ 5OJ QJ ^J h hr[ 5OJ QJ ^J h h[ h[ 5OJ QJ ^J h[ hr[ h>5_ h>5_ 5OJ QJ ^J h>5_ h>5_ 5OJ QJ ^J 1g
' * ! 6! =! ?! E! K! Q! X! _! ! ! ! " " K" S" # # E# F# K# Q# # # # # +$ .$ 6$ <$ y$ $ % % h% % ͿͰհѰ h h h[ h 5OJ QJ ^J h h;e h h 5OJ QJ ^J h h'- 5OJ QJ ^J h43 h43 5OJ QJ ^J h43 h[ h'- h>5_ h>5_ 5OJ QJ ^J hr[ hr[ h[ hJ 5OJ QJ ^J hJ 4 ! ! ! F# G# # 1$ 2$ % % ' ' ' ' ( ( ^( gda gdB gd>5_ % % % % % % & & & & ' ' ' ' ' ' ' ' ' ' ' ' ' ( ( ( :( =( P( R( _( w( ( %) X) Y) Z) ) ) ) + + + u, , , - - . . . . u/ 5 5 ʿʿʿػػػʭ h h h hv hv hz= OJ QJ ^J hz= h5wT ha h'- 5OJ QJ ^J h'- ha 5OJ QJ ^J ha ha 5OJ QJ ^J ha ha h[ 5OJ QJ ^J h[ h[ 5OJ QJ ^J h[ h 6^( _( Y) Z) ) ) ) ) * * + + + + t, u, , - . 7/ u/ v/ w/ / f2 g2 2 gd gd
& F gdz= gda gdB 2 3 3 5 5 5 5 5 5 5 5 5 5 6 16 >6 K6 X6 \6 h6 6 6 6 6 6 6 6 6 6 gd gdlW gd 5 5 6 6 8 8 h h! OJ QJ ^J h-u OJ QJ ^J h h OJ QJ ^J hlW 6 6 7 /7 77 H7 m7 o7 7 7 7 7 7 7 7 8 8
8 I8 W8 8 8 8 8 8 8 gdlW gd , 1h / =!"#$% 6 6 6 6 6 6 6 6 6 v v v v v v v v v 6 6 6 6 6 6 > 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 h H 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 2 0 @ P ` p 2 ( 0 @ P ` p 0 @ P ` p 0 @ P ` p 0 @ P ` p 0 @ P ` p 0 @ P ` p 8 X V ~ 8 X V ~ _HmH nH sH tH @ ` @ N o r m a l CJ _HaJ mH sH tH \ @ \ ? H e a d i n g 2 $ < @& 56CJ OJ QJ \]^J aJ V @ V ? H e a d i n g 3 $ < @& 5CJ OJ QJ \^J aJ D A D D e f a u l t P a r a g r a p h F o n t R i R T a b l e N o r m a l 4
l 4 a ( k ( N o L i s t PK ! pO [Content_Types].xmlj0Eжr(] yl#!MB ;.n̨̽\ A1&ҫ
QWKvUbOX#&1`RT9<l#$>r `С-;c=1g~'}xPiB$I O1Êk9IcLHY<;*v7'aE\h >=^,*8q;^*4?Wq{ nԉogAߤ>8f2*<")QHxK
|]Zz)ӁMSm@\&>!7;wP3[EBU`1OC5VD
Xa?p
S4[NS28;Y[,T1|n;+/ʕj\\ ,E:!
t4.T̡ e1
}; [z^pl@ok0e
g@GGHPXNT,مde|*YdT\Y䀰+(T7$ow2缂#G֛ʥ?q NK-/M,WgxFV /FQⷶO&ecx\QLW@H ! +{[|{!KAi
`cm2iU|Y+ ި [[vxrNE3pmR
=Y04,!&0+WC ܃@oOS2'Sٮ05$ɤ]pm3Ft GɄ-!y"ӉV
.
`עv,O.%вKasS ƭvMz`3{9+e@eՔLy7W_Xtl PK !
ѐ ' theme/theme/_rels/themeManager.xml.relsM
0wooӺ&݈Э5
6?$Q
,.aic21h:qm@RN;d`o7gK(M&$R(.1r'JЊT8V"AȻHu}|$b{ P8g/ ]QAsم(#L[ PK- ! pO [Content_Types].xmlPK- ! ֧ 6 - _rels/.relsPK- ! ky theme/theme/themeManager.xmlPK- ! !Z! theme/theme/theme1.xmlPK- !
ѐ ' (
theme/theme/_rels/themeManager.xml.relsPK ] #
0 T 6 g % 5 8 " # % (
^( 2 6 8 ! $ & ' ) 8 @ 0 ( X
B
S ? - 0 K V [ h x { Q U W i l s G I & ) * , 2 5 ; H ' * 6 = ? E X _ K Q + .
: = ]! a! c! u! ! ! ! ! ! ! ! ! ! ! ! ! " " # # # # & & ( ( ) ) P) S) ) ) m+ p+ - - - - - - - - . . \. _. `. b. h. k. q. ~. . . . . . . . . . . . . . / J/ M/ N/ Y/ x/ ~/ / / / / / / / / 0 0 0 0 0 (0 -0 00 10 40 J0 N0 Q0 U0 Z0 ^0 `0 q0 v0 y0 z0 }0 0 0 0 - 0 K V > 0 2 Q U m v c
e
O U G I & ) 2 5 K R z L R [! \! ! ! ! ! ! ! # # * + , , {- }- - - - - - - - - - - . . 3. <. @. I. M. W. \. _. h. k. . . . . . . . . . . . . . .
/ / 0/ 4/ 8/ ?/ J/ M/ o/ w/ / / / / / / / / 0 0 0 0 J0 N0 X0 Y0 0 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : # 14q $5gXp Vkh5 ^ ` OJ QJ o( 8 ^8`OJ QJ o( ^`OJ QJ o( o p^ `OJ QJ o( @ ^ `OJ QJ o( x ^x`OJ QJ o( H ^H`OJ QJ o( o ^`OJ QJ o( ^`OJ QJ o( h ^`OJ QJ o( h ^`OJ QJ o( o h p p^p`OJ QJ o( h @ @ ^@ `OJ QJ o( h ^`OJ QJ o( o h ^`OJ QJ o( h ^`OJ QJ o( h ^`OJ QJ o( o h P P^P`OJ QJ o( h
^`h H . h
^`h H . h
pL p^p`Lh H . h
@ @ ^@ `h H . h
^`h H . h
L ^`Lh H . h
^`h H . h
^`h H . h
PL P^P`Lh H . h ^`OJ QJ o( h H h ^`OJ QJ ^J o( h H o h p p^p`OJ QJ o( h H h @ @ ^@ `OJ QJ o( h H h ^`OJ QJ ^J o( h H o h ^`OJ QJ o( h H h ^`OJ QJ o( h H h ^`OJ QJ ^J o( h H o h P P^P`OJ QJ o( h H 14 Vk $5gX ! j %E, '- 0 43 z= 5wT r[ >5_ ;e `j Tm #r Xs [ J B J Y -u N v lW
? a 0 0 @ 8 8 Pz8 8 0 ` @ U n k n o w n G T i m e s N e w R o m a n 5 S y m b o l 3 A r i a l ? C o u r i e r N e w ; W i n g d i n g s A C a m b r i a M a t h " q h תު B c) X B c) X ! 24 0 0 3Q HP ? #r 2 ! x x , & J a v a S c r i p t T u t o r i a l : r a n d o m , c o i n t o s s
J e a n i n e M e y e r P u r c h a s e C o l l e g e
Oh +'0 4 @
d p
| ' ( JavaScript Tutorial: random, coin toss Jeanine Meyer Normal.dotm Purchase College 3 Microsoft Macintosh Word @
@
O@ eP B c)
՜. +,0 h p |
' X 0 ' JavaScript Tutorial: random, coin toss Title
! " # $ % & ' ( ) * , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B D E F G H I J L M N O P Q R U R o o t E n t r y F PW 1 T a b l e + / W o r d D o c u m e n t .T S u m m a r y I n f o r m a t i o n ( C D o c u m e n t S u m m a r y I n f o r m a t i o n 8 K C o m p O b j ` F Microsoft Word 97-2004 Document NB6W Word.Document.8