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


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 Entries (Record Objects)

The purpose of the following code is to make an array containing the entries representing your last term's courses and grades, 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. (Note: individual entries in an array, or in a spreadsheet or database, are often known as records.)

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

<!-------- THIS IS JUST AN EXAMPLE!                      -------> 


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

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


<!-------- 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 entry/record // (useful for testing the courseEntry constructor function). var anEntry= new courseEntry("COMP105", 3.7); output.innerHTML += anEntry.course + " " + anEntry.grade; // Create a variable containing an array of course entries. // 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 Entries 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 entries, 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 entry 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'>
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 Entry Object:
  1. In the head of your new document, write a function similar to the courseEntry function above, except that this one will create an address book entry instead. An address book entry (record) should consist of the person's name (, the street address (this.street), the city (, the state (this.state), the zip code (, 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, = 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 entry created using your function from step 1 (similar to the definition of the anEntry 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 += 
      + " " + anEntry.street + " " + 
      + " " + anEntry.state + " " + 
      + " " + "<br />"; 
Exercise 3 - Creating an Array of Entries/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 entries. 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 course entries, not an array of address book entries. The following is an example of how to start your function (where addressArray should be whatever you choose to call your array and addrBookEntry should be the function name you used in Exercise 2).
    addressArray[0] = new addrBookEntry("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 entries 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.