1. Thao tác với đối tượng (Object) trong Javascript

Đề bài: Viết chương trình quản lý sinh viên gồm các thao tác chính như sau:

  • Xem danh sách sinh viên
  • Thêm sinh viên
  • Xóa sinh viên khỏi danh sách
  • Sửa thông tin sinh viên

Với mỗi sinh viên cần lưu trữ các thông tin sau:

  • Mã sinh viên
  • Tên sinh viên
  • Email

Hướng dẫn: Trước tiên ta cần xác định danh sách các thuộc tính của đối tượng và đó chính là các thông tin lưu trữ của sinh viên. Ta cần lưu trữ danh sách sinh viên, vì vậy ta cũng cần có thêm một mảng lưu trữ danh sách sinh viên. Từ đó có thể xác định cấu trúc của đối tượng như sau.

var Student = {
    data : [],
    viewStudent : function(){
        // Xem danh sách sinh viên
    },
    addStudent : function(id, name, email){
        // Thêm sinh viên mới
    },
    removeStudent : function(id){
        // Xóa sinh viên
    },
    editStudent : function(id, name, email){
        // Sửa sinh viên
    }
};

Nhiệm vụ bây giờ là viết chi tiết vào các hàm cụ thể.

Hàm xem đối tượng sinh viên

Hàm này khá đơn giản vì ta chỉ lặp qua đối tượng và dùng hàm document.write để hiển thị thông tin.

viewStudent : function(){
    // Lấy danh sách sinh viên
    var listStudent = this.data;

    // Lặp và hiển thị sinh viên
    for(var i = 0; i < listStudent; i++){
        document.write("<div>" + listStudent[i].id + "|" + listStudent[i].name + "|" + listStudent[i].email + "</div>");
    }
}

Hàm thêm đối tượng sinh viên

Để thêm một đối tượng chúng ta cần truyền vào ba tham số như yêu cầu đề bài.

addStudent : function(id, name, email){
    // Tạo thông tin sinh viên
    var item = {
        id : id,
        name : name,
        email : email
    };

    //Thêm sinh viên
    this.data.push(item);
}

Hàm xóa đối tượng sinh viên

Để xóa sinh viên chúng ta cần biết id của sinh viên đó, đồng thời sử dụng hàm splice để xóa phần tử của mảng, nếu chưa biết thì bạn có thể xem bài các hàm xử lý mảng trong Javascript.

removeStudent : function(id){
    // Lặp qua sinh viên để tìm kiếm và xóa
    for(var i = 0; i < this.data.length; i++){
        if (this.data[i].id === id) { // nếu là sinh viên cần xóa
            this.data.splice(i, 1); // thì xóa
        }
    }
},

Hàm sửa đối tượng sinh viên

Việc sửa sinh viên cũng tương tự như việc thêm sinh viên, nghĩa là chúng ta cần truyền vào ba tham số như yêu cầu đề bài, sau đó dựa vào id truyền vào để tìm sinh viên cần sửa.

editStudent : function(id, name, email){
    // Tìm sinh viên cần edit
    for(var i = 0; i < this.data.length; i++){
        // nếu là sinh viên cần edit thì thực hiện edit
        if (this.data[i].id === id) { 
            this.data[i].name = name;
            this.data[i].email = email;
        }
    }
}

Như vậy việc xử lý các phương thức trong đối tượng phụ thuộc vào từng bài toán cụ thể và có một điều chắc chắn rằng chúng có liên quan tới nhau. Và cuối cùng đây là toàn bộ đối tượng của chúng ta.

Toàn bộ code cho đối tượng sinh viên

var Student = {
    data : [],
    viewStudent : function(){
        // Lấy danh sách sinh viên
        var listStudent = this.data;

        // Lặp và hiển thị sinh viên
        for(var i = 0; i < listStudent.length; i++){
            document.write("<div>" + listStudent[i].id + "|" + listStudent[i].name + "|" + listStudent[i].email + "</div>");
        }
    },
    addStudent : function(id, name, email){
        // Tạo thông tin sinh viên
        var item = {
            id : id,
            name : name,
            email : email
        };

        //Thêm sinh viên
        this.data.push(item);
    },
    removeStudent : function(id){
        // Lặp qua sinh viên để tìm kiếm và xóa
        for(var i = 0; i < this.data.length; i++){
            if (this.data[i].id === id) { // nếu là sinh viên cần xóa
                this.data.splice(i, 1); // thì xóa
            }
        }
    },
    editStudent : function(id, name, email){
        // Tìm sinh viên cần edit
        for(var i = 0; i < this.data.length; i++){
            // nếu là sinh viên cần edit thì thực hiện edit
            if (this.data[i].id === id) { 
                this.data[i].name = name;
                this.data[i].email = email;
            }
        }
    }
};

Sử dụng đối tượng sinh viên

Chúng ta thực hiện một số thao tác để bạn nắm rõ hơn nhé.

document.write('<h4>Danh sách sinh viên ban đầu</h4>');
Student.viewStudent();

document.write('<h4>Danh sách sinh viên sau khi thêm hai sinh viên</h4>');
Student.addStudent("sv001", 'Nguyễn Văn Cường', "thehalfheart@gmail.com");
Student.addStudent("sv002", 'Vũ Thị Thu Tình', "freetuts.net@gmail.com");
Student.viewStudent();

document.write('<h4>Danh sách sinh viên sau khi xóa một sinh viên</h4>');
Student.removeStudent('sv001');
Student.viewStudent();

document.write('<h4>Danh sách sinh viên sau khi sửa thông tin</h4>');
Student.editStudent('sv002', "Tên Sinh Viên Mới", "mrcuong.winter@gmail.com");
Student.viewStudent();