...

View Full Version : Understanding arrays/getElementsByTagName



homeLearning
06-09-2010, 04:35 PM
This is a question about a code for a javascript slide show which i think is very important to understand because slide shows are heavily used!
This is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" script type="text/javascript" src="slideshow.js"></script>
<title>Slideshow exercise</title>
</head>

<body>
<h1> Slideshow exercicse</h1>

<img class="slide" src="cityscape.jpg" width="400" height="300">
<img class="slide" src="Creative_design_sailing_leaves_under_blue_sky.jpg" width="400" height="300">
<img class="slide" src="Curiousity.jpg" width="400" height="300">
<img class="slide" src="raindrops-blue-garden-seamless-tile.jpg" width="400" height="300">
<p> Clic on image to view next slide</p>
<p> Clic on image to view next slide</p>


</body>
</html>
This is the .js file and my questions:

var numslides=0;currentslide=0;
var slides= new Array();

function MakeSlideShow(){
//find all images with the class "slide"
imgs= document.getElementsByTagName("img");---------> :confused:question 1

for (i=0; i<imgs.length ; i++)
{
if(imgs[i].className != "slide") continue;
slides[numslides]=imgs[i];----------------------------------->:confused:question2
//hide all but first image
if(numslides==0)
{imgs[i].style.display="block";}

else{imgs[i].style.display="none";}
imgs[i].onclick=NextSlide;
numslides++;}//end of loop--------------------------->:confused:question3
}

//end MakeSlideShow()

function NextSlide(){
slides[currentslide].style.display="none";------------------>:confused:question4
currentslide++
if(currentslide >= numslides) currentslide=0;
slides[currentslide].style.display="block";--------------->:confused:question5
}

window.onload= MakeSlideShow;

:confused:question1:
does "imgs" automatically become an array here?
If so, how can i print out its lenght?
This is what i tried and it doesn't work->
var lengthimgs= imgs.length
document.write(lengthimgs)

:confused:question2:
What is happening here?
Is the imgs[i] array transferring its data into the slides[numslides] array?

:confused:question3:
If slides[numslides] and imgs[i] are interchangeable why can't this line be i++ instead of numslides++

:confused:question4:
What is happenning to the slides array here?
Is currentslide becoming a copy of numslides?

:confused:question5:
What does this do? Where does this line sent the code?
Why this? Why hasn't "imgs[i].style.display="block";" already done the job for the display?

Thanks

gizmo1650
06-09-2010, 07:25 PM
1. imgs is an array. try switching document.write() to alert() or document.getElementById().innerHTML

2. the arrays are still imgs and slides, i and numslides are the location in the array. but yes this is copying the data from one array to the other

3. this depends how the code is used. If you call function MakeSlideShow() multiple times numslides won't reset to 0 but i will. Also the two arrays aren't interchangable. The reason the data is transfered one element at a time is to modify it. It might just be there because it made more sence to the programmer.

4. each element was an img tag like <img src="www.URL.com" style="css style rules" the style attribute modifies how it appears in the browser. s=slides[currentslide] refers to a speccific image and slides[currentslide].style.display="none"; modifies that one images style attribute to "none"

5. the function NextSlide is changing what element is visible. your line at question 4 made the current slide visible and this line makes the previous slide invisible.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum