15.6 Homework Assignment

Objective:

Students will create a JavaScript script that performs various operations on an array of numbers, including adding, removing, sorting, and reversing the array.

Task:

Create an HTML file (e.g., array_operations_homework.html) and write JavaScript code that performs the following operations on an array of numbers:
- Add: Add a new number to the array.
- Remove: Remove a number from the array.
- Sort: Sort the array in ascending order.
- Reverse: Reverse the order of the elements in the array.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Array Operations Homework</title>
</head>
<body>
  <h1>Check the Console for Array Outputs</h1>

  <script>
    // Step 1: Create an array of numbers
    let numbers = [10, 5, 8, 3, 7];

    // Step 2: Add a number to the array using push()
    numbers.push(12);
    console.log("After adding 12: " + numbers);  // Outputs: [10, 5, 8, 3, 7, 12]

    // Step 3: Remove a number from the array using splice() (removes the second element)
    numbers.splice(1, 1);  // Removes number at index 1 (5)
    console.log("After removing the second number: " + numbers);  // Outputs: [10, 8, 3, 7, 12]

    // Step 4: Sort the array in ascending order using sort()
    numbers.sort((a, b) => a - b);  // Sorts in ascending order
    console.log("After sorting: " + numbers);  // Outputs: [3, 7, 8, 10, 12]

    // Step 5: Reverse the order of the array using reverse()
    numbers.reverse();
    console.log("After reversing: " + numbers);  // Outputs: [12, 10, 8, 7, 3]
  </script>
</body>
</html>

Instructions:

Create the Array:
- Start with an array of at least five numbers (e.g., [10, 5, 8, 3, 7]).
Add a Number:
- Use the push() method to add a new number to the end of the array (e.g., 12).
Remove a Number:
- Use splice() to remove a number from a specific position in the array (e.g., remove the number at index 1).
Sort the Array:
- Use the sort() method with a comparison function to sort the array in ascending order.
Reverse the Array:
- Use the reverse() method to reverse the order of the elements in the array.

Challenge:

Allow the User to Input a Number:
- Use prompt() to ask the user for a number to add to the array, and then perform the operations (add, remove, sort, and reverse) on the updated array.
Example:
```
let userNumber = parseInt(prompt("Enter a number to add to the array:"));
numbers.push(userNumber);
console.log("After adding user number: " + numbers);
```

Extra Challenge:

Write a function that finds the largest number in the array after performing the operations.

Example:

function findLargestNumber(arr) {
  return Math.max(...arr);
}

let largest = findLargestNumber(numbers);
console.log("The largest number is: " + largest);  // Outputs the largest number in the array

Homework Submission:

Save your HTML file and submit it to the instructor.
Ensure the script correctly performs all array operations (adding, removing, sorting, and reversing), and test the output using console.log().

Expected Outcome:

Students will:

Understand how to use array methods like push(), splice(), sort(), and reverse() to manipulate arrays.
Practice performing common operations on arrays, such as adding and removing elements, sorting in order, and reversing the array.
Explore how user input can dynamically modify arrays and challenge themselves by finding the largest number in an array.

Previous15.5 Array Best Practices (15 mins)NextLecture_16_DOM Manipulation

Last updated 1 year ago