JavaScript Class notes:

JavaScript Class notes: Lesson three

April 8th 03

Review: A quick review of the first part of the scripts named :"Autoslide with navigation", a sample with 4 supersonics airplanes . To simplify the path, the 4 other places to go to are the Senior Center, Jenny's homepage, this page lesson 3 and one Summer flower picture. Someone from the Computer Lab who saw these navigation paths have had this honest comment: "How boring!" Well, sorry folks. I can only play so much.
Back to the review:
Robert reminds us that we have been doing this many times in the past, yet he quickly went over it again. This is the part where all the pictures get downloaded and the array set up. It looks like this:

var k = 0;

var row = new Array(4);
row[0]=new Image(); row[0].src="plane1.gif";
row[1]=new Image(); row[1].src="plane2.gif";
row[2]=new Image(); row[2].src="plane3.gif";
row[3]=new Image(); row[3].src="plane4.gif";

These lines pre-load the images. "k" is the counting variable.

var k=0 the variable k is declared with the value 0;

var row = new Array(4);The variable name for the image in the array is row. The array has 4 pictures where row[0] is the first one.

row[0]=new Image; row[0].src="plane1.gif";When the browser is asked to go look for row[0] it will be directed to the image row[0].src with the value of"plane1.gif"

The same went for the rest of the other pictures row[1] row[2] and row[3]

"What we need to remember, Robert says, is to never ask the browser go look for a picture which is NOT there". It sounds logical to me, but it is easier said than done. Most of the time we have the pictures inserted, but the path to it might get mixed up. I guess that is what he means also. So the path where your picture comes from (i.e. "plane1.jpg") can bring you peace or cause you migraine headache; that is what I have to remember.

Gil presents a banner for the front page of the SeniorCenter website with 4 pictures that rotate perfectly with the timing set to 3000 milisec. Each time the user clicks on each of the picture inside the banner, another window pops up and stays open till the button "back" is pressed.

We looked at the codes of this piece on NotePad and decided to open it with WordPad instead. That is a good idea because the codes look much nicer and neater.

Gus also brings in his work, a simple automatic slide show that allows us to look at the codes more pleasantly. This is the part where all the actions happen. Robert goes over it with us with different explanations. They are all good. This is what I have on my notes:

Again he (Robert) repeats that we should not have the browser go look for a picture that is not there. By then I though everyone should get the point. We proceed on to look at the first of the 2 functions:

function slidem()
{
k+=1;
if(k>3){k=0};
document.slide.src=row[k].src;
setTimeout("slidem()",3000);
};

function slidem()This function is named slidem ()

{This curled bracket opens to start the function per se.

k+=1;Since k = 0 the next value k+ should bear the value of 1

if(k>3){k=0};If k is greater than 3 ( since we don't have row[4].src), k should return to 0 which is row[0]
This is how the loop operates: it defines the position of the variable k within the loop with the first line then cranks it up while adjusting it to the number of row[k] in the next line.

document.slide.src=row[k].src;

When the browser is called to look for the picture to show, it follows the above line's instruction: First it goes to the document, then to the picture named "slide", then looks for the path or source with the value row[k].src which is no other than one of the 4 pictures we have downloaded above. The i.d. number of the picture would depend on the value of k within the current loop.

setTimeout("slidem()",3000);

setTimeout is a method.Robert said: " When a built-in function is assigned to a property of an object, it is called a method of that object. Here we have "slidem()" a function operating as a loop , because the last line (containing the setTimeout()) calls the same function all over again. The delay in miliseconds is 3000

As we can see, within the method there are 2 parts separated by a comma, the first one is the function called to perform the loop, the second is for the time out of 3000 sec. Both parts are attributes of the Method and are contained within a round bracket container. Only the function is in between quotes.

};

This curled bracket closes the function.

We were asked to reverse the order of the first 3 lines above to see what change would effect the loop or the pictures. I will try it later at the end of this lesson 3.

Now the next function comes to serve the part where the user clicks on one of the pictures and get a free trip to another location. This is how the function goes:

function gothere()The following lines speak for themselves : the function's name is gothere()
{The gothere function is in between those curled brackets.

if(k==0){document.location.href=" http://pws.prserv.net/hoangtv/"};This line says: If the user clicks picture 0 they will be going to the address ".... " with document as object.- location as property and- href as the address. It all depends on the value of k.

if(k==1){document.location.href="JSlesson3.html"}; The same thing applies to picture 1,2 and 3.

if(k==2){document.location.href="http://avenue.org/Community/Agencies/Senior/programs/programs.html"};

if(k==3){document.location.href="summer.html"};

};

//--> </script></head><body>

We then end the script here with the closing tag and open the body tag.

This is New <body bgcolor = "#fffffff" onLoad = "slidem()">

Robert explains to us that without this little line above, nothing would work because only after the whole java daba do up there gets downloaded by dear browser, functions and all, that we can continue with our body part, because the event handler onLoad calls the function that runs the slide show. (I must be getting tired, it is getting very late in the night.)

He says to insert body bgcolor in here is a must because they might give you the default color, a not very attractive hue of grey.

Here is the html part. We have done this in every slide show scripts. It goes like this:

The html code above also self explains. We need a space for the picture to be, so this is it, with the correct width and height, with border and hspace etc.. Note that the name of the picture (name="slide") which should be consistant with the information we give in the function document.slide.src
I learned to make wonderful use of the hspace attributes here, a tip that I am very thankful for because I always thought of hspace as the space above the picture, I never thought that I could use it for the sides of the pictures. At the end of this lesson, if you open my sample Autoslide.html and look at the text on the right side of the graphics you will see what I mean.

A note in review : the img src=".... etc... has to be within the <a href="#"....>and the closing</a>tag.

The important key is to understand what is what, and where to put them so everybody can be happy together ever after. If they are happy, browser will be too. As for me, I am sure that after I have learned to know them better, I can go copy-paste freely to my heart content. But there seems to be a catch 22 right there. In order for me to understand what goes where for what, and how and why it does what it does, I would have to do a lot of copy and paste at the beginning. So busy bee is me alright!!

During class Gus and Bruce brought up interesting questions like why the double equal sign, and how to do this and that better and faster..Answer (from Bruce): Go get a book, Gus!

A cute note from Gil: he hopes having a chance to use this function: beenThere() or doneThat()
For a senior function, that is quite appropriate.

My homework brings up a problem which turns out to be without cure. When I click on a picture and want to go back where I left off, I can't. The pictures all get loaded again from the top and I would have to go back to the beginning of the slide show either I want it or not.

Many suggestions come from where great minds meet: Both Bruce and Gil talk about opening another window with another browser... something I have no idea what it is. We shall see.

The class ends at 2:00 PM. in happy mode.

Click here to see Autoslide.html with navigation.

End of JSLesson 3

Date this page is last edited: April 16, 2003