Address Book: Arrays and Objects

Jason Atkins, Alyce Brady, Pamela Cutter, R.C. McDowell, Kelly Schultz and Nathan Sprague 1997, 1999, 2002, 2009, 2015
Kalamazoo College, Kalamazoo, MI

Introduction

This is the first in a series of labs in which you will set up web page that contains an interactive address book.

Example Array with Record Objects

The purpose of the following code is to make an array containing the GPA record of your last term's courses and then display the first element of the array as part of the web page. This is similar in form to the function you will write, but not the same.
DO NOT TYPE IN THIS EXAMPLE! JUST READ IT AND UNDERSTAND IT.

<!-------- The following script would go in the <head> ---------> 

<!-------- THIS IS JUST AN EXAMPLE!                      -------> 
<!-------- IF YOU COPY-AND-PASTE, YOU WILL NEED TO EDIT! -------> 

<script>

// This function creates a record of a course & grade, useful in calculating GPA.
function gpaRecord(theCourseParameter, theGradeParameter) 
{
        // Set the attributes of the object from the parameters.
	this.course = theCourseParameter;
	this.grade = theGradeParameter;
}

// This function creates an array of course records for calculating a GPA.
function makeGPAArray()       
{
        // Construct the array, fill it, then return it.
        var newArray = [];    // Make an empty array
	newArray[0] = new gpaRecord("COMP105",2.5);
	newArray[1] = new gpaRecord("MATH120",3.5);
	newArray[2] = new gpaRecord("ENGL105",4);  
        return newArray;
}

</script>


<!-------- The following tags & script would go in the <body> ---------> <!-------- THIS IS JUST AN EXAMPLE! -------> <!-------- IF YOU COPY-AND-PASTE, YOU WILL NEED TO EDIT! -------> <!-- Create the space where you will write output. --> <div id='output> </div> <script> // Create and print a variable containing a single course record // (useful for testing the gpaRecord constructor function). var aRecord= new gpaRecord("COMP105", 3.7); output.innerHTML += aRecord.course + " " + aRecord.grade; // Create a variable containing an array of course records. // NOTE: This variable does NOT need to have the same name // that is used internally inside makeGPAArray var gpaArray= makeGPAArray(); // Print 1st object in the array (course & grade) output.innerHTML += gpaArray[0].course + " " + gpaArray[0].grade; </script>

Exercises: Generating Functions to Create Records and Arrays

In this mini-lab you will create a new HTML document that represents an address book. The page will contain an array of records, each of which will contain the address book information for one person. To begin with, the web page will merely display the list of address book entries. Eventually users will be able to "invite" people, say to some event or party, by clicking on buttons next to the list. For this reason, each individual record will contain an "invited" field that will indicate whether or not the user chose to invite that person to the event. To implement your address book, you will create two functions: one to create an individual address book entry (a record) for a person, and one to create the entire array.

Exercise 1 - Setting Up the Page Create a new HTML document that will be your Address Book web page. Don't forget the usual HTML tags needed for all web pages (<html>, <head>, <title>, <script>, <body>, etc). Inside the body of your page add a pair of div tags like the following:
<div id='output'>
</div>
The div element delineates a logical region of the page, but it doesn't impact the way that region of the page is rendered. We will use this element as a place to display JavaScript output.
Exercise 2 - Creating an Address Book Record Object:
  1. In the head of your new document, write a function similar to the gpaRecord function above, except that this one will create an address book record instead. An address book record should consist of the person's name (this.name), the street address (this.street), the city (this.city), the state (this.state), the zip code (this.zip), and whether or not the user invited this person to an event (this.invited). The function should have six input parameters, representing these six values. For example, the first parameter could be called nameParameter, theName, or personName. Within the function, you will need 6 assignment statements assigning the input parameters to corresponding record attributes (for example, this.name = nameParameter; ).
  2. To test your new function, add a short script section in the BODY of your page (after the empty div element you created in Exercise 1) in which you should:
    • Define a variable that holds a single address book record created using your function from step 1 (similar to the definition of the aRecord variable in the GPA example above — don't forget the new keyword).
    • Print all of its attributes to the innerHTML of the output element, as in the GPA example. For example,
      output.innerHTML += 
               aRecord.name + " " + aRecord.street + " " + 
               aRecord.city + " " + aRecord.state + " " + 
               aRecord.zip + " " + "<br />"; 
      
Exercise 3 - Creating an Array of Records:
  1. In the head of your Address Book web page, write a function to create, not one, but a whole array of address book records. This function, when called, will create multiple individual address book entries by repeatedly calling the function you created in Exercise 2, adding each to a new array. You may enter any 10 (or more) names and addresses into your array that you wish. You should enter the peoples' names as last name first. You should also pass false in as the sixth parameter to indicate that the user has not yet invited this person. You may use the code from the beginning of this mini-lab as a guide, but note that it creates an array of GPA records, not an array of address book records. The following is an example of how to start your function (where addressArray should be whatever you choose to call your array and addrBookRecord should be the function name you used in Exercise 2).
    addressArray[0] = new addrBookRecord("Lastname, Firstname", "123 Any Street",
                                         "Anytown", "SomeState", 98765, false);
    
  2. To test your new function, add a statement to the script in the BODY of your page that defines a variable that holds an array of address book records created using your function from the previous step. (Similar to the definition of the gpaArray variable in the GPA example at the top of this page.)
  3. Write code to display information about the first and last people in your list. For example, the command below would display the address information for the first person in the list if you called your address book array variable addressArray.

    // Print 1st and last entries in address book. (Only prints first so far)
    output.innerHTML += 
             addressArray[0].name + " " + addressArray[0].street + " " + 
             addressArray[0].city + " " + addressArray[0].state + " " + 
             addressArray[0].zip + " " + "<br />"; 
    

    What is the appropriate array index to display information about the last person in the list?

    In the next mini-lab you will print out the entire array using a loop.