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.