JavaScript Arrays

Part 1: Declaring, Initializing and Displaying an Array

In a script in the head section of the page, declare an array named myFamily using the Array using the new keyword. Initialize the array with the first names of your family members by passing in the names as strings to the constructor function.

In the body section, use a for loop to display the names stored in myFamily to the document.

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

Rewrite the previous part, except instead of initializing the array in the constructor function, use the constructor function 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, use the length property of the array to control the number of iterations of the for 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: Sorting an Array Alphabetically

Rewrite the previous part, using the sort() method of arrays to sort the names prior to displaying them. View the output of the page to verify that they are sorted correctly.

Part 4: Array Methods: concat(), join(), slice(), splice()

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 in parentheses, write JavaScript statements that perform the following tasks:

• Combine both of the arrays into a third array (concat()).
• Assign a string containing all of the values in the first array, separated by commas, to a separate string variable (join()).
• Assign the 3^rd and 4^th elements of the second array to a third array (slice()).
• Replace the 2^nd and 3^rd elements of the first array with the values 100 and 101 (splice()).

Display the results of each of these tasks to the document to verify that they were performed correctly.

Part 5: Displaying the Contents of an Array Using an HTML List

In the head section of a page, declare an array and initialize it with the names of cities that you are familiar with. In the body section, use a for loop to display the contents of the array as elements within an unordered list.

Part 6: Creating & Using an associative array

In the head section of a page, declare an array and initialize it with the names of fictitious students & their corresponding grades.  You want to set up the array so that the 'index' value is the name of the student, and the value stored there is their GPA.  You should allow the user to add students & their grades (you can do this by popping up a prompt box for the student's name, then another box for their grade - make it clear that the program will repeatedly do this until the user leaves the 'name' prompt blank).

You should then document.write everything in the array out to the document.  Make sure to include both the index (the students' names) as well as the grades.

Part 7: "BattleShip" clone

There's a board game that's available called "Battleship", in which you & your opponent attempt to sink each other's ships by shooting at locations on the other person's board.  The board is hidden from your opponent, thus making the game challenging, fun, and yet kinda random.  An example of a 'board' is shown below, where the shaded-in ovals represent ships.

For this exercise, you should create a prompt-drive 'game' in JavaScript that mimics part of the real Battleship game.  Your program will start off by populating a multidimensional JavaScript array with numbers, in order to match the above picture.  You can use the number "1" to represent a square that has nothing in it (like (0,0)).  Use the number 2 to indicate that the space is occupied by a ship, but has not yet been shot (such as (3, 0), or (3,1) at the start of the game).  Once the player has successfully hit a ship, remember that by changing the number to 3.

The game should proceed by asking the user for the X (horizontal) number, then Y (vertical number), and then alert the user to whether or not the player successfully hit one of the ships.  The player should be given 10 shots, after which the game is over.  If all the of the squares containing the ships are hit, then the player wins.  Otherwise, the player loses. alert them to whether they won or lost.

(Yes, this is a crude, non-randomized, 1-player version of the game :) )

For an additional challenge, you keep track of the best scores of players.  When the game is done, ask the player for their name, and put their name & score into an array, which is sorted by score.  Their 'score' is the number of turns it took them to sink all opposing ships, where lower is better.  You may be able to use the 'sort' method (perhaps with a custom sort function), or you might find another way to keep the array sorted.  Once the game is done, reset the board, and allow them to play again.