Tải bản đầy đủ

Bài giảng Bài 6: Tạo hiệu ứng và validate Form - ĐH FPT

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



name

onmouseover="onMouseOverEvent();" onmouseout="onMouseOutEvent();" />



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



onmouseover="onMouseOverEvent();" onmouseout="onMouseOutEvent();" />

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 http://www.catswhocode.com/blog/top-10javascript-slideshows-carousels-and-sliders/ để 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







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



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';" />


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ử









Tạ o hiệ u ứ ng và validate Form

20


Select Box
Select Box
>

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








Tạ o hiệ u ứ ng và validate Form

23


Demo thiế t lậ p giá trị cho Select Box
Bài toán







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



Tạ o hiệ u ứ ng và validate Form

25


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

Tải bản đầy đủ ngay

×