15.4 Programming Activity (20 mins)
Task:
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.
Challenge: Use
forEach()to iterate through the array and print each name with specific formatting (e.g., adding a serial number before each name).
Step-by-Step Activity:
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.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>
Explanation:
Adding a Student:
The
addStudent()function takes a name as a parameter and uses thepush()method to add the name to the array.
Removing a Student:
The
removeStudent()function usesindexOf()to find the index of the student to be removed, and if found, usessplice()to remove the student from the array.
Sorting the Student Names:
The
sortStudents()function sorts the names in the array alphabetically using thesort()method.
Iterating with
forEach():The script uses
forEach()to print each student's name in a formatted list with a serial number.
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.
Challenge:
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:
function addMultipleStudents(namesArray) { students = students.concat(namesArray); // Combine the arrays console.log("After adding students: " + students); } addMultipleStudents(["Eve", "Frank"]); // Adds multiple studentsExtra Challenge:
Ask the user for input using
prompt()to add or remove a student dynamically and display the updated array.
Example:
let newStudent = prompt("Enter a new student name to add:"); addStudent(newStudent); // Adds the student from user input
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:
// Challenge code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Student Names Array</title>
<style>
#Results {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Student Names Array</h1>
<div id="Results">Click "Next" to see the results.</div>
<button id="nextButton">Next</button>
<script>
// Create an initial array of student names
let students = ["Alice", "Bob", "Charlie", "Akyl", "Adilet", "Asan"];
let results = [];
// Function to add a student to the array
function addStudent(name) {
students.push(name);
results.push("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
results.push("After removing " + name + ": " + students);
} else {
results.push(name + " not found in the array.");
}
}
// Function to sort the array of students alphabetically
function sortStudents() {
students.sort();
results.push("After sorting: " + students);
}
// Call functions to manipulate the array
let newStudent = prompt("Enter a new student name to add:");
addStudent(newStudent); // Adds the student from user input
newStudent = prompt("Enter a student name to remove:");
removeStudent(newStudent); // Removes the student from user input
sortStudents(); // Sort the students array
// Challenge: Use forEach() to iterate through the array and print names with formatting
results.push("List of students:");
students.forEach(function (name, index) {
results.push(index + 1 + ". " + name); // Print with serial number
});
let currentIndex = 0;
const resultDiv = document.getElementById("Results");
const nextButton = document.getElementById("nextButton");
nextButton.addEventListener("click", function () {
if (currentIndex < results.length) {
resultDiv.innerHTML += "<br>" + results[currentIndex];
currentIndex++;
} else {
resultDiv.innerHTML += "<br>All results displayed.";
nextButton.disabled = true;
}
});
</script>
</body>
</html>Activity Follow-up Questions:
How does
push()work to add a new element to an array?What does
indexOf()do when searching for an element in the array?How does
forEach()differ from aforloop when iterating over an array?
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.
Last updated