Bài giảng Bài 6: Tạo hiệu ứng và validate Form - ĐH FPT
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.6 MB, 42 trang )
Bài 6:
Tạ o hiệ u ứ ng và validate Form
Hệ thố ng bài cũ
Giớ i thiệ u về mô hình Document Object Model
Giớ i thiệ u về HTML DOM
Cấ u trúc DOM
Thuộ c tính củ a node
Phư ơ ng thứ c củ a node
Truy cậ p đế n node
Thêm node
Xóa node
Truy cậ p và thay đổ i style củ a các element
Đố i phó vớ i các trình duyệ t khác nhau
Tạ o hiệ u ứ ng và validate Form
2
Mụ c tiêu bài họ c
Viế t mã tạ o các hiệ u ứ ng
Hiệ u ứ ng Image Rollover
Hiệ u ứ ng SlideShow
Thao tác vớ i các điề u khiể n
SelectBox
CheckBox
RadioButton
Form
Kiể m tra tính hợ p lệ cho Form
Tạ o hiệ u ứ ng và validate Form
3
CÁC HI Ệ U Ứ NG
Biế n và toán tử
4
I mage Rollover
I mage Rollover là hiệ u ứ ng thay đổ i ả nh khi di chuộ t lên
ả nh
Ả nh hiệ n lên khi
chạ y ứ ng dụ ng
Tạ o hiệ u ứ ng và validate Form
Ả nh hiệ n lên khi di
chuộ t lên ả nh
5
Tạ o hiệ u ứ ng Rollover
Thự c hiệ n hiệ u ứ ng này bằ ng cách xử lý sự kiệ n
onMouseOver và onMouseOut cho thẻ img
onMouseOver: sự kiệ n đư ợ c kích hoạ t khi ngư ờ i dùng di chuộ t
lên ả nh
onMouseOut: sự kiệ n đư ợ c kích hoạ t khi ngư ờ i dùng di chuộ t ra
ngoài ả nh
Tạ o hiệ u ứ ng và validate Form
6
Demo Rollover
<html>
<head>
<script type="text/javascript">
function onMouseOverEvent() {
document.img_hoa.src = "hoaover.jpg";
}
function onMouseOutEvent() {
document.img_hoa.src = "hoaout.jpg";
Truy cậc p ế n phầ
ph n
}
ttử bằ
b ng attribute
</script>
name
</head><body>
onmouseover="onMouseOverEvent();" onmouseout="onMouseOutEvent();" /></body>
</html>
Xem Demo/Rollover
Tạ o hiệ u ứ ng và validate Form
7
Vấ n đề nả y sinh khi thự c hiệ n Rollover
Vấ n đề : Lầ n đầ u tiề n di chuộ t lên ả nh, sẽ mấ t mộ t thờ i gian
ả nh mớ i đư ợ c load mặ c dù trang web đã đư ợ c mở ra từ lâu
Nguyên nhân: Khi ngư ờ i dùng di chuộ t lên, ả nh mớ i đư ợ c
load
Giả i pháp: Load trư ớ c ả nh
Kỹ thuậ t:
Tạ o đố i tư ợ ng image cho mỗ i ả nh muố n load trư ớ c
Gán đư ờ ng dẫ n củ a ả nh cho thuộ c tính src củ a đố i tư ợ ng ả nh
đó
Giả i thích:
Khi gặ p lệ nh imageObject.src= “link_cua_anh” thì ả nh
đư ợ c load ngầ m bên dư ớ i, máy tính tiế p tụ c thự c hiệ n các lệ nh
sau lệ nh này
Giả i pháp này không làm cho việ c load trang web chậ m đi
Tạ o hiệ u ứ ng và validate Form
8
Demo load trư ớ c ả nh
<html><head>
<script type="text/javascript">
var hoaover = new Image();
var hoaout = new Image();
function loadAnh() {
hoaover.src = "hoaover.jpg";
hoaout.src = "hoaout.jpg";
}
function onMouseOverEvent() {
document.img_hoa.src = hoaover.src
}
function onMouseOutEvent() {
document.img_hoa.src = hoaout.src
}
</script></head>
<body onload = "loadAnh();">
onmouseover="onMouseOverEvent();" onmouseout="onMouseOutEvent();" /></body></html>
Xem Rollover/preLoad
Tạ o hiệ u ứ ng và validate Form
9
Slide Show
Slide Show là gì
Là hiệ u ứ ng ả nh đư ợ c hiệ n ra thay thế cho ả nh trư ớ c đó
Có thể có thanh điề u khiể n cho ngư ờ i dùng
Thanh iề u khiể n
Truy cậ p trang web để tham khả o các
slide show làm bằ ng javascript
Tạ o hiệ u ứ ng và validate Form
10
Các bư ớ c làm Slide Show
Các bư ớ c để làm Slide Show
Load trư ớ c tấ t cả các ả nh
Xử lý sự kiệ n cho button Next
Xử lý sự kiệ n cho button Back
<body onload = "loadAnh();">
<img id="hoa" src="anh0.jpg" />
<input type="button" value="back" onclick="back();" />
<input type="button" value = "next" onclick="next();"/>
</body>
Xem SlideShow
Tạ o hiệ u ứ ng và validate Form
11
Demo làm Slide Show
var anhAr = [];
var currentIndex=0;
function loadAnh() {
for (var i = 0; i < 6; i++) {
anhAr[i] = new Image();
anhAr[i].src = "anh"+i+".jpg";
}
}
function next() {
if (currentIndex < 4) {
currentIndex++;
document.getElementById("hoa").src = anhAr[currentIndex].src;
}
}
function back() {
if (currentIndex > 0) {
currentIndex--;
document.getElementById("hoa").src = anhAr[currentIndex].src;
}
}
Tạ o hiệ u ứ ng và validate Form
12
Kế t quả Demo
Ả nh ư ợ c thay
ổ i sau khi nhấ n
Next
Tạ o hiệ u ứ ng và validate Form
13
Bả n đồ ả nh
Bả n đồ ả nh là ả nh có nhữ ng vùng cụ thể đư ợ c đị nh nghĩa để
thự c hiệ n mộ t hành độ ng nào đó khi ngư ờ i dùng tác độ ng lên
Cho ngư ờ i dùng chọ n khu vự c (đấ t nư ớ c) mà ngư ờ i truy cậ p cư trú
Sử dụ ng như menu cho ngư ờ i dùng chọ n mặ t hàng cầ n mua
Tạ o hiệ u ứ ng và validate Form
Xem World Map
14
Bả n đồ ả nh
HTML cung cấ p thẻ map để tạ o bả n đồ ả nh
Thẻ map đi liề n sau thẻ img, thuộ c tính usemap củ a thẻ
img có giá trị bằ ng giá trị thuộ c tính name củ a thẻ map
tư ơ ng ứ ng
Thẻ area trong thẻ map để chỉ ra các vùng trên bả n đồ .
Vùng trên bả n đồ đư ợ c chỉ ra bằ ng thuộ c tính coords
Tạ o hiệ u ứ ng và validate Form
15
Bả n đồ ả nh
Thuộ c tính usemap củ a ả nh có giá trị
bằ ng giá trị củ a thuộ c tính name củ a thẻ
map
<img width="1000" src="bando.jpg" usemap="#bando" id="bando" />
<map name="bando">
onmouseover="document.getElementById('bando').src='bando.chaumy.jpg'"/>
onmouseover="document.getElementById('bando').src='bando.chauphi.jpg'"/>
onmouseover="document.getElementById('bando').src='bando.chauau.jpg'"/>
onmouseover="document.getElementById('bando').src='bando.chaua.jpg';"/>
onmouseover="document.getElementById('bando').src='bando.chauuc.jpg';" />
</map>
Tạ o hiệ u ứ ng và validate Form
16
CÁC ĐI Ề U KHI Ể N
Biế n và toán tử
17
Các điề u khiể n
Javascript cung cấ p các điề u khiể n để tư ơ ng tác vớ i ngư ờ i
dùng
Select Box
CheckBox
Radio Button
Form
Tạ o hiệ u ứ ng và validate Form
18
Attribute name
Mộ t số element đư ợ c đị nh nghĩa thêm thuộ c tính name (ví dụ
như các điề u khiể n checkbox, radio button…)
Có thể sử dụ ng attribute name để truy cậ p đế n mộ t nhóm
các element có cùng giá trị attribute name
Phân biệ t id và name
id là duy nhấ t, mỗ i id đạ i diệ n cho 1 element
Nhiề u phầ n tử có cùng giá trị củ a attribute name, mỗ i giá trị
name đạ i diệ n cho mộ t nhóm các phầ n tử
Sử dụ ng phư ơ ng thứ c getElementsByName(name) để lấ y về
mộ t mả ng các element có cùng thuộ c tính name
Tạ o hiệ u ứ ng và validate Form
19
Demo sử dụ ng attribute name
để truy cậ p đế n mộ t nhóm các phầ n tử
<html>
<body >
<input type="checkbox" name="test" value="how"/>
<input type="checkbox" name="test" value="are"/>
<input type="checkbox" name="test" value="you"/>
<input type="checkbox" name="test" value="?"/>
<script type="text/javascript">
var ckAr = document.getElementsByName("test");
var str = "";
for (var i = 0; i < ckAr.length; i++) {
str = str + " "+ ckAr[i].value
}
alert(str);
</script>
</body>
</html>
Tạ o hiệ u ứ ng và validate Form
20
Select Box
Select Box
<select id="country">
<option selected="selected">Viet Nam</option>
<option value="Anh">Anh</option>
<option value="My">My</option>
</select>>
Trên FireFox, truy cậ p đế n giá trị đư ợ c chọ n củ a Select
Box bằ ng thuộ c tính value
document.getElementById("country").value
Trên FireFox cũng có thể thiế t lậ p giá trị đư ợ c chọ n cho
Select box bằ ng JavaScript
document.getElementById("country").value = "Mỹ "
Tạ o hiệ u ứ ng và validate Form
21
Demo sử
dụ ng Select Box
Bài toán
Khi nhấ n vào button Chọ n Quố c Gia sẽ hiể n thị nư ớ c đư ợ c
chọ n
Xem Dieu khien\SelectBox
Tạ o hiệ u ứ ng và validate Form
22
Demo sử
dụ ng Select Box
<html ><head>
<script type="text/javascript">
function chonQuocGiaClick(){
var name = document.getElementById("country").value;
alert(name);
}
</script>
</head>
<body>
<select id="country">
<option selected="selected">Viet Nam</option>
<option value="Anh">Anh</option>
<option value="My">My</option>
</select>
<input type ="button" value="Chọ n Quố c Gia" onclick="chonQuocGiaClick()" />
</body></html>
Tạ o hiệ u ứ ng và validate Form
23
Demo thiế t lậ p giá trị cho Select Box
Bài toán
<body>
<input type="button" value="Chau A" onclick= "chauAClick();" />
<input type="button" value="Chau Au" onclick="chauAuClick();"/>
<input type="button" value="Chau My" onclick="chauMy();" />
<select id="country">
<option selected="selected">Viet Nam</option>
<option value="Anh">Anh</option>
<option value="My">My</option>
</select>
</body>
Click vào
Chau Au
Click vào
Chau My
Tạ o hiệ u ứ ng và validate Form
Xem Dieu khien\Select box
24
Demo thiế t lậ p giá trị cho Select Box
<script type="text/javascript">
function chauAClick() {
document.getElementById("country").value = "Viet Nam";
}
function chauAuClick() {
document.getElementById("country").value = "Anh";
}
function chauMy() {
document.getElementById("country").value = "My";
}
</script>
Tạ o hiệ u ứ ng và validate Form
25
