Giáo trình HTML và Javascript (Phần 2)

VIETHANIT Chương 7. Câu lệnh điều kiện
CHƯƠNG 7
CÂU LỆNH ĐIỀU KIỆN
7.1 Lệnh và khối lệnh 
7.1.1 Lệnh và quy ước lệnh trong JavaScript 
Cũng như trong hầu hết các ngôn ngữ khác, đơn vị làm việc cơ bản của 
JavaScript là câu lệnh. Trong hai chương trước, chúng ta đã làm quen với rất nhiều câu 
lệnh trong JavaScript. Nó có thể là kết quả của một phép gán giá trị cho một biến, có 
thể là lời gọi một hàm, hay biểu diễn một dạng phép tính, hoặc thậm chí là sự kết hợp 
của tất cả những công việc đó. Trong các ví dụ trước đây, một trong những câu lệnh 
mà chúng ta đã làm quen là câu lệnh khai báo, câu lệnh này không những dùng để khởi 
tạo (hay định nghĩa) một biến mới, mà còn có thể gán giá trị cho nó, ví dụ như:
var x = 10;
Như đã nói ở trên, một chương trình JavaScript là một tập hợp của các câu lệnh, 
các câu lệnh này có thể được tổ chức thành từng hàm (sẽ được đề cập trong chương 5). 
Các câu lệnh JavaScript bao gồm các từ khóa được sử dụng với cú pháp thích hợp và 
được kết thúc bởi dấu chấm phẩy (;). Một câu lệnh duy nhất có thể nằm trên nhiều 
dòng. Nhiều câu lệnh cũng có thể được viết trên một dòng duy nhất nếu mỗi câu lệnh 
được phân tách bởi một dấu chấm phẩy (;).
7.1.2 Khối lệnh
Một khối lệnh được sử dụng để nhóm các câu lệnh. Các câu lệnh này được gọi là 
đồng cấp và sẽ được nhóm lại bởi một cặp dấu ngoặc móc ({}).
Bên trong một khối lệnh lại có thể viết lồng khối lệnh khác. Sự lồng nhau theo 
cách như vậy là không hạn chế.
7.2 Các câu lệnh điều kiện 
Một câu lệnh điều kiện là một tập hợp các lệnh thi hành nếu điều kiện chỉ định là 
đúng. Kết quả của điều kiện xác định câu lệnh hoặc khối lệnh sẽ được thực thi. 
JavaScript cung cấp hai câu lệnh điều kiện: ifelse và switch.
7.2.1 Câu lệnh ifelse
Câu lệnh này dùng để kiểm tra điều kiện, nó thực thi việc tính toán trên một biểu 
thức, nó kiểm tra điều kiện là đúng hay sai để thực hiện khối lệnh tương ứng.
Một câu lệnh if đơn giản có cú pháp lệnh như sau:
if (điều kiện )
{
// các câu lệnh ứng với điều kiện đúng
}
Đây là cú pháp lệnh đơn giản, nó sẽ kiểm tra nếu điều kiện sau theo sau if là 
đúng thì khối lệnh sẽ được thực thi.
HTML và JavaScript Trang 139
VIETHANIT Chương 7. Câu lệnh điều kiện
Ví dụ 7.1: Kiểm tra một số có phải là số chẵn hay không? Nếu là số chẵn thì hiển 
thị kết luận số chẵn.
Đối với bài toán này, ta sẽ sử dụng phép chia lấy dư (%) để kiểm tra. Nếu một số 
thực hiện phép chia lấy dư cho 2 mà trả về kết quả là 0 thì kết luận số đó là số chẵn.
Đoạn mã sau minh họa cho bài toán trên. Trong đoạn mã này, ta lưu ý đến cách 
sử dụng câu lệnh if:
var x = 4;
r=x%2;
if (r==0)
{
document.write("so "+x+" la so chan");
}
Kết quả:
Hình 7.1: Câu lệnh điều kiện if đơn giản
Nếu trong ví dụ trên, ta thay giá trị của x = 5 thì trên màn hình sẽ không xuất 
hiện gì cả, nói cách khác, nó không thực hiện khối lệnh sau if, vì trong trường hợp này, 
biểu thức r == 0 trả về giá trị sai (false).
Ta cũng có thể chỉ ra khối lệnh cần thực hiện khi điều kiện là sai (false) bằng 
cách dùng mệnh đề else.
Cú pháp như sau:
if (điều kiện)
HTML và JavaScript Trang 140
VIETHANIT Chương 7. Câu lệnh điều kiện
{
// các câu lệnh ứng với điều kiện đúng
}
else
{
// các câu lệnh ứng với điều kiện sai
}
Cú pháp trên được hiểu như sau: Nếu điều kiện là đúng (true) thì khối lệnh sau if 
sẽ được thực hiện, và ngược lại, nếu là sai (false) thì khối lệnh sau else sẽ được thực 
hiện.
Trong cả hai cú pháp lệnh trên, điều kiện có thể là bất cứ biểu thức JavaScript 
nào có giá trị là true hoặc false. Khối lệnh sau if hoặc else cũng có thể là bất cứ câu 
lệnh JavaScript nào, kể cả các câu lệnh if được lồng thêm vào trong. Nếu chúng ta 
muốn sử dụng thêm một hoặc nhiều câu lệnh sau một câu lệnh if hoặc else thì ta phải 
đóng các câu lệnh bằng các dấu ngoặc móc ({}).
Ví dụ sau minh họa cho câu lệnh điều kiện ifelse. Trong ví dụ này, ta cũng xét 
một số là số chẵn hay lẻ, sau đó hiển thị kết quả ra màn hình.
Cũng như ví dụ 3.1, ta cũng sẽ sử dụng phép chia lấy dư (%) để kiểm tra. Nếu 
một số thực hiện phép chia lấy dư cho 2 mà trả về kết quả là 0 thì kết luận số đó là số 
chẵn, ngược lại thì kết luận nó là số lẻ
Đoạn mã sau minh họa cho bài toán trên.
Ví dụ 7.2:
var x=prompt ("enter a num: ","");
r=x%2;
if (r==0)
{
document.write("so "+x+" la so chan");
}
else
{
document.write("so "+x+" la so le");
}
HTML và JavaScript Trang 141
VIETHANIT Chương 7. Câu lệnh điều kiện
Kết quả:
Hình 7.2.1: Trường hợp nhập vào một số chẵn
Hình 7.2.2: Trường hợp nhập vào một số lẻ
HTML và JavaScript Trang 142
VIETHANIT Chương 7. Câu lệnh điều kiện
7.2.2 Câu lệnh switch
Khi có nhiều tùy chọn ifelse thì tốt hơn ta nên sử dụng lệnh switch. Lệnh này 
còn được xem là lệnh case. Câu lệnh switch cho phép một chương trình định giá trị 
một biểu thức và thử so khớp giá trị của biểu thức với từng trường hợp. Nếu so khớp 
thỏa mãn thì chương trình thi hành câu lệnh tương ứng. Nếu không tìm thấy một giá trị 
nào trong danh sách các case của nó, khối lệnh trong phần default sẽ được thực hiện. 
Lệnh break dùng để thoát ra khỏi câu lệnh switch.
Câu lệnh switch có dạng như sau:
switch (expression){
case label:
statements;
break;
case label:
statements;
break;
defaul: statements;
}
Đầu tiên chương trình tìm một nhãn trùng khớp với giá trị biểu thức và thi hành 
câu lệnh tương ứng nếu so khớp thành công. Nếu nhãn so khớp không được tìm thấy, 
chương trình sẽ tìm đến khối lệnh trong lựa chọn default, và nếu tìm thấy sẽ thực hiện 
câu lệnh tương ứng. Nếu không tìm thấy câu lệnh default, thì chương trình tiếp tục thi 
hành câu lệnh tiếp theo sau câu lệnh switch.
Câu lệnh tùy chọn break kết hợp với mỗi trường hợp đảm bảo rằng chương trình 
sẽ thoát khỏi lệnh switch khi câu lệnh so khớp được thi hành và tiếp tục thực thi câu 
lệnh tiếp theo câu lệnh switch. Nếu không sử dụng câu lệnh break thì chương trình vẫn 
tiếp tục thi hành lệnh kế tiếp trong câu lệnh switch.
Ví dụ7.3: Trong ví dụ sau, nếu exp ước lượng đến “Bananas”, thì chương trình 
so khớp giá trị với trường hợp “Bananas” và thi hành câu lệnh được kết hợp. Khi bắt 
gặp break thì chương trình ngắt switch và thi hành câu lệnh theo sau switch. Nếu break 
được bỏ qua, thì câu lệnh cho trường hợp “Cherries” cũng sẽ được thi hành:
document.write("1.Oranges");
document.write("2.Apples");
document.write("3.Bananas");
document.write("4.Cherries");
var exp=prompt ("Vui lòng hãy chọn một loại trái cấy trong danh sách: 
","");
switch (exp){
HTML và JavaScript Trang 143
VIETHANIT Chương 7. Câu lệnh điều kiện
case "Oranges":
document.write("Oranges are $0.59 a pound.");
break;
case "Apples":
document.write("Apples are $0.32 a pound.");
break;
case "Bananas":
document.write("Bananas are $0.48 a pound.");
break;
case "Cherries":
document.write("Cherries are $3.00 a pound.");
break;
default:
document.write ("Sorry, we have no this kind of fruit!!");
}
Kết quả:
HTML và JavaScript Trang 144
VIETHANIT Chương 7. Câu lệnh điều kiện
Hình 7.3.1: Câu lệnh switch
Ở đây chúng ta cần lưu ý về câu lệnh break trong mỗi case. Như đã nói ở trên, 
nếu không có break, chương trình sẽ tiếp tục thực hiện khối case khác. Ví dụ, trong 
đoạn mã trên, nếu ta không kết thúc khối case “Oranges” bằng câu lệnh break, thì 
chương trình sẽ tiếp tục thực hiện khối lệnh của case “Apples”.
Xét đoạn mã đang đề cập:
switch (exp){
case "Oranges":
document.write("Oranges are $0.59 a pound.");
case "Apples":
document.write("Apples are $0.32 a pound.");
break;
case "Bananas":
document.write("Bananas are $0.48 a pound.");
break;
}
Kết quả:
HTML và JavaScript Trang 145
VIETHANIT Chương 7. Câu lệnh điều kiện
Hình 7.3.2: Chú ý với sử dụng câu lệnh break
7.3 Câu hỏi và bài tập
Câu hỏi:
1. Các câu lệnh trong JavaScript được kết thúc bởi dấu phẩy (,) __________ 
(Đúng/Sai)
2. Một câu lệnh duy nhất có thể nằm trên nhiều dòng. __________ (Đúng/Sai)
3. Nhiều câu lệnh không được viết trên một dòng duy nhất cho dù mỗi câu lệnh 
được phân tách bởi một dấu chấm phẩy (;). __________ (Đúng/Sai)
4. Bên trong một khối lệnh có thể có một khối lệnh khác hay không? _________ 
(Có/Không)
HTML và JavaScript Trang 146
VIETHANIT Chương 7. Câu lệnh điều kiện
5. JavaScript cung cấp hai câu lệnh điều kiện là __________ và ________.
6. Một câu lệnh if có nhất thiết phải có thành phần else theo sau hay không? 
_________(Có/Không)
7. Đối với câu lệnh if, chương trình sẽ kiểm tra nếu điều kiện sau theo sau if là 
________ thì khối lệnh sau if sẽ được thực thi.
8. Đối với câu lệnh switch, nếu chương trình không tìm thấy một giá trị nào 
trong danh sách các case của nó, khối lệnh trong phần _________ sẽ được 
thực hiện. 
9. Lệnh ________ dùng để thoát ra khỏi câu lệnh switch.
Bài tập thực hành chương 7:
HTML và JavaScript Trang 147
VIETHANIT Chương 7. Câu lệnh điều kiện
1. Viết chương trình cho phép người dùng nhập vào hai số songuyen1 và 
songuyen2, kiểm tra xem songuyen1 có chia hết cho songuyen2 không, hiện 
thông báo tương ứng.
Gợi ý: Thực hiện như sau:
- Nhập vào giá trị của 2 số (dùng prompt).
- Lấy số dư của phép chia songuyen1 cho songuyen2.
- Nếu số dư này bằng 0 thì in ra thông báo “songuyen1 chia het cho 
songuyen2”.
- Nếu số dư này khác 0 thì in thông báo “songuyen1 khong chia het cho 
songuyen2”.
2. Viết chương trình nhập vào ba con số, tìm số lớn nhất trong ba số này.
3. Viết chương trình cho phép người dùng nhập vào 1 năm, kiểm tra năm đó có 
phải là năm nhuận hay không.
Gợi ý: Năm nhuận là năm chia hết cho 4, ngoại trừ những năm chia hết cho 100 
mà không chia hết cho 400. Ví dụ 1700, 1800, 1900 không phải là năm nhuận, 
các năm 1600, 2000 là các năm nhuận. 
4. Viết chương trình xếp loại học viên theo điểm số nguyên như sau: (dùng 
if..else)
- Nhập điểm từ bàn phím (dùng prompt).
- In ra thông báo xếp loại tương ứng với điểm như sau:
o Nếu điểm là 9, 10 thì xếp loại giỏi.
o Nếu điểm là 7, 8 thì xếp loại khá.
o Nếu điểm là 5, 6 thì xếp loại trung bình.
o Nếu điểm là 0, 1, 2, 3, 4 thì xếp loại yếu.
o Nếu điểm 10 thì thông báo điểm nhập vào không hợp 
lệ.
5. Viết lại chương trình ở bài 4 bằng cách sử dụng lệnh switch.
HTML và JavaScript Trang 148
VIETHANIT Chương 8. Câu lệnh vòng lặp
CHƯƠNG 8
CÂU LỆNH VÒNG LẶP
8.1 Các lệnh vòng lặp trong JavaScript 
Vòng lặp là một tập hợp các lệnh thi hành lặp đi lặp lại cho đến khi một điều kiện 
cụ thể được xác định. Có nhiều loại vòng lặp:
- Vòng lặp thực hiện lặp đi lặp lại các lệnh cho đến khi điều kiện là false.
- Vòng lặp thực hiện lặp đi lặp lại các lệnh cho đến khi điều kiện là true. 
- Vòng lặp thực hiện lặp đi lặp lại các lệnh theo một số lần nhất định.
JavaScript cung cấp các câu lệnh vòng lặp for, do..while, và while. Ngoài ra 
chúng ta có thể sử dụng các câu lệnh chuyển điều khiển bên trong các câu lệnh vòng 
lặp như break, continue và label (mặc dù label không phải là câu lệnh vòng lặp, nhưng 
nó được sử dụng thường xuyên với các câu lệnh vòng lặp)..
Ngoài ra, trong chương này chúng ta còn tìm hiểu về hai câu lệnh vòng lặp thao 
tác trên đối tượng đó là for..in và with.
8.1.1 Câu lệnh for
Vòng lặp for sẽ thực hiện lặp đi lặp lại khối lệnh cho đến khi điều kiện là false. 
Số lần thực hiện của vòng lặp thường được điều khiển thông qua một biến đếm.
Câu lệnh for bao gồm ba thành phần, được phân cách nhau bởi dấu chấm phẩy 
(;). Cả ba thành phần này đều không bắt buộc phải có, và chúng điều khiển việc thực 
hiện của vòng lặp for. Nếu có nhiều câu lệnh thực hiện trong thân của vòng lặp, 
chương trình phải sử dụng cặp dấu ngoặc móc ({}) để chứa các câu lệnh đó
Cú pháp lệnh như sau:
for([initialExpression];[condition];[incrementExpresion]){
statements;
}
Trong đó:
- initialExpression: Lệnh khởi tạo, được thực hiện duy nhất một lần và thường 
dùng để khởi tạo biến đếm.
- condition: điều kiện của vòng lặp.
- incrementExpression: Lệnh tăng, thay đổi giá trị biến đếm của vòng lặp.
- statements: Các lệnh bên trong vòng lặp. 
Vòng lặp for thi hành như sau:
1. Khởi tạo biểu thức initialExpression, nếu thành công thì vòng lặp được 
thi hành. Biểu thức này thường dùng để khởi tạo một hoặc nhiều bộ đếm của 
vòng lặp, và cú pháp cho phép một biểu thức có bất kỳ độ phức tạp nào. 
Biểu thức này có thể cũng khai báo các biến.
HTML và JavaScript Trang 149
VIETHANIT Chương 8. Câu lệnh vòng lặp
2. Biểu thức condition được ước lượng. Nếu giá trị của condition là true, thì 
các câu lệnh của vòng lặp thi hành. Nếu giá trị của condition là false thì 
thoát khỏi vòng lặp. Nếu bỏ qua hoàn toàn biểu thức condition thì điều kiện 
luôn được thừa nhận là true.
3. Thực thi statements.
4. Cập nhật biểu thức incrementExpression, và trở về bước 2.
Ví dụ sau tính tổng các số từ 0 đến 9, sử dụng vòng lặp for.
tong = 0;
for (var i = 0; i<= 9; i++) {
tong += i;
}
Trong vòng lặp for, ta có thể sử dụng nhiều biểu thức khởi tạo hay biểu thức thay 
đổi giá trị cho biến đếm bằng cách dùng toán tử dấu phẩy (đã học ở chương 2: Toán tử 
và biểu thức ).
Xét ví dụ trên, ta có thể khởi tạo giá trị cho biến tổng như là một thành phần của 
vòng lặp for thông qua toán tử dấu phẩy:
for (var i = 0, tong = 0; i<= 9; i++) {
tong += i;
}
Ví dụ 8.1: Hàm sau đây có một câu lệnh for đếm số các mục được lựa chọn trong 
danh sách cuộn (một đối tượng Select cho phép có nhiều sự lựa chọn). Câu lệnh for 
khai báo biến i và khởi tạo cho nó giá trị 0. Vòng lặp sẽ kiểm tra, nếu i nhỏ hơn số tùy 
chọn trong đối tượng Select, thì thi hành câu lệnh if thành công, và tăng i lên 1 sau khi 
thi hành xong lần lặp.
function howMany(selectObject){
var numberSelected = 0;
for(var i=0;i<selectObject.options.length; i++) 
{
if(selectObject.options[i].selected == true)
numberSelected ++;
}
return numberSelected;
}
HTML và JavaScript Trang 150
VIETHANIT Chương 8. Câu lệnh vòng lặp
Choose some music types, then click the button blow: 
 R&B
Jazz
Blues
New Age
Classical
Opera
<INPUT TYPE = “button” VALUE = “How many are selected?” 
onClick = “alert (‘Number of options selected:’+ 
howMany(document.selectForm.musicTypes))”>
Kết quả:
Hình 8.1: Vòng lặp for
8.1.2 Câu lệnh do..while
Câu lệnh dowhile lặp cho tới khi một điều kiện cụ thể có giá trị là false.
HTML và JavaScript Trang 151
VIETHANIT Chương 8. Câu lệnh vòng lặp
Cú pháp lệnh như sau:
do {
statement
} while (condition)
Trước hết, câu lệnh này thi hành statement một lần. Tại lúc kết thúc của mỗi lần 
thi hành vòng lặp, condition được kiểm tra: Nếu condition là true, thì câu lệnh tiếp tục 
được thi hành một lần nữa, ngược lại, nếu điều kiện là false, thì thi hành ngừng và điều 
khiển được chuyển tới câu lệnh kế tiếp câu lệnh dowhile.
Ví dụ 8.2: Trong ví dụ sau, vòng lặp dowhile làm đi làm lại cho đến khi biến i 
không còn nhỏ hơn 5 nữa.
do {
i += 1;
document.write (i);
} while (i<5)
8.1.3 Câu lệnh while
Lệnh while là một cấu trúc lặp khác trong JavaScript. Nó được dùng để thực hiện 
một khối các câu lệnh chừng nào điều kiện là true. Nếu có nhiều câu lệnh thực hiện 
trong thân của vòng lặp, chương trình phải sử dụng cặp dấu ngoặc móc ({}) để chứa 
các câu lệnh đó.
Khác biệt chính giữa vòng lặp while và dowhile là các lệnh trong thân vòng 
lặp while có thể không được thực hiện một lần nào ...  Trình xử lý sự kiện cho các thẻ HTML 
Để khởi tạo trình xử lý sự kiện cho thẻ HTML, chúng ta phải chỉ định thẻ và 
thuộc tính trình xử lý sự kiện. Sau đó chúng ta gán mã JavaScript. Đoạn mã phải được 
đặt trong cặp dấu nháy kép.
Các đối số chuỗi phải được đặt trong cặp dấu nháy đơn.
<INPUT TYPE=“button” NAME=“Button1” VALUE=“Open See!”
onClick = “window.open(‘mydoc.html’, ‘newWin’)”>
Thay vì sử dụng nhiều câu lệnh JavaScript, hàm sẽ giúp cho việc thiết kế chương 
trình tốt hơn. Chúng ta sẽ gọi hàm khi cần thiết; hơn nữa các hàm đó có thể được dùng 
bởi các phần tử khác.
Câu lệnh này gán hàm greeting() cho trình xử lý sự kiện onLoad của window. 
Thuộc tính trình xử lý sự kiện được tham chiếu đến hàm greeting chứ không phải lời 
gọi đến hàm greeting().
Ví dụ 12.8:
 My home page 
function greeting()
{
alert ("Welcome to my world!");
}
HTML và JavaScript Trang 212
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
Kết quả:
Hình 12.8: Kết quả ví dụ 9.8
12.2.3.2 Trình xử lý sự kiện như là những thuộc tính 
Chúng ta cũng có thể gán một hàm cho một trình xử lý sự kiện của một đối 
tượng. Cú pháp như sau:
object.eventhandler = function;
Ví dụ:
window.onload = greeting;
Chúng ta xem lại ví dụ trên và sử dụng trình xử lý sự kiện như những thuộc tính:
Ví dụ 12.9:
 My home page 
function greeting()
{
alert ("Welcome to my world!");
}
window.onLoad = greeting();
HTML và JavaScript Trang 213
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
Kết quả sẽ tương tự như hình 9.8. Điểm mạnh của kĩ thuật này là tính linh hoạt. 
Có nghĩa là chúng ta có thể thay đổi nhanh chóng các trình xử lý sự kiện khi được yêu 
cầu.
12.3 Sử dụng sự kiện cho các thành phần trên form
Trong phần này chúng ta sẽ thảo luận về các phần tử trên form và các sự kiện 
trên các phần tử này.
12.3.1 Đối tượng Textfield (Trường văn bản)
Các Textfield nhận biết các sự kiện onBlur, onFocus, và onChange. 
• Sự kiện onFocus xảy ra khi người dùng nhấp chuột vào trường text. 
• Sự kiện onBlur xảy ra khi người dùng di chuyển ra khỏi trường text bằng 
cách nhấp chuột bên ngoài nó hoặc nhấn phím “tab”. 
• Sự kiện onChange xảy ra khi người dùng có sự thay đổi bên trong trường 
text và sau đó di chuyển ra khỏi trường văn bản. 
Ví dụ 12.10:
Ví dụ dưới đây minh họa các sự kiện nói trên. Trong ví dụ này, khi người dùng 
nhấp chuột bên trong trường text, sự kiện onFocus sẽ xảy ra. Khi người dùng có sự 
thay đổi ở văn bản sau đó di chuyển ra khỏi vùng văn bản hiện thời, sự kiện onChange 
sẽ xảy ra.
 Textfield Events 
function writeIt(value)
{
alert (value);
}
<INPUT TYPE="text" NAME="first_text" 
onFocus="writeIt('focus');"
onChange="writeIt('change');">
Kết quả:
HTML và JavaScript Trang 214
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
Hình 12.9.1: Kết quả ví dụ 9.10
Hình 12.9.2: Khi nhấp chuột vào textbox
HTML và JavaScript Trang 215
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
Hình 12.9.3: Khi nhấp chuột ra khỏi textbox 
(Nếu nội dung trong textbox thay đổi )
12.3.2 Đối tượng Command Button 
Sự kiện onClick của một command button xảy ra khi người dùng nhấp chuột vào 
command button đó. 
Ví dụ dưới đây sẽ minh họa cách sử dụng sự kiện onClick trên đối tượng 
command button. Trong ví dụ này, khi người dùng nhấp chuột vào nút Copy, sự kiện 
onClick xảy ra và phần văn bản ở trường text thứ nhất sẽ được sao chép sang trường 
text thứ hai.
Ví dụ 12.11:
 Button Events 
function writeIt(value)
{
myfm.second_text.value = value;;
}
<INPUT TYPE="button" VALUE="Copy" 
HTML và JavaScript Trang 216
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
onClick="writeIt(myfm.first_text.value);">
Kết quả:
Hình 12.10.1: Kết quả ví dụ 9.10
Hình 12.10.2: Sau khi nhập văn bản vào trường text đầu tiên
Hình 12.10.3: Sau khi nhấp vào nút Copy
12.3.3 Đối tượng Checkbox 
Checkbox là một đối tượng của form hoạt động theo cơ chế bật-tắt. Điều này có 
nghĩa là Checkbox có thể được check hoặc không. Cũng như button, checkbox cũng 
HTML và JavaScript Trang 217
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
nhận biết sự kiện onClick. Ví dụ dưới đây sẽ minh họa về cách sử dụng đối tượng 
checkbox.
Trong ví dụ sau, trên form sẽ có một ô chọn checkbox, khi người dùng kích chọn 
vào checkbox này (tạm hiểu là khi “bật đèn”) thì màu nền sẽ chuyển sang màu trắng, 
đồng thời kèm theo thông báo “Thanks!”, ngược lại, khi người dùng bỏ chọn (tạm hiểu 
là “tắt đèn”) thì màu nền sẽ là màu đen và hiển thị thông báo “Hey! Turn that back 
on!”
Ví dụ 12.12:
 Checkbox Events 
function switchLight()
{
var the_box=window.document.form_2.check_1;
var the_switch = "";
if (the_box.checked == false)
{
document.bgColor='black';
alert ("Hey! Turn that back on!");
}
else
{
document.bgColor='white';
alert ("Thanks!");
}
}
<INPUT TYPE="checkbox" NAME="check_1" 
onClick="switchLight();">
The Light Switch 
HTML và JavaScript Trang 218
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
Kết quả:
Hình 12.11.1: Khi nhấp chọn vào ô checkbox
Hình 12.11.2: Khi bỏ chọn checkbox
12.3.4 Đối tượng radio 
Mã JavaScript của sự kiện onClick trên nút radio tương tự như đối với checkbox, 
chúng chỉ khác nhau trong cách dùng trên form. Khi chúng ta để một checkbox ở chế 
độ tắt (bật) ta có thể bật lại (tắt đi). Tuy nhiên đối với các nút radio thì khác, một khi 
đã được bật, thì tất cả các radio khác đều ở chế độ tắt, ta không thể thay đổi trạng thái 
của radio này bằng cách nhấp vào nó như đối với checkbox. Trạng thái này của các nút 
giữ nguyên cho đến khi một radio khác được bật. Lúc này, chỉ có radio mới được bật 
là ở trạng thái bật còn các radio khác đều ở chế độ tắt.
HTML và JavaScript Trang 219
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
Ví dụ sau minh họa đối tượng radio. Cũng tương tự như ví dụ 9.11, nhưng trong 
ví dụ này, checkbox được thay bằng hai nút radio, một nút là “bật đèn” (Light on) và 
một nút là “tắt đèn” (Light off). Với chức năng tương tự, khi chọn “Light on” thì màu 
nền sẽ là màu trắng, và thông báo kèm theo sẽ là “Thanks!”, ngược lại, nếu chọn 
“Light off” thì màu nền sẽ chuyển thành màu đen, và sẽ hiển thị thông báo “Hey! Turn 
that back on!”.
Ví dụ 12.13:
 Option Button Events 
function offButton()
{
var the_box=window.document.form_1.radio_1;
if (the_box.checked == true)
{
window.document.form_1.radio_2.checked 
= false;
document.bgColor='black';
alert ("Hey! Turn that back on!");
}
}
function onButton()
{
var the_box=window.document.form_1.radio_2;
if (the_box.checked == true)
{
window.document.form_1.radio_1.checked 
= false;
document.bgColor='white';
alert ("Thanks!");
}
}
<INPUT TYPE="radio" NAME="radio_1" 
HTML và JavaScript Trang 220
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
onClick="offButton();">
Light off
<INPUT TYPE="radio" NAME="radio_2" 
onClick="onButton();" checked>
Light on
Kết quả:
Hình 12.12.1: Khi chọn Light on
HTML và JavaScript Trang 221
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
Hình 12.12.2: Khi chọn Light off
12.3.5 Đối tượng ComboBox (lựa chọn)
Đối tượng ComboBox xuất hiện trong form HTML giống như một danh sách đổ 
xuống hoặc danh sách cuộn của các tùy chọn.
Danh sách tùy chọn được mô tả giứ hai thẻ và bằng 
cách sử dụng thẻ 
ComboBox hỗ trợ các sự kiện onBlur, onFocus, và onChange.
12.3.6 Kiểm tra tính hợp lệ của nội dung các trường trên form
Chương trình dưới đây là một ví dụ về việc kiểm tra tính hợp lệ của nội dung các 
trường trên form trước khi chuyển nó cho server để tiếp tục xử lý. Trong quá trình 
kiểm tra tính hợp lệ của nội dung các trường trên form, người lập trình phải kiểm tra 
từng trường để bảo đảm rằng không có trường nào bị bỏ trống hoặc chứa các thông tin 
không hợp lệ.
Ví dụ 12.14:
 Form events 
function validateFirstName()
{
var str=form1.fname.value;
if (str.length == 0)
{
alert ("The first name cannot be 
empty");
return false;
}
return true;
}
function validateLastName()
{
var str=form1.lname.value;
if (str.length == 0)
{
alert ("The last name cannot be 
empty");
return false;
}
HTML và JavaScript Trang 222
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
return true;
}
function validateEmail()
{
var str=form1.email.value;
if (str.length == 0)
{
alert ("The Email field cannot be 
empty");
return false;
}
}
function proccessForm()
{
disp = open("","result")
disp.document.write(" Result Page 
"+"")
disp.document.write("" + 
"Thanks for signing in " + 
""+""+"")
disp.document.write("First name \t\t:" + 
form1.fname.value+"")
disp.document.write("Last name \t\t:"+ 
form1.lname.value+"")
disp.document.write("Email \t\t\t:" + 
form1.email.value+"")
disp.document.write("Your comments \t\t:" + 
form1.comment.value+"")
disp.document.write("")
if (disp.confirm("Is this information 
correct"))
disp.close()
}
 Handling Form 
Events
HTML và JavaScript Trang 223
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
 First name: <INPUT TYPE="text" NAME="fname" 
size=10 onBlur = "validateFirstName()">
Last name: <INPUT TYPE="text" NAME="lname" 
size=15 onBlur = "validateLastName()">
 Email: <INPUT TYPE="text" NAME="email" 
size=10 onBlur = "validateFirstName()">
Comments: <TEXTAREA NAME="comment" rows=4 
cols=30>Enter your comments 
<INPUT TYPE = "button" 
VALUE="Submit this form" onClick = 
"proccessForm()">
Kết quả:
Hình 12.10.1: Kết quả ví dụ 9.11
HTML và JavaScript Trang 224
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
Hình 12.10.2: Sau khi nhập thông tin vào form
Hình 12.10.3: Sau khi bấm nút “Submit this form”
HTML và JavaScript Trang 225
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
Chúng ta xét tiếp ví dụ sau, ví dụ này là đoạn chương trình kiểm tra tính đúng 
đắn của một địa chỉ email được nhập vào qua Textbox.
Ví dụ 12.15:
 Email Validation 
function IsEmailValid (Formname,ElemName)
{
var EmailOk = true;
var Temp = ElemName;
var AtSym = Temp.value.indexOf ('@');
var Period =Temp.value.lastIndexOf('.');
var Space = Temp.value.indexOf(' ');
var Length = Temp.length -1;
if ((AtSym <1)||(Period<=AtSym+1)||(Period ==Length)||(Space 
>=0))
{
EmailOk=false
alert('Please enter a valid email address!')
Temp.focus()
}
else
alert('This is a valid email address!')
return EmailOk
}
 Please enter your email address: <input type = "text" name = 
"text1">
<input type= "button" value = "Check email address" onClick = 
"IsEmailValid('frm', frm.text1);">
Kết quả:
HTML và JavaScript Trang 226
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
Hình 12.11.1: Một địa chỉ email hợp lệ
Hình 12.11.1: Kiểm tra địa chỉ email không hợp lệ, yêu cầu người dùng nhập lại
12.4 Câu hỏi và bài tập
1. Sự kiện onChange có được tạo ra khi một radio button hoặc một checkbox 
được nhấp hay không ?_________ (Có/Không )
2. Sự kiện _________ được tạo ra bất cứ khi nào con trỏ chuột di chuyển lên 
trên một phần tử.
3. Sự kiện _________ được tạo ra bất cứ khi nào con trỏ chuột di chuyển ra khỏi 
phần tử đó.
4. Sự kiện _________ được kích hoạt khi hành động nhấp chuột xảy ra.
5. Sự kiện _________ được kích hoạt khi hành động nhả chuột xảy ra.
HTML và JavaScript Trang 227
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
6. Khi một sự kiện được khởi tạo, chúng ta có thể tạo ra một đoạn mã JavaScript 
để đáp ứng lại sự kiện. Đoạn mã này được gọi là _________.
7. Các Textfield nhận biết các sự kiện onBlur, onFocus, và onChange. Trong đó: 
• Sự kiện _________ xảy ra khi người dùng có sự thay đổi bên trong trường 
text và sau đó di chuyển ra khỏi trường văn bản. 
• Sự kiện _________ xảy ra khi người dùng di chuyển ra khỏi trường text 
bằng cách nhấp chuột bên ngoài nó hoặc nhấn phím “tab”. 
• Sự kiện _________ xảy ra khi người dùng nhấp chuột vào trường text. 
8. Trong một form, ta có thể chọn nhiều nút radio trong cùng một nhóm. 
___________ (Đúng/Sai)
9. Đối tượng _________ xuất hiện trong form HTML giống như một danh sách 
sổ xuống hoặc danh sách cuộn của các tùy chọn.
Bài tập thực hành chương 12:
HTML và JavaScript Trang 228
VIETHANIT Chương 12. Xử lý form và các sự kiện cho các phần tử trên form 
1. Hãy viết một trang web, gồm có một textbox và hai nút radio như hình dưới
Yêu cầu: Viết một hàm JavaScript, khi kích vào nút radio “Disabled” thì giá trị 
trong textbox ẩn, và khi chọn nút radio “abled” thì cho textbox soạn thảo được. 
2. Hãy viết một trang web, tương tự bài 1 gồm có một button và một nút 
CheckBox như hình dưới. Khi kích vào CheckBox thì cho button này ẩn đi.
3. Hãy viết một trang web, chèn một textbox, gõ nội dung vào textbox. Khi 
textBox mất focus (tiêu điểm) thì sẽ có một hộp thông báo hiển thị nội dung 
của textbox. 
4. Hãy viết một trang web, chèn một textbox và một button. Nếu không nhập 
nội dung vào textbox thì button này sẽ bị ẩn (thuộc tính disabled của button 
bằng true), khi nội dung được nhập vào textbox thì button này sẽ xuất hiện. 
Bấm vào button thì sẽ xuất hiện một thông báo nội dung vừa nhập trong 
textbox.
5. Thiết kế một form gồm có hai textbox và một nút lệnh button, textbox1 để 
người dùng nhập username, textbox2 để người dùng nhập password (khi 
người dùng gõ vào textbox này thì trên textbox chỉ hiển thị các dấu * thay vì 
nội dung đang nhập). Sau khi nhập nội dung vào hai textbox này, nhấn vào 
nút lệnh thì username và password của người dùng sẽ được hiển thị trong một 
thông báo.
6. Làm lại ví dụ 9.14 trong chương này, yêu cầu các trường không được để 
trống, và email nhập vào phải là một địa chỉ email hợp lệ. Nếu email không 
hợp lệ thì chỉ buộc người dùng nhập lại dịa chỉ email (Các trường khác không 
bắt buộc nhưng vẫn có thể thay đổi nội dung được).
HTML và JavaScript Trang 229
VIETHANIT 
TÀI LIỆU THAM KHẢO
[1] Căn bản thiết kế Web, Nhà xuất bản thống kê.
[2] Nguyễn Viết Linh (2002), Hướng dẫn lập trình và tham khảo toàn diện JavaScript, 
NXB Thanh Niên, Bến Tre.
[3] Nguyễn Trường Sinh (2006), Học nhanh JavaScript bằng hình ảnh, NXB Lao động 
xã hội.
[4] Nguyễn Trường Sinh (2005), Thiết kế Web động với JavaScript, NXB Lao động xã 
hội
[5] Lê Minh Trí (2000), JavaScript, NXB Trẻ và Công ty văn hóa Phương Nam, TP Hồ 
Chí Minh.
[6] Thiết kế trang Web cá nhân bằng ngôn ngữ HTML, Nhà Xuất bản thống kê
[7] Thu Nhi, Thiết kế trang Web với HTML, NXB Trẻ
[8] Trung tâm đào tạo lập trình viên quốc tế Softech – Aptech, Giáo trình HTML và 
JavaScript.
[9] JavaScript 2.0: The Complete Reference, Second Edition
by Thomas Powell and Fritz Schneider.
McGraw-Hill/Osborne © 2004 
[10] JavaScript & DHTML Cookbook
By Danny Goodman 
Publisher: O’Reilly
[11] JavaScript: The Definitive Guide, 4th Edition
By David Flanagan
Publisher: O’Reilly
[12] Learning JavaScript
By Shelley Powers
Publisher: O’Reilly
HTML và JavaScript