BC Internet Programming

Often in programming, you will find yourself using several variables that hold similar values, and wishing there was a way to group them together in a single data structure. Such a thing is actually very possible through the use of an element called an array. In most programming languages, declaring an array also means that you have to specify the type of information that it will hold. This can sometimes become quite restrictive. However, JavaScript allows you to declare an array without specifying a type! This means that arrays declared in JavaScript can hold any number of different types of information such as strings (words), numbers, and even relative references to images. The following is an example of an array holding references to images:


var img = new Array(); //This line declares an array called img

img[0]="photos/photo1.jpg"; //This and the lines following say that a
specific place in the array is holding a given image.

img[1]="photos/photo2.jpg"; //So here, index 1 in the array is holding
a reference to 'photo2.jpg'. 

img[2]="photos/photo3.jpg"; 

img[3]="photos/photo4.jpg"; 

img[4]="photos/photo5.jpg"; 

img[5]="photos/photo6.jpg";

A very important thing to remember about arrays is that they always start with 0. This will give you an intense headache when you are programming, and having issues with referencing to places in the array if you forget about index 0.

Arrays are very useful when used inside of for loops. For loops are commonly used in programs to cycle through an array and get or change values inside of them. More commonly (especially in JavaScript), arrays can be used in for loops to preload a part of the program which might otherwise slow it down. An example of this would be if I had an array called 'cars'. Cars has a significant size and could possibly slow down the use of the program by outside users. In order to speed things up, I will first declare a new array, and then use this array inside of a for loop to cycle through the content inside of my cars array. I declare 'i' in the beginning of the for loop, and use it as a counter. 'i' will be less than the length of the 'cars' array, and will increment with each iteration of the loop.

var loadCars = new
Array(); 

for(var i=0; i<cars.length; i++) {

loadCars[i]= new Image; //Creates a new index inside of the array (0,
1, 2, 3...) 

loadCars[i].src = cars[i]; //This references all of the content inside
of 'cars' into 'load Cars'. 

}

The elements described above can be put together and used to create an effective slideshow. This slideshow will be inserted into an HTML page by using an image tag with an ID. The reason this will be done is because it will tell the browser to load images, as well as using part of the code to .getElementByID inside of the JavaScript. For example to insert a slideshow called "slideshow" into the body of the page, one would create this such tag:

<body>
<img id="slideshow" src="photo/photo1.jpg">
</body>

function startSlideshow()
{ 

var i = 0; //This creates a variable set to a value of 0. 

document.getElementByID("slideshow").src=img[i];
//This 'gets' the ID from the HTML(slideshow), inserts the script for
the slideshow, and tells it to start at the 0 index in the array.

... 

}

Download this file to use as a template for your slideshow assignment. You may modify this as you see fit. Included are helpful comments about what the code inside is doing.

In this assignment, you are to create a slideshow using an array to preload the images, start the slideshow, as well as adding buttons that will allow the user to play/pause/stop(Hint: You have created buttons using HTML in previous assignments). IMPORTANT: Make sure when you are making the slideshow, all of the images you use are either edited to be the same size, or you are using an appropriate <img> tag to set the size of the entire slideshow. Points will be reduced from a slideshow whose photos stretch and contract throughout the program (this is bad practice as well as ugly). You are encouraged to use your own photos, but if you choose, you may use photos you find on the web as long as their sources are correctly cited. You will be expected to take the entire period polishing your slideshow. Your html page should be named yourusername-A13.html.
You will need to include this html file as well as all of the photos in a folder for submission. Since the photos are for the web, spaces need to be removed from the filename before linking to them.

When you are done, submit a zipped copy of a new folder called YourUserName-A13 which should include:

Assignment A13: JavaScript with image sliders

Learning Objectives