In Class Exercises - Numeric ArraysNote: Please keep the programs that you create today, in case you have a question about your grades for the ICEs at the end of the quarter. When you're working with a partner, each person should save their own, individual copy.
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 4.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 4.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:
- 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 single string variable (join()).
- Extract the 3rd and 4th elements of the second array, and put those values into to a third array (slice()).
- Replace the 2nd and 3rd 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. 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: Array Of Previous Guesses (Optional)
(If you have completed the guessing game exercise from a prior lesson then please continue to work off of that. Otherwise, please create a new page with just a textbox, a button, and an HTML DIV element that you can use for displaying results on the webpage).
Imagine that you're creating a guessing game, wherein the program chooses a secret number and the player then tries to guess what that number is. For this exercise you can assume that all of the actual 'guessing' has been handled by code elsewhere (i.e., checking the player's guess against the secret number, telling the user if they're too high or too low, etc, etc, has all been done elsewhere).
What you need to do for this exercise: When the user types in a number (and then clicks the button), you should first parse that number (so that you know that it's a number), then put that number in an array. Use a loop to accumulate all the values in the array, and display the values nicely on the web page (you should at least put each number on it's own line - putting each number into an unordered list ( <UL> ) element ( <LI> ) would be even better).
Once you've got that done - add a bit of logic so that your page will FIRST check if the new number is in the array, and if so pop up an alert telling the user that hte new number duplicates an older one.
Part 6: 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.
Part 6: Sorting an Array Using a Custom Sort Order
Create a page that contains an array, and store several (5+) different numbers within it. Make sure that the numbers are stored in a jumbled, random order. Something like [10, 1, 11, -2, -3, 22, 8] would be great.
Next, create a custom sorting method to reorder the numbers, making sure to treat the array items as numbers so that they sort properly. Print out the contents of the array to the web page, then sort the array, then display the now-sorted contents of the array.
Part 8: Custom Sort Order (Very Optional)
Building on the code you wrote for the prior exercise, create a function that will sort Car objects. The cars will be sorted alphabetically ('a' before 'b', etc) in a case-sensitive manner, and the cars should be sorted first by model, then by make, and then finally by year (the newest model should go first)