Hướng dẫn dùng assighnment JavaScript
Assignment javascript nâng cao hướng dẫn dùng json server, tạo dữ liệu. Thực hiện trang chủ, chi tiết sản phẩm, giỏ hàng, quản trị dữ liệu… Show
Nội dung chính
Nội dung chính
Thực hiện một website bán hàng dùng HTML, CSS, Javascript và API Server Yêu cầu: – Phần public (site): hiện danh sách sản phẩm, loại sản phẩm, chọn sp lưu vào giỏ hàng… – Phần quản trị: tạo các chức năng quản trị loại sản phẩm, sản phẩm, đơn hàng – Dữ liệu trong ứng dụng: qua tương tác với json server qua API` PHẦN 1:
PHẦN 2: Thực hiện các trang html trong phần site (trang chủ, chi tiết sp, giỏ hàng…) và admin (trang chủ, danh sách sản phẩm, thêm sản phẩm…) PHẦN 3: Thực hiện các trang chức năng trong phần site : show data lên trang chủ, chi tiết sản phẩm, gi nhận sản phẩm, trang giỏ hàng, trang Thanh toán lưu thông tin lên API Server PHẦN 4 Thực hiện các trang chức năng trong phần quản trị : Thêm, xóa, sửa sản phẩm, danh mục… Thống kê đơn hàng, doanh thu Hướng dẫn cài soft, tổ chức dữ liệu :
Phần 2 video hướng dẫn Assignment javascript nâng cao : Thực hiện các trang html cho phần site và admin
Phần 3 video hướng dẫn Assignment javascript nâng cao : Code javascript lấy loại sản phẩm, list sản phẩm từ API Server, code giỏ hàng, thanh toán
Cuối cùng (phần 4) hướng dẫn thực hiện Assignment môn Javascript năng cao là phần hướng dẫn thực hiện code javascript để quản trị dữ liệu từ API Server
Sáng tạo Các chức năng bổ sung, bình luận, giao diện đẹp, biểu đồ, việt hóa giao diện…. Assignment javascript nâng cao sử dụng các tính năng nâng cao trong javascript như bất đồng bộ, ajax, xử lý mảng, sự kiện, tính toán, gọi api với các http method thích hợp… Bạn sẽ hơi vất vả nhưng sẽ luyện công thêm được nhiều kỹ năng hữu ích. Destructuring Assignment trong JavaScript là một cú pháp đặc biệt cho phép bạn lấy ra dữ liệu từ Object hoặc Array và gán chúng vào các biến thông thường. Tuy nhiên, việc "lấy ra dữ liệu" này chỉ copy mà không làm thay đổi cấu trúc của Object hoặc Array. Dưới đây, mình sẽ tìm hiểu về cách sử dụng và ứng dụng của Destructuring Assignment trong JavaScript với Array và Object. Destructuring Assignment với ArraySau đây là những kiến thức cơ bản và ứng dụng của Destructuring Assignment trong JavaScript với Array. Cách sử dụng cơ bảnVí dụ về destructuring assignment với array:
Ví dụ trên thực hiện khai báo và gán luôn giá trị cho các biến
Ở đây, JavaScript thực hiện việc gán giá trị ở vế phải cho biến ở vế trái theo đúng thứ tự chỉ số xuất hiện trong mảng. Đoạn code trên sẽ tương đương với:
Để tránh trường hợp này, bạn có thể khai báo giá trị default cho biến như dưới đây. Khai báo giá trị defaultĐể khai báo giá trị default (mặc định), bạn sử dụng toán tử gán
Vế phải có một phần tử nên Bỏ qua một số phần tử trong mảngTrong mảng có thể chứa nhiều phần tử và bạn chỉ muốn lấy ra một vài giá trị trong đó thì có thể
sử dụng toán tử dấu phẩy
Lúc này, phần tử ứng chỉ số Gán các giá trị còn lại của mảng cho một biến khácKhác với trường hợp trên, ở đây mình lấy ra một phần tử và các phần tử còn lại được gán vào một biến khác, bằng cách sử dụng cú pháp spread
Khi đó, biến Hoán đổi giá trị của biếnTrước khi có destructuring assignment trong JavaScript, bạn có thể hoán đổi giá trị của hai biến bằng một số cách sau đây. ► Sử dụng biến trung gian
► Sử dụng tính toán số học
Khi áp dụng destructuring assignment trong JavaScript, việc hoán đổi giá trị hai biến trở nên vô cùng đơn giản:
Ở đây, mình
tạo ra một mảng tạm
Sao chép mảngMảng trong JavaScript là kiểu dữ liệu tham chiếu, nên việc sử dụng toán tử gán
Nếu bạn muốn
Destructuring Assignment với ObjectSau đây là những kiến thức cơ bản và ứng dụng của Destructuring Assignment trong JavaScript với Object. Cách sử dụng cơ bảnVí dụ destructuring assignment với object:
Ví dụ trên thực hiện khai báo và
gán luôn giá trị cho các biến
Ở đây, JavaScript thực hiện việc gán giá trị ở vế phải cho biến ở vế trái tương ứng với giá trị của key trong Object mà không phân biệt thứ tự. Giả sử, mình đổi thứ tự của
Không biết bạn có thắc mắc tại sao đoạn code thực hiện Destructuring Assignment bên trên phải đặt trong cặp dấu ngoặc đơn hay không. Vì nếu thiếu cặp dấu
JavaScript hiểu rằng cặp dấu ngoặc đầu tiên là một block code (khối code), chứ không phải destructuring assignment.
Ngoài ra, đoạn code phía trên tương đương với cách làm thông thường như sau:
Để giải quyết vấn đề này, bạn có thể khai báo giá trị default (mặc định) như dưới đây. Khai báo giá trị defaultĐể khai báo giá trị default (mặc định), bạn có thể sử dụng toán tử gán
Gán tên mới cho biếnNhiều khi thuộc tính mà bạn muốn thực hiện destructuring assignment ở object quá dài hoặc tên trùng với một biến khác. Để ngắn gọn, bạn có thể đặt tên mới cho biến khi thực hiện destructuring như sau:
Ý nghĩa đoạn code trên là:
Để gán giá trị mặc định cho biến trong trường hợp này, bạn có thể thực hiện theo cách:
Gán các giá trị còn lại của Object cho một biến khácTương tự như mảng, bạn có thể sử dụng cú pháp spread
Trong ví dụ trên, bạn lấy ra hai thuộc tính Destructuring với Object và Array lồng nhauBạn cũng có thể sử dụng destructuring assignment trong JavaScript với object và array lồng nhau nhiều tầng, ví dụ:
Cài đặt giá trị default cho các tham số của hàmBạn có thể áp dụng destructuring assignment trong JavaScript để cài đặt giá trị mặc định cho các tham số khi truyền vào hàm. Sau đây, mình so sánh cách làm thông thường và cách dùng destructuring assignment để thấy sự khác biệt. Cách làm thông thườngSau đây là cách bình thường để cài đặt giá trị mặc định cho các tham số của hàm:
Cách trên có một số nhược điểm là:
Giả sử, bạn muốn áp dụng giá trị default cho Cách gọi hàm trên không sai về cú pháp nhưng sai về mặt ý nghĩa. Vì JavaScript sẽ hiểu Để tránh việc phải ghi nhớ thứ tự các tham số, bạn có thể gộp chúng vào một object. Sau đó, bạn chỉ cần truyền 1 tham số vào function như dưới đây. Gộp các tham số vào thành một ObjectTương tự như ví dụ trên, nhưng giờ chỉ còn một tham số là object:
Khi các tham số được gộp vào thành một object Tuy nhiên, cách cài đặt giá trị default như trên (dùng toán tử OR Sau đây, mình thử áp dụng destructuring assigment trong JavaScript để thấy sự khác biệt. Gộp các tham số thành object kết hợp destructuring assignmentVí dụ trên có thể thay đổi như sau:
Bây giờ, mình đã khắc phục được hai nhược điểm đề cập bên trên. Tuy nhiên, cách làm này vẫn chưa thật hoàn thiện. Vì sao? Giả sử, bạn muốn sử dụng giá trị default cho tất cả các thuộc tính bên trong object. Bạn vẫn phải truyền vào một object rỗng ( Để khắc phục vấn đề này, bạn có thể sửa lại đoạn code trên một chút:
Khi bạn không truyền bất kỳ tham số nào vào hàm trên, Tổng kếtDestructuring assignment trong JavaScript cho phép bạn "mapping" object hoặc array vào các biến một cách đơn giản. ► Cú pháp destructuring assignment với array:
Trong đó, phần tử đầu tiên được gán vào biến ► Cú pháp destructuring assignment với object:
Trong đó, giá trị thuộc tính Ngoài ra, bạn có thể áp dụng destructuring assignment trong JavaScript với object và mảng lồng nhau. Khi đó, cấu trúc ở vế trái phải tương đồng với cấu trúc vế phải. Thực hànhBài 1Cho object:
Sử dụng destructuring assignment trong JavaScript thực hiện các yêu cầu sau:
Xem đáp án
Bài 2Cho đối tượng sau:
Viết hàm
Xem đáp án
Tham khảo:
★ Nếu bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé: |