Chủ đề nổi bật
03/08/2018, 10:03

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

Ở bài trước mình đã giới thiệu qua về Object trong Javascript và có hướng dẫn các thao tác như tạo mới đối tuọng, lấy giá trị và gán giá trị đối ...

Ở bài trước mình đã giới thiệu qua về Object trong Javascript và có hướng dẫn các thao tác như tạo mới đối tuọng, lấy giá trị và gán giá trị đối tượng. Vậy trong bài này mình tiếp tục nói về đối tượng (Object) và chủ đề là các thao tác với đối tượng (Object) trong Javascript.

Và để rõ ràng hơn thì mình sẽ trình bày một ví dụ về xây dựng đối tượng SinhViên, thông qua đối tượng này sẽ thể hiện tất cả  các thao tác cần thiết trong một đối tượng. Và để dễ viết bài hơn thì mình sẽ gọi đối tượng là Object nhé các bạn.

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é.

XEM DEMO

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', "code24h.com@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();

2. Lời kết

Vậy là ta đã thực hành xong kỹ năng thao tác với Object trong Javascript. Bản thân mình thấy bài này khá hay và có độ khó tương đối cao, hay nói cách khác đây là kiến thức Javascript nâng cao rồi nên sẽ hơi khó hiểu nếu bạn chưa nắm vững các bài trước.

Ở phần sử dụng đối tượng ban đầu mình tính xây dựng một chương trình kết hợp với HTML luôn nhưng nghĩ lại sẽ tốn thời gian nên mình chỉ đưa ra cách sử dụng rất là đơn giản, vì vậy rất mong các bạn hiểu bài.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

Image Map trong JavaScript

Bạn có thể sử dụng JavaScript để tạo Image map ở Client-Side. Các Image map được kích hoạt bởi thuộc tính usemap cho thẻ <img /> và được định nghĩa bởi các thẻ mở rộng đặc biệt <map> và <area>. Hình ảnh mà tạo bản đồ đó được chèn vào trong trang bởi sử dụng phần tử ...

Tài liệu tham khảo & Framework cho Javascript

Dưới đây chúng tôi liệt kê tất cả các nguồn tài liệu hữu ích và Framework cho JavaScript. Bạn nên sử dụng chúng để thực hành cũng như hiểu sâu hơn những chủ đề đã được đề cập trong loạt bài này. Các JavaScript Framework hàng đầu: Follow fanpage của ...

Xử lý lỗi trong JavaScript

Có 3 kiểu lỗi trong chương trình: (a) lỗi cú pháp (Syntax Error), (b) lỗi trong khi chạy chương trình (Runtime Error), và (c) lỗi về tính logic của cấu trúc chương trình (Logical Error). Syntax Error Lỗi cú pháp (Syntax Error), cũng được gọi là parsing error, xảy ra tại thời gian biên dịch ...

Đa phương tiện (Multimedia) trong JavaScript

Đối tượng navigator trong JavaScript bao gồm một đối tượng con gọi là plugins . Đối tượng này là một mảng, với một cổng vào (entry) cho mỗi plug-in được cài đặt trên trình duyệt. Đối tượng navigator.plugins chỉ được hỗ trợ bởi Netscape, Firefox và Mozilla. Ví dụ Dưới đây là ví dụ minh ...

Các hàm có sẵn trong JavaScript

Đối tượng Number chỉ chứa các phương thức mặc định mà là một phần của sự định nghĩa của mỗi đối tượng. Phương thức Miêu tả constructor() Trả về hàm mà tạo sự instance của đối tượng này. Theo mặc định, nó là đối tượng Number. toExponential() Làm một số hiển thị ở dạng số mũ, ...

Debug trong JavaScript

Trong khi mã hóa chương trình, các nhà lập trình có thể tạo ra các lỗi. Một lỗi trong một chương trình hoặc một script được xem như là một bug . Tiến trình tìm kiếm và sửa các bug được gọi là dubugging và là một phần bình thường của tiến trình lập trình. Chương này giới thiệu một số công ...

Document Object Model (DOM) trong JavaScript

Mỗi trang web cư ngụ bên trong một cửa sổ trình duyệt mà có thể xem như là một đối tượng. Một đối tượng Document biểu diễn tài liệu HTML được hiển thị trong cửa sổ đó. Đối tượng Document có nhiều thuộc tính đa dạng như các đối tượng khác mà cho phép truy cập và chỉnh sửa nội dung tài liệu. ...

Đối tượng Boolean trong JavaScript

Miêu tả Đối tượng Boolean biểu diễn hai giá trị, hoặc "true" hoặc "false". Nếu tham số value bị bỏ qua hoặc là 0, -0, null, false, NaN , undefined, hoặc một chuỗi trống (""), đối tượng có một giá trị khởi tạo là false. Cú pháp Sử dụng cú pháp sau để tạo một đối tượng Boolean . ...

Đối tượng String trong JavaScript

Đối tượng String giúp bạn làm việc với một dãy các ký tự; nó giúp xử lý các kiểu dữ liệu chuỗi gốc trong JavaScript với một số phương thức giúp đỡ. Khi JavaScript tự động biến đổi giữa chuỗi gốc và các đối tượng String, bạn có thể gọi bất kỳ phương thức giúp đỡ nào của đối tượng String ...

Điều hướng trang (Redirect) trong JavaScript

Điều hướng lại trang là gì? Bạn có thể gặp tình huống khi bạn click vào một URL để tới trang X nhưng bạn được điều hướng tới trang Y. Nó xảy ra là do Page Redirection – Điều hướng lại trang . Khái niệm này khác với: JavaScript – Refresh trang. Có nhiều lý do khác nhau để tại sao bạn muốn ...