JavaScrip Class notes: Lesson two

Demonstration of "RollThreeA" by Robert Johnston.
Senior Center. Charlottesville VA.

Mar 04-03

Lesson Two.

The actual slide show can be seen at the end of this page.

A -Review:

We have experienced in the past various ways to set up a slide show. First, a preloading of all the pictures involved need to be done in most cases. For that, we follow this format :

Part one : Downloading the pictures

1- Defining the variable (var) by giving it a name and assigning a value to it. Variables are like labels whose values may change. Values are like the contents or what represents them. Let us call our slide "pic1, pic2, pic3" etc...with the count variable k, representing "a number". In this case pic[k] may be picture1, or picture2 , etc...

2- Listing the path to each picture by its label and value first:
var pic = new Image(); after that, we will declare the right name and path or the real picture. My pic1 is named "photoe.jpg" so I should begin with:
var pic = new Image();pic1.src="photoe.jpg";
If the slide show is done with Arrays, we will have to add this : var pic = new Array (5). before we list the pictures.
Inside the () we have to give the total number of our slides as information to the "new Array". Notice the slide show has 5 slides.
The Arrays also adds a couple of straight-brackets to the number identity of the pics.
pic[1] = new Image(); pic[1]src="photoe.jpg";
A semicolon closes each statement.

3- In an Arrays, the number of the pics should be consecutive in order for the slide show to work.

var k = 0;
var blank=new Image(); blank.src="image0.gif";
var pic = new Array(5)
pic[1] = new Image(); pic[1].src = "photoe.jpg";
pic[2] = new Image(); pic[2].src = "spain.jpg";
pic[3] = new Image(); pic[3].src = "rapid5.jpg";
pic[4] = new Image(); pic[4].src = "jennysnow.jpg";
pic[5] = new Image(); pic[5].src = "rivanna.jpg";

The blank picture is the first blank frame that shows before the user moves the mouse pointer over the picture. We will go back to that "blank.jpg" again.

Part two : Declaring functions:

1- A function is a procedure made up by different elements that might be set in action to perform a job. In our slide show, it makes one slide follow the other. A function has a name. Different attributes like variables may be added after the function name as information. They are kept in round brackets. function showpic() is an example of a function name without any further information or statement. A function displays its objects, its properties, and its methods that it uses to ...function. It will be "called" to work when the users operate the event handlers properly.
Note that "objects", "properties", "methods" "event handlers" are JavaScript terminology. An object can be your computer window or document, or a taskbar. It is a thing like a car, or a house, anything. A property can be a variable, (see above) a window, a picture, or a location in your document .Your car brand name, or its engine are your car properties. A room in the house can be your house property. A "method" can be some action done to or done for the object or the property, when the function is called and executed by the event handlers. We will be discussing this in Part Three later on.
2- In our slide show example, the function is conditional. It declares that if the count number variable k is bigger than the number of the total of the pictures involved, which is 5, the function will perform a loop to go back to pic number1 .
if (k.5) {k=1};
Now if the loop goes back to pic1 the browser will have to go to our document and look for the pic[k] with the right number and the actual source (src) to display.
document.photo.src=pic[k].src

The whole operation will look like this:

function showpic()
{
if (k>5) {k=1};
document.photo.src=pic[k].src;
};

Notice the curled brackets before and after the function. We have to conform to this format so that our browsers will be happy.

Last but not least, Part one and Part two are done in between the tags <head> and </head> and strictly in JS zone, with <Script language="JavaScript">at the beginning and with </Script> at the end.

Part Three. JavaScript codes inter-acting with html code.

1- The OnMouseOver and OnMouseOut should be carried within the html code, in the body part of it . It starts with the opening of the <a> tag and close with the end of it </a> way way below.

a/ The <a href=" "..... /a> tag is a must. Out side of it, it won't work. OnMouseOver and OnMouseOut are event handlers. The users would move their mouse pointer over the picture and the function gets done or "executed". In OnMouseOver = "k+=1;showpic();" a specific picture, which depends on the value of k, is displayed in the space reserved for it.
onMousseOut="document.photo.src=blank.jpg;"the space is back to blank when the user takes the mouse pointer away from it. In my slide show RollthreeAA, I took away blank.src and replaced it with x.jpp, a file which does not exist, so that there will be no blank coming in between the pictures shown. Robert said that was a way to trick the browser into hanging on to the last picture till the user moves the mouse back to the frame again.

b/Now we come to the part where we will create the space for the pictures. Note that "photo" is the name I give to the image in general. Other attributes like height and width etc will be mentioned too.I call my picture photo but you can call it anything you like yet you need to be consistent with it throughout the scripts code. Otherwise browsers will be confused. This is the second part of Part Three.

Here is the code that gives us the space where the pictures happen:
<img name="photo" border="2" width="400" height ="300" align="left" hspace="10" alt="space reserved for the pictures">

And here is how both JavaScript code and Html code get to live happily ever after:

<a OnMouseOver=k+=1;showpic();
OnMouseOut=document.photo.src=x.src;
<IMG height=300 alt="space reserved for the image to be switched in" hspace=15 width=400
align="center" border=3 name=photo></a>

This concludes the review on SlideShows.

B- New Lesson : slide shows with navigation.

In the new lesson, we learn to "navigate" from our slide show to other places in the same directory, outside of the directory, or to the web site. The one that gives us difficulty is the navigation to a place in the same page where the slide show is.

1- Robert added another function to the slide show code. "It is necessary to create and invoke a JavaScript function, for example, "dowhat()" (see source). Thus, to accomodate the latest and also earlier browsers, JS coders will need to use a function to enable navigation, in connection with mouseover images" he said.

Here is the code for the new function:

function dowhat()
{
if(k==1) {document.photo.src = "ahansel.jpg"};
if(k==2) {document.photo.src = "friday after five.gif"};
if(k==3) {document.location.href="http://pws.prserv.net/hoangtv/"};
if(k==4) {document.location.href="hanoi1.jpg"};
if(k==5) {document.location.href="#fiftyone"};
};


The double equal sign only means equal to. The document.photo.src takes you to a picture file source. The document.location.href takes you to an address location either on line or in the same page.

After we put both functions together in Part Two, we combine the interaction of JavaScripts and html code in the body part of the document as follows:

<The... href="javascript:dowhat()'> comes after the showpic() function and after the event handlers. That is the way it gets done, I guess.

<a onmouseover=k+=1;showpic();
onmouseout=document.photo.src=x.src; href="javascript:dowhat()">
<img height=300 alt="space reserved for the image to be switched in" hspace=15 width=400
align=center border=3 name=photo></a>

Finally we close the codes with </body> </html> and all that we need to close.

Back to the top

See the actual Slide Show

Comments by Jenny

I am very happy with this new code that really opens a new area in slide show for us since the preloading days. New mistakes have been made using the inappropriate browsers and new knowledge have been acquired:

1- We have learned that ..a href="javascript:document.location.href="#">click</a.. alone might not work depending on what browser we use. For navigation purpose, we should always use a function like function dowhat()

2- We can add a form like Push button to accomodate our Seniors (they prefer to push a button?) but we should never do both mouseover and button form (I have to ask Robert again about this since I did several slide shows with both buttons and Mousy before. See my website)

3- Because of the function dowhat, there is no downloading of the second set of pictures involved. This is very special.

End of Lesson 2

Back to the top
Back to Jenny's website __________________________________________________________________________________________________

© Jenny Hoang 2003


 

___________________________________________________________________________________