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.
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.
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 (
<body>, etc). Inside the body of your page add a pair of
divtags like the following:<div id='dispAddresses'> </div>The
Exercise 2 - Creating an Address Book Record Object: In the
headof your new document, write a function similar to the
gpaRecordfunction 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
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:
- In the
headof 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
falsein 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
addressArrayshould be whatever you choose to call your array and
addrBookRecordshould be the function name you used in Exercise 2).addressArray = new addrBookRecord("Lastname, Firstname", "123 Any Street", "Anytown", "SomeState", 98765, false);
- 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
gpaArrayvariable in the initial example at the top of this page.)
In a separate script, defined somewhere below your
divtags, 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.name + " " + addressArray.street + " " + addressArray.city + " " + addressArray.state + " " + addressArray.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.