Làm việc với javascrip và jquery html5

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.56 MB, 37 trang )

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?";
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
<script type="text/javascript">
function myFunction() {
var age,voteable;
age=document.getElementById("age").value;
voteable=(age<18)?"Too young":"Old enough";
document.getElementById("demo").innerHTML=voteable;
}
</script>
<button onclick="myFunction()">Try it</button>
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
45&6−−.78∗∃)3#9:−(
45&6−−;;;3;<∀#499=∀3#9:−.78∗∃)−>∗?/8=∋3/∀&(
(
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
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
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
<script type=
󲣿
text/javascript
󲤀
src=
󲣿
jquery.js
󲤀
></script>
≅∃8)(0ΑΒ(0Χ%(∆=∗(.78∗∃)3.∀(
ΕΦ(∋4Γ(>9;Β=9/>(&4%ΗΒ(ΙϑΒ(:Χ%(Β4Α∋(∋∃ΗΒ(;∗Ι∀%∋∗6(45&6−−.78∗∃)3#9:−(

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ử 󲚝ó
•  Κ6(,Λ#(ΜΝΒ4(Ο78∗∃)(
•  Π∀∗=∗#∋9∃Θ6(∋∃8)(0ΑΒ(∋Χ%(∋4ΡΒ4(&4ΣΒ(Τ≅Υς(
•  Ω#Ξ9Β6(∋4Γ(4%ΨΒ(4ΡΒ4(ΜΖΒ[(∋∃ΗΒ(∋4ΡΒ4(&4ΣΒ(Μ∴]#(#4⊥Β(
!  Ví dụ:
Slide 3 - Làm việc với Javascript và JQuery
21

ΚΠ∋4%∀Θ34%>∗ΠΘ( ≅4_#(4%ΨΒ(.8∗∃)(ΠΘ(αΒβ(αΒ(#Λ#()χ8(∋δ(4%ΨΒ(Τ≅Υς3(
ΚΠ󲣿ε∋∗∀∋󲤀Θ34%>∗ΠΘ( ≅4_#(4%ΨΒ(.8∗∃)(ΠΘ(αΒ(β(αΒ()χ8(∋δ(#Φ(%>+(∋∗∀∋(
ΚΠ󲣿&󲤀Θ34%>∗ΠΘ( ≅4_#(4%ΨΒ(.8∗∃)(ΠΘ(αΒ(β(αΒ(∋Α∋(#ϑ(#Λ#(∋4ΡΒ4(&4ΣΒ(!&1(
ΚΠ󲣿3∋∗∀∋󲤀Θ34%>∗ΠΘ( ≅4_#(4%ΨΒ(.8∗∃)(ΠΘ(αΒ(β(αΒ()χ8(∋δ(#Φ(#=/∀∀+(∋∗∀∋(
!∀#∃%∃&∋()∗+,&−(.∀∗!
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
!∀#∃%&∋(∃)∃∗+,%(∋∋ −./.∋01234∋
ΚΠφγφΘ( ς_/(#4⊥Β(∋9ΡΒ(ΙΖ(∋4ΡΒ4(&4ΣΒ(
ΚΠφ&φΘ( ς_/(#4⊥Β(∋9ΡΒ(ΙΖ(∋4ΡΒ4(&4ΣΒ(!&1(
ΚΠφ&3%Β∋∃9φΘ( ς_/(#4⊥Β(∋9ΡΒ(ΙΖ(∋4ΡΒ4(&4ΣΒ(!&1(#Φ(#=/∀∀(=Ρ(%Β∋∃9(
ΚΠφ&ε%Β∋∃9φΘ(( ς_/(#4⊥Β(∋4ΡΒ4(&4ΣΒ(!&1(ΜΣ8(ΞΗΒ(#Φ(%>+(%Β∋∃9(
ΚΠφ6/Β%:/∋∗>φΘ(( ς_/(#4⊥Β(∋9ΡΒ(ΙΖ(∋4ΡΒ4(&4ΣΒ(49η∋(4ιΒ4((
ΚΠφ6Ι859ΒφΘ( ς_/(#4⊥Β(∋9ΡΒ(ΙΖ(∋4ΡΒ4(&4ΣΒ(!%Β&8∋1((#Φ(ϕ%Γ8(=Ρ(󲣿Ι859Β󲤀(
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

<head>
<script type="text/javascript" src="jquery.js"></script>

!  Ví dụ:
Slide 3 - Làm việc với Javascript và JQuery
25
!∀#∃%∃&∋()∗+/01∃∀#2∃∃13&,%%4,&5∗!
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});!

Làm việc với javascrip và jquery html5

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về