search

15.4 Programming Activity (20 mins)

Task:

  1. Create an array of student names and write a script that allows users to:

    • Add a student name to the array.

    • Remove a student name from the array.

    • Sort the names in alphabetical order.

  2. Challenge: Use forEach() to iterate through the array and print each name with specific formatting (e.g., adding a serial number before each name).

hashtag
Step-by-Step Activity:

  1. Create an HTML file (e.g., student_names.html) and write JavaScript code that allows users to manipulate the student names array by adding, removing, and sorting names.

  2. Example Code:

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

  <script>
    // Create an initial array of student names
    let students = ["Alice", "Bob", "Charlie", "Akyl", "Adilet", "Asan"];

    // Function to add a student to the array
    function addStudent(name) {
      students.push(name);
      console.log("After adding " + name + ": " + students);
    }

    // Function to remove a student from the array
    function removeStudent(name) {
      let index = students.indexOf(name);
      if (index !== -1) {
        students.splice(index, 1);  // Remove student if found
        console.log("After removing " + name + ": " + students);
      } else {
        console.log(name + " not found in the array.");
      }
    }

    // Function to sort the array of students alphabetically
    function sortStudents() {
      students.sort();
      console.log("After sorting: " + students);
    }

    // Call functions to manipulate the array
    //---------------------------------------------
    //modify the code for challenge 1 & 2
    addStudent("Aisulu");  // Add a student
    removeStudent("Bob");  // Remove a student
    //---------------------------------------------
    sortStudents();  // Sort the students array

    // Challenge: Use forEach() to iterate through the array and print names with formatting
    console.log("List of students:");
    students.forEach(function(name, index) {
      console.log((index + 1) + ". " + name);  // Print with serial number
    });
  </script>
</body>
</html>

hashtag
Explanation:

  • Adding a Student:

    • The addStudent() function takes a name as a parameter and uses the push() method to add the name to the array.

  • Removing a Student:

    • The removeStudent() function uses indexOf() to find the index of the student to be removed, and if found, uses splice() to remove the student from the array.

  • Sorting the Student Names:

    • The sortStudents() function sorts the names in the array alphabetically using the sort() method.

  • Iterating with forEach():

    • The script uses forEach() to print each student's name in a formatted list with a serial number.

hashtag
Run the file in a browser:

  • Open the HTML file in a browser.

  • Use Developer Tools (F12 or right-click and select Inspect > Console) to view the outputs of the student array manipulations.

hashtag
Challenge:

  1. Modify the Code:

    • Modify the script to allow users to add multiple student names at once by passing an array of names to the addStudent() function.

    Example:

  2. Extra Challenge:

    • Ask the user for input using prompt() to add or remove a student dynamically and display the updated array.

    Example:

  1. Extra Challenge:

  • Modify the code to show all the results in <div id="Results" > in index.html s and add a "Next" button to carry out the step-by-step processing of the console.log output. Here's the modified code:

hashtag
Activity Follow-up Questions:

  1. How does push() work to add a new element to an array?

  2. What does indexOf() do when searching for an element in the array?

  3. How does forEach() differ from a for loop when iterating over an array?

hashtag
Expected Outcome:

Students will:

  • Practice manipulating arrays by adding, removing, and sorting elements using JavaScript array methods.

  • Learn how to use forEach() to iterate through arrays and apply specific formatting to each element.

  • Understand how to dynamically modify arrays based on user input or program logic.

Previous15.3 Advanced Array Methods (15 mins)Next15.5 Array Best Practices (15 mins)

Last updated