DMA106 JavaScript

Hi everybody,
Today is Wednesday, March 13, just two days 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 only just a fancy variable, so that concept shouldn't really be too difficult either. Both scripts 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.

As you know from Friday's class, we didn't quite get to the end of the script we were working on. Suddenly, it was 9:00pm and I had an error in my script that I had to de-bug. Although it didn't take me long to find out what the error was, I didn't think it right to keep you while I tried to figure it out. What you will find below is everything that we did in class, including the final BUG-free script that we were working on when class ended. All you have to do is to input your questions and your answers, and it should work perfectly. You should also attempt to style the questions with bold and italic in the same way you see in the hand-out. Whatever I made bold, you should also make bold; whatever I made italic, you should do the same; etc. You will have the entire class to complete the 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.
1. 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.
2. 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.
3. 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. You should notice that the array was provided with data (the various names), otherwise known as populated, in a different way this time. Nonetheless, it provides the sam result as what was demonstrated above.:
 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
4. 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] +", "+ 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] +" "+ first[1] +" "+ first[2] +" "+ first[3] +" "+ first[4] +" "+ 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] +" "
 If you compare those three things; the name of the array first, the index number, and the   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++)
 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] + " ");
 }
 See the results: LINK
5. 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] + " ");
 }
 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
MID-TERM: part III
1. HTML Layers—In last week's class, we began the lesson by editing the layers we had created the week before. Here they are below with the table borders showing:
 
 type a number
 
 In order to accommodate another script, we need to edit the two layers a bit by adding two new button elements to the first layer. So as to accomplish this in an orderly fashion, I first would like to add two new layers as shown in the layer below:
 
 type a number
 
 You should notice that I added two new rows, and that within one of the new rows, I added two new form elements. These are buttons with values of questions and answers. Eventually, these will correspond to new arrays that we will create.
2. Arrays—Now that we have the table within the layer edited, and our button form elements placed within them, we can go about creating the necessary function. Before we do that, however, we need to create the two arrays necessary to run the function. As you know from the mid-term assignment, we are going to generate a function which prints out the questions and answers into the 2nd layer provided, just as we did for part of the multiplication table. For this function, we will need two arrays: one for questions and one for answers. Let us begin there. These arrays will be similar to the parallel arrays we worked on above:
 // below is the first array
 var questions = new Array();
 questions[0] = "This will be the first in the mid-term handout provided to you two weeks ago.";
 questions[1] = "This will be the second question in the mid-term handout provided to you two weeks ago.";
 questions[2] = "This will be the third question in the mid-term handout provided to you two weeks ago.";
 questions[3] = "This will be the fourth question in the mid-term handout provided to you two weeks ago.";
 questions[4] = "This will be the fifth question in the mid-term handout provided to you two weeks ago.";
 questions[5] = "This will be the sixth question in the mid-term handout provided to you two weeks ago.";
 
 // below is the second array
 var answers = new Array();
 answers[0] = "This will be the answer to the first question in the mid-term handout provided to you two weeks ago.";
 answers[1] = "This will be the answer to the second question in the mid-term handout provided to you two weeks ago.";
 answers[2] = "This will be the answer to the third question in the mid-term handout provided to you two weeks ago.";
 answers[3] = "This will be the answer to the fourth question in the mid-term handout provided to you two weeks ago.";
 answers[4] = "This will be the answer to the fifth question in the mid-term handout provided to you two weeks ago.";
 answers[5] = "This will be the answer to the sixth question in the mid-term handout provided to you two weeks ago.";
 A couple things that you should notice about the code typed above: first, the arrays are not typed within any user-defined function; second, within each array value, HTML code is included, the tags. I did not type the arrays within any function because if I had, only that one function would have been able to access the data in the arrays. We would say that the array was local to that function. It would be as if it did not exist to the any other function, if we had decided at some later time to try to write in some code that accessed the array. Whatever array or variable is typed within a particular function is available only to that function. Just in case, therefore, I modified my scripts later to access the arrays from other functions, I typed the arrays outside the curly brackets of any function.
 Also, since you should know that one of the requirements for this part of the mid-term project is to reflect whatever was bold or italic from my hand-out in your function, you will have to add HTML and/or CSS into the text of your questions and answers that provide the desired results. An example of this are the tags in the questions array above.
