lOMoARcPSD|15078701 Chƣơng 5 THƢ VIỆN PHÁT TRIỂN MẶT TRƢỚC 5. 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.
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. 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.0 bằng phiên bản tƣơng ứng: 1.
<script type="text/javascript" src="jquery-3.js"></script> hoặc có thể bao hàm thƣ viện jQuery từ các CDN (Content Delivery Network) nhƣ sau: 1. <script type="text/javascript" src="https://ajax.com/ajax/libs/ jquery/3. 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 (<p>) 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. var arr = document. for (var i = 0; i < arr.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.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 Anh 1.ready(function(){ // Tất cả mã jQuery ở đây WebAppDev 2. }); Cũng lƣu ý rằng bản thân các trình duyệt sẽ không hiểu các câu lệnh đƣợc viết bằng jQuery.
Thƣ viện jQuery có nhiệm vụ tiền xử lý JavaScript, chuyển đổi các câu lệnh đƣợc viết bằng jQuery thành mã JavaScript thuần để trình duyệt hiểu và thực thi. Đọc và thay đổi giá trị thuộc tính của đối tƣợng tài liệu jQuery cung cấp các phƣơng thức sau đ}y cho việc đọc giá trị thuộc tính của các đối tƣợng tài liệu: $(selector).attr(att) Trả về giá trị thuộc tính att.html() Trả về giá trị thuộc tính innerHTML.val() Trả về giá trị thuộc tính value.text() Trả về nội dung văn bản của innerHTML. Phƣơng thức jQuery cho cập nhật thuộc tính của đối tƣợng tài liệu có cùng tên với phƣơng thức đọc nhƣng có tham số. Hơn nữa, có nhiều thể hiện/chồng hàm khác nhau cho một phƣơng thức cập nhật thuộc tính.
Một chồng hàm nhận tham số là giá trị mới cho thuộc tính. Chồng hàm khác nhận tham số là hàm gọi lại (callback). Thứ tự tab của đối tƣợng tài liệu và giá trị hiện tại của thuộc tính đƣợc truyền cho hàm gọi lại. Hàm gọi lại đƣợc thực thi và giá trị trả về của nó là giá trị mới cho thuộc tính.
Các thể hiện đƣợc liệt kê dƣới đ}y: Cập nhật giá trị thuộc tính att $(selector).attr(,‚att1‛:‚new value1‛, ‚att2‛:‚new value2‛, .text(function(i, oldText) {return newText}) Lê Đình Thanh, Nguyễn Việt Anh Trong ví dụ sau, mã jQuery đọc và thông báo giá trị các thuộc tính của một liên kết, sau đó đổi nhãn của liên kết này. <!DOCTYPE html><html><head> 2.3</title> <meta charset="utf-8"> 4. <a id="uet" href="http://uet.vn">Trường ĐH Công nghệ</a> 6. <script src="jquery.
Thay đổi kiểu trình diễn đối tƣợng tài liệu Tƣơng tự đọc và thay đổi giá trị thuộc tính nói chung, jQuery cung cấp các phƣơng thức cho việc đọc v| thay đổi CSS của các đối tƣợng tài liệu. Có thể truy cập từng thuộc tính hay cả lớp CSS bằng các phƣơng thức jQuery sau: $(selector).css("p") Đọc giá trị CSS của thuộc tính p.}) Đặt giá trị CSS cho p1, p2, < $(selector).addClass(‚cssclass‛) Thêm lớp CSS.removeClass(‚cssclass‛) Bỏ lớp CSS.toggleClass(‚cssclass‛) Bật/tắt lớp CSS. Trong trang web ví dụ sau đ}y, hai lớp CSS là .blue đƣợc gán cho đối tƣợng tài liệu có định danh div1. Kết quả là văn bản của đối tƣợng này đƣợc hiển thị với chữ màu xanh, phông chữ to và đậm.
<!DOCTYPE html><html><head> 2. <meta charset="utf-8"> 4. <style type="text/css"> 5.important { font-weight:bold; font-size:xx-large; } 6.blue { color:blue; } 7. <div id="div1">Nội dung văn bản.
<div id="div2">Nội dung văn bản khác. <script type="text/javascript" src="jquery. <script type="text/javascript" > 13. Thêm mới, loại bỏ đối tƣợng tài liệu Lê Đình Thanh, Nguyễn Việt Anh jQuery cung cấp nhiều phƣơng thức cho việc thêm mới và loại bỏ các đối tƣợng DOM nhƣ sau: WebAppDev $(selector).prepend(child1 [, child2, .append(child1 [, child2, .before(presibling1 [, presibling2, .]) Thêm các nút con vào đầu.
Thêm các nút con vào cuối. Thêm các nút liền trƣớc.after(nextsibling1 [, nextsibling2, .]) Thêm các nút liền sau.empty() Xóa tất cả các nút con.remove() Xóa đối tƣợng cùng các nút con. Trong trang web ví dụ sau đ}y, ba đối tƣợng đoạn văn lần lƣợt đƣợc tạo và thêm vào cây DOM. Đối tƣợng thứ nhất đƣợc tạo theo cú pháp của jQuery.
Hai đối tƣợng còn lại đƣợc tạo bằng JavaScript thuần. Các phƣơng thức append() và after() của jQuery sau đó đƣợc gọi để thêm các nút vừa tạo vào cây DOM. <!DOCTYPE html><html><head> 2. <meta charset="utf-8"> 4.
<div id="app"></div> 6. <script src="jquery.text("Text 1"); // Tạo bằng jQuery 10. var txt2 = document.createElement("p"); // Tạo bằng DOM 11. var txt3 = document.
</body></html> 89 lOMoARcPSD|15078701 5. Duyệt DOM $(selector) là cú pháp đơn giản, hiệu quả để chọn các đối tƣợng tài liệu một cách trực tiếp. Không những vậy, jQuery còn cung cấp nhiều phƣơng thức đơn giản khác để chọn các đối tƣợng thuộc cùng nhánh cây DOM một cách gián tiếp. Những phƣơng thức này giúp cho việc duyệt DOM dễ dàng hơn là sử dụng các thuộc tính của đối tƣợng theo JavaScript thuần nhƣ parentNode, childNodes, previousSibling, nextSibling.
Các phƣơng thức chọn các đối tƣợng thuộc cùng nhánh cây DOM một cách gián tiếp còn đƣợc gọi là phƣơng thức duyệt DOM, đƣợc liệt kê và mô tả dƣới đ}y. Lƣu ý, $(sel) là tập các đối tƣợng đƣợc chọn bởi bộ chọn sel. Nói cách khác, phƣơng thức này sẽ tìm kiếm các đối tƣợng tổ tiên từ dƣới lên cho đến khi gặp tổ tiên đƣợc chỉ định bởi selector_stop.find() Chọn các đối tƣợng thuộc dòng dõi (con, cháu, chắt, .) của các đối tƣợng thuộc $(selector). Lê Đình Thanh, Nguyễn Việt Anh $(selector).
Nói cách khác, phƣơng thức này sẽ tìm kiếm các đối tƣợng em từ trên xuống cho đến khi gặp nút em đƣợc chỉ định bởi selector_stop. Nói cách khác, phƣơng thức này sẽ tìm kiếm các đối tƣợng anh từ dƣới lên cho đến khi gặp nút anh đƣợc chỉ định bởi selector_stop. Lê Đình Thanh, Nguyễn Việt Anh $(selector).