Lập trình hướng đối tượng (OOP) và DOM là những cách thức (kĩ thuật) lập trình đang dần trở nên phổ biến rộng rãi hơn, và ngôn ngữ JavaScript cũng đã hỗ trợ hướng đối tượng khá mạnh (mặc dù chưa được xem là hướng đối tượng chính thống).

Hiển nhiên jsB@nk cũng không muốn đứng ngoài xu thế này, do đó bắt đầu từ bài viết này, jsB@nk sẽ cố gắng giới thiệu đến bạn các ý tưởng, ví dụ mẫu lập trình JavaScript hướng đối tượng thường được sử dụng rộng rãi.

Đây là ví dụ mẫu JavaScript OOP đầu tiên từ hoạt động này, tuy chủ đề không mới - tạo các đối tượng chấp nhận dữ liệu người dùng - nhưng được thực hiện với các kĩ thuật mới, vui lòng vào ví dụ mẫu để xem thêm.

Tải một trang web có cài đặt đoạn mã JavaScript này thì một khung nhập liệu định sẵn sẽ hiển thị ngày tháng hiện hành - đây là ý tưởng của tác giả. Một ý tưởng khá hữu ích trong vài trường hợp như bạn muốn người dùng phải nhập vào ngày tháng hiện tại như hóa đơn, lịch gặp mặt, lịch hẹn ...

Thỉnh thoảng, trong các đoạn văn dài (thường là tiểu thuyết và truyện chữ) được thể hiện trên web, chúng ta cần tạo sự dễ dàng cho người đọc để theo dõi các thông tin. Chúng ta có thể dùng nhiều cách thức khác nhau như tô sáng đoạn hiện tại khi rê chuột đến, ...

Và hôm nay, jsB@nk xin giới thiệu với bạn thêm một sáng kiến nữa: đánh dấu tự động các đoạn thông tin với các dải màu (màu nền). Với đoạn mã này, chúng ta sẽ dễ dàng thực hiện được, vui lòng vào trang ví dụ JavaScript mẫu để xem.

Hãy sử dụng mã nguồn JavaScript này để thay thế các nút nhấn đơn điệu mặc định của trình duyệt bằng những nút nhấn tuyệt đẹp đầy màu sắc. Hiệu ứng cực dễ để chỉnh sửa và sử dụng theo nhu cầu của bạn. Hãy tải toàn bộ gói mã nguồn thông qua liên kết bên dưới và bắt đầu trang trí.

Dùng đoạn mã JavaScript này để thêm một bộ đếm hạn chế số lượng kí tự người dùng được nhập vào trong các khung nhập liệu trên trang web của bạn. Chỉ cần khai báo số lượng kí tự cần hạn chế, và đoạn mã sẽ xử lý phần còn lại, đoạn mã rất dễ để sử dụng và chỉnh sửa phù hợp nhu cầu riêng của bạn.

Hiệu ứng JavaScript này cho phép người dùng có thể thực hiện kéo thả các ô nội dung của một bảng biểu trên trang web. Với các bảng có số lượng nội dung lớn thì tính năng trượt tự động sẽ được bật. Và bạn vẫn có thể thiết lập một ô nào đó không được phép kéo thả bằng cách gán một className="forbid".

Đây là phiên bản nâng cấp của Chọn thông tin muốn xem, thêm tính năng hiển thị hình ảnh cho mỗi mục chọn khi người dùng nhấn vào các nút radio.

Bạn có thể dùng đoạn mã JavaScript này nếu cần tiết kiệm không gian trên các trang web. Mỗi khi người dùng nhấn chọn các nút radio, thông tin cần thiết dành cho mỗi nút sẽ được hiển thị. Một đoạn mã đơn giản nhưng hữu ích.

Bạn có thể xem thêm Chọn thông tin muốn xem dùng ảnh

Thêm một lựa chọn nữa dành cho bạn với hiệu ứng tạo các danh sách chọn chứa các giá trị liên quan nhau; chọn một giá trị trong danh sách chọn đầu thì danh sách chọn sau sẽ xuất hiện các giá trị tương ứng.

Hiệu ứng này có giải thích rõ ràng và đầy đủ trong mã nguồn, các xử lí đơn giản và không dùng AJAX.

Khi sử dụng đoạn mã JavaScript này, dữ liệu do người dùng nhập vào sẽ được chuyển thành câu đúng văn phạm, nghĩa là kí tự đầu tiên của câu phải được viết in hoa, các kí tự còn lại phải viết thường nếu không rơi vào trường hợp đặc biệt (danh từ riêng...).