3. Function—So we have modified the table within the first layer, and we have created our arrays which contain all the data we will need for this function—a mini-database. Now, what we need to do is to create the actual function itself.
 Therefore, first we must consider what exactly we wish to have happen: to print out, on the one hand, all of the questions if we click on the questions button; and then, on the other hand, to print out all the answers if we click on the answers button. Perhaps the first thing that pops into your mind to do is to create two separate functions, one for the questions, and one for the answers, and that would be all right and work just fine. However, if you reconsider for a moment what those two functions must accomplish, what their actual functions would be, then you will realize that they must do pretty much the same thing: each of those hypothetical functions must simply print out data from an array, more simply put, output. At the base of it, both of them only do this one thing, and the only thing that really changes is the array. For the questions our output function accesses the questions array, and for the answers our output function accesses the answers array. It's as simple as that. Therefore, what we must go about doing is to format the data from the array so that it is easy for the user to read.
 From our initial exercise with arrays above, we know that to output data from an array is a repetitive action, and we also know that repetitive actions are prime candiditates for looping statements. So let's begin by creating out function and initiating a for loop:
 function output()
 {
 for(var i=0; i < number of q/a in arrays; i++)
 {
 document.getElementById("layer ID").innerHTML =
 name of the array[i] + " "
 }
 }
 1. Looking at the code above, we can see that there are three unknowns typed in red. The first is easy to figure out: all you have to do is look at the hand-out that I have provided to you to find out how many questions there are and put the number in the script where it belongs; however, if you are uncertain what the number is, actually, how many array elements there are within the array, then you can refer to what is known as the length property of the array. This tells you how many elements there are in a particular array. As a result of knowing this, all you need to do is type the following instead of the number:
 name of array.length
 2. The second unknown, the layer ID, is even easier to determine. Simply scroll down into your CSS to find out what the ID is that you gave to your second layer, the blank one. This is the ID that you will type between the parenthesis of the document.getElementById() function so that the browser knows where—into which layer—you want to print out the questions and answers.
 3. The third unknown is a little more complicated: on the one hand, if we click on one button we wish to access one array; and on the other hand, if we click on the other button, we wish to access the other array. So how are we to specify which array, the name of a particular array, if it could be either of them?
 4. Function II—Now that we have figured out how to pass values from hyperlinks to functions, and now that we also know how to convert string values to javascript code we can go back to our questions/answers function. Let's review where we left off:
 
 function output()
 {
 for(var i=0; i < array name.length; i++)
 {
 document.getElementById("layer ID").innerHTML =
 array name[i] + " "
 }
 }
 
 Next, we must pass values from two links down below:
 
 <a href="javascript:output("questions")">link one</a>
 <a href="javascript:output("answers")">link two</a>
 
 In the output function, these values will be stored in the userChoice variable:
 
 function output(userChoice)
 {
 for(var i=0; i < array name.length; i++)
 {
 document.getElementById("layer ID").innerHTML =
 array name[i] + " "
 }
 }
 
 Since userChoice contains the values "questions" and "answers", which is the same as the names of the arrays, wherever we see array name, we can replace it with userChoice:
 
 function output(userChoice)
 {
 for(var i=0; i < userChoice.length; i++)
 {
 document.getElementById("layer ID").innerHTML =
 userChoice[i] + " "
 }
 }
 
 However, we have to remember that userChoice contains a string value. Therefore, we have to use the eval() function:
 
 function output(userChoice)
 {
 for(var i=0; i < eval(userChoice).length; i++)
 {
 document.getElementById("layer ID").innerHTML =
 eval(userChoice)[i] + " "
 }
 }
 
 The eval function will convert the strings within the userChoice variable into code, which is the name of the two arrays.

JavaScript

Wednesday, March 14, 2007

Spring 2007

week 8: 3/09

0 Comments:

About Me

Previous Posts


	type a number


	type a number