Bài giảng HTML5 - Bài 3: Làm việc với JavaScript và JQuery (Mới)

ls 
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ẻ  để 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 
..	
  
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 
 . 
 . 
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?"; 
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 
Slide 3 - Làm việc với Javascript và JQuery 11 
function myFunction() { 
 document.getElementById("demo").innerHTML="Hello Dolly"; 
 document.getElementById("myDIV").innerHTML="How are 
you?"; 
} 
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 
Slide 3 - Làm việc với Javascript và JQuery 12 
function myFunction() { 
 var age,voteable; 
 age=document.getElementById("age").value; 
 voteable=(age<18)?"Too young":"Old enough"; 
 document.getElementById("demo").innerHTML=voteable; 
 } 
Try it 
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 
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: 
Slide 3 - Làm việc với Javascript và JQuery 14 
var carname; 
carname=“BMW"; 
var carname=" BMW "; 
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 
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 
Slide 3 - Làm việc với Javascript và JQuery 17 
 $(document).ready(function(){ 
 $("p").click(function(){ 
 $(this).hide(); 
 }); 
 }); 
 If you click on me, I will disappear. 
 Click me away! 
 Click me too! 
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 và JQuery 19 
JQUERY 
   Khai báo jQuery: 
  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 
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/	
  
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ử đó 
•   $:	
  xác	
  định	
  Jquery	
  
•   (selector):	
  truy	
  vấn	
  tới	
  thành	
  phần	
  HTML	
  
•   AcXon:	
  thể	
  hiện	
  hành	
  động	
  trên	
  thành	
  phần	
  được	
  chọn	
  
  Ví dụ: 
Slide 3 - Làm việc với Javascript và JQuery 21 
$(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	
  
$(selector).ac-on()	
  
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: $() 
Slide 3 - Làm việc với Javascript và JQuery 22 
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	
  Xên	
  có	
  id=	
  intro	
  
$(":animated")	
  	
   Lựa	
  chọn	
  toàn	
  bộ	
  thành	
  phần	
  hoạt	
  hình	
  	
  
$(":bu5on")	
   Lựa	
  chọn	
  toàn	
  bộ	
  thành	
  phần	
  	
  	
  có	
  kiểu	
  là	
  “bu5on”	
  
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 
Slide 3 - Làm việc với Javascript và JQuery 23 
$(document).ready(function(){ 
 $("button").click(function(){ 
 $("p").hide(); 
 }); 
}); 
Sự	
  kiện	
  gọi	
  một	
  
hàm	
  được	
  thực	
  
hiện	
  khi	
  có	
  sự	
  kiện	
  
nhấn	
  chuột	
  
JQUERY 
  Một số sự kiện của Jquery: 
Slide 3 - Làm việc với Javascript và JQuery 24 
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	
  
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: 
  Ví dụ: 
Slide 3 - Làm việc với Javascript và JQuery 25 
$(selector).hide(speed,callback)	
  
$("p").hide(1000,function(){ 
 alert("The paragraph is now hidden"); 
});	
  
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. 
Slide 3 - Làm việc với Javascript và JQuery 26 
$(document).ready(funcHon(){	
  
	
  	
  $("buKon").click(funcHon(){	
  
	
  	
  	
  	
  $("p").html("W3Schools");	
  
	
  	
  });	
  
});	
  
This	
  is	
  a	
  heading	
  
This	
  is	
  a	
  paragraph.	
  
This	
  is	
  another	
  paragraph.	
  
Click	
  me	
  
JQUERY 
  Chèn thêm nội dung HTML: 
Slide 3 - Làm việc với Javascript và JQuery 27 
$("p").append(" W3Schools.");	
  
JQUERY 
  Chèn thêm nội dung HTML: 
Slide 3 - Làm việc với Javascript và JQuery 28 
$("p").prepend("W3Schools. ");	
  
JQUERY 
  Chèn thêm nội dung HTML: 
Slide 3 - Làm việc với Javascript và JQuery 29 
$("p").after("W3Schools");	
  
JQUERY 
  Chèn thêm nội dung HTML: 
Slide 3 - Làm việc với Javascript và JQuery 30 
$("p").before("W3Schools");	
  
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 
JQUERY 
  css(property) 
Slide 3 - Làm việc với Javascript và JQuery 32 
$("p").css("background");	
  
JQUERY 
  css(property,value) 
Slide 3 - Làm việc với Javascript và JQuery 33 
$("p").css("background","yellow");	
  
JQUERY 
  css({properties}) 
Slide 3 - Làm việc với Javascript và JQuery 34 
$("p").css({"background":"yellow","font-size":"200%"});	
  
HỌC JAVASCRIPT & JQUERY VỚI 
W3SCHOOLS 
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 
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