Get documents about "HƯỚNG DẪN SỬ DỤNG CSS
Document Sample
BÀI 5
H Ư Ớ NG DẪ N SỬ DỤ NG JAVASCRIPT
TRONG MS FRONTPAGE
Mụ c lụ c :
Mụ c lụ c :............................................................................................................................................ 1
I. Yêu cầu: ...................................................................................................................................... 2
II. Javascript .................................................................................................................................... 3
1. Vítríđặt Script trong trang web HTML:.........................................................................................3
2. Code HTML của form trên : ...........................................................................................................3
3. ờ
Viết Javascript cho phần phần kiểm tra thông tin ngư i dùng: .......................................................4
4. Gọi hàm KiemTra() trong trang web: ............................................................................................4
5. Kiểm tra kết quả trang web:...........................................................................................................5
III. Bài tập thự c hành: ....................................................................................................................... 5
1. ờ
Bài tập 1: Xem các cú pháp thông thư ng của Javascript:...............................................................5
2. Bài tập 2 : Viết website hiển thị thông báo lỗi. ..............................................................................6
3. Bài tập 3 : Làm Highlight Menu cho trang web. ............................................................................6
4. Bài tập 4: Viết hàm kiểm tra thông tin cho trang web cuối bài trong Bài 4a. ................................6
G V L T : L âm Q uan g V ũ – lqvu@fit.hcmuns.edu.vn
GVHDTH: L ư ơ ng V ĩ M in h – lvminh@fit.hcmuns.edu.vn
1
GVHDTH: T rần T hị B ích H ạnh – ttbhanh@fit.hcmuns.edu.vn
I. Yêu cầu:
Thiết kế form có nội dung sau và viết script đ ể kiểm tra tính đúng đ ắn của dữ liệu do ngư ờ i dùng
nhập vào form sau:
Chú ý:
- Sử dụng lại bài tập 4 a đ ể làm tiếp.
- Sử dụng Javascript/VBScript để viết hàm đ ể kiểm tra.
- Thống nhất tên các controls sử dụng tron g fo rm trên như tron g B ài H D T H 4a.
STT Tên control Loại control
1 textTenDN Textbox
2 textMatkhau Textbox
3 textMatkhaugolai Textbox
4 btDangky Button
5 btXoa Button
- 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 “Đ ăn g k ý” v à việc kiểm tra dữ liệu thành công.
G V L T : L âm Q uan g V ũ – lqvu@fit.hcmuns.edu.vn
GVHDTH: L ư ơ ng V ĩ M in h – lvminh@fit.hcmuns.edu.vn
2
GVHDTH: T rần T hị B ích H ạnh – ttbhanh@fit.hcmuns.edu.vn
II. Javascript
1. rí
Vít đặt Script trong trang web HTML:
Vị trí Code HTML
Trong thẻ <Head> <head>
<script type="text/javascript">
// Lệnh Javascript
Function bool A()
{
return true;
}
</script>
</head>
Trong thẻ <body> <body>
<script type="text/javascript">
// Lệnh Javascript
</script>
</body>
Trong file .js <head>
<script src="myscript.js">
<!– Liên kết từ file ngoài myscript.js -->
</script>
<head>
Chú ý:
- Cú pháp lệnh Javascript giống vớ i C, cuối lệnh phải có dấu “;” đ ể kết thúc 1 dòng lệnh.
- Có phân biệt chữ hoa, chữ th ư ờ ng.
2. Code HTML củ a form trên :
Chú ý: Phần này, ta cần đ ặt tên cho form (trong VD này là DKUser).
G V L T : L âm Q uan g V ũ – lqvu@fit.hcmuns.edu.vn
GVHDTH: L ư ơ ng V ĩ M in h – lvminh@fit.hcmuns.edu.vn
3
GVHDTH: T rần T hị B ích H ạnh – ttbhanh@fit.hcmuns.edu.vn
3. Viết Javascript cho phần phần kiểm tra thông tin ngư ờ i dùng:
<head>
<script language="javascript">
<!-- Ẩn dấu phần mã lệnh Javacript
function KiemTra()
{
myFrmObj = document.DKUser // Lay doi tuong form DKUser
// if (myfrmObj.textTenDN.value == "")
// Lenh nay tuong duong voi lenh duoi day
if (document.DKUser.textTenDN.value == "")
{
// Hien thi thong bao
window.alert("Ten dang nhap khong duoc de trong.");
document.DKUser.textTenDN.focus();
return false;
}
else if (document.DKUser.textMatkhau.value == "")
{
window.alert("Mat khau khong duoc de trong.");
document.DKUser.textMatkhau.focus();
return false;
}
else if (document.DKUser.textMatkhau.value.length < 5)
{
window.alert("Mat khau ngan qua.");
document.DKUser.textMatkhau.focus();
return false;
}
else if (document.DKUser.textMatkhau.value !=
document.DKUser.textMatkhaugolai.value)
{
window.alert("Mat khau go lai khong dung.");
document.DKUser.textMatkhaugolai.focus();
return false;
}
return true;
}
</script>
</head>
4. Gọ i hàm KiemTra() trong trang web:
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 đan g 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ỉ U R L đư ợ c gọi khi button (có thuộc tính subm it) đư ợ 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à n gư ợ c lại.
G V L T : L âm Q uan g V ũ – lqvu@fit.hcmuns.edu.vn
GVHDTH: L ư ơ ng V ĩ M in h – lvminh@fit.hcmuns.edu.vn
4
GVHDTH: T rần T hị B ích H ạnh – ttbhanh@fit.hcmuns.edu.vn
5. Kiểm tra kết quả trang web:
- L ư u tran g w eb lại.
- Nhấn F 12 đ ể mở trang web bằng IE.
- Tạo các trư ờ ng hợ p nhập dữ liệu khác nhau đ ể kiểm tra kết quả trang web:
o Lần 1: T ên đăn g nh ập bị bỏ trống.
o Lần 2: Mật khẩu bị bỏ trống.
o Lần 3: Mật khẩu ngắn hơ n 5 k ý tự .
o Lần 4: Gõ lại mật khẩu bị bỏ trống.
o Lần 5: Nhập đ ầy đủ, đún g các thôn g tin cần thiết.
III. Bài tập thự c hành:
1. Bài tập 1: Xem các cú pháp thông thư ờ ng củ a Javascript:
Loại Cú pháp JavaScript
Khai báo Biến var varname=value;
if (condition)
{
statements;
}
else
{
statements2;
}
Lệnh điều kiện
switch (expression)
{
case label :
statements;
break;
default :
statement;
}
for (initial-statement; condition; increment)
{
statements;
}
Do
{
statements;
} while (condition);
Vòng lập
while (condition)
{
statements;
}
Duyệt lần lượt các phần tử của một mảng
for (variable in object)
{
statements;
}
Khai báo chung
Khai báo hàm
function funcName(argument1,argument2,etc)
G V L T : L âm Q uan g V ũ – lqvu@fit.hcmuns.edu.vn
GVHDTH: L ư ơ ng V ĩ M in h – lvminh@fit.hcmuns.edu.vn
5
GVHDTH: T rần T hị B ích H ạnh – ttbhanh@fit.hcmuns.edu.vn
{
statements;
}
Giá trị trả về của hàm
return value;
Hoặc
return ( value );
var string="hello“
var stringlength=string.length //stringlength=5
Thuộc tính
length
Đ ối tư ợ ng String
Phương thức
stringObj.anchor(anchorString) – tạo Bookmark
strVariable.link(URL)
strObj.charAt(index), strObj.charCodeAt(index)
string1.concat([string2[, string3[,... [, stringn]]]])
strObj.indexOf(subString[, startIndex])
MyArray = new Array(5,5);
MyArray[0, 0] = "Ryan Dias";
Phương thức
Đ ối tư ợ ng Array Join –Ghép các phần tử thành 1 chuỗi.
Pop – Lấy phần tử cuối
Push – Thêm 1 (hoặc nhiều phần tử) vào cuối mảng
Reverse - Đổi phần tử đầu – cuối
Shift – Xóa phần tử đầu khỏi mảng
var my_date=new Date("October 12, 1988 13:14:00");
var my_date=new Date("October 12, 1988");
Đ ối tư ợ ng Date var my_date=new Date(88,09,12,13,14,00);
var my_date=new Date(88,09,12);
Hàm
getDate(), getDay(), getMonth(), getYear(),…
getTime(),…
2. Bài tập 2 : Viết website hiển thị thông báo lỗi.
(Xem hư ớ ng dẫn phần mã lệnh trong #4-Form & JavaScript.doc)
3. Bài tập 3 : Làm Highlight Menu cho trang web.
(Xem hư ớ ng dẫn phần mã lệnh trong #4-Form & JavaScript.doc)
4. Bài tập 4: Viết hàm kiểm tra thông tin cho trang web cuối bài trong
Bài 4.
G V L T : L âm Q uan g V ũ – lqvu@fit.hcmuns.edu.vn
GVHDTH: L ư ơ ng V ĩ M in h – lvminh@fit.hcmuns.edu.vn
6
GVHDTH: T rần T hị B ích H ạnh – ttbhanh@fit.hcmuns.edu.vn
Related docs
