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.


// -------- This script section would go in the <head> -------- 

<script type="text/javascript">

// 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 gpaArray = [];    // Make an empty array
	gpaArray[0] = new gpaRecord("COMP105",2.5);
	gpaArray[1] = new gpaRecord("MATH120",3.5);
	gpaArray[2] = new gpaRecord("ENGL105",4);  
        return gpaArray;
}

</script>

// -------- This script section would go in the BODY -------- 

<script type="text/javascript">

// Create a variable containing an array of course records.
var gpaArray= makeGPAArray();

// Print 1st object in the array (course & grade)
document.writeln(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='dispAddresses'>
</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: 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 their 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; ).
Exercise 3 - Creating an Array of Records:
  1. In the head of your new Address Book web page, write a function to create an array of address book records. This function, when called, actually creates the individual address book entries by repeatedly calling the function you created in Exercise 2, and adds each to a new array. You may enter any 10 (or more) names and addresses in 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. Add a statement in the BODY of your page to define a variable that holds an array of address book records created using your function from step 1. (Similar to the definition of the gpaArray variable in the initial example at the top of this page.)
  3. In a separate script, defined somewhere below your div tags, write code to display information about just 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)
    document.getElementById('dispAddresses').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.