Hướng dẫn area in javascript - khu vực trong javascript
|
Bài viết này là một phần của bài viết [JavaScript] Bài 13 - Event & Listener trong Series Tự Học Lập Trình Web Một Cách Thật Tự Nhiên. Show
Trong bài viết này, chúng ta sẽ cùng xây dựng một thanh điều hướng phụ đơn giản thường được đặt ở bên cạnh khối hiển thị nội dung chính của trang web. Bên cạnh đó, chúng ta sẽ thử bổ sung một tính năng đơn giản giúp người dùng lọc nhanh danh sách các liên kết bằng cách nhập từ khóa vào một ô nhập liệu ở phần đầu của thanh điều hướng. Xem kết quả dự kiến 1. Chuẩn bị code HTMLVẫn như thường lệ thì chúng ta sẽ khởi đầu với một khuôn mẫu HTML cơ bản chưa có nội dung. Trước hết chúng ta cần dàn bố cục chính của trang web để thể hiện được vị trí mà thanh điều hướng phụ
Cụ thể hơn về khối
Và để thiết lập khoảng cách giữa các thành phần với khung Ở đây Tiếp đến là các danh sách liên kết Bạn có thể tạo ra nhiều danh sách liên kết để có thể dễ dàng chạy thử tính năng của bộ lọc. Dưới đây là tập các liên kết bạn có thể copy/paste để sử dụng.
Bây giờ thì chúng ta đã có thể bắt đầu viết code CSS và JavaScript được rồi. 2. Viết code CSS cho .sidenavỞ đây chúng ta vẫn sẽ xuất phát với thao tác 2.1 Dàn chỉnh bố cục chính của trangĐể nhanh chóng dàn chỉnh bố cục chính của trang web và định hình khu vực sử dụng khối điều hướng phụ Như vậy là chúng ta đã có được bố cục chính của trang web với 4 khối được đặt ở các vị trí như trong kết quả dự kiến. Tuy nhiên để có thêm nhiều cảm hứng hơn và tiếp tục công việc thì chúng ta có thể thực hiện thao tác canh chỉnh đơn giản cho phần nội dung chữ tạm thời của các khối Bây giờ chúng ta đã có cảm giác gì đó như thể là công việc sắp hoàn thành rồi. Chỉ còn mỗi cái 2.2 Bộ lọc .sidenav-filterĐể bắt đầu viết code cho khối Trong trường hợp khác, nếu container cha có chiều rộng Thành phần đầu tiên là bộ lọc
Phần công việc đầu tiên thì chúng ta cần đảm bảo tổng chiều rộng của ô nhập liệu Tuy nhiên còn một vấn đề nhỏ nữa đó là 2 thành phần này đều là các khối Sau khi đã có một khối 2.3 Các danh sách liên kết .sidenav-navlistĐể khiến cho các tiêu đề danh mục Ngoài ra thì chúng ta còn một lưu ý quan trọng khác đó là cần phải tạo thêm 1 thẻ trạng thái Sau khi chúng ta đã có các danh sách liên kết hiển thị thẳng hàng ngay ngắn, việc cần làm là hoàn thiện phong cách hiển thị của nội dung chữ. Cuối cùng là bổ sung thêm 1 chút Như vậy là công việc viết code CSS cho thanh điều hướng phụ của chúng ta đã hoàn tất. Chúng ta bắt đầu viết code JavaScript để bổ sung tính năng lọc danh sách đi thôi. 3. Viết code JavaScript cho .sidenav-filterTrước khi bắt tay vào viết code, chúng ta cần điểm lại một vài yếu tố chính của tính năng này.
Việc viết code xử lý cho nút nhấn Giả sử chúng ta đang ở thời điểm người dùng đã nhập một vài từ khóa nào đó và đã có khoảng 1/2 số liên kết không phù hợp được ẩn đi. Bây giờ khi người dùng nhấn thêm một phím nào đó để xóa hoặc thêm một ký tự, thì code của chúng ta sẽ cần làm những việc sau -
Một cách xử lý khác đó là chúng ta sẽ làm việc với 2 nhóm liên kết
Cho dù là phương án xử lý nào đi chăng nữa thì chúng ta vẫn sẽ phải làm việc với đầy đủ danh sách liên kết ban đầu. Và thực hiện tới 2 lần lặp để kiểm tra tính phù hợp của các liên kết với đoạn từ khóa trong Bây giờ chúng ta hãy thử nhìn vấn đề theo một cách khác. Giả sử chúng ta có thể chia khối công việc cần làm cho các liên kết tự thực hiện chứ không tác động chỉnh sửa can thiệp vào từ đâu đó khác. Khi có một sự kiện người dùng được phát động, mỗi liên kết sẽ tự kiểm tra xem nội dung của mình có phù hợp với đoạn từ khóa hay không. Và sau đó tự điều chỉnh trạng thái Nếu có thể viết code triển khai logic chủ quan cho các liên kết như vừa nói, chúng ta sẽ không cần phải sàng lọc các tập kết quả nhiều lần để phân loại các liên kết. Lối tư duy này có vẻ như không yêu cầu khả năng phỏng đoán kết quả lọc các danh sách và dường như sẽ có ít khả năng để chương trình xảy ra lỗi hơn. Vậy chúng ta sẽ thử viết code xử lý theo hướng tư duy vừa thảo luận nhé - 3.1 Tổng quan các hàm xử lý chínhĐầu tiên chúng ta sẽ chuẩn bị phần khung của chương trình -
Như vậy là chúng ta đã có phần khung chương trình với 3 hàm xử lý sự kiện chính được gắn vào các phần tử tương ứng. Ở đoạn gắn hàm xử lý sự kiện cho các liên kết, chúng ta đã tạo ra một tên sự kiện mới là Tức là các sự kiện click chuột 3.2 Viết code cho các hàm xử lý sự kiệnBây giờ chúng ta sẽ viết code chi tiết cho các hàm xử lý sự kiện. Có lẽ là chúng ta nên xuất phát từ hàm phiên dịch các sự kiện sang Rồi... xong. Ở đây trong phần thân hàm, chúng ta không quan tâm tới sự kiện Kế đến sẽ là hàm Cuối cùng là hàm xử lý sự kiện quan trọng nhất Ở cấp độ của các hàm 3.3 Viết code cho các hàm xử lý tác vụ phụTuy nhiên, ở vị trí công việc được ủy thác xuống 2 hàm 3.4 Viết các hàm tiện ích hỗ trợCuối cùng là viết các hàm tiện ích hỗ trợ đã được gọi nhưng chưa có code triển khai. 4. Tổng kết code của một sidenav đơn giảnXin chúc mừng! Bạn đã hoàn thành công việc xây dựng một thanh điều hướng phụ đơn giản có hỗ trợ tính năng lọc nhanh các danh sách liên kết. Để hoàn thiện hơn nữa thì bạn có thể xử lý thêm code Mục đích của chúng ta trong bài viết này là thử triển khai logic xử lý sự kiện theo phương cách hành động chủ quan đứng từ vị trí của các phần tử HTML cần phải thay đổi để đáp ứng với sự kiện. Thay vì xử lý theo phương thức hành động khách quan tác động lên các phần tử HTML cần thay đổi từ phía bên ngoài. Nếu bạn đã cảm thấy quen với lối tư duy này, bạn có thể viết lại đoạn tương tác giữa nút nhấn Và bây giờ thì chúng ta cần quay trở lại với bài viết mà chúng ta đang còn dang dở. [JavaScript] Bài 13 - Event & Listener |
