Address Book: Objects and Arrays

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.

Detour: Example Array of Course/Grade Entries (Record Objects)

The purpose of the following code is to make an array containing the entries (or record objects) representing your last term's courses and grades, and then display just the first element of the array as part of the web page. The code is divided into 2 parts separated by a horizontal rule. The code above the line defines three functions and would appear in the head section of a page. The first function creates a course/grade record. The second function creates a string containing all of the record's components (this can be useful for generating output and for testing). The third function uses the first function to create an array of course/grade records. The code below the line calls these functions to determine what to print on the page; it would appear in the body section of the page.

This code has a similar structure to the code you will write, but is not the same, because you will be creating a different type of record with different attributes. (Note: individual entries in an array, or in a spreadsheet or database, are often known as records.)
FIRST GOAL: READ AND UNDERSTAND THIS CODE.
(If you decide to also copy it into your page, you will have to edit it thoroughly to work for art gallery records.)

<!-------- 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 one course & grade entry.
function courseEntry(theCourseParameter, theGradeParameter) 
{
        // Set the attributes of the object from the parameters.
	this.course = theCourseParameter;
	this.grade = theGradeParameter;
}

// This function creates a string with all components of a course/grade record.
function toString(theRecord)
{
    return theRecord.course + " " + theRecord.grade;
}

// This function creates an array of course/grade entries.
function makeCourseArray()       
{
        // 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;
}

</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 entry/record // (useful for testing the courseEntry constructor function). var anEntry= new courseEntry("COMP105", 3.7); output.innerHTML += toString(anEntry); // 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 makeCourseArray var myArray= makeCourseArray(); // Print 1st object in the array (course & grade) output.innerHTML += toString(myArray[0]) + "<br>"; </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 a single address book entry, then the full list of address book entries. Each individual entry will have an "invited" checkbox next to it because eventually users will be able to use it to "invite" people, say to some event or party.

To implement the initial phase of your address book, you will create three functions: one to create an individual address book entry (a record) for a person, one to create the entire array, and one to help display the array's contents.

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. (There's an example of this in the Course/Grade example above.)
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 (this.name), the street address (this.street), the city (this.city), the state (this.state), and the zip code (this.zip). The final attribute name, this.invited, will eventually indicate whether or not the user invited this person to an event.

    The function should have six input parameters, representing the customizable values of the object's state. For example, the first parameter could be called nameParameter, or theName, or personName. Within the function, you will need 6 assignment statements; 5 assigning the input parameters to corresponding record attributes (for example, this.name = nameParameter; ) and 1 setting the this.invited attribute to false (its initial value).

    If you copy, paste, and modify the Course/Grades code above to implement your function, don't forget to modify the comments, as well as the code.

  2. Add a second function to the head of your document, similar to the toString function above, except that this one will create and return a string of all the attributes you specified in your first function.

  3. To test your new functions, 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 course/grade example above — don't forget the new keyword).
    • Print all of its attributes to the innerHTML of the output element, as in the course/grade example.

    Again, if you copy, paste, and modify the Course/Grades code above, don't forget to modify the comments, as well as the code. You will probably want to also comment out the code in the BODY that creates an array and prints the first element, so you haven't updated the array creation function yet.

    Make sure that this works as expected before going further. Your page should contain a line of output containing all of the attributes of your art catalog entry except the URL, separated by spaces.

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 first 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 may use the code from the beginning of this mini-lab as a guide, but remember that your function to create address book entries has different parameters than the function to create course/grade records. The following is an example of how to create an array entry after you have created the array (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 myArray variable in the course/grade example at the top of this page.)
  3. Write code to display information about the first and last entries in your list. The course/grade code above provides an example of printing just the first array entry. What is the appropriate array index to display information about the last entry in the array?

    Note that the example includes a line break to make the output easier to read if it contains multiple entries.

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