Learn Arrays - Advanced

Getting Started Arrays

An array is a variable.
An array is a variable that can store a whole heap of values.

For example I could create an array called firstNames

It could store all the names: Simon, Harry, Mary, Amy, Steve

It would look like this in javaScript:
firstNames=["Simon", "Harry", "Mary", "Amy", "Steve"];

This works similar to post boxes or pigeon holes.

Each entry is given a number

Simon's number is 0, Mary's Number is 2

If I wanted to alert Stevens number I would write:
alert(firstNames[4]);

Task: Read from the Array
1.) Create an array called lastNames to store these last names in this order:
Sutherland, Tairea, Jorgensen, Bell, Tyler, Herring, Revill
2.) Create a series of alerts that calls the names in this order:
Bell, Herring, Jorgensen, Revill, Sutherland, Tairea, Tyler

Hint Arrays can be created to look like this also
firstNames[
  "Simon",
  "Peter",
  "Matthew",
];
Extra for Experts:

Add your last name onto the array by using this code
lastNames.push("YourLastName");

Display it last in the series of alerts.

Brief: Games

Create an array with 5 games in a random order
List them in order of worst to best.

Arrays and For Loops

For Loops and Arrays are the friends.

In fact they are best buddies.

We can cycle through an array using the i variable.

Think about it, a for loop that starts at 0 and ends at 4 can be used to go through an array with 5 entries

Task: Create an array of fruit and make your program alert all of them.

1.) Create an array with 5 different fruit in it. Call it fruits.
2.) Enter this command and see what happens:
alert(fruits.length);
3.) Using the fruits.length and i as your token, create a for loop that goes through the array and alerts each fruit.

Extra for experts: Ensure that a banana is one of the fruits. Use an if statement that makes sure banana's are not alerted.

Super Extra Deluxe for Deluxe Experts: Try the .pop or .shift to see what happens to the list.
Hint: Using the .length command in a for loop is known as a derived value and is important for an excellence grade.

This means that you can add any number of entries in and the for loop will still go through all of them, this is called flexibility.

Brief: We don't like Steve

1.) Create a webpage with a button that says "try to get into the club"
2.) Create an array with a list of 10 names of people. Ensure Steve is entered 3 times
3.) For each person entering the club let them in
4.) If Steve's name comes up then tell him he is not allowed in the club.

Creating a pizza order App

We are going to create a Pizza order app using an array,

But first you need to create the interface that is on the right.

It has these specifications:
  • Drop down list with 4 pizza types - W3 Schools Link
  • Radio Buttons - W3 School Link
  • 3 buttons for add, remove last, remove specific
  • When you click add it needs to add the type and size, just like the app on the right.
Hint: Try to do it yourself, but you can inspect the element if stuck
Hint 2: You will need to assign ID's to the radio buttons and select tags.

Pizza Orders

Pizza Type:
Small Large

Shopping Cart

Empty

Pushing

We are now going to start storing and pushing the pizzas in two arrays
We are going to use the push command
Task: Store info in an array

1.) Create two empty arrays, pizzas and prices
2.) Create two prices constants for small and large pizzas
(variables that don't change are called constants)
3.) When the addtoOrder() button is clicked push the type of pizza and the price of the pizza into their respective arrays.
4.) Test this by making the first entry of the array display (pizzas[0] and prices[0])

Listing the pizzas - Function

Make a function that will use a for loop to go through all the pizzas and prices and then list them.

Hint: Use a combination of the code for arrays and for loops and this:

Brief: Survey says "Yes"

Create a new HTML Document
Create a form to collect a First  Name, Last Name and Age.
Add a check box as to whether they like Raisins.
Store each of these pieces of information in a separate array.
Create a button to push the information into the arrays and then list that information.

Popping and Shifting

Task 1: Remove the last pizza from the list.
1.) Link the "Remove Last" button to a removeLast function
2.) Use the .pop() command on both arrays e.g. pizzas.pop();
3.) Add the relist function
4.) Add an if statement to the relist function so that if the array length is 0, then the cart will say empty.

Task 2: Remove the first entry
1.) Create a new button called remove first
2.) Repeat the steps for the previous task but use .shift();

Splicing

Splicing allows us to remove a specific entry from array and replace it if you want to.

First thing first lets inform the user of what position in the array each item is.

Task: Update the relist so that it looks something like this:
(you will need to use i).
Task 2: Prompt the user with a prompt that looks like this:
Task 3: Record the response and remove the record from pizza and price, then run the relist function.

Should look like this:
pizzas.splice(position, 0);

Brief: Survey says yes continued....

Add the splice, pop and shift buttons to the original survey app.

Button for clearing an individual entry - Excellence

nWe are going to create a remove button for the individual records,

So the the user can simply click on the result they want to remove.

Here are the hints on how to do this.

Hint 1:  Create a button for each entry
Add "<button> Remove </button>" to the relist function.

Hint 2: Add an onclick function that looks like this
onclick=removeEntry()

Hint 3: Create a function that splices an entry based on a parameter
function removeEntry(pos) {

}

Final Hint:  Find a way using the i variable in the relist function to make it so that the parameter being passed through is the array number

Brief: Remove for survey

Add the remove button next to each entry in the survey

Working out a Total

Task: Create the code to work out a total.
1.) Create an array with 7 numbers in it e.g. [3,4,5,6,3,22,4]
2.) Create a variable called total set it to 0
3.) Create a for loop to go through the array
4.) Each time the loop runs add the array entry to the total.

Brief: You give me the Money

Create an array with 5 different numbers inside of it.
Using a for loop add all the numbers together to get a total.
Display the total as a dollar value.

Final Challenge - Final Order

Task: Total the cost of the individual pizzas.

You will want to create another function that goes through the price list and adds the amounts together.

Then add it to the relist function.

Add commenting and get the teacher to check over it.

Congratulations: If you can do this you are ready for the year 12 assessment.

Extras: Add a global variable for GST, display the GST and add it to the total.

Pizza Orders

Pizza Type:
Small Large

Shopping Cart

Empty