Giáo trình HTML5 - Bài 3: Làm việc với Javascript và Jquery

Nội dung text: Giáo trình HTML5 - Bài 3: Làm việc với Javascript và Jquery

1. BÀI 3 LÀM VIỆC VỚI JAVASCRIPT VÀ JQUERY
2. NHẮC LẠI BÀI TRƯỚC Sử dụng ngôn ngữ đánh dấu HTML5 Làm việc với các phần tử nội dung (content) của HTML5 Tổng quan về những thành phần form mới của HTML5 Làm việc với thành phần form mới trong HTML5 Slide 3 - Làm việc với Javascript và JQuery 2
3. MỤC TIÊU BÀI HỌC Tổng quan về Javascript và Jquery Làm việc với Javascript Làm việc với thư viện Jquery Học Javascript, jQuery với w3schools Slide 3 - Làm việc với Javascript và JQuery 3
4. TỔNG QUAN VỀ JAVASCRIPT
5. TỔNG QUAN VỀ JAVASCRIPT Javascript là ngôn ngữ kịch bản có cấu trúc và cú pháp riêng Được sử dụng để thiết kế thêm tương tác trên trang web Thường được nhúng trực tiếp vào trang HTML Sử dụng rộng rãi, không cần bản quyền Slide 3 - Làm việc với Javascript và JQuery 5
6. TỔNG QUAN VỀ JAVASCRIPT Javascript có thể làm được gì? Cung cấp cho nhà thiết kế HTML công cụ lập trình Phản ứng được với các sự kiện, ví dụ: trang web vừa load xong, sự kiện nhấn chuột, Có thể đọc, thay đổi nội dung của phần tử HTML Xác nhận dữ liệu, ví dụ: dữ liệu đầu vào Phát hiện trình duyệt của người dùng Được sử dụng để tạo ra các cookie Slide 3 - Làm việc với Javascript và JQuery 6
7. LÀM VIỆC VỚI JAVASCRIPT
8. LÀM VIỆC VỚI JAVASCRIPT Khai báo javascript: Sử dụng cặp thẻ để chèn javascript vào trang HTML Trong cặp thẻ chứa các thuộc tính để xác định ngôn ngữ kịch bản Mã javascirpt được thực hiện bởi trình duyệt Slide 3 - Làm việc với Javascript và JQuery 8
9. LÀM VIỆC VỚI JAVASCRIPT Javasscript có thể được đặt trong vùng hoặc vùng . . Slide 3 - Làm việc với Javascript và JQuery 9
10. LÀM VIỆC VỚI JAVASCRIPT Câu lệnh javascript: Được thực hiện bởi trình duyệt Thực hiện theo thứ tự câu lệnh document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?"; getElementById (): là phương pháp truy cập các yếu tố đầu tiên với ID xác định Slide 3 - Làm việc với Javascript và JQuery 10
11. LÀM VIỆC VỚI JAVASCRIPT Lệnh javascript được nhóm lại trong dấu { } để các chuỗi lệnh thực hiện cùng nhau function myFunction() { document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?"; } Slide 3 - Làm việc với Javascript và JQuery 11
12. LÀM VIỆC VỚI JAVASCRIPT Truy vấn tới mã lệnh javascript: • Thực hiện khai báo hàm js • Gán hàm đó với một sự kiện trong HTML function myFunction() { var age,voteable; age=document.getElementById("age").value; voteable=(age Try it Slide 3 - Làm việc với Javascript và JQuery 12
13. LÀM VIỆC VỚI JAVASCRIPT Sự kiện trong javascript: • Là hành động được phát hiện bởi javascript • Tất cả các yếu tố trên trang web đều có sự kiện được kích hoạt bởi javascript • Các sự kiện được thường được sử dụng kết hợp với các chức năng, và các chức năng sẽ không được thực hiện trước khi sự kiện xảy ra! • Một số sự kiện: onMouseOver, onSubmit, onFocus, onBlur, onChange, onClick, Slide 3 - Làm việc với Javascript và JQuery 13
14. LÀM VIỆC VỚI JAVASCRIPT Biến trong javascritpt: Được sử dụng để giữ các giá trị hoặc biểu thức Một biến phải được gắn tên (ví dụ: x, orderlist, ) Quy tắc đặt tên biến: • Bắt đầu bằng chữ cái, các ký tự hoặc ký tự gạch dưới • Tên biến phân biệt chữ hoa và chữ thường (ví dụ: x và X là 2 biến khác nhau) Khai báo biến trong javascript và gán giá trị cho biến: var carname; var carname=" BMW "; carname=“BMW"; Slide 3 - Làm việc với Javascript và JQuery 14
15. LÀM VIỆC VỚI JAVASCRIPT Javascript framework: Là giải pháp tốt nhà thiết kế Cung cấp một số thư viện có sẵn Bao gồm các hàm đã được xây dựng và kiểm tra bởi nhà thiết kế và phát triển Bao gồm nhiều hàm có sẵn và sử dụng được ngay Slide 3 - Làm việc với Javascript và JQuery 15
16. JQUERY hp://jquery.com/ hp://www.w3schools.com/jquery/default.asp
17. JQUERY Ví dụ: ứng dụng jQuery để ẩn thành phần trên trang $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); If you click on me, I will disappear. Click me away! Click me too! Slide 3 - Làm việc với Javascript và JQuery 17
18. JQUERY Slide 3 - Làm việc với Javascript và JQuery 18
19. JQUERY Là thư viện mới của javascript Dễ dàng tiếp cận đối với người thiết kế Thư viện JQuery làm việc với thành phần sau: Thành phần HTML lựa chọn Thành phần HTML thao tác CSS thao tác Sự kiện HTML Hiệu ứng JavaScript và hoạt hình HTML DOM AJAX Utilities Slide 3 - Làm việc với Javascript và JQuery 19
20. JQUERY Khai báo jQuery: Truy vấn với file jquery.js Có thể download phiên bản mới nhất trên website: hp://jquery.com/ Download Jquery: hiện tại có 2 phiên bản JQuery Slide 3 - Làm việc với Javascript và JQuery 20
21. JQUERY Cú pháp của Jquery: Chọn phần tử HTML để truy vấn Thực hiện các " actions" tới các phần tử đó $(selector).acon() • $: xác định Jquery • (selector): truy vấn tới thành phần HTML • Acon: thể hiện hành động trên thành phần được chọn Ví dụ: $(this).hide() Thực hiện jQuery () ẩn, ẩn các yếu tố hiện HTML. $(“#test”).hide() Thực hiện jQuery () ẩn , ẩn yếu tố có id= test $(“p”).hide() Thực hiện jQuery () ẩn , ẩn tất cả các thành phần $(“.test”).hide() Thực hiện jQuery () ẩn , ẩn yếu tố có class= test Slide 3 - Làm việc với Javascript và JQuery 21
22. JQUERY Jquery selector : Là thành phần quan trọng trong thư viện Jquery Cho phép lựa chọn, thao tác tới các thành phần HTML như một nhóm hay yếu tố duy nhất Cú pháp: $() Jquery selectors Giải nghĩa $("*") Lựa chọn toàn bộ thành phần $("p") Lựa chọn toàn bộ thành phần $("p.intro") Lựa chọn toàn bộ thành phần có class là intro $("p#intro") Lựa chọn thành phần đầu ên có id= intro $(":animated") Lựa chọn toàn bộ thành phần hoạt hình $(":buon") Lựa chọn toàn bộ thành phần có kiểu là “buon” Slide 3 - Làm việc với Javascript và JQuery 22
23. JQUERY Sự kiện Jquery: Các phương pháp xử lý sự kiện là chức năng cốt lõi của Jquery Sự kiện gọi một hàm được thực $(document).ready(function(){ hiện khi có sự kiện $("button").click(function(){ nhấn chuột $("p").hide(); }); }); Slide 3 - Làm việc với Javascript và JQuery 23
24. JQUERY Một số sự kiện của Jquery: Sự kiện Giải nghĩa $(document).ready(funcon) Liên kết tới hàm sự kiện (khi vừa load xong) $(selector).click(funcon) Liên kết tới hàm gọi sự kiện nhấn chuột $(selector).dblclick(funcon) Liên kết tới hàm gọi sự kiện nhấn đúp chuột $(selector).focus(funcon) Liên kết tới hàm gọi sự kiện trọng tâm của thành phần được chọn $(selector).mouseover(funcon) Liên kết tới hàm gọi sự kiện nhấn mouseover Slide 3 - Làm việc với Javascript và JQuery 24
25. JQUERY Hàm callback trong JQuery: Được sử dụng để ngăn chặn các mã tiếp theo được chạy Hàm có hiệu lực khi các hành động kết thúc Cú pháp: $(selector).hide(speed,callback) Ví dụ: $("p").hide(1000,function(){ alert("The paragraph is now hidden"); }); Slide 3 - Làm việc với Javascript và JQuery 25
26. JQUERY Thao tác với Jquery HTML: jQuery có phương pháp mạnh mẽ để thay đổi và thao tác với các phần tử HTML và thuộc tính của chúng. $(document).ready(funcon(){ $("buon").click(funcon(){ $("p").html("W3Schools"); }); }); This is a heading This is a paragraph. This is another paragraph. Click me Slide 3 - Làm việc với Javascript và JQuery 26
27. JQUERY Chèn thêm nội dung HTML: $("p").append(" W3Schools."); Slide 3 - Làm việc với Javascript và JQuery 27
28. JQUERY Chèn thêm nội dung HTML: $("p").prepend("W3Schools. "); Slide 3 - Làm việc với Javascript và JQuery 28
29. JQUERY Chèn thêm nội dung HTML: $("p").after("W3Schools"); Slide 3 - Làm việc với Javascript và JQuery 29
30. JQUERY Chèn thêm nội dung HTML: $("p").before("W3Schools"); Slide 3 - Làm việc với Javascript và JQuery 30
31. JQUERY Thao tác với Jquery CSS: Là phương thức quan trọng để thao tác với CSS Bao gồm 3 cú pháp khác nhau, nhằm thực hiện các nhiệm vụ khác nhau: • css(property) – Trả về giá trị mặc định của CSS • css(property,value) – Thiết lập giá trị và thuộc tính CSS • css({properties}) – Thiết lập nhiều thuộc tính và giá trị cho CSS Slide 3 - Làm việc với Javascript và JQuery 31
32. JQUERY css(property) $("p").css("background"); Slide 3 - Làm việc với Javascript và JQuery 32
33. JQUERY css(property,value) $("p").css("background","yellow"); Slide 3 - Làm việc với Javascript và JQuery 33
34. JQUERY css({properties}) $("p").css({"background":"yellow","font-size":"200%"}); Slide 3 - Làm việc với Javascript và JQuery 34
35. HỌC JAVASCRIPT & JQUERY VỚI W3SCHOOLS
36. W3SCHOOLS Javascript: Jquery: Cấu trúc bài học: Cụ thể, ngắn gọn Học từng thành phần, sự kiện Try it yourself Slide 3 - Làm việc với Javascript và JQuery 36
37. TỔNG KẾT Javascript là ngôn ngữ kịch bản có cấu trúc riêng Được sử dụng để thêm tính tương tác trên trang web, được nhúng trực tiếp vào trang HTML Có thể viết mã javascript ở vùng hoặc của trang HTML Jquery là một thư viện của javascript Có thể sử dụng các phiên bản jquery tại trang Slide 3 - Làm việc với Javascript và JQuery 37