1. Trang chủ
  2. » Giáo án - Bài giảng

Tự học thiết kế web bằng HTML CSS JQuery

98 4 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Nội dung

TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel 3 9322 735 0913 735 906 Fax 3 9322 734 Web nhatnghe com THÀNH PHỐ HỒ CHÍ MI.

TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735-0913.735.906 Fax: 3.9322.734 Web: nhatnghe.com  THÀNH PHỐ HỒ CHÍ MINH – 2011 NGÔN NGỮ WEB HTML, CSS & JQUERY HTML 1.1 Giới thiệu “Internet”,“World Wide Web”, “Web page” không thuật ngữ Giờ đây, thuật ngữ trở thành thực Internet mạng máy tính lớn giới, xem mạng mạng World Wide Web tập Internet World Wide Web gồm Web Servers có mặt khắp nơi giới Các Web server chứa thông tin mà bất kz người dùng giới truy cập Các thơng tin lưu trữ dạng trang Web Trong phần này, học Ngôn ngữ đánh dấu siêu văn (HTML), phần quan trọng lãnh vực thiết kế phát triển giới Web 1.1.1Giới thiệu HTML Ngôn ngữ đánh dấu siêu văn rõ trang Web hiển thị trình duyệt Sử dụng thẻ phần tử HTML, bạn có thể:  Điều khiển hình thức nội dung trang  Xuất tài liệu trực tuyến truy xuất thông tin trực tuyến cách sử dụng liên kết chèn vào tài liệu HTML  Tạo biểu mẫu trực tuyến để thu thập thông tin người dùng, quản lý giao dịch  Chèn đối tượng audio clip, video clip, thành phần ActiveX Java Applet vào tài liệu HTML Tài liệu HTML tạo thành mã nguồn trang Web Khi xem trình soạn thảo, tài liệu chuỗi thẻ phần tử, mà chúng xác định trang web hiển thị Trình duyệt đọc file có htm hay html hiển thị trang web theo lệnh có Ví dụ, theo cú pháp HTML hiển thị thông điệp “Trang web tơi” Ví dụ 1: Chao ban Trang web tơi Trình duyệt thơng dịch lệnh hiển thị trang web hình sau NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG NGÔN NGỮ WEB HTML, CSS & JQUERY Hình 4.1: Kết ví dụ 1.1.2Cấu trúc tài liệu HTML Một tài liệu HTML gồm phần bản:  Phần : Mọi tài liệu HTML phải bắt đầu thẻ mở HTML kết thúc thẻ đóng HTML … Thẻ HTML báo cho trình duyệt biết nội dung hai thẻ tài liệu HTML  Phần tiêu đề : Phần tiêu đề bắt đầu thẻ kết thúc thẻ Phần chứa tiêu đề mà hiển thị điều hướng trang Web Tiêu đề nằm thẻ TITLE, bắt đầu thẻ kết thúc thẻ Tiêu đề phần quan trọng Các mốc dùng để đánh dấu web site Trình duyệt sử dụng tiêu đề để lưu trữ mốc Do đó, người dùng tìm kiếm thơng tin, tiêu đề trang Web cung cấp từ khóa yếu cho việc tìm kiếm  Phần thân : phần nằm sau phần tiêu đề Phần thân bao gồm văn bản, hình ảnh liên kết mà bạn muốn hiển thị trang web Phần thân bắt đầu thẻ kết thúc thẻ Ví dụ 2: Thế giới web

Niềm đam mê chúng ta

