Giáo trình HTML và JavaScript

uy 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