Student Instructions

Adding Items to an Array

In our last exercise we created our array and initialized it with some values. Another way to do this is to add items to your array on separate lines. The simplest way to do this is to add a new item to the end of your array using the appendItem command.

To append means to add or to join. When you append an item to an array you actually add a new location to the end of the array that contains the new value, so that the total size of the array grows by one. Since you can always add items to an array after creating it, it is very common to create an empty array and then add values in subsequent portions of your program.

Do This:

• Read the documentation for appendItem.
• Create an empty array called oddNumbers.
• Use appendItem to add the odd numbers 1-11 to your array.

• Use console.log to confirm your array is holding the correct values. The output should look like the example below.

Student Instructions

Index Practice

It will take some practice to get comfortable using array indexes. We'll do a couple of exercises to build your confidence.

Do This:

Starter code has been provided that creates an array called myNumbers.

• Use console.log and array indexes to write the contents of myNumbers to the screen in order, as shown to the right. Your commands should be of the form console.log(myNumbers[index]).

Student Instructions

Array Values: Arithmetic

You can reference locations in arrays in arithmetic expressions, just like you might a variable.

The starter code creates an empty array and adds three random values to it.

You will be adding code to your program that calculates the sum of the values in the array.

Notice the difference between displaying an array as part of a string or by itself. Example:

• code: console.log(myNumbers) displays with brackets as: [1, 2, 3, 4]
• code: console.log("my list: "+myNumbers) displays without brackets as: my list: 1, 2, 3, 4

So when it's part of a string it does not print the square brackets around the ends of the list. This is a "feature" of the language with no great explanation. In the first case it sees only a list and it produces a more technical representation. In the second case the system is trying hard to convert the list to a nice looking string.

Do This:

• Add a variable to your program to hold the sum of the array values.
• Assign the value of the variable to the sum of the three array values.
• Use console.log to confirm that you have correctly calculated the sum of the values. Below is sample output from one run of the program.

Student Instructions

Reassigning Array Values

We've already seen many examples of how a location in an array can be treated identically to a variable. The last exercise we'll perform to prove this point is reassigning array values. The syntax for reassigning values stored in an array is identical to that used when reassigning variables. Even the ++ notation to increase a value by one works!

The program you're about to see creates an empty array and adds three random values to it. You will be adding code to the program that increases each value by one.

Do This:

• Add code to the program that increases the value stored at each location in the array by one.
• Use console.log to confirm that you have correctly increased the values. Below is sample output from one run of the program.

Student Instructions

Arrays Can Hold Strings

So far we have been using arrays to hold numbers, but each location in an array could hold a string instead.

Note: It is possible for an array to hold both strings and numbers, but typically you will only want your arrays to hold one type of data.

Do This:

• Create an empty array.
• Use appendItem to individually add strings to your array, forming a sentence of at least 5 words.
• Use console.log to confirm you succesfully created your sentence.

Student Instructions

Inserting Items: Array Indexes

If you want to add elements in the middle of your array you can use insertItem to specify an index at which an item should be inserted.

Just like appendItem, insertItem creates a new location in the array. However insertItem allows you to insert an item anywhere in the array, not just at the end, and it shifts all elements at or after its index one location over.

Do This:

• Read the documentation for insertItem.
• Starter code has been provided which appends some strings to an array, but right now they don't form a complete sentence.
• Use insertItem to individually insert strings to your array to form a complete sentence.
• Use console.log to confirm you succesfully created your sentence.

Student Instructions

Removing Items

Sometimes we want to remove something from an array. In order to do so you'll need to specify the index of the item that should be removed.

Note: removeItem removes the location in the array at the index provided. As a result the array is one location shorter and all the indexes after the index provided will have their index decreased by one.

Do This:

• Read the documentation for removeItem.
• Starter code has been provided which creates an array of strings.
• Use removeItem to individually remove all the "REMOVE" strings in your array to form a complete sentence.
• Use console.log to confirm you succesfully created your sentence.

Note: Keep an eye out; your indexes will shift as you remove items.

Student Instructions

Out of Bounds

In many languages trying to access indexes of an array that don't exist will create an error. JavaScript allows for some strange behavior with arrays that it's useful to see, even though you will likely never use this functionality.

Warning: some of this code will generate errors or work in unexpected ways. Don't spend a long time trying to understand weird results. The point to take from this is referencing indexes that are out of bounds will almost never do what you intend, and we'll be learning ways to avoid this as we move forward.

Do This:

• Starter code has been provided which creates an array with three elements.
• Uncomment the first command that references indexes that are out of bounds and run the code.
• Examine the output and try to understand what is happening.
• Reset and then recomment the line after you've used it.
• Repeat the process for all the lines.

Note: We have used a different style of comment in this program. * long block comment */ is used when you want to write a multiple-line comment.

Student Instructions

Expressions as Indexes: list.length - 1

We have been accessing information in an array by using numbers, but we can actually use any expression that evaluates to a number as an index in our array. The first example of this we will explore is accessing the last item in our array.

Arrays are zero-indexed, which means that the first index is 0. Therefore an array with a length of 3 will have indexes 0, 1, and 2. Notice that the last index is 1 less than the length. This will always be the case, and so we can use this expression to access the last element in any array:

Do This:

• Starter code has been provided that which creates several arrays.
• Use the syntax provided above and console.log to display the final item in each list.

Student Instructions

Expressions as Indexes: Using Variables

We can use any expression that evaluates to a number as an index in an array. Here are some examples:

Do This:

