Introduction To Computational Media on the Web (ICM-W) : Week 3

JavaScript Classes/Objects and Arrays

Classes and Objects

Last week we talked about Classes and Objects in a very theoretical way. We defined a "Human" class and looked at how we might instantiate an individual object:

// Define the "human" class
function human(height, weight, age, eyecolor)
{
	this.height = height;
	this.wieght = weight;
	this.age = age;
	this.eyecolor = eyecolor;

	this.x = 0;  // Position in space
	this.y = 0;

	// A function called walk
	this.walk = walk;
}

function walk(number_of_steps)
{
	this.x = this.x + (this.height * number_of_steps);
}

var shawn = new human(200,200,35,"hazel");
shawn.walk();

Let's explore the same thing but with a practical example. Let's say we have a page that contains a series of images and captions that go along with the images in the form of a slide show.

Such a page would look something like this:

<html>
	<head>
		<title>A Slideshow</title>
		
		<script type="text/javascript">
		
			var currentScreen = 0;
			
			var screenText1 = "A Guitar!";
			var screenText2 = "The inner world?";
			var screenText3 = "Is it a robot?"; 
			var screenText4 = "Mysterious";
			var screenText5 = "Mystery object 2";

			var screenImage1 = "http://www.photocourse.com/itext/object/object.gif";
			var screenImage2 = "http://www.unlekker.net/proj/object01/watz_Object_01_02.jpg";
			var screenImage3 = "http://www.nadinejarvis.com/images/uploads/precious-object-projector2.jpg";
			var screenImage4 = "http://physics.unl.edu/history/histinstr/mystery_pix/Mystery_Object_IIx.jpg";
			var screenImage5 = "http://i.i.com.com/cnwk.1d/i/tr/gallery/mystery_object_sept_19.jpg";

			function nextScreen()
			{
				currentScreen++;
				
				var imageobject = document.getElementById("imagetag");
				var textdiv = document.getElementById("textdiv");
				
				if (currentScreen == 1)
				{
					imageobject.src = screenImage1;
					textdiv.innerHTML = screenText1;
				}
				else if (currentScreen == 2)
				{
					imageobject.src = screenImage2;				
					textdiv.innerHTML = screenText2;
				}
				else if (currentScreen == 3)
				{
					imageobject.src = screenImage3;				
					textdiv.innerHTML = screenText3;
				}
				else if (currentScreen == 4)
				{
					imageobject.src = screenImage4;				
					textdiv.innerHTML = screenText4;
				}
				else if (currentScreen == 5)
				{
					imageobject.src = screenImage5;				
					textdiv.innerHTML = screenText5;
				}
			}
		</script>
		
	</head>
	<body>
	
		<div id="imagediv">
			<img src="" id="imagetag" />
		</div>
		
		<div id="textdiv">
		
		</div>
		
		<input type="button" name="nextButton" value="Next" onclick="nextScreen();" />
	
	</body>
</html>

Check it out

You'll notice a couple of things about this that just don't seem right. One of those things that you might notice is that we have two different variables for determining what is on the screen at any given time (screenText1 and screenImage1). Those two variables aren't related in any manner execpt for the name that they were given.

Using classes and objects, we can enforce the relationship between the two by making them a property of a screen:

			function screenObject(thetext, theimage, thetextdiv, theimageobject)
			{
			
				this.screenText = thetext;
				this.screenImage = theimage;
				this.textDiv = document.getElementById(thetextdiv);
				this.imageObject = document.getElementById(theimageobject);
			}
			
			// We would define a screen object like this:	
			var screen1 = new screenObject("A Guitar!","http://www.photocourse.com/itext/object/object.gif");

This makes it so that the text and image which are supposed to be linked together are actually linked together inside an object.

Furthermore we could make methods or functions that are part of this object:

			function screenObject(thetext, theimage, thetextdiv, theimageobject)
			{
			
				this.screenText = thetext;
				this.screenImage = theimage;
				this.textDiv = document.getElementById(thetextdiv);
				this.imageObject = document.getElementById(theimageobject);
				
				this.display = function() {
					this.textDiv.innerHTML = this.screenText;
					this.imageObject.src = this.screenImage;
				};
			}

This version has the means to actually display itself by calling screenObject.display()..

				var screen1 = new screenObject("A Guitar!","http://www.photocourse.com/itext/object/object.gif","textdiv","imagetag");
				screen1.display();

Here is a new version of our slide show page using objects:

<html>
	<head>
		<title>A Slideshow</title>
		
		<script type="text/javascript">
		
			var currentScreen = 0;
			var screen1 = null;			
			var screen2 = null;			
			var screen3 = null;			
			var screen4 = null;			
			var screen5 = null;			
			
			function screenObject(thetext, theimage, thetextdiv, theimageobject)
			{
			
				this.screenText = thetext;
				this.screenImage = theimage;
				this.textDiv = document.getElementById(thetextdiv);
				this.imageObject = document.getElementById(theimageobject);
				
				this.display = function() {
					this.textDiv.innerHTML = this.screenText;
					this.imageObject.src = this.screenImage;
				};
			}
			
			function setupScreens()
			{
				screen1 = new screenObject("A Guitar!","http://www.photocourse.com/itext/object/object.gif","textdiv","imagetag");
				screen2 = new screenObject("The inner world?","http://www.unlekker.net/proj/object01/watz_Object_01_02.jpg","textdiv","imagetag");
				screen3 = new screenObject("Is it a robot?","http://www.nadinejarvis.com/images/uploads/precious-object-projector2.jpg","textdiv","imagetag");
				screen4 = new screenObject("Mysterious","http://physics.unl.edu/history/histinstr/mystery_pix/Mystery_Object_IIx.jpg","textdiv","imagetag");
				screen5 = new screenObject("Mystery object 2","http://i.i.com.com/cnwk.1d/i/tr/gallery/mystery_object_sept_19.jpg","textdiv","imagetag");
			}
			
			function nextScreen()
			{
				currentScreen++;
								
				if (currentScreen == 1)
				{
					screen1.display();
				}
				else if (currentScreen == 2)
				{
					screen2.display();
				}
				else if (currentScreen == 3)
				{
					screen3.display();
				}
				else if (currentScreen == 4)
				{
					screen4.display();
				}
				else if (currentScreen == 5)
				{
					screen5.display();
				}
			}
		</script>
		
	</head>
	<body onLoad="setupScreens();">
	
		<div id="imagediv">
			<img src="" id="imagetag" />
		</div>
		
		<div id="textdiv">
		
		</div>
		
		<input type="button" name="nextButton" value="Next" onclick="nextScreen();" />
	
	</body>
</html>

Check it out

The other thing that jumps out as a bit strange is that we have this set of screens which are numbered but we have to use this crazy set of if statements to decide which one to display based upon currentDisplay:

				if (currentScreen == 1)
				{
					screen1.display();
				}
				else if (currentScreen == 2)
				{
					screen2.display();
				}
				else if (currentScreen == 3)
				{
					screen3.display();
				}
				else if (currentScreen == 4)
				{
					screen4.display();
				}
				else if (currentScreen == 5)
				{
					screen5.display();
				}

There has to be an easier way.. That's where something called array's come in.

Arrays

Arrays are a convient way to handle multiple items that are similar (the same type, or object)

This is a representation of an array of numbers containing 9 elements:

            ------------------------------------------
            | 1 | 2 | 4 | 8 | 16 | 32 | 64 | 128 | 256 |
            ------------------------------------------

The code to create this array might be something like the following:
var myArray = new Array(1,2,4,8,16,32,64,128,256);
(Notice the pattern?)

or it could be done using a loop

			var myArray = new Array();
			var counter = 0;
			while (counter < 9)
			{
				// Using the Math.pow (power of function)
				// http://www.w3schools.com/jsref/jsref_obj_math.asp
				
				myArray[counter] = Math.pow(2,counter);
				counter++;
			}

An even easier way might be with a for loop which is a shortcut for what we just did:

			var myArray = new Array();
            for (int i = 0; i < 9; i++)
            {
                myArray[i] = pow(2,i);
            }

As you can see, Arrays are indexed sets of elements. You can either set or get an element in the array by referring to it's index number inside of brackets [0]. The index number always starts with 0.

		var myArray = new Array();
		myArray[0] = "I am the first element in the array";
		myArray[1] = "I am the second element in the array";
		
		alert(myArray[1]);
		alert(myArray[0]);

Because they are indexed in this way, for loops are a convient way to not only put things in an array but also to get things out of an array:

			var myArray = new Array(9);
			
			// Fill the array up
            for (int i = 0; i < myArray.length; i++)
            {
                myArray[i] = pow(2,i);
            }
            
            // Get stuff out:
            for (int i = 0; i < myArray.length; i++)
            {
                alert(myArray[i];
            }

You might have noticed that in the above example, I stopped using the number 9 in the loops and am instead using myArray.length. This is a "property" of the array object. It tells us the size of the array. We can either define the size by putting that number of items into the array or by instantiating the array with the size included: var myArray = new Array(9);

Using an array to hold the screens would make our lives easier when making our above slide show example:

<html>
	<head>
		<title>A Slideshow</title>
		
		<script type="text/javascript">
		
			var currentScreen = 0;
			var screen1 = null;			
			var screen2 = null;			
			var screen3 = null;			
			var screen4 = null;			
			var screen5 = null;			
			var screens = null;
			
			function screenObject(thetext, theimage, thetextdiv, theimageobject)
			{
			
				this.screenText = thetext;
				this.screenImage = theimage;
				this.textDiv = document.getElementById(thetextdiv);
				this.imageObject = document.getElementById(theimageobject);
				
				this.display = function() {
					this.textDiv.innerHTML = this.screenText;
					this.imageObject.src = this.screenImage;
				};
			}
			
			function setupScreens()
			{
				screen1 = new screenObject("A Guitar!","http://www.photocourse.com/itext/object/object.gif","textdiv","imagetag");
				screen2 = new screenObject("The inner world?","http://www.unlekker.net/proj/object01/watz_Object_01_02.jpg","textdiv","imagetag");
				screen3 = new screenObject("Is it a robot?","http://www.nadinejarvis.com/images/uploads/precious-object-projector2.jpg","textdiv","imagetag");
				screen4 = new screenObject("Mysterious","http://physics.unl.edu/history/histinstr/mystery_pix/Mystery_Object_IIx.jpg","textdiv","imagetag");
				screen5 = new screenObject("Mystery object 2","http://i.i.com.com/cnwk.1d/i/tr/gallery/mystery_object_sept_19.jpg","textdiv","imagetag");

				screens = new Array(screen1,screen2,screen3,screen4,screen5);
				
			}
								
			function nextScreen()
			{
				currentScreen++;
				screens[currentScreen].display();
			}
		</script>
		
	</head>
	<body onload="setupScreens();">
	
		<div id="imagediv">
			<img src="" id="imagetag" />
		</div>
		
		<div id="textdiv">
		
		</div>
		
		<input type="button" name="nextButton" value="Next" onclick="nextScreen();" />
	
	</body>
</html>

Check it out

JavaScript Array Object and JavaScript Array Object Reference

Here is a crazier example: Slideshow with Fades