Bài giảng HTML5 bài 3 làm việc với javascript và jquery (đh FPT)

BÀI 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 phần tử nội dung (content) HTML5   Tổng quan thành phần form HTML5   Làm việc với thành phần form HTML5 Slide - Làm việc với Javascript JQuery MỤC TIÊU BÀI HỌC   Tổng quan Javascript 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 - Làm việc với Javascript JQuery TỔNG QUAN VỀ JAVASCRIPT TỔNG QUAN VỀ JAVASCRIPT   Javascript ngôn ngữ kịch có cấu trúc cú pháp riêng   Được sử dụng để thiết kế thêm tương tác trang web   Thường nhúng trực tiếp vào trang HTML   Sử dụng rộng rãi, không cần quyền Slide - Làm việc với Javascript JQuery TỔNG QUAN VỀ JAVASCRIPT   Javascript làm gì?   Cung cấp cho nhà thiết kế HTML công cụ lập trình   Phản ứng với kiện, ví dụ: trang web vừa load xong, kiện nhấn chuột, …   Có thể đọc, thay đổi nội dung phần tử HTML   Xác nhận liệu, ví dụ: liệu đầu vào   Phát trình duyệt người dùng   Được sử dụng để tạo cookie Slide - Làm việc với Javascript JQuery LÀM VIỆC VỚI JAVASCRIPT 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 thuộc tính để xác định ngôn ngữ kịch   Mã javascirpt thực trình duyệt   ……………     Slide - Làm việc với Javascript JQuery LÀM VIỆC VỚI JAVASCRIPT   Javasscript đặt vùng vùng …………… … Slide - Làm việc với Javascript JQuery LÀM VIỆC VỚI JAVASCRIPT   Câu lệnh javascript:   Được thực trình duyệt   Thực theo thứ tự câu lệnh document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?";   getElementById (): phương pháp truy cập yếu tố với ID xác định Slide - Làm việc với Javascript JQuery 10 JQUERY   Sự kiện Jquery:   Các phương pháp xử lý kiện chức cốt lõi Jquery $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); Slide - Làm việc với Javascript JQuery Sự  kiện  gọi  một   hàm  được  thực    khi  có  sự  kiện   nhấn  chuột   23 JQUERY   Một số kiện Jquery: Sự  kiện   Giải  nghĩa   $(document).ready(funcXon)     Liên  kết  tới  hàm  sự  kiện    (khi  vừa  load  xong)   $(selector).click(funcXon)   Liên  kết  tới  hàm  gọi  sự  kiện  nhấn  chuột   $(selector).dblclick(funcXon)   Liên  kết  tới  hàm  gọi  sự  kiện  nhấn  đúp  chuột   $(selector).focus(funcXon)   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(funcXon)   Liên  kết  tới  hàm  gọi  sự  kiện  nhấn  mouseover   Slide - Làm việc với Javascript JQuery 24 JQUERY   Hàm callback JQuery:   Được sử dụng để ngăn chặn mã chạy   Hàm có hiệu lự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 - Làm việc với Javascript JQuery 25 JQUERY   Thao tác với Jquery HTML:   jQuery có phương pháp mạnh mẽ để thay đổi thao tác với phần tử HTML thuộc tính   chúng         $(document).ready(funcHon(){      $("buKon").click(funcHon(){          $("p").html("W3Schools");      });   });         This  is  a  heading   This  is  a  paragraph.   This  is  another  paragraph.   Click  me       Slide - Làm việc với Javascript JQuery 26 JQUERY   Chèn thêm nội dung HTML: $("p").append(" W3Schools.");   Slide - Làm việc với Javascript JQuery 27 JQUERY   Chèn thêm nội dung HTML: $("p").prepend("W3Schools ");   Slide - Làm việc với Javascript JQuery 28 JQUERY   Chèn thêm nội dung HTML: $("p").after("W3Schools");   Slide - Làm việc với Javascript JQuery 29 JQUERY   Chèn thêm nội dung HTML: $("p").before("W3Schools");   Slide - Làm việc với Javascript 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 cú pháp khác nhau, nhằm thực nhiệm vụ khác nhau: •  css(property) – Trả giá trị mặc định CSS •  css(property,value) – Thiết lập giá trị thuộc tính CSS •  css({properties}) – Thiết lập nhiều thuộc tính giá trị cho CSS Slide - Làm việc với Javascript JQuery 31 JQUERY   css(property) $("p").css("background");   Slide - Làm việc với Javascript JQuery 32 JQUERY   css(property,value) $("p").css("background","yellow");   Slide - Làm việc với Javascript JQuery 33 JQUERY   css({properties}) $("p").css({"background":"yellow","font-size":"200%"});   Slide - Làm việc với Javascript JQuery 34 HỌC JAVASCRIPT & JQUERY VỚI W3SCHOOLS W3SCHOOLS   Javascript: http://www.w3schools.com/js/default.asp   Jquery: http://www.w3schools.com/jquery/default.asp   Cấu trúc học:   Cụ thể, ngắn gọn   Học thành phần, kiện   Try it yourself Slide - Làm việc với Javascript JQuery 36 TỔNG KẾT   Javascript ngôn ngữ kịch có cấu trúc riêng   Được sử dụng để thêm tính tương tác trang web, nhúng trực tiếp vào trang HTML   Có thể viết mã javascript vùng trang HTML   Jquery thư viện javascript   Có thể sử dụng phiên jquery trang http://jquery.com/ Slide - Làm việc với Javascript JQuery 37 [...]... - Làm việc vớ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. ..   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... Slide 3 - 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 việc với Javascript. .. Javascript và JQuery 19 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:  h5p:/ /jquery. com/     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à  “bu5on”   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 Sự  kiện  gọi... Slide 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: $(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 JQUERY   Thao tác với Jquery HTML:   jQuery. ..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 báo hàm js •  Gán hàm đó với. .. 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 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... $("p").before("W3Schools");   Slide 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. .. 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 h5p:/ /jquery. com/   h5p://www.w3schools.com /jquery/ default.asp     JQUERY   Ví dụ: ứng dụng jQuery để ẩn thành phần trên trang $(document).ready(function(){ $("p").click(function(){