Arrays


Slides

Slides Here!


Additional Info


In Class Exercises (ICEs)

Part 1: Declaring, Initializing and Displaying an Array

Create a new page, along with a JavaScript file that the page uses.  Declare an array named myFamily using the new Array syntax. Initialize the array with the first names of your family members by passing in the names as strings to the constructor function.

When the user clicks on a button, use a for loop to display the names stored in myFamily on the page somewhere.

Part 2: Declaring an Empty Array and Assigning Elements to it

Copy the previous part, so that you can keep your work for the prior part AND have a new copy to do this exercise on.

Instead of initializing the array using the Array() constructor function, use the constructor syntax (the one that uses the square brackets) to declare an empty array. Initialize the array by assigning the names of your family members to individual array elements starting with element 0.

In the loop that displays the contents of the array, make sure that you use the length property of the array to figure out how many times to iterate. From this point forwards, you should always use the length property (rather than a ‘hard-coded’ number) to figure out how many times to loop.

Then, assign more names to the array and verify that they're all being displayed by the loop without having to alter any of the loop control statements.

Part 3: Making Use of built-in JavaScript methods: Array Methods: concat(), join(), slice()

Part 3.1:  First, you’ll need to find information on each of these methods.  Probably the easiest way to do this is to use a search engine (like Google), and type in something like “javascript concat”.  Briefly look over the first couple of results, and see which one(s) give you a good description of what the function does, and how to use it (including code samples, ideally).  Once you’ve found that, you should go to the next part.

Part 3.2: In the head section of a page, declare two arrays of numbers. Initialize each of them with a random selection of about 5 values.

Using the predefined array methods listed above (concat, join, etc), write JavaScript statements that perform the following tasks:

Display the results of each of these tasks to the document to verify that they were performed correctly.   Make sure to use a loop (for loop or while loop – your choice) when displaying the results

Part 4: Making Use of built-in JavaScript methods: Independent Investigation

You should look online for a page that lists the methods that the JavaScript Array provides for you (several such pages are provided on the course website).  Skim the list and see if anything looks interesting, then pick a couple of functions to investigate in greater detail.

Make sure that you actually use the function in an actual web page - adding this function to the page you built for the prior exercise would be a good way to go.

Part 5: Sorting an Array of strings using JavaScript's built-in Sort function

Create a page that contains an array, and store several (5+) different strings within it.  Make sure that the strings are stored in a jumbled, random order.  Something like ["Hotel", "Alpha", "Zebra", "Tagno", "Whiskey", "Foxtrot", "Echo"] would be great.  Next, use the built-in sort method to reorder the numbers,.  Print out the contents of the array to the web page, then sort the array, then display the now-sorted contents of the array.

Next, add a textbox and button to the page. When the user clicks on the button a click event handler should add whatever's in the textbox to an array (the array should start out empty).  You should then display the contents of the array on the page, but  make sure to display all the elements of the array in sorted order on the page.