Simple data access

This script implements a simple database.

Programming Issues

We create five arrays to hold the data in our database. To create an array of eight elements, for instance, we use: var diameter = new Array(8);. We then access the individual elements using diamter[n], where n is the index number. Again, index numbers for arrays begin at zero, so n in this case should be between 0 and 7, inclusive.

One of our arrays holds the images. In previous examples, we have simply changed the src attribute of images in our document. When we do this, the browser has to contact the server and download the new image. This can be a slow process, and can interfere with the functionality of the application. To avoid this, we can pre-cache the images by assigning their sources to each element of the marble array, in this case. When we come to switch the image in the form with document.images["marble"].src = marble[form.dropSel.selectedIndex].src the image in the marble array is already in the computer's memory, and the update is essentially instantaneous.

Again we can see that by aligning our arrays with the selectedIndex of the drop box, we can increase the efficiency of our code, because we do not seperately need to map the elements of our arrays to the possibilities for selectedIndex.

Demonstration

Marble Pick a marble:
Diameter
Weight
Material

Source and Downloads