Nội dung Bài 6: Tạo hiệu ứng và validate Form trình bày về viết mã tạo các hiệu ứng, thao tác với các điều khiển, kiểm tra tính hợp lệ cho form.
Bài 6: Tạ o hiệ u ứ ng validate Form Hệ thố ng cũ Giớ i thiệ u mơ hình Document Object Model Giớ i thiệ u 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 thay đổ i style củ a element Đố i phó vớ i trình duyệ t khác Tạ o hiệ u ứ ng validate Form Mụ c tiêu họ c Viế t mã tạ o hiệ u ứ ng Hiệ u ứ ng Image Rollover Hiệ u ứ ng SlideShow Thao tác vớ i điề u khiể n SelectBox CheckBox RadioButton Form Kiể m tra tính hợ p lệ cho Form Tạ o hiệ u ứ ng validate Form CÁC HI Ệ U Ứ NG Biế n toán tử I mage Rollover I mage Rollover hiệ u ứ ng thay đổ i ả nh di chuộ t lên ả nh Ả nh hiệ n lên chạ y ứ ng dụ ng Tạ o hiệ u ứ ng validate Form Ả nh hiệ n lên di chuộ t lên ả nh Tạ o hiệ u ứ ng Rollover Thự c hiệ n hiệ u ứ ng bằ ng cách xử lý kiệ n onMouseOver onMouseOut cho thẻ img onMouseOver: kiệ n đư ợ c kích hoạ t ngư i dùng di chuộ t lên ả nh onMouseOut: kiệ n đư ợ c kích hoạ t ngư i dùng di chuộ t ả nh Tạ o hiệ u ứ ng validate Form Demo Rollover 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 name Xem Demo/Rollover Tạ o hiệ u ứ ng validate Form Vấ n đề nả y sinh thự c hiệ n Rollover Vấ n đề : Lầ n đầ u tiề n di chuộ t lên ả nh, mấ t mộ t thờ i gian ả nh mớ i đư ợ c load mặ c dù trang web đư ợ c mở 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” ả nh đư ợ c load ngầ m bên dư i, máy tính tiế p tụ c thự c hiệ n lệ nh sau lệ nh Giả i pháp không làm cho việ c load trang web chậ m Tạ o hiệ u ứ ng validate Form Demo load trư c ả nh 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 } Xem Rollover/preLoad Tạ o hiệ u ứ ng validate Form Slide Show Slide Show Là hiệ u ứ ng ả nh đư ợ c hiệ n thay cho ả nh trư c Có thể có đ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 slide show làm bằ ng javascript Tạ o hiệ u ứ ng validate Form 10 Demo sử dụ ng CheckBox Cac loai kem cua hang: Kem que Kem dau Kem bo Kem vani Ứ ng dụ ng liệ t kê nhữ ng loạ i kem ợ c chọ n Xem Dieu khien\Checkbox Tạ o hiệ u ứ ng validate Form 28 Demo sử dụ ng CheckBox function chonKem() { var str = "Nhung loai kem ban da chon la:"; var kemAr = document.getElementsByName("ckKem"); for (var i = 0; i < kemAr.length; i++) { if (kemAr[i].checked) { str= str + kemAr[i].value +"" } } document.getElementById("pKemDaChon").innerHTML = str; } Cac loai kem cua hang: Kem que Kem dau Kem bo Kem vani Tạ o hiệ u ứ ng validate Form 29 Radio Button Dùng để ngư i dùng lự a chọ n CheckBox có hai trạ ng thái đư ợ c chọ n không đư ợ c chọ n Thư ng đư ợ c sử dụ ng theo nhóm, nhóm mộ t Radio đư ợ c chọ n Lon Vua Nho Các radio có tên thuộ c mộ t nhóm Tạ o hiệ u ứ ng validate Form 30 Demo sử dụ ng Radio Button Hiể n thị loạ i kem ợ c chọ n Xem Dieu khien\Radio Button Tạ o hiệ u ứ ng validate Form 31 Demo sử dụ ng Radio Button var size=""; var sizeAr = document.getElementsByName("rdSize"); for (var i = 0; i < sizeAr.length; i++) { if (sizeAr[i].checked) { size = sizeAr[i].value; } } str = str + "Kich thuoc ban da chon la: " + size; Tạ o hiệ u ứ ng validate Form 32 FORM & KI Ể M TRA HỢ P LỆ CHO FORM Biế n toán tử 33 Form Dùng để gử i liệ u lên server Khi ngư i dùng nhấ n vào Button Submit liệ u đư ợ c đóng gói gử i lên Server Form sử dụ ng phư ng thứ c GET hoặ c POST để gử i liệ u lên Server First Name: Ph Phạ m Last Name: Thanh Tạ o hiệ u ứ ng validate Form 34 Kiể m tra tính hợ p lệ củ a Form Kiể m tra tính hợ p lệ Kiể m tra xem thông tin cầ n thiế t đư ợ c điề n vào form chư a? VÀ Thơng tin điề n vào có u cầ u hay không? Validate form rấ t cầ n thiế t để đả m bả o tính đắ n củ a csdl Thông báo lỗ i Tạ o hiệ u ứ ng validate Form 35 Kiể m tra tính hợ p lệ củ a Form Trư c việ c kiể m tra hợ p lệ đư ợ c thự c hiệ n server (server-side valiation) Javascript đờ i, thự c hiệ n kiể m tra hợ p lệ brow ser (client-side validation) trư c gử i liệ u lên server Vớ i mộ t số lư ợ ng lớ n ngư i truy cậ p, kiể m tra hợ p lệ brower giả m tả i cho server Chú ý: Vẫ n phả i kiể m tra hợ p lệ server ngư i dùng disable javascript Tạ o hiệ u ứ ng validate Form 36 Sự kiệ n onSubmit củ a Form Mỗ i Form có mộ t hoặ c nhiề u button Submit Sự kiệ n onSubmit củ a form Đư ợ c kích hoạ t ngư i dùng nhấ n vào button Submit Nế u onSubmit có giá trị trả True, liệ u đư ợ c gử i lên Server Nế u onSubmit có giá trị trả False, liệ u không đư ợ c gử i lên Server Tạ o hiệ u ứ ng validate Form 37 Thự c hiệ n kiể m tra hợ p lệ Viế t hàm thự c hiệ n việ c validate Nế u thông tin không hợ p lệ , trả giá trị False Nế u thông tin hợ p lệ , trả True Hàm đư ợ c dùng xử lý kiệ n cho onSubmit cho Form Tạ o hiệ u ứ ng validate Form 38 Demo validate form Khi nhấ n vào button Submit, form đư ợ c validate Nế u tên chư a đư ợ c nhậ p, hiể n thị thông báo lỗ i Nế u tên đư ợ c nhậ p, hiể n thị lờ i chàoName:
onSubmit cho Form Tạ o hiệ u ứ ng validate Form 40 Các cách khác để truy cậ p Form Có thể truy cậ p đế n Form bằ ng cách sau Chỉ số củ a Form: Document.Forms[ 0] Tên Form: Document.Forms[ “TenForm”] Chỉ số ID củ a Form: Document.Forms[ “id”] Tạ o hiệ u ứ ng validate Form 41 Tổ ng kế t họ c Có thể dùng JavaScript để tạ o hiệ u ứ ng Rollover, Slide Show Khi tạ o hiệ u ứ ng Rollover, di chuộ t lên ả nh, ả nh mớ i đư ợ c load Cho nên, nên load trư c ả nh JavaScript cung cấ p phư ng thứ c thuộ c tính để thao tác vớ i điề u khiể n SelectBox, CheckBox, Radio Button Form Radio Button thư ng đư ợ c sử dụ ng theo nhóm Mỗ i nhóm có mộ t Radio đư ợ c chọ n Nhữ ng Radio attribute name đư ợ c xem mộ t nhóm Mỗ i Form có mộ t button có type submit Khi button đư ợ c nhấ n, kích hoạ t kiệ n onSubmit củ a Form Nế u xử lý kiệ n onSubmit trả True, liệ u đư ợ c gử i Nế u trả False, liệ u không đư ợ c gử i Tạ o hiệ u ứ ng validate Form 42 ... web http://www.catswhocode.com/blog/top-10javascript-slideshows-carousels-and-sliders/ để tham khả o slide show làm bằ ng javascript Tạ o hiệ u ứ ng validate Form 10 Các bư c làm Slide Show Các... o hiệ u ứ ng validate Form 21 Demo sử dụ ng Select Box Bài toán Khi nhấ n vào button Chọ n Quố c Gia hiể n thị nư c đư ợ c chọ n Xem Dieu khienSelectBox Tạ o hiệ u ứ ng validate Form 22 Demo... document.getElementById("hoa").src = anhAr[currentIndex].src; } } Tạ o hiệ u ứ ng validate Form 12 Kế t Demo Ả nh ợ c thay ổ i sau nhấ n Next Tạ o hiệ u ứ ng validate Form 13 Bả n đồ ả nh Bả n đồ ả nh ả nh có nhữ ng vùng