Introduction
Managing student data is a common task in educational web applications, where efficient handling of records such as adding, modifying, deleting, and displaying student information is essential. This article presents a pure JavaScript-based interface that enables these operations directly within the browser without requiring any server-side processing. The interface provides several user interaction options, including adding a new student record, deleting an existing one, modifying details, viewing all records, or searching for a particular student based on their roll number. These functionalities are triggered using clickable hypertext links and are managed entirely through JavaScript functions and dialog boxes. To implement this, an array of Student objects is maintained, along with a counter to keep track of the total number of active records. For displaying the student information, the window.open() and window.close() methods are used to render data in new popup windows, giving users a clear and separate view of the requested details. Additionally, the alert() function is utilized to handle and communicate any validation errors or missing records, ensuring that users receive immediate feedback if an operation fails due to incorrect input or if the required data does not exist in the system.
Object‑Oriented Structure & Validation
The application is designed using an object-oriented structure, centered around a Student object that encapsulates both the data attributes and behavioral methods necessary for managing student records. Two primary methods are defined within this object: get_info() and show_info(). The get_info() method is responsible for prompting the user to input student details while ensuring that the data entered meets predefined validation rules. These include checking that the name is not left blank, the age is within the acceptable range of 17 to 20 years, and that the marks in three subjects—m1, m2, and m3—are all between 0 and 100. The show_info() method allows for the display of an individual student's record in a separate browser window using JavaScript’s window.open() function. This system supports key functionalities such as adding, modifying, and deleting student records, as well as viewing a specific record or listing all existing records that have not been marked for deletion.
Student Object Properties & Calculations
rno – Roll Number
name – Student Name
age – Age
m1 – English Marks
m2 – Science Marks
m3 – History Marks
sum – Total Marks
avg – Average Marks
grade – A / B / C / D
del_flag – Deletion flag (0 = visible, 1 = deleted)
Calculation Logic
sum = m1 + m2 + m3
avg = sum / 3
if (avg > 80) grade = 'A';
else if (avg > 65) grade = 'B';
else if (avg > 50) grade = 'C';
else grade = 'D';
Complete JavaScript Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student Record Management</title>
</head>
<body>
<h2>Student Record Management (Client-Side Only)</h2>
<p>
<a href="#" onclick="addRecord()">Add Record</a> |
<a href="#" onclick="modifyRecord()">Modify Record</a> |
<a href="#" onclick="deleteRecord()">Delete Record</a> |
<a href="#" onclick="showAllRecords()">Show All Records</a> |
<a href="#" onclick="showParticularRecord()">Show Particular Record</a>
</p>
<script>
let students = [];
let count = 0;
function Student() {
this.rno = prompt("Enter Roll Number");
this.name = prompt("Enter Name");
this.age = parseInt(prompt("Enter Age"));
this.m1 = parseFloat(prompt("Enter English Marks"));
this.m2 = parseFloat(prompt("Enter Science Marks"));
this.m3 = parseFloat(prompt("Enter History Marks"));
this.del_flag = 0;
if (!this.name || this.age < 17 || this.age > 20 ||
this.m1 < 0 || this.m1 > 100 ||
this.m2 < 0 || this.m2 > 100 ||
this.m3 < 0 || this.m3 > 100) {
alert("Invalid Input!");
return null;
}
this.sum = this.m1 + this.m2 + this.m3;
this.avg = this.sum / 3;
if (this.avg > 80) this.grade = "A";
else if (this.avg > 65) this.grade = "B";
else if (this.avg > 50) this.grade = "C";
else this.grade = "D";
this.show_info = function () {
let win = window.open("", "_blank");
win.document.write(`
<h3>Student Record</h3>
<p><b>Roll No:</b> ${this.rno}<br>
<b>Name:</b> ${this.name}<br>
<b>Age:</b> ${this.age}<br>
<b>Marks:</b> ${this.m1}, ${this.m2}, ${this.m3}<br>
<b>Total:</b> ${this.sum}<br>
<b>Average:</b> ${this.avg.toFixed(2)}<br>
<b>Grade:</b> ${this.grade}</p>
`);
};
}
function addRecord() {
let s = new Student();
if (s == null) return;
for (let i = 0; i < students.length; i++) {
if (students[i].rno == s.rno) {
alert("Duplicate Roll Number");
return;
}
}
students[count++] = s;
}
function showAllRecords() {
let win = window.open("", "_blank");
win.document.write("<h2>All Student Records</h2>");
for (let i = 0; i < students.length; i++) {
if (students[i].del_flag == 0 && typeof students[i].show_info === 'function') {
win.document.write("<hr>");
students[i].show_info();
}
}
}
function showParticularRecord() {
let r = prompt("Enter Roll Number to Search");
for (let i = 0; i < students.length; i++) {
if (students[i].rno == r && students[i].del_flag == 0) {
students[i].show_info();
return;
}
}
alert("Record not found!");
}
function deleteRecord() {
let r = prompt("Enter Roll Number to Delete");
for (let i = 0; i < students.length; i++) {
if (students[i].rno == r && students[i].del_flag == 0) {
students[i].del_flag = 1;
alert("Record deleted.");
return;
}
}
alert("Record not found!");
}
function modifyRecord() {
let r = prompt("Enter Roll Number to Modify");
for (let i = 0; i < students.length; i++) {
if (students[i].rno == r && students[i].del_flag == 0) {
let updated = new Student();
if (updated != null) {
students[i] = updated;
alert("Record modified.");
}
return;
}
}
alert("Record not found!");
}
</script>
</body>
</html>
Output
![]()
This project implements a client-side Student Record Management System using only HTML and JavaScript, without any backend or database. The interface provides five key operations—Add Record, Modify Record, Delete Record, Show All Records, and Show Particular Record—using anchor tags as interactive links. The entire application runs in the browser, where student data is managed through an array of `Student` objects. Each student record captures details like Roll Number, Name, Age, and Marks in three subjects. Upon data entry, validations are performed to ensure the name is not empty, age is between 17 to 20, and marks range between 0 and 100. Based on the average, a grade (A, B, C, or D) is calculated. Records are stored in memory, and the `show_info()` method dynamically opens a new window to display the student’s full details. To prevent runtime errors, input validations are strictly enforced, and null objects are excluded from the array. The application ensures proper management using logical deletion (`del_flag`) and avoids duplicates by checking Roll Numbers. This self-contained tool serves as a fundamental example of using JavaScript’s object-oriented features and DOM interaction to build interactive educational utilities.
Summary
In summary, this Student Record Management System demonstrates how powerful and interactive applications can be built using pure client-side technologies like HTML and JavaScript, without the need for external databases or servers. By utilizing object-oriented programming principles, the system efficiently handles key operations such as adding, modifying, deleting, and displaying student records within the browser environment. The use of input validation ensures data integrity, while dynamic windows and real-time feedback through alerts enhance the user experience. Though simple in design, this project lays a strong foundation for understanding JavaScript's real-world utility in managing data and creating responsive user interfaces. It can further be extended into a full-stack application using PHP, MySQL, or other modern frameworks, but even in its current form, it provides a solid example of practical problem-solving using core web technologies.