Hình 4.2: Kết ví dụ NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG NGÔN NGỮ WEB HTML, CSS & JQUERY 1.2 Siêu liên kết Siêu liên kết kỹ thuật cho phép tạo liên kết từ trang web đến trang web kác Trong HTML người ta sử dụng thẻ để tạo siêu liên kết Thẻ sử dụng với mục đích sau:     Tạo liên kết đến trang Đánh dấu tạo liên kết đến vùng đánh dấu trang Chạy chương trình gửi email Gọi hàm javascript 1.2.1Liên kết trang Thẻ sử dụng để xác định văn hay ảnh dùng làm siêu liên kết tài liệu HTML Thuộc tính HREF (tham chiếu siêu văn bản) dùng để địa hay URL tài liệu file liên kết Cú pháp HREF là: Hypertext địa trang web bạn muốn đến Có loại địa tương đối tuyệt đối  Địa tuyệt đối Địa tuyệt đối (bắt đầu với http://) địa sử dụng để đến nguyên cụ thể máy chạy với port Thơng thường sử dụng đến tham chiếu đến tài nguyên bên Hãy xem số ví dụ sau: Liên kết đến trang c.html đặt thư mục b máy www.lycato.com chạy port 8080 sử dụng giao thức http liên kết Liên kết đến trang c.html đặt thư mục b máy www.yahoo.com chạy port 80 sử dụng giao thức http liên kết  Địa tương đối: Địa tương đối địa tài nguyên website nên người ta thông thường bỏ phần thơng tin máy chủ cổng cịn lại phần đường dần đến tài nguyên tính từ gốc website tính từ trang web Một vài ví dụ sau: Trang c.html đặt thư mục “a/b” tính từ gốc web liên kết Trang c.html đặt thư mục “b” tính từ vị trí trang liên kết Trang c.html đặt thư mục “b” đồng cấp với thư mục chứa trang web liên kết NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG NGÔN NGỮ WEB HTML, CSS & JQUERY Giả sử có hai tài liệu HTML đĩa cứng cục bộ, Doc1.htm Doc2.htm Để tạo liên kết từ Doc1.html đến Doc2.htm Ví dụ 6: Sử dụng siêu liên kết

Vui lòng nhấp chuột vào để xem trang Doc2.html Hình 4.3: Kết ví dụ Khi người dùng “nhảy” đến tài liệu khác, bạn nên cung cấp cách để quay trở lại trang chủ định hướng đến file khác Ví dụ 7: Trang Doc2.html

Đây trang Doc2.html Trang hiển thị bạn nhấp chuột vào liên kết trang trang Doc1.html Trở lại Doc1.html NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG NGÔN NGỮ WEB HTML, CSS & JQUERY Hình 4.4: Kết ví dụ Chú ý liên kết gạch chân Trình duyệt tự động gạch chân liên kết Nó thay đổi hình dáng trỏ chuột người sử dụng di chuyển chuột vào liên kết Ở ví dụ trên, file nằm thư mục, cần tên file thông số HREF đủ Tuy nhiên, để liên kết đến file thư mục khác, cần phải cung cấp đường dẫn tuyệt đối hay đường dẫn tương đối  Chú ý: o Để tạo liên kết cho phép download tài nguyên khác pdf, word, excel… bạn việc tạo liên kết bình thường đến địa nguyên muốn download Ví dụ: Download o Thẻ cịn có thuộc tính quan trọng khác target Thuộc tính qui định cửa sổ hiển thị trang đích Có giá trị hợp lệ là: _self, _blank, _parent _top  _self: trang đích hiển thị lên trang  _blank: trang đích hiển thị cửa sổ  _parent, _top: qui định trang đích hiển thị cửa sổ cha cửa sổ mức cao trường hợp sử dụng frame Ví dụ: hiển thị trang mail yahoo cửa sổ Yahoo Mail 1.2.2Liên kết vùng Vài trường hợp tài liệu web dài, bạn muốn phân chia thành nhiều phần cung cấp cho người đọc liên kết để nhảy đến vùng Muốn làm điều bạn cần việc đánh dấu vùng liên kết vùng Đánh dấu vùng: bạn đánh dấu vùng với thẻ có cú pháp sau gọi thả neo Hiển thị vùng Bạn sử dụng thuộc tính name để tên vùng Có khơng có phần thẻ điều Ví dụ: Internet Liến kết đến vùng đánh dấu: bạn sử dụng cú pháp sau để liên kết đến vùng đánh dấu: Hypertext Địa trang tên vùng phân cách dấu # Dấu # dùng để tên vùng cần liên kết đến Nếu bạn liên kết đến vùng trang khơng cần Nghĩa là: Hypertext Ví dụ: Giới thiệu Internet Bây mời bạn xem ví dụ liên kết vùng dẫn đến đoạn khác trang Liên kết vùng Internet Giới thiệu Internet Thiết kế web NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG NGÔN NGỮ WEB HTML, CSS & JQUERY

Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet

Giới thiệu Internet Giới thiệu Internet Giới thiệu Internet Giới thiệu Internet Giới thiệu Internet Giới thiệu Internet Giới thiệu Internet Giới thiệu Internet

Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web

Kết chạy trang Khi click vào liên kết dẫn đến vùng liên kết Hình 4.5: Liên kết vùng 1.2.3Sử dụng e-mail Nếu bạn muốn liên kết đến ứng dụng mail đặt thông tin email sẵn vào để gửi mail bạn tạo liên kết sau  Chỉ cung cấp email Email Me  Cung cấp thêm tiêu đề mail Send Email  Cung cấp nội dung mail NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG NGÔN NGỮ WEB HTML, CSS & JQUERY Email Me 1.2.4Gọi java script Bạn sử dụng thẻ a để gọi hàm javascript để thực mục đích riêng người dùng click vao liên kết Cú pháp Send Email Thông thường bạn ứng dụng vào việc sau: Vơ hóa liên kết Do nothing | Submit form thay cho nút submit Submit my form Gọi hàm để thục công việc khác (làm thay đổi giao diện, tương tác ajax) Hello World | Sau ví dụ hồn chỉnh Liên kết Javascript function fnHello() { alert("Hello World !"); } Do nothing | Hello World | Submit my form NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG NGÔN NGỮ WEB HTML, CSS & JQUERY Kết thực Khi click vào liên kết “Hello World” Hình 4.6: liên kết gọi javascript 1.3 Các thẻ Chương thảo luận thẻ HTML thẻ tiêu đề (Header), thẻ đoạn thẻ khối Phần nói danh sách (Lists) làm để sử dụng ảnh tài liệu HTML 1.3.1Các thẻ định dạng Phần ta học ba thẻ mức đoạn văn bản: 1.3.1.1Thẻ giữ nguyên định dạng Thẻ giữ nguyên định dạng văn trình soạn thảo Ví dụ sau cho bạn thấy điều Giữ ngun định dạng Cơng cha Nghĩa mẹ Công cha Nghĩa mẹ núi thái sơn nước nguồn chảy núi thái sơn nước nguồn chảy NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG NGƠN NGỮ WEB HTML, CSS & JQUERY Hình 4.7: Giữ nguyên định dạng 1.3.1.2Các thẻ tiêu đề Với định dạng in đậm kích thước to nhỏ khác nên thẻ …. thường dùng làm tiêu đề có kích thước to có kích thước nhỏ Ví dụ 1: Cac the co ban The tieu de H1 The tieu de H2 The tieu de H3 The tieu de H4 The tieu de H5 The tieu de H6 Hình 4.8: Thẻ thiêu đề NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG NGÔN NGỮ WEB HTML, CSS & JQUERY 3.7.3Luật người dùng định nghĩa (user-defined rules) Trên danh sách luật phổ thơng hàng ngày Bạn có qui luật riêng mà có bạn hiểu định nghĩa Vì Jquery cung cấp cho bạn cách định nghĩa luật riêng Hãy xem phân tích ví dụ sau để hiểu rõ cách để định nghĩa luật /* Định nghĩa hàm kiểm tra số di động việt nam */ function fnValidateMobile(value, element) { var regex = /^0[0-9]{9,10}$/g; return this.optional(element) || regex.test(value); } /* Định nghĩa hàm kiểm tra số xe gắn máy sài gòn */ function fnValidateSaigonMoto(value, element) { var regex = /^5\d-[A-Z]\d-\d{4}$/g; return this.optional(element) || regex.test(value); } /* Định nghĩa hàm kiểm tra IP mạng máy tính */ function fnValidateNetuworkIP(value, element) { var regex = /^\d{3}\.\d{3}\.\d{3}\.\d{3}$/g; if (this.optional(element) || regex.test(value)) { var nums = value.split("."); for (var i = 0; i < nums.length; i++) { if (parseInt(nums[0]) > 255) { return false; } } } else { return false; } return true; } /* Định nghĩa hàm kiểm tra mục chọn combo box */ function fnValidateSelectOne(value, element) { return (element.value != "none"); } NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 83 NGÔN NGỮ WEB HTML, CSS & JQUERY /* Định nghĩa luật kiểm tra kết hợp với hàm thông báo lỗi kết trả hàm có giá trị false */ $.validator.addMethod("selectone", fnValidateSelectOne, "Please select an item."); $.validator.addMethod("vinaphone", fnValidateMobile, "Please enter a valid VinaPhone number."); $.validator.addMethod("saigonmoto", fnValidateSaigonMoto, "Please enter a valid Saigon moto number."); $.validator.addMethod("networkip", fnValidateNetuworkIP, "Please enter valid a network IP."); $(document).ready(function () { $("#form1").validate( { rules: { sport: { selectone: true }, mobile: { vinaphone: true } }, messages: { sport: { selectone: "Vui lòng chọn môn thể thao" }, mobile: { vinaphone: "Không phải số di động Việt nam" } } }); }); label.error { color: Red; } Luật kiểm tra tùy biến

Số xe máy Sài gòn:

Địa server: NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 84 NGÔN NGỮ WEB HTML, CSS & JQUERY

Số điện thoại di động:

Thể thao: Chọn môn thể thao Bóng chày Bóng rỗ Bóng chuyền Bóng đã

Hình 6.18: Kiểm lỗi form nhập Phân tích ví dụ: Trong định nghĩa luật kiểm tra vinaphone, saigonmoto, networkip selectone Và sau áp dụng để kiểm tra liệu cho thành phần giao diện form Để hiểu chế định nghĩa sử dụng cần thực bước sau  Bước 1: Định nghĩa cần bước viết hàm kiểm tra khai báo luật kiểm với Jquery  Viết hàm kiểm tra: NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 85 NGÔN NGỮ WEB HTML, CSS & JQUERY /* Định nghĩa hàm kiểm tra số di động việt nam */ function fnValidateMobile(value, element) { var regex = /^0[0-9]{9,10}$/g; return this.optional(element) || regex.test(value); } Cú pháp hàm phải nhận tham số vào value (giá trị nhập vào) element (phần tử gây lỗi) Hàm phải trả kết true (đã hợp lệ) false (không hợp lệ) Bạn phân tích giá trị để thực kiểm tra nhờ vào tham số value thay đổi css hay giá trị phần tử thông qua tham số element  Khai báo luật kiểm với Jquery Sau định nghĩa hàm kiểm tra, bước định nghĩa luật kiểm tương ứng với hàm tất nhiên cung cấp thông báo lỗi /* Định nghĩa luật kiểm tra kết hợp với hàm thông báo lỗi kết trả hàm có giá trị false */ $.validator.addMethod("vinaphone", fnValidateMobile, "Please enter a valid VinaPhone number."); Sử dụng phương thực $.validator.addMethod(rule, method, message) để khai báo luật kiểm Tham số rule (“vinaphone”) tên luật mới, tham số method (“fnValidateMobile”) tên phương thức kết hợp với luật message (“Please enter a valid VinaPhone number.”) thông báo lỗi  Bước 2: sử dụng Bạn sử dụng luật luật định nghĩa sẵn Jquery Cụ thể bạn định tùy chọn rules (rules: {mobile: { vinaphone: true }}) phương thức validate thẻ cần kiểm tra “” 3.8 Các thành phần giao diện Giao diện đóng vai trị quan trọng việc làm web Gioa diện tốt thể chỗ đẹp, hợp logic, tương thích với trình duyệt tốc độ tải nhanh Bộ thư viện jquery-ui gần đáp ứng hoàn toàn yêu cầu đề Để làm việc với thành phần giao diện bạn cần thư viện css javascript cung cấp Jquery sau // phần thư viện lõi thường dùng trước // css cần thiết cho thành phần giao diện // thư viện xử lý thành phần giao diện NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 86 NGÔN NGỮ WEB 3.8.1Datepicker HTML, CSS & JQUERY Datepicker thành phần giao diện cần thiết để nhập ngày tháng nhanh chóng tránh sai sót Nó cho phép định dạng tùy thích Hình 6.19: Datepicker $(document).ready(function () { $("#birthday, #joined").datepicker({ dateFormat: 'yy-mm-dd' }); }); body{font-size: 11px;} Date of birth: Date of registration: Phân tích ví dụ: ngồi dòng định thư viện cần dùng, bạn cần lưu { dòng lệnh quan trọng là: $("#birthday, #joined").datepicker({ dateFormat: 'yy-mm-dd' }); NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 87 NGÔN NGỮ WEB HTML, CSS & JQUERY Cho biết ô nhập #birthday #joined áp dụng datepicker Phần tùy chọn cho biết định dạng ngày năm-tháng-ngày (mặc định mm/dd/yyyy) 3.8.2Accordion Accordion thành phần giao diện chia làm nhiều phần thời điểm cho phép hiển thị vùng Bạn qui định kiện click, mouseover…để thực việc mở vùng Hình 6.20: sử dụng Accordion $(function () { $("#accordion").accordion({autoHeight: false, event: "mouseover"}); }); #accordion{font-size: 11px;} NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 88 NGÔN NGỮ WEB HTML, CSS & JQUERY Cơ bản Lập trình web

  • Servlet
  • Java Server Page
  • Java Bean
  • JSTL & EL
  • Custom Tag
  • Filter
  • Listener
  • Security
  • Web Service
  • MVC Frameworks
Thực dự án phần mềm Androi MVC Frameworks Phân tích ví dụ: Phần HTML: vùng gồm tiều đề (mặc định dùng thẻ ) nội dung (mặc định dùng thẻ kế sau) Các vùng đặt thẻ container (bài dùng thẻ ) Phần Jquery: $("#accordion").accordion({autoHeight: false, event: "mouseover"}); khởi tạo vùng accordion autoHeight tùy chọn qui định chiều cao vùng khơng cố định cịn tùy chọn event hành vi thực mở vùng 3.8.3Tab Hình ảnh tab quen thuộc với bạn Accordion Tuy nhiên chất, tab Accordion lại giống Tại thời điểm có vùng mở NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 89 NGÔN NGỮ WEB HTML, CSS & JQUERY Hình 6.21: Sử dụng tab $(function () { $("#tabs").tabs({ event: "mouseover"}); }); #tabs{font-size: 11px;}
  • Cơ bản
  • Lập trình web
  • Đồ án tốt nghiệp
  • Servlet
  • NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 90 NGÔN NGỮ WEB HTML, CSS & JQUERY
  • Java Server Page
  • Java Bean
  • JSTL & EL
  • Custom Tag
  • Filter
  • Listener
  • Security
  • Web Service
  • MVC Frameworks
Phân tích ví dụ: Phần HTML: thẻ dụng làm container Một thẻ
    chứa tiêu đề tab, liên kết tiêu đề đến thuộc tính id thẻ chứa nội dung tab Phần Jquery: $("#tabs").tabs({ event: "mouseover"}); khởi động vùng tabs định kiện thực hành vi chọn tab 3.8.4Dialog Hộp thoại thành phần cần thiết để thực công việc thông báo, tiếp nhận liệu người dùng cách mềm dẻo Hình 6.22: Sử dụng Dialog NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 91 NGÔN NGỮ WEB HTML, CSS & JQUERY $(function () { $("#dialog").dialog({ autoOpen: false, show: "blind", hide: "explode", modal: true, buttons: { Yes: function () { $(this).dialog("close"); }, No: function () { $(this).dialog("close"); }, Cancel: function () { $(this).dialog("close"); } } }); $("#opener").click(function () { $("#dialog").dialog("open"); return false; }); }); body{font-size: 11px;}
    • Servlet
    • Java Server Page
    • Java Bean
    • JSTL & EL
    • MVC Frameworks
    Open Dialog Phân tích ví dụ: NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 92 NGÔN NGỮ WEB HTML, CSS & JQUERY Phần HTML: đóng vai trị container hộp thoại Nút đóng vai trị nút kích hoạt mở hộp thoại Phần Jquery:  $("#dialog").dialog({tùy chọn}); khởi động hộp thoại với tùy chọn sau: o autoOpen: false không cho mở hộp thoại lúc khởi động o show: "blind", hide: "explode" điều khiển hiệu ứng mở đóng o modal: true để khơng cho phép tương tác cửa sổ mẹ o buttons{} khai báo nút hàm xử lý click nút  $("#opener").click(); lệnh để mở hộp thoại click #opener 3.8.5Jquery plugins thơng dụng Trên giới cịn nhiều jquery pluggin viết giao diện thự tuyệt vời, bạn tìm kiếm, chia bạn bè giới jquery khắp nơi Sau số từ khóa google để bạn tìm thấy thành phần giao diện khác hay hơn, hấp dẫn hơn:     Jquery Scrollable Jquery TreeView Jquery Menu Jquery Round Conner 3.9 Ajax 3.9.1Giới thiệu Đặc điểm bậc Ajax kỹ thuật tương tác với server theo chế bất đồng để tạo cảm giác người dùng làm việc ứng dụng desktop mà web Jquery cung cấp số hàm để thực điều Trong giới thiệu hàm ajax chung Jquery thảo luận số tùy chọn thường xuyên sử dụng Xin mời bạn đến với jquery.com để xem chi tiết Cú pháp hàm $ajax: $.ajax( ) : chứa thông số để hàm thực Ví dụ sau kết nhận chạy trang web Ajax.htm Hình 6.23: phản hồi từ server Trang Ajax.htm NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 93 NGÔN NGỮ WEB HTML, CSS & JQUERY $.ajax({ url: "Ajax.jsp", data: "name=John&location=Boston", success: function (responseText) { alert("Đã lưu liệu thành công: " + responseText); } }); Trang Ajax.jsp
  • ${param.name}
  • ${param.location}
  • Phân tích kết quả: Thư viện lõi đủ để thực ajax Hàm $.ajax({tùy chọn}) gồm:  url: trang web phía server cần tương tác (“Ajax.jsp”)  data: liệu (“name=John&location=Boston”) cần truyền đến server đẻ trang url (“Ajax.jsp”) xử lý  success: hàm điều khiển kết trả từ server Trong thông báo thông qua hộp thoại alert() Tham số hàm (responseText) kết trả từ server Thông thường kết trả thường hiển thị lên trang web thông qua số thẻ Trong trường hợp bạn muốn hiển thị lên phầm body trang web thay dịng lệnh alert("Đã lưu liệu thành cơng: " + responseText); dịng $(‚body‛).html("Đã lưu liệu thành công: " + responseText) Tải thực JavaScript: cần tải thực đoạn JavaScript sinh động từ phía server Để làm điều cần định tùy chọn dataType script Ví dụ sau bạn click vào nút OK thời gian nhập cập nhật theo thời gian server NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 94 NGÔN NGỮ WEB HTML, CSS & JQUERY Hình 6.24: Dùng ajax để lấy server Trang Ajax.htm $(document).ready(function () { $("button").click(function () { $.ajax({ type: "GET", url: "ServerTime.jsp", cache: false, dataType: "script" }); }); }); Server time: OK Trang ServerTime.jsp 3.10 Bài tập Viết lọc thực theo yêu cầu sau NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 95 NGÔN NGỮ WEB 10 11 12 13 14 15 16 HTML, CSS & JQUERY Tìm tất thẻ Tìm tất thẻ thẻ Tìm thẻ đặt Tìm tất thẻ
  • có nội dung Tìm tất thẻ chưa đánh dấu Tìm tất thẻ chưa nhập liệu Đọc/ghi liệu form  TextBox  Radio  CheckBox  ComboBox  ListBox  CheckBoxList  TextArea Thay đổi kiểu dáng thành phần web  Màu hàng (thường hover)  Ảnh đường kẻ cho vùng  Nội dung thông báo hay tùy biến Dựa vào focus blur để tạo hiệu ứng Stringfall Dựa vào kiện hover để tạo tín hiệu tích cực cho thành phần web Ẩn block Ẩn form đăng nhập thông tin tài khoản dạng menu Bỏ hàng vào giỏ Định nghĩa class error cho thẻ input Kiểm tra form đăng nhập, đổi mật Tạo form nhập bước kiểm lỗi ô nhập form sau Hình 6.25: Kiểm lỗi form đăng k{ 17 Sử dụng Dialog cho trường hợp NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 96 NGÔN NGỮ WEB 18 19 20 21 22 23 24 HTML, CSS & JQUERY  Thông báo lỗi, xác nhận lỗi  Đăng nhập nhanh  Gửi mail cho bạn bè Sử dụng Accordion để làm menu đứng Sử dụng tab để xây dựng CRUD giao diện Tab dành cho edition (thêm, sử, xóa) Tab dành cho seacrh (tìm kiếm, hiển thị) Sử dụng Datepicker cho tất ô nhập ngày Tab ajax Tải liên kết ajax Kiểm tra tính hợp lệ thơng qua ajax  Login  Captcha Tìm kiếm nhanh dựa vào kiện keyup NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 97 ... name="Design" >Thiết kế web< /a> Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web Thiết kế web

    < /HTML> Kết chạy... tài liệu HTML Một tài liệu HTML gồm phần bản:  Phần : Mọi tài liệu HTML phải bắt đầu thẻ mở HTML kết thúc thẻ đóng HTML < /HTML> … < /HTML> Thẻ HTML báo cho trình duyệt biết... (demo .css) NGUYỄN NGHIỆM - NNGHIEM@YAHOO.COM - 0913745789 TRANG 34 NGÔN NGỮ WEB HTML, CSS & JQUERY H2{color:red;font-size: 14px;} Liên kết áp dụng CSS HTML, CSS & JQuery< /title>

Ngày đăng: 18/09/2022, 00:25

w