Bai 5 HDSD javascript

Trang 1

BÀI 5

HƯỚNG DẪN SỬ DỤNG JAVASCRIPT

TRONG Dreamweaver

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: 5

5 Kiểm tra kết quả trang web: 5

III Bài tập thực hành: 6

1 Bài tập 1: Xem các cú pháp thông thường của Javascript: 6

2 Bài tập 2 : Viết website hiển thị thông báo lỗi 7

3 Bài tập 3 : Làm Highlight Menu cho trang web 8

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 8

Trang 2

GVLT: Lương Vĩ Minh – lvminh@fit.hcmuns.edu.vn – Trần Thị Bích Hạnh – ttbhanh@fit.hcmuns.edu.vn

2

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 4a để 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 trong form trên như trong Bài HDTH 4a

- 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

Trang 3

II Javascript

1 Ví trí đặt Script trong trang web HTML:

<Head>

<head>

// Lệnh Javascript

Function bool A() {

return true;

}

</script>

</head>

<body>

// Lệnh Javascript

</script>

</body>

<!– 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)

<form name= "DKUser" method= "POST">

Trang 4

4

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

{

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>

Trang 5

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 đ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

5 Kiểm tra kết quả trang web:

- Lưu trang web lại

- Nhấn F12 để 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 đăng 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 đủ, đúng các thông tin cần thiết

Trang 6

6

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:

Lệnh điều kiện

if (condition) {

statements;

} else {

statements2;

} switch (expression) {

case label :

statements;

break;

default :

statement;

}

Vòng lập

for (initial-statement; condition; increment) {

statements;

}

Do {

statements;

} while (condition);

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 hàm

Khai báo chung

function funcName(argument1,argument2,etc) {

statements;

}

Giá trị trả về của hàm

return value;

Hoặc

return ( value );

Đối tượng String

var string="hello“

var stringlength=string.length //stringlength=5

Thuộc tính

length

Phương thức

stringObj.anchor(anchorString) – tạo Bookmark strVariable.link(URL)

Trang 7

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 sau)

<html>

<head>

<title>Window Alert & Confirm</title>

</head>

<body>

<!

x = window.confirm("Please chose YES or NO button!");

if (x)

window.alert("You have chosen YES Thank you!");

else

window.alert("You have chosen NO Thank you!");

// >

</SCRIPT>

</body>

<html>

strObj.charAt(index), strObj.charCodeAt(index) string1.concat([string2[, string3[, [, stringn]]]])

strObj.indexOf(subString[, startIndex])

Đối tượng Array

MyArray = new Array(5,5);

MyArray[0, 0] = "Ryan Dias";

Phương thức

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

Đối tượng Date

var my_date=new Date("October 12, 1988 13:14:00");

var my_date=new Date("October 12, 1988");

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(),…

Trang 8

8

3 Bài tập 3 : Làm Highlight Menu cho trang web

(Xem hướng dẫn phần mã lệnh sau)

<html>

<head>

<title>HightLight MENU</title>

function HightLight(what, onoff)

{

var className = ((onoff == 1) ? 'mainmenu_over' : 'mainmenu');

what.className = className;

}

</Script>

</head>

<body>

<table>

<tr>

<td width="200" class="mainmenu" OnMouseOver="HightLight(this, 1)"

OnMouseOut="HightLight(this, 0)" >Khoa CNTT - Truong DHKHTN</td>

</a>

</tr>

<tr>

<td width="200" class="mainmenu" OnMouseOver="HightLight(this, 1)"

OnMouseOut="HightLight(this, 0)" >W3Schools</td>

</a>

</tr>

</table>

</body>

</html>

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

Tiêu đề	Bài 5 hướng dẫn sử dụng JavaScript trong Dreamweaver
Người hướng dẫn	GVLT Lương Vĩ Minh, GVLT Trần Thị Bích Hạnh
Trường học	Đại học Khoa học Tự nhiên, Đại học Quốc gia Thành phố Hồ Chí Minh
Chuyên ngành	Công nghệ thông tin
Thể loại	Hướng dẫn

Định dạng
Số trang	8
Dung lượng	360,15 KB