• Starter code has been provided which creates an array of colors.
• Write code that logs a random color from this list to the console by generating a value for a random index. Try to write your program using list.length rather than hard-coding the length of the list.

Student Instructions

Create Your Array

Now that we've dealt with our design elements we'll need to start writing the actual code of our app. This app keeps track of a list of items, so we know that we'll need to create an array to store them.

Do This:

• Create an array that will hold your list of favorite things.
• Add three of your own favorite things to your array.

Student Instructions

Displaying Information to the User

Before we make our application interactive, we'll want to practice creating some simple user output. When the app starts up, the first item in your list should be displayed. Let's write the code that will display this information to the screen.

Do This:

• Using setText set the main text area to show your first favorite thing.
• Using setText and list.length set the text indicating what item of the list the user is currently viewing.
  • Hint: since arrays are zero-indexed you will have to add one to your index to generate the correct value to display. For now you can just write in a 1 and worry about making it change later.
• Note: neither of these outputs will be able to change yet. Don't worry, we'll be taking care of that in coming exercises!

Student Instructions

Current Index

This app also allows a user to scroll through individual items in the array. In order to keep track of which index we are currently viewing, our application will need a global variable that stores the current index. In coming exercises we'll want our global index to change, so let's make sure that your code references your global index rather than fixed values.

Do This:

• Create a global variable that will be used to keep track of the current index in the array. Set this variable to 0.
• Update setText which displays the words to show your first favorite thing using the global index variable instead of a hard-coded number.
• Update setText which displays the current item number to use the global index variable instead of a hard-coded number.
  • Hint: since arrays are zero-indexed you will have to add one to your index to generate the correct value to display.
• Note: neither of these outputs will be able to change yet. Don't worry, we'll be taking care of that in coming exercises!

Student Instructions

Next Button

Nice work! Your application should now have some simple output displaying one of your favorite things and indicating which item of your list you are showing. To make things more interesting, however, we want to be able to change which item we display.

To change the item displayed, the user will use the "Next" and "Last" buttons. These should increase or decrease the global index by one and then you should update the information displayed on the screen. To start out with, however, we'll just be writing code for our Next Button.

Do This:

• Add an event handler to the "Next" button.
• Write code in this event handler that increments your global index variable and then updates the output on the screen.
  • Note: If your code from the last exercise was written to reference this variable then you should just be able to reuse it once you've incremented your variable. We'll talk more about this in the next exercise.
• Run your program to confirm that the user can move forward through the list and that the output displayed is correct.
  • Note: You may notice that your program throws an error if the global index variable goes out of bounds. Don't worry about this for now - we'll fix it in a later exercise.

Student Instructions

Last Button

Our user can now move forward through our list of favorite things, and we're about to write code that allows them to move backwards as well. If you've written your code to reference your global index then this should only require you to decrease its value by one and reuse code that updates the screen output. Before we write the code for backwards let's work on cleaning up our code.

Removing Repeated Code: Once you add the code for moving backwards through your array, your program will have three places where it updates the screen by setting the text of your screen elements. Rather than repeating this code we should create a function that updates the screen and then call it every time we need to refresh those elements. This will not only make our program easier to read and avoids the errors that can arise from redundant code, but it also makes it easier to make changes to how our program runs, since all the code that updates the screen is in a single place.

Do This:

• Write a function that contains the setText commands you have used to update the screen.
• Replace the places in your code where you used to have these commands with calls to your new function.
• Add an event handler to the "Last" button that decreases the global index variable by one and then updates the screen by calling your new function.
• Run your program to confirm that the user can move forward AND backward through the list and that the output displayed is correct.
• Note: You may notice that your program throws an error if the global index variable goes out of bounds. Don't worry about this for now - we'll fix it in a later exercise.

Student Instructions

Adding New Items

Now we want our user to be able to add items of their own to the list. As you might have guessed, this is as easy as inserting an item into our array at the current index.

Do This:

• Add an event handler to the "Add" button.
• Write code in your event handler that:
  • Uses getText to access the user's new item.
  • UsesinsertItem to add that item to your array at the current index.
  • Calls your update function to update the screen (the new item should be displayed).
• Run your program to confirm that the user can add items to the list and that the output displayed is correct.

Student Instructions

if Statements: Staying in Bounds

Currently the user can increase or decrease the value in the global index past the bounds of your array. As a result you've probably already seen that errors are generated.

To prevent this from happening, we're going to add if statements to the event handlers on the "Next" and "Last" buttons. They should check the value of the global index variable before changing it. If the user is about to step out of the bounds of your array they should either:

• Block: Do not change the index if it will result in a value that is out of bounds.
• Wrap: Set the index to be the other end of the array. In other words, going past the end of the array moves the index back to 0 and going past the beginning of the array sets the index to the last in the array (list.length will be helpful here).

Do This:

• Add if statements to the event handlers on the "Next" and "Last" buttons that prevent the global index from going out of bounds using one of the two strategies described above.
• Run your program to confirm that the user cannot go out of bounds and that the output displayed is correct.

Student Instructions

Keep Going!

Your app should now be fully functional - nice job! There are of course plenty of new pieces of functionality to add. If you have time feel free to make any improvements you wish. Here are some ideas:

• Allow the user to append items rather than add them at the current location.
• Give the user the ability to remove the item at the current index. This can be a little tricky if you remove the item at the end of the list so see if you can account for that.
• Only add words if they are not blank.
• Improve the appearance of the app.

Student Instructions

Free Response: Choosing Array or Variable

In general, when do you think you should store information in an array, and when should you use a variable?