Hi everybody,
Today is Thursday, November 9, just one day before the mid-term project is due. As you should know, it consists of two parts: the
multiplication table and the
questions/answers. Although I do believe they are rather difficult problems to solve at first, I think once you understand what exactly is going on in the scripts, particularly the multiplication table, you'll find it is not really so terribly difficult. Somewhat tedious, perhaps, but not all that difficult. Basically what it amounts to is a simple
for loop and some complicated
concatenation.
The second script is perhaps even a little easier, although it does include the new topic of
JavaScript Arrays. But really, an array is really just a fancy variable, so that concept shouldn't really be too difficult either. This script too, like the first one, does contain some rather complicated
concatenation and a simple
for loop. I hope they aren't too taxing. But whatever the case, once you get these two things down, I think it's basically almost all downhill from here for the rest of the semester. The remainder of what we do this semester is just a series of repititions of some of the same things that we've already done, with some slightly different applications. There's really only one more difficult thing left for us this semester, and it doesn't come for another few weeks,
rollover images and generating
new browser windows. We'll work on this together in the development of an
image gallery.
This week's entry discusses last Friday's class, the introduction of
Arrays and their usage in
for loops, both of which are necessary for part two of the mid-term project. Carter-
- TOPICS:
- LINK Review: variables;
- LINK Declaring an Array
- LINK Populating an Array;
- LINK Accessing Array data;
- LINK Arrays and For Loops;
- LINK Creating Parallel Arrays.
- HOMEWORK—Mid-Term Project, Part II: using examples from the class discussion of arrays and of for loops, and by adding two additional buttons to the form of the first part of the mid-term, print out the questions and then the answers in the same blank layer as used in Part I.
- REVIEW: Variables—A variable is a named element in JavaScript that serves as a container for a single piece of data. If you can recall, to declare a new variable involves two (2) things, the var keyword, and a unique name, such as the example below:
var myVariable;
Once this is done, the new variable exists for use in the script; however, in order for it to serve its purpose, it must be given a piece of data to store. The data stored inside a variable is called its value. Providing a value to a variable for the first time in the script is known as initializing the variable, and it is done as demonstrated below:
myVariable = 100;
In this example it was given a numerical value, but it may also contain a string:
myVariable = "My name is Carter";
Although this string consists of a number of characters, 17 to be exact including spaces, it nonetheless counts as only one piece of data. Even if a string consists of many characters, they are unified by a pair of quotation marks, then the entire string is stored by the variable.
These two steps, declaring a variable, and initializing a variable, may be combined into one step as the example below demonstrates:
var myVariable ="My name is Carter";
Accessing the data stored by a variable is as simple as calling the name of the variable in some sort of output function, such as an alert() function or a document.write() as shown in the example below:
alert(myVariable);
- INTRODUCE: Arrays—JavaScript Arrays are in fact modified variables. They are created and used in almost exactly the same way, and, moreover, they serve the same function, to store data.
- Declaring Arrays—To declare an array involves the same terminology as declaring a variable in that the var keyword must be used, along with a unique name; however, in order to convert a normal variable into an array, the variable must be filled with what is known as the array object. This is done in the following way:
var myFirstArray = new Array();
Here you can see that instead of initializing the array by giving it some data to hold, it is initialized by creating a new array and placing it inside the variable. This converts it from a simple variable that can hold a single element of data into an object which can contain much more data than that. As has been stated, an array has the same function as a variable, to store data, but it can do so on a greatly expanded scale. Instead of storing only one piece of data, an array may store a relatively unlimited amount of data, an unlimited number of data elements.
- Populating Arrays—Although declaring an array might be very similar to declaring a variable, the way that an array is given data to contain is somewhat different. Simply given the fact that it can contain more than one value, the name of the array will naturally refer to many data elements rather than just one value, so accessing the information held within the array must be handled differently. Likewise, putting the data inside the array, the process by which we add one piece of data after another to an array, and which is known as populating the array, must also be handled differently. As mentioned, the unique name of the array will refer to all the data stored inside of it; but each element of data must be given an index number in order to differentiate them from each other, data element number 1, data element number 2, data element number 3, etc. This is completed in a the special way seen below:
var firstNames = new Array();
firstNames[0] = "Julia";
firstNames[1] = "Kim";
firstNames[2] = "Carrie";
firstNames[3] = "Guy";
firstNames[4] = "Joel";
firstNames[5] = "Carter";
The first thing you should notice is that a number between square brackets refers to the value instead of simply the name of the array. Second, you should also notice that the numbers begin counting at zero (0) instead of one. This is a convention in most computer languages which count the number zero as an actual numerical value instead of the absence or lack of value. Zero is still a numerical value, albeit a 'zero value'. For this reason, it is considered the first value when counting up numerically, and it cannot be skipped. Third, our array ends at the number 5 above, which means that there are six data elements stored in the array. These numbers that refer to a data element in an array are known as index numbers, and one good thing to remember is that the last index number of an array is always one less than the actual number of elements in the array.
An alternative way to populate an array is one which does away with the index in the initialization process, where the array is populated. This way can be more efficient, especially if the array has a relative few elements as it puts everything in a single line of code:
var firstNames = new Array("Julia", "Kim", "Carrie", "Guy", "Joel", "Carter");
Notice that it does away with the repetitive task of typing the name of the array over and over again as well as typing the index numbers. Instead, all of the data is typed between the parentheses following the array declaration. Nonetheless, simply because the index numbers are not typed, does not mean they are not needed. "Julia" still has the index number of zero (0), "Kim" has the index number of one (1), and so on, even if they are not typed in the declaration.
For longer arrays, however, it is still recommended to type out the array names with their index numbers when populating the array as it is more explicit and specific that way. You can actually see which index number that corresponds to its data right beside it.
- Accessing Arrays—Now that we have figured out how to get data into an array (input), we must figure out how to access the information held within the array so that, for instance, we may have control over output or otherwise manipulate that data. As mentioned, an array is basically a modified variable. Therefore, since access of the data held within a variable simply entails calling the variable by its unique name, we can expect that arrays will behave similarly. Below is an example of code that would declare and populate an array, and then afterwards, call on the array for output with an alert function:
var firstNames = new Array("Julia", "Kim", "Carrie", "Guy", "Joel", "Carter");
alert(firstNames);
This code produces the following results: LINK
If you clicked on the link above and read the contents of the alert box, you hopefully noticed that all the names in the array were displayed, separated only by commas. This makes sense if you understand what we did, we called the array by name by placing it within the alert function. Doing the same thing with a variable would cause the variable to reveal its contents, the data held within. An array does likewise, reveal, the entirety of its contents, all data elements held within.
The tricky part comes when you want to call on a single element of data out of the whole of the array. For example, what if I wanted to access the third data element of the array above, "Carrie". How might I do so? The thing to keep in mind here is not the name of the array, but instead the individualized index numbers corresponding to each data element. Now, since I want the third data element, and, since I know that the index number is always one less (since counting begins at zero instead of one), then that means that the it has the index number of 2. As a result, to access that particular data element the statements must read as follow:
var firstNames = new Array("Julia", "Kim", "Carrie", "Guy", "Joel", "Carter");
alert(firstNames[2]);
This time, the alert will read a single name: LINK
- Accessing Arrays with For Loops
—In the previous examples, it is clear how to access either all the data elements of an array, or only one of the data elements of an array. What is not clear is how to access each one of the elements individually, or a series of them. As it is, if we wanted to display all the elements of the array, whether we use an alert() or a document.write(), we would not be able to style them in the way we wanted, or space them out in a particular way. We would only see each element of data listed horizontally and separated with commas, and there would be very little we could do to change it. However, if we access each element, one at a time as a part of a series we can begin to see a way out of this. For example:
// below is the input section of the script
var first = new Array();
first[0] = "Julia";
first[1] = "Kim";
first[2] = "Carrie";
first[3] = "Guy";
first[4] = "Joel";
first[5] = "Carter";
// below is the output section of the script
document.write(first[0]);
document.write(first[1]);
document.write(first[2]);
document.write(first[3]);
document.write(first[4]);
document.write(first[5]);
The first section is familiar. This is where we populate the array. The second section should also be familiar: here is where we access the data within the array, but instead of doing so with an alert() function, we produce the data in a series of document.write() functions. This is a very simple process by which we get a list of names, but it can be simplified to a single document write by way of concatenation:
document.write(first[0] + first[1] + first[2] + first[3] + first[4] + first[5]);
See the results: LINK
Hopefully, you can see the problem here: most obviously, all the names are run together. There must be spaces concatenated in to the document write like so:
document.write(first[0] +", "+ first[1] +", "+ first[2] +", "+ first[3] +", "+ first[4] +", and "+ first[5]);
This will create a horizontal list of names separated by spaces and commas as they should be in order to be grammatically correct. To take it one step further to create a vertical list, instead of the spaces and commas, we should add in a bit of HTML:
document.write(first[0] +"<br/>"+ first[1] +"<br/>"+ first[2] +"<br/>"+ first[3] +"<br/>"+ first[4] +"<br/>"+ first[5]);
See the results: LINK
But by taking these few steps, you might also notice the repetition in the statement. Many things are repeated more than once. In fact, everything is repeated in the statement more than once; that is, except the index numbers. The more you have to type, the more repetition there is, the more text and code you have to put into a script, the more opportunities for errors creep in. Therefore, it's always a good thing to seek out opportunites to make your code more efficient, to reduce the amount of repetition and thereby the amount of typing required. This is where the usefulness of looping statements we have learned about comes in to the picture. They allow us to type a statement or part of a statement one time, and then to loop through it as many times as we need. The document above is a perfect example, so let's narrow down the document.write() statement to its essential part, the part that is repeated over and over. That would be what is below:
first[index number] +"<br/>quot;
If you compare those three things; the name of the array first, the index number, and the <br/> tag, to the longer full document.write() function above, you see that it is really just a repetition of those three things over and over. A for loop can repeat it for us:
for(var i=0; i<6; i++)
{
document.write(first[index number] + "<br/>");
}
From this bit of code, we can see from the for loop, that it will loop 6 times, and that means that the document.write() will run through 6 times. This is great, that is exactly what we want to happen: we have 6 data elements in the array, and our array will run through six times, but how do we change the index number each time we loop through our loop? The first time through the loop, the index number must be 0, the second time, it must be 1, the third time, 2, and so on. How might we get that to occur? Well, we need look no further than the for statement itself. The counter variable i changes from 0 to 6 during the course of the loop, just as the index number should. Why don't we then use the counter variable in place of the index number like so:
for(var i=0; i<6; i++)
{
document.write(first[i] + "<br/>");
}
See the results: LINK
- Creating Parallel Arrays
—Often it is necessary to create multiple arrays to store multiple categories of data, one for first names, a second for last names, a third for telephone numbers, etc. Now, while this in itself may be useful, what makes it so powerul is the possibility of corresponding index numbers. If the index numbers of the first names array, correspond to the index numbers of the last names array, and so on, then a single index number can refer to a whole series of arrays across several categories of information.
// below is the first array
var first = new Array();
first[0] = "Julia";
first[1] = "Kim";
first[2] = "Carrie";
first[3] = "Guy";
first[4] = "Joel";
first[5] = "Carter";
// below is the second array
var last = new Array();
last[0] = "Hutchinson";
last[1] = "O'Brien";
last[2] = "George";
last[3] = "Emmanuel";
last[4] = "Almoradie";
last[5] = "Johnson";
As you can see above, my name in the first array, for example, has the index number of 5. The same index number of the second array corresponds to my last name. The number 5, therefore, may refer to corresponding information in multiple arrays. I could go on to create arrays for other categories of information such as telephone number, address, city, state, zip, etc.
Accessing multiple parallel arrays such as this is done in the same way as single arrays. The only difference is that there are even more repeating elements. See the example below of a loop that outputs the data from the two arrays above:
for(var i=0; i<6; i++)
{
document.write(first[i] +" "+ last[i] + "<br/>");
}
See the results: LINK
Knowing all of this should help you to solve Part II of the mid-term. Part II entails that you will type the questions in the following handout as the first array and the answers to those questions as the second array. They are to be printed out in the same blank layer used in Part I, and they are to be called by two additional buttons added to the form used in Part I.
Here are the mid-term questions: LINK
