Giáo trình Phát triển ứng dụng web: Phần 2 - Lê Đình Thanh, Nguyễn Việt Anh

Giáo trình Phát triển ứng dụng web nhằm trang bị cho sinh viên hiểu biết một cách toàn diện và có hệ thống các kiến thức cốt lõi liên quan phát triển ứng dụng web, nắm bắt và sử dụng tốt một số công cụ và kỹ thuật hiện đại trong phát triển ứng dụng web. Phần 1 của giáo trình gồm 6 chương tiếp theo, mời các bạn cùng tham khảo!
Nội dung trích xuất từ tài liệu:
Giáo trình Phát triển ứng dụng web: Phần 2 - Lê Đình Thanh, Nguyễn Việt Anh lOMoARcPSD|15078701 Chƣơng 5 THƢ VIỆN PHÁT TRIỂN MẶT TRƢỚC 5.1. GIỚI THIỆU Phát triển mặt trƣớc (front-end/client-side development) là việc tạo ra mã nguồn chạy ở trình khách, tức tạo ra HTML, CSS và JavaScript cho ứng dụng web. Ngƣợc lại với khái niệm phát triển mặt trƣớc là khái niệm phát triển mặt sau (back-end/server-side development). Phát triển mặt sau là việc tạo mã nguồn chạy phía phục vụ. Trƣớc đ}y, với lối phát triển cũ, việc tạo ra mã nguồn HTML, JavaScript và CSS thƣờng đƣợc thực hiện bởi mặt sau, bên phục vụ thực hiện hầu hết mọi việc trong khi trình khách chỉ thực hiện công việc cuối cùng là trình diễn. Ngày nay, để tạo ra những ứng dụng web có hiệu năng cao và trải nghiệm ngƣời Lê Đình Thanh, Nguyễn Việt Anh dùng tốt hơn, hầu hết mọi công việc lại đƣợc thực hiện ở mặt trƣớc, mặt sau chỉ còn đảm nhận những việc không thể chuyển về mặt trƣớc đƣợc nhƣ lƣu trữ CSDL, kiểm soát an ninh, khả năng mở rộng, ... Kiến trúc cho ứng dụng web đƣợc phát triển theo cách mới có tên gọi là thick client – thin server. Phát triển mặt trƣớc có đặc điểm chung là sử dụng các thƣ viện, công cụ và kỹ thuật xử lý HTML, JavaScript, CSS và DOM nhằm tạo ra mã nguồn chạy phía khách một cách nhanh nhất và hiệu quả nhất, đảm bảo mã nguồn chạy đƣợc trên mọi trình duyệt, hệ điều hành và thiết bị. Thách thức đặt ra đối với phát triển mặt trƣớc là các công cụ và kỹ thuật đƣợc sử dụng liên tục thay đổi, do đó ngƣời phát triển ứng dụng web liên tục phải cập nhật, nắm bắt đƣợc xu hƣớng và làm chủ đƣợc công nghệ mới. Chƣơng này giới thiệu một số công cụ và kỹ thuật phát triển mặt trƣớc đang thịnh hành và cập nhật nhất hiện nay. Lƣu ý rằng, bất luận kỹ thuật và công cụ nào đƣợc sử dụng, ở cả mặt trƣớc và mặt sau, sản phẩm cuối cùng ứng dụng web phải tạo ra luôn là HTML, JavaScript và CSS. Trình duyệt chỉ yêu cầu và chỉ có thể hiểu những công nghệ lõi này. Mặt khác, những công nghệ lõi ít hoặc chậm thay đổi, trong khi các công cụ và kỹ thuật phát triển tiến hóa một cách nhanh chóng. Công cụ và kỹ thuật đƣợc trình bày ở chƣơng này đang là cập nhật ở thời điểm giáo trình đƣợc viết (năm 2017-2018) nhƣng rất có thể sẽ trở nên lỗi thời và đƣợc thay thế bởi những công cụ và kỹ thuật khác trong vài năm tới. Do vậy, việc nắm vững các kiến thức đã đƣợc trình bày ở các Chƣơng 2-4 là vô cùng quan trọng. Nắm vững những kiến thức và công nghệ nền tảng đó, cùng với việc sẵn sàng tiếp cận công cụ và kỹ thuật phát triển mới là yêu cầu bắt buộc đối với mọi lập trình viên phát triển ứng dụng web. 85 lOMoARcPSD|15078701 5.2. JQUERY Nhiều thƣ viện JavaScript đƣợc phát triển với mục đích giúp quản lý trang web đƣợc đơn giản và hiệu quả hơn. jQuery là một thƣ viện nhƣ vậy. Không những thế, jQuery là thƣ viện JavaScript đƣợc sử dụng phổ biến nhất. Theo thống kê của Q-Success15, vào tháng 3/2017, 96,6% các trang web trên toàn thế giới sử dụng jQuery và thị phần cho jQuery vẫn tiếp tục tăng. Những hãng công nghệ lớn nhất nhƣ Google, Microsoft, IBM cũng sử dụng jQuery. jQuery làm việc nhƣ nhau trên mọi trình duyệt. Thƣ viện này cho phép thực hiện mỗi tác vụ chung chỉ bằng một lời gọi hàm, trong khi nếu không sử dụng thƣ viện, tác vụ phải đƣợc thực hiện bằng nhiều dòng lệnh JavaScript thuần. jQuery làm đơn giản hóa xử lý JavaScript, nhƣ thao tác với DOM hay gọi AJAX. Thƣ viện cũng dễ học và dễ sử dụng. jQuery cung cấp các tính năng thao tác HTML/DOM, xử lý sự kiện HTML, thao tác CSS, xử lý AJAX, hiệu ứng và hoạt cảnh, và các tiện ích. Lê Đình Thanh, Nguyễn Việt Anh 5.2.1. Bao hàm jQuery WebAppDev Để sử dụng jQuery, có thể tải thƣ viện (tệp .js) tại http://jquery.com rồi bao hàm tệp thƣ viện vào trang web nhƣ sau, thay 3.2.0 bằng phiên bản tƣơng ứng: 1. hoặc có thể bao hàm thƣ viện jQuery từ các CDN (Content Delivery Network) nhƣ sau: 1. 5.2.2. Cú pháp jQuery có cú pháp hết sức ngắn gọn và dễ hiểu. Nó cho phép chọn c{c đối tƣợng tài liệu rồi thực hiện h|nh động trên đối tƣợng đƣợc chọn. Cú pháp jQuery nhƣ sau: $(selector).action(); trong đó, selector là bộ chọn CSS bất kỳ, action() là phƣơng thức jQuery. Việc jQuery sử dụng các bộ chọn CSS để chọn các đối tƣợng tài liệu giúp cho lập trình viên web có thể sử dụng jQuery ngay mà không phải mất nhiều thời gian để tìm hiểu về nó. Hãy xem hoạt động của jQuery và so sánh với JavaScript thuần qua một ví dụ cụ thể sau. Giả sử trang web có nhiều đoạn văn () và một yêu cầu đƣợc đƣa ra là hãy ẩn việc hiển thị tất cả các đoạn văn có thuộc tính class=‛test‛. Có thể thực hiện yêu cầu này bằng JavaScript thuần nhƣ sau: 15 https://w3techs.com/ 86 lOMoARcPSD|15078701 1. var arr = document.querySelectorAll('p.test'); 2. for (var i = 0; i < arr.length; i++) arr[i].hide(); Đầu tiên, phƣơng thức querySelectorAll() đƣợc gọi để trả về mảng tham chiếu của tất cả các đối tƣợng đoạn văn có class=‛test‛. Tiếp theo, một vòng lặp đƣợc thực hiện để duyệt qua từng đối tƣợng tham chiếu và gọi phƣơng thức hide() nhằm ẩn đối tƣợng. Nếu sử dụng jQuery, yêu cầu trên có thể đƣợc thực hiện chỉ bằng một lời gọi nhƣ sau: 1. $('p.test').hide(); Với lời gọi này, jQuery sẽ thực hiện các bƣớc giống nhƣ đoạn mã JavaScript thuần ở trƣớc, tức là chọn các đối tƣợng đoạn văn có class=‛test‛ rồi thực hiện phƣơng thức hide() trên các đối tƣợng đƣợc chọn. Lƣu ý, chỉ sử dụng jQuery khi toàn bộ mã trang web đã đƣợc tải về, vì nếu không nhƣ vậy, jQuery có thể truy cập đến đối tƣợng tài liệu không tồn tại và dẫn đến lỗi. Thực hiện điều này theo mẫu nhƣ sau: Lê Đình Thanh, Nguyễn Việt ...