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

 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ẻ … để 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 
 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 
 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 một sự kiện trong HTML 
 function myFunction() { 
 var age,voteable; 
 age=document.getElementById("age").value; 
 voteable=(age<18)?"Too young":"Old enough"; 
 document.getElementById("demo").innerHTML=voteable; 
 } 
 Try it 
Slide 3 - Làm việc với Javascript và JQuery 12 
 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: 
 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 
   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 
 hp://jquery.com/	
hp://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(){ 
 $(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 
 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: 
 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 
 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 
 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 
 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 
 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 
 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 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 
 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 thêm nội dung HTML: 
 $("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 - 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 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