Xử lý sự kiện trong trang HTML với javascript

Xử lý kiện trang HTML với JavaScript Xử lý kiện trang HTML với JavaScript Bởi: Khoa CNTT ĐHSP KT Hưng Yên Mục tiêu chương: • Giúp học viên nhận biết kiện xảy • Viết câu lệnh JavaScript đặt vào kiện xảy • Vận dụng linh hoạt vào viết chương trình Nội dung: Nhắc lại khái niệm kiện (event) Sự kiện hành động người dùng hệ thống gây Các hành động người dùng gây di chuyển chuột, nhấn chuột, nhả chuột, nhấn phím, nhả phím, copy, kéo giãn cửa sổ, di chuyển cửa sổ v.v Các kiện hệ thống gây nạp tài liệu, đóng cửa sổ v.v Khi kiện xảy ra, tự động thực thi câu lệnh JavaScript tương ứng với kiện (nếu định nghĩa chương trình xử lý kiện tương ứng) Bảng liệt kê kiện tên tương ứng Mỗi kiện xảy chúng có tên thường on, ví dụ onClick, onChange cụ thể mô ta bảng đây: 1/18 Xử lý kiện trang HTML với JavaScript Vậy áp dụng tên kiện liệt kê ? 2/18 Xử lý kiện trang HTML với JavaScript Nếu bạn biết kiện xảy bạn hoàn thực thi câu lệnh JavaScript tương ứng với kiện Cú pháp khai báo để trình duyệt thực thi câu lệnh JavaScriptkhi kiện xảy sau: Cách 1: Lưu ý:Một câu lệnh JavaScript câu lệnh mà bạn học Câu lệnh phải đặt cặp nháy kép (hoặc cặp nháy đơn) Ví dụ1 : Ví dụ 2: Ví dụ 3: Hello ! Ví dụ 4: Ta phân tích ví dụ Trong ví dụ ta tạo textbox viết (khai báo) kiện click sau : onClick = "alert('Bạn click vào textbox');" Ở có phần: • Phần onClick : tên kiện click chuột (xin tham khảo bảng trên) • Phần thứ sau dấu =, câu lệnh JavaScript tương ứng thực thi kiện click chuột xảy textbox câu lệnh alert Điều có nghĩa là, người dùng click chuột vào textbox trình duyệt tự động thực thi câu lệnh alert('Bạn click vào textbox'); ≅ Kết luận: Nếu muốn trình duyệt thực thi câu lệnh kiện xảy cần khai báo phần định nghĩa thẻ sau: 3/18 Xử lý kiện trang HTML với JavaScript = "" • Tương tự ví dụ 2: Bất người dùng di chuyển chuột textbox (tên kiện onMouseMove) lệnh "alert('Bạn di chuột');" thực thi • Trong ví dụ 3: Bất bạn click chuột vào dòng chữ "Hello !" trạng thái cửa sổ có dòng chữ : "Văn bị click chuột" • Trong ví dụ 4: Theo bạn, thông báo "Đã gửi" xuất !? Cách 2: Bạn không viết câu lệnh kiện xảy phần tử mà JavaScript cho phép bạn thực thi nhiều câu lệnh đồng thời, với điều kiện câu lệnh phải phân cách dấu chấm phảy ";" Cú pháp viết sau: Ví dụ 1: Trong ví dụ này, ta tạo textbox người dùng click chuột vào textbox trình duyệt thực thi câu lệnh tương ứng ta thẻ : window.status='Click chuột' alert('Bạn click chuột') lệnh phân cách dấu chấm phảy Ví dụ 2: Trong ví dụ ta tạo textbox textbox nhận focus (click chuột) trình duyệt tự động thực thi câu lệnh : • Hoten.value=' ' • window.status='Họ tên nhận focus' • window.document.title = 'Nội dung textbox bị xoá' Nhận xét: Nếu số câu lệnh cần thực thi kiện xảy (Một hai câu lệnh) ta khai báo đoạn chương trình xử lý kiện sử dụng theo cách 4/18 Xử lý kiện trang HTML với JavaScript cách Còn trường hợp số câu lệnh cần xử lý lớn, cách nên sử dụng cách khác mà ta đề cập Cách 3: Gọi hàm kiện xảy Về chất cách cách một, có điều câu lệnh lời gọi hàm Cách thường sử dụng : • Số lệnh cần thực thi kiện xảy lớn • Đảm bảo cho chương trình sáng sủa dễ đọc, dễ quản lý bảo trì Cú pháp khai báo hàm định nghĩa kiện sau: Ví dụ: 1/ 2/ 3/ Trong đó, Ham1(), GuiThongTin() KiemTra() hàm Tóm lại: Tuỳ vào trường hợp cụ thể mà kiện xảy ra, bạn viết lệnh, nhiều lệnh hàm tương ứng thực thi định nghĩa thẻ Tuy nhiên, qui tắc chung là: Nếu đoạn chương trình xử lý kiện có lệnh nên viết theo cách a, trái lại nên viết lệnh hàm (tức theo cách viết b) Một số tập minh hoạ Ví dụ 1: Hãy tạo nút nhấn (button) có value = "Thử" Khi người dùng click vào nút tiêu đề cửa sổ "Bạn click chuột" Hướng dẫn: Trước hết ta cần xác định xem lệnh cho phép ta thay đổi tiêu đề cửa sổ thành "Bạn click chuột", đặt lệnh vào đâu để người dùng click chuột thực thi theo yêu cầu toán • Lệnh để thay đổi tiêu đề sau: document.title = "Bạn click chuột" 5/18 Xử lý kiện trang HTML với JavaScript • Như ta biết người dùng click kiện onClick xuất hiện, câu lệnh đặt tương ứng vào kiện onClick, sau: Hay click vao nut o duoi va quan sat tieu de Ví dụ 2: Tạo trang Web, có phần tử : Phần tử button có value = "Gửi", phần tử textbox.Yêu cầu: người dùng click vào nút Gửi thông báo hình : "Bạn click vào nút gửi" người dùng click vào textbox thông báo "Bạn click vào textbox" Hướng dẫn: Theo yêu cầu dòng thông báo "Bạn click chuột vào nút gửi" xuất người dùng click chuột vào nút gửi, lệnh thực hiển thị thông báo đặt kiện onclick nút nhấn Còn dòng thông báo "Bạn click chuột vào text box" người dùng click chuột vào textbox, lệnh thực hiển thị dòng thông báo đặt kiện onclick textbox : Minh hoạ: Hay click vao nut va textbox o duoi va quan sat tieu de 6/18 Xử lý kiện trang HTML với JavaScript Ví dụ 3: Tạo nút, nút thứ có value = "Xanh", nút thứ hai có value = "Đỏ" Yêu cầu: Khi người dùng click vào nút xanh màu tài liệu xanh (blue), người dùng click vào nút đỏ màu tài liệu là: Đỏ (red) Hướng dẫn:Thuộc tính màu tài liệu lưu thuộc tính bgColor đối tượng document Thuộc tính thay đổi Minh hoạ: Ví dụ 4: Tạo danh sách lựa chọn gồm có màu: red, blue, brown lavender Khi người dùng chọn màu màu tài liệu thay đổi tương ứng Hướng dẫn: Để thay đổi màu tài liệu ta làm tương tự ví dụ Minh hoạ: 7/18 Xử lý kiện trang HTML với JavaScript function DoiMau() { document.bgColor = Mau.value; // Hoặc viết: window.document.bgColor = Mau.value; } Bạn chọn màu nền: Màu đỏ Màu xanh Màu nâu Màu xanh nhạt Ví dụ : Tạo textarea có tên NoiDung, Textbox có tên : SoKyTu Với yêu cầu sau: Khi người sử dụng gõ phím vào textarea số lượng ký tự (Độ dài xâu) chứa textarea hiển thị textbox Nếu số lượng ký tự textarea gõ vào vượt 200 ký tự thông báo : "Bạn gõ số ký tự cho phép !" 8/18 Xử lý kiện trang HTML với JavaScript functionKiemTra() { if (NoiDung.value.length > 200) alert("Bạn gõ qúa số ký tự cho phép !"); SoKyTu.value = NoiDung.value.length; // Hiển thị số ký tự textbox SoKyTu } Số ký tự gõ : Ở ví dụ trên: Hàm kiểm tra gọi kiện nhấn phím (onKeyUp) xuất hay nói cách khác người dùng gõ thêm ký tự vào textarea Ở ta không đặt hàm kiểm tra vào kiện onClick; Màn hình cho ví dụ có dạng sau: 9/18 Xử lý kiện trang HTML với JavaScript Ví dụ 6: Tạo nút có value = "Gửi", textbox có name = "HoTen", nút radio có tên GioiTinh nhãn tương ứng Nam, nữ Yêu cầu: Khi người dùng di chuyển chuột vào phần tử hiển thị thông báo tương ứng trạng thái Ví dụ người sử dụng di chuyển chuột qua nút nhấn "Gửi" trạng thái "Bạn di chuyển chuột vào nút" Hướng dẫn: Khi người dùng di chuyển chuột kiện di chuyển chuột xuất hiện, kiện có tên : onMoseMove Vậy ta viết lệnh kiện Minh hoạ: hình 10/18 Xử lý kiện trang HTML với JavaScript Xu ly su kien [...]... value="Dang nhap - Login"> 15/18 Xử lý sự kiện trong trang HTML với JavaScript < /HTML> Các thẻ có thuộc tính type = "hidden" sẽ không được hiển thị trong trình duyệt, tuy nhiên khi chúng ta "Submit" thì các thông tin trong đó cũng được gửi đi Các bài tập tự giải Bài 1: Hãy tạo ra trang Web có giao diện như sau: 16/18 Xử lý sự kiện trong trang HTML với JavaScript Yêu cầu: • Khi... tiền: USD < /html> 12/18 Xử lý sự kiện trong trang HTML với JavaScript Ví dụ 8: Tương tự như ví dụ 7, nhưng viết theo cách khai báo 3 (Các lệnh viết trong hàm) Kết quả vẫn cho ta như ví dụ 7 Tinh tich function TinhToan() { ThanhTien.value=SoLuong.value*DonGia.value... onMouseMove="window.status= 'Trong Nữ < /html> Ví dụ 7: 11/18 Xử lý sự kiện trong trang HTML với JavaScript Tạo 3 textbox, có tên lần lượt là: SoLuong (Số lượng), DonGia (Đơn giá) và ThanhTien (Thành tiền); Yêu cầu: Khi người dùng nhập giá trị trong DonGia thì kết quả sẽ được cập nhật ngay trong ThanhTien.. .Xử lý sự kiện trong trang HTML với JavaScript Xu ly su kien Ví dụ 9: Tạo ra một trang Web đăng nhập vào trang Vinaphone để cho phép... xem nội dung người dùng gõ trong ô Password với textbox trong ô "Gõ lại password" có giống nhau hay không? Nếu bằng nhau thì mới gửi (Submit) đi, còn nếu không bằng thì thông báo là "Password phải giống nhau" • Khi gửi thông tin, cần kiểm tra ngày sinh, tháng sinh phải hợp lệ (Tức ngày phải nhỏ hơn 32, tháng phải nhỏ hơn 13) Hướng dẫn: 17/18 Xử lý sự kiện trong trang HTML với JavaScript Nút đăng ký nên... Hướng dẫn: Khi người dùng nhập giá trị trong textbox DonGia bằng cách nhấn các phím số thì sự kiện nhấn phím xuất hiện (sự kiện nhấn phím có tên là onKeyUp), do vậy ta sẽ viết các lệnh đáp ứng với sự kiện này Các lệnh ở đây chỉ có một do vậy nên đặt ngay trong định nghĩa thẻ, như sau: Tinh tich Dang nhap vao trang http://sms.vinaphone.vnn.vn Đăng nhập vào trang Web của vinaphone User NamePassword .. .Xử lý kiện trang HTML với JavaScript Vậy áp dụng tên kiện liệt kê ? 2/18 Xử lý kiện trang HTML với JavaScript Nếu bạn biết kiện xảy bạn hoàn thực thi câu lệnh JavaScript tương ứng với kiện. .. cần thực thi kiện xảy (Một hai câu lệnh) ta khai báo đoạn chương trình xử lý kiện sử dụng theo cách 4/18 Xử lý kiện trang HTML với JavaScript cách Còn trường hợp số câu lệnh cần xử lý lớn, cách... người dùng di chuyển chuột kiện di chuyển chuột xuất hiện, kiện có tên : onMoseMove Vậy ta viết lệnh kiện Minh hoạ: hình 10/18 Xử lý kiện trang HTML với JavaScript Xu ly su