Upload
keepmoving-nevergiveup
View
262
Download
2
Embed Size (px)
DESCRIPTION
Cách dùng Javascript trong form
Citation preview
KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN
2009
Authored by: Lương Vĩ Minh – Nguyễn Đức Huy
Bài 5 : Sử dụng Java Script trong Form và thiết kế Menu
Môn : Lập trình và Thiết kế Web 1
1
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
Bài 5 : Sử dụng Java Script trong Form và thiết kế Menu
Môn : Lập trình và Thiết kế Web 1
Mục lục
1 DÙNG JAVASCRIPT KIểM TRA CÁC ĐIềU KIệN TRÊN FORM .............................................. 2
1.1 YÊU CầU ................................................................................................................ 2
1.2 HƯớNG DẫN THIếT Kế FORM ................................................................................... 2
1.2.1 BƯớC 1: TạO NềN CHO FORM ........................................................................... 2
1.2.2 BƯớC 2 : THIếT Kế TABLE ............................................................................... 3
1.2.3 BƯớC 3: TạO CÁC CONTROLS VÀ TEXT THEO MẫU ĐÃ YÊU CầU. ....................... 4
1.2.4 BƯớC 4: KIểM TRA KếT QUả THựC HIệN. ........................................................... 5
1.3 HƯớNG DẫN Sử DụNG JAVASCRIPT .......................................................................... 6
1.4 BÀI TậP THựC HÀNH: .............................................................................................. 8
2 Sử DụNG JAVASCRIPT Để LÀM CÁC HIệU ứNG MENU ....................................................... 8
2.1 THIếT Kế HIệU ứNG MENU DọC ................................................................................ 8
2.1.1 YÊU CầU ......................................................................................................... 8
2.1.2 HƯớNG DẫN THIếT Kế MENU DọC ..................................................................... 9
2.1.3 HƯớNG DẫN Sử DụNG JAVASCRIPT ................................................................. 12
2.2 THIếT Kế HIệU ứNG MENU NGANG ........................................................................ 12
2.2.1 YÊU CầU ....................................................................................................... 12
2.2.2 HƯớNG DẫN THIếT Kế MENU NGANG ............................................................. 13
2.2.3 HƯớNG DẫN Sử DụNG JAVASCRIPT ................................................................. 15
2
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
1 Dùng JavaScript kiểm tra các điều kiện trên Form
1.1 Yêu cầu
Thiết kế form có nội dung sau:
Sử dụng Javascript để kiểm tra thông tin nhập :
Tên đăng nhập không được phép rỗng
Mật khẩu phải chứa ít nhất 5 ký tự
Mật khẩu nhập lại phải trùng với mật khẩu
1.2 Hướng dẫn thiết kế Form
1.2.1 Bước 1: Tạo nền cho form
3
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
Từ menu
Insert Form
chọn Form.
Mã lệnh HTML tương ứng cho việc tạo một Form:
<form method="POST">
</form>
1.2.2 Bước 2 : Thiết kế table
Từ menu Insert
Table
* Table phải
nằm trong Form
4
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
1.2.3 Bước 3: Tạo các controls và text theo mẫu đã yêu cầu.
TEXT BOX Control
<input type="text" name="……">
STT TextField Char
width
Type HTML Code
1 textTenDN 20 Single line <input type="text"
name="textTenDN">
2 textMatKhau 15 Password <input type="password"
name="textMatKhau">
3 textMatKhauGoLai 15 Password <input type="password"
name="textMatKhauGoLai">
… … … … …
BUTTON Control
<input type="submit" value="……" name="……">
STT Button Value Action HTML Code
5
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
name
1 btDangky Đăng ký Submit <input type="submit" value="Đăng ký"
name="btDangky">
2 btXoa Xóa Reset <input type="reset" value="Xóa"
name="btXoa">
Kết quả :
1.2.4 Bước 4: Kiểm tra kết quả thực hiện.
Lưu trang web lại. Nhấn F12 để xem trang web bằng trình duyệt web IE.
6
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
1.3 Hướng dẫn sử dụng Javascript
Bước 1 : Thống nhất tên các controls sử dụng trong form trên.
STT Tên control Loại control
1 textTenDN
Textbox
2 textMatkhau Textbox
3 textMatkhaugolai Textbox
4 btDangky Button
5 btXoa Button
Bước 2 : Tạo một trang web bất kỳ có tên Dangkythanhcong.htm. Trang web này sẽ
hiện thị khi người dùng nhấn vào nút “Đăng ký” và việc kiểm tra dữ liệu thành công.
Bước 3 : Đặt tên cho Form là DKUser
Bước 4 : Nhập đoạn Javascript vào trong tab <head>
<form name="DKUser" method="POST">
7
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
Bước 5 : gọi hàm kiểm tra khi bấm vào nút submit. Tại phần khai báo thẻ <form> của
trang web, sửa lại mã lệnh sau:
<form name="DKUser" method="POST">
<form name="DKUser" method="POST" action="Dangkythanhcong.htm"
onsubmit="return KiemTra()">
Thuộc tính name: Đặt tên cho form đang sử dụng.
Thuộc tính method: Chọn hình thức truyền dữ liệu với server (Post/Get)
Thuộc tính action: Chỉ định địa chỉ URL được gọi khi button (có thuộc tính submit) được
nhấn.
Thuộc tính onsubmit: Chỉ định hàm KiemTra() sẽ được gọi khi button (có thuộc tính
submit) được nhấn. Nếu hàm trả về giá trị False thì thuộc tính action bị bỏ qua và ngược
lại.
Bước 6 : Kiểm tra kết quả trang web
Lưu trang web lại.
Nhấn F12 để mở trang web bằng IE.
8
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
Tạo các trường hợp nhập dữ liệu khác nhau để kiểm tra kết quả trang web:
Lần 1: Tên đăng nhập bị bỏ trống.
Lần 2: Mật khẩu bị bỏ trống.
Lần 3: Mật khẩu ngắn hơn 5 ký tự.
Lần 4: Gõ lại mật khẩu bị bỏ trống.
Lần 5: Nhập đầy đủ, đúng các thông tin cần thiết.
1.4 Bài tập thực hành:
Tìm hiểu thêm các control khác (listbox, combo box, radio Button, checkbox, …) và
thuộc tính của nó. Hoàn thành đầy đủ form đăng ký theo yêu cầu.
2 Sử dụng JavaScript để làm các hiệu ứng Menu
2.1 Thiết kế hiệu ứng Menu dọc
2.1.1 Yêu cầu
Thiết kế hệ thống Menu dọc 3 cấp giống hình như sau:
Hệ thống Menu có 3 cấp với các đề mục như sau:
Thể thao o Bóng đá o Bơi lội o Bóng bàn
9
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
Vi tính o Sản phẩm mới o Kinh nghiệm o Tin tức công nghệ
Tin trong nước Tin nước ngoài
Giới thiệu
2.1.2 Hướng dẫn thiết kế Menu dọc
Định dạng các Class CSS có nội dung như sau:
10
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
Tạo một website có nội dung đoạn mã HTML như sau:
11
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
12
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
2.1.3 Hướng dẫn sử dụng JavaScript
Soạn đoạn Code JavaScript có nội dung như sau:
Dùng thuộc tính visibility của CSS để cho hiện hoặc ẩn một tab HTML. Lợi dụng điểm
này để làm hiệu ứng menu
Bắt sự kiện mouseOver (khi con trỏ chuột đang nằm trong phạm vi của tab HTML) và
sự kiện mouseOut (khi con trỏ chuột vừa mới rời khỏi vùng phạm vi của tab HTML) để
gọi đến hàm showMenu để set thuộc tính visibility của tab HTML đó lại thành ẩn hay
hiện.
2.2 Thiết kế hiệu ứng Menu ngang
2.2.1 Yêu cầu
Thiết kế hệ thống Menu ngang 2 cấp như sau:
13
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
Hệ thống Menu ngang 2 cấp với các đề mục như sau:
Trang chủ
o Mục 1.1
o Mục 1.2
o Mục 1.3
o Mục 1.4
Asp.net
o Mục 2.1
o Mục 2.2
o Mục 2.3
C#
2.2.2 Hướng dẫn thiết kế Menu ngang
Định dạng các Class CSS có nội dung như sau:
Tạo một website có nội dung đoạn mã HTML như sau:
14
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
15
Bà
i 5
: S
ử d
ụn
g J
ava
Script tr
on
g F
orm
và
th
iết kế
Me
nu
| 8
/14
/200
9
2.2.3 Hướng dẫn sử dụng JavaScript
Soạn đoạn Code JavaScript có nội dung như sau:
Dùng thuộc tính visibility của CSS để cho hiện hoặc ẩn một tab HTML. Lợi dụng điểm
này để làm hiệu ứng menu
Bắt sự kiện mouseOver (khi con trỏ chuột đang nằm trong phạm vi của tab HTML) và
sự kiện mouseOut (khi con trỏ chuột vừa mới rời khỏi vùng phạm vi của tab HTML) để
gọi đến hàm showMenu để set thuộc tính visibility của tab HTML đó lại thành ẩn hay
hiện.