Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 37 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
37
Dung lượng
2,56 MB
Nội dung
BÀI 3 LÀM VIỆC VỚI JAVASCRIPT VÀ JQUERY 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 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 TỔNG QUAN VỀ JAVASCRIPT 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 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 LÀM VIỆC VỚI JAVASCRIPT LÀM VIỆC VỚI JAVASCRIPT ! Khai báo javascript: ! Sử dụng cặp thẻ <script>…</script> ñể 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 !∀#∃%&∋(∋)&∗+∋∗,∋−./0/∀#∃%&∋1( 2222233( !−∀#∃%&∋1( LÀM VIỆC VỚI JAVASCRIPT ! Javasscript có thể ñược ñặt trong vùng <body> hoặc vùng <head> Slide 3 - Làm việc với Javascript và JQuery 9 <!DOCTYPE html> <html> <body> <script type="text/javascript"> . </script> </body> </html> <head> <script type="text/javascript"> . </script> </head> 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 ! 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 document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?"; [...]... )=2&3∃4! Slide 3 - Làm vi c v i Javascript và JQuery 26 JQUERY ! Chèn thêm n i dung HTML: $("p").append(" W3Schools.");! Slide 3 - Làm vi c v i Javascript và JQuery 27 JQUERY ! Chèn thêm n i dung HTML: $("p").prepend("W3Schools ");! Slide 3 - Làm vi c v i Javascript và JQuery 28 JQUERY ! Chèn thêm n i dung HTML: $("p").after("W3Schools");! Slide 3 - Làm vi c v i Javascript và JQuery 29 JQUERY ! Chèn... i Javascript và JQuery 31 JQUERY ! css(property) $("p").css("background");! Slide 3 - Làm vi c v i Javascript và JQuery 32 JQUERY ! css(property,value) $("p").css("background","yellow");! Slide 3 - Làm vi c v i Javascript và JQuery 33 JQUERY ! css({properties}) $("p").css({"background":"yellow","font-size":"200%"});! Slide 3 - Làm vi c v i Javascript và JQuery 34 H C JAVASCRIPT & JQUERY V I W3SCHOOLS... vi c v i Javascript và JQuery 19 JQUERY ! Khai báo jQuery: ≅∃8)(0ΑΒ(0Χ%(∆=∗(.78∗∃)3.∀( ΕΦ(∋4Γ(>9;Β=9/>(&4%ΗΒ(ΙϑΒ(:Χ%(Β4Α∋(∋∃ΗΒ(;∗Ι∀%∋∗6(45&6−−.78∗∃)3#9:−( ! Download Jquery: hi n t i có 2 phiên b n JQuery http://docs .jquery. com/Downloading _jQuery# Download _jQuery Slide 3 - Làm vi c v i Javascript và JQuery 20 JQUERY ! Cú pháp c a Jquery: !... - Làm vi c v i Javascript và JQuery 17 JQUERY Slide 3 - Làm vi c v i Javascript và JQuery 18 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. .. ς_/(#4⊥Β(∋9ΡΒ(ΙΖ(∋4ΡΒ4(&4ΣΒ(!%Β&8∋1((#Φ(ϕ%Γ8(=Ρ( Ι859Β ( Slide 3 - Làm vi c v i Javascript và JQuery 22 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 $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); Slide 3 - Làm vi c v i Javascript và JQuery κ_(ϕ%ΨΒ([⊥%(:Ζ∋(... 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 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... 3 - Làm vi c v i Javascript và JQuery 24 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: !∀#∃%∃&∋()∗+/01∃∀#2∃∃13&,%%4,&5∗! ! Ví d : $("p").hide(1000,function(){ alert("The paragraph is now hidden"); });! Slide 3 - Làm vi c v i Javascript và JQuery 25 JQUERY ! Thao tác v i Jquery HTML: ! jQuery. .. 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 JQUERY 45&6−−.78∗∃)3#9:−( 45&6−−;;;3;∗?/8=∋3/∀&( ( JQUERY ! Ví d : ng d ng jQuery ñ trang n thành ph n trên $(document).ready(function(){ $("p").click(function(){... 3 - Làm vi c v i Javascript và JQuery 30 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...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 LÀM VI C V I JAVASCRIPT ! Truy v n t i mã l nh javascript: • Th c hi n khai . 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 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. 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 LÀM VIỆC VỚI JAVASCRIPT 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 TỔNG QUAN VỀ JAVASCRIPT TỔNG QUAN VỀ JAVASCRIPT ! Javascript là