1.18 Skill builder: One dimensional arrays

Some array functions

Let's say your program has an array called colourArray with several elements, like this:

Index 0 1 2 3 4
Data Orange Yellow Green Blue Indigo

Find the length of an array

Say you need to find out how many colours are stored in colourArray. The easiest way to do this is by using the .length command:

var lengthOfColourArray = colourArray.length

This will set lengthOfColourArray to 5.

Add a new element to the END of an array

Perhaps you want to add "violet" to the end of colourArray. There are a couple of easy ways to do this:

  1. You can .push() "Violet" onto the end of colourArray, like this:

    colourArray.push("Violet");
     
  2. Or, you can do the exact thing, using .length:

    colourArray[colourArray.length] = "Violet";

After either of these two commands, colourArray now looks like this:

Index 0 1 2 3 4 5
Data Orange Yellow Green Blue Indigo Violet

For example:

Add a new element to the START of an array

Say you want to add the word "Red" to the front of colourArray. You can do this using .unshift():

colourArray.unshift("Red");

Now colourArray looks like this:

Index 0 1 2 3 4 5 6
Data Red Orange Yellow Green Blue Indigo Violet

For example:

Mystery code:

What do you think the following code does?

Changing things in the middle of a line with <span>

Often we want to insert answers into our HTML document. We create an element with an id, say, id="outputArea", and write inside it using document.getElementById("outputArea").innerHTML.

If we wanted an answer inside it's own block, we used:

If we wanted an answer inside a sentence, we put it inside a formatting tag, like:

But what if you want to insert information without changing the formatting? Then you use <span>:

Let's say I want to insert a list of the days of the week into my HTML document. I could use span in the middle of the elements like this:

That code will create this:

There are days in a week.

The days of the week are: , , , , , ,

And now if we now use Javascript to fill in the <span>s with array data:

We will get this:

There are 7 days in a week.

The days of the week are: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday

Joining arrays into strings with .join()

Let's say that you have the colours of the rainbow still in colourArray.

You can make a comma separated list of colours with the following code:

Now colourListString = "Red, Orange, Yellow, Green, Blue, Indigo, Violet".

Similarly:

Makes dayListString have a bizarre string like:
"SundayKittenMondayKittenTuesdayKittenWednesdayKittenThursdayKittenFridayKittenSaturday"

Saving your work

Download the template and rename it to your last name, such as "1.18S-OneDimensionalArrays-LastName.html".

The assignment

In this assignment you will add snippets of code to the template to correctly display lists of months, days of the week, and ordinal numbers.

Throughout the code there are comments that say "EDIT: ". Follow the instructions in the comments using the examples from this page to make the code operate properly.

Here is what your results should look like.