Giáo trình HTLM Và javascript: Phần 2 - Việt Tiến

Phần 2 giáo trình trình bày 6 chương tướng ứng 6 nội dung: Câu lệnh điều kiện, câu lệnh vòng lặp, hàm, mảng, các đối tượng cơ bản của javascript, xử lý form và các sự kiện cho các phần tử trên form. Mời các bạn cùng tham khảo giáo trình.

VIETHANIT Chương Câu lệnh điều kiện CHƯƠNG CÂU LỆNH ĐIỀU KIỆN 7.1 Lệnh khối lệnh 7.1.1 Lệnh quy ước lệnh JavaScript Cũng hầu hết ngôn ngữ khác, đơn vị làm việc JavaScript câu lệnh Trong hai chương trước, làm quen với nhiều câu lệnh JavaScript Nó kết phép gán giá trị cho biến, lời gọi hàm, hay biểu diễn dạng phép tính, chí kết hợp tất cơng việc Trong ví dụ trước đây, câu lệnh mà làm quen câu lệnh khai báo, câu lệnh dùng để khởi tạo (hay định nghĩa) biến mới, mà cịn gán giá trị cho nó, ví dụ như: var x = 10; Như nói trên, chương trình JavaScript tập hợp câu lệnh, câu lệnh tổ chức thành hàm (sẽ đề cập chương 5) Các câu lệnh JavaScript bao gồm từ khóa sử dụng với cú pháp thích hợp kết thúc dấu chấm phẩy (;) Một câu lệnh nằm nhiều dịng Nhiều câu lệnh viết dòng câu lệnh phân tách dấu chấm phẩy (;) 7.1.2 Khối lệnh Một khối lệnh sử dụng để nhóm câu lệnh Các câu lệnh gọi đồng cấp nhóm lại cặp dấu ngoặc móc ({}) Bên khối lệnh lại viết lồng khối lệnh khác Sự lồng theo cách 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 tập hợp lệnh thi hành điều kiện định Kết điều kiện xác định câu lệnh khối lệnh thực thi JavaScript cung cấp hai câu lệnh điều kiện: if…else switch 7.2.1 Câu lệnh if…else Câu lệnh dùng để kiểm tra điều kiện, thực thi việc tính tốn biểu thức, kiểm tra điều kiện hay sai để thực khối lệnh tương ứng Một câu lệnh if đơn giản có cú pháp lệnh sau: if (điều kiện ) { // câu lệnh ứng với điều kiện } Đây cú pháp lệnh đơn giản, kiểm tra điều kiện sau theo sau if khối lệnh thực thi HTML JavaScript Trang 139 VIETHANIT Chương Câu lệnh điều kiện Ví dụ 7.1: Kiểm tra số có phải số chẵn hay khơng? Nếu số chẵn hiển thị kết luận số chẵn Đối với toán này, ta sử dụng phép chia lấy dư (%) để kiểm tra Nếu số thực phép chia lấy dư cho mà trả kết kết luận số số chẵn Đoạn mã sau minh họa cho toá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 ví dụ trên, ta thay giá trị x = hình khơng xuất cả, nói cách khác, khơng thực khối lệnh sau if, trường hợp này, biểu thức r == trả giá trị sai (false) Ta khối lệnh cần thực điều kiện sai (false) cách dùng mệnh đề else Cú pháp sau: if (điều kiện) HTML JavaScript Trang 140 VIETHANIT Chương Câu lệnh điều kiện { // câu lệnh ứng với điều kiện } else { // câu lệnh ứng với điều kiện sai } Cú pháp hiểu sau: Nếu điều kiện (true) khối lệnh sau if thực hiện, ngược lại, sai (false) khối lệnh sau else thực Trong hai cú pháp lệnh trên, điều kiện biểu thức JavaScript có giá trị true false Khối lệnh sau if else câu lệnh JavaScript nào, kể câu lệnh if lồng thêm vào Nếu muốn sử dụng thêm nhiều câu lệnh sau câu lệnh if else ta phải đóng câu lệnh dấu ngoặc móc ({}) Ví dụ sau minh họa cho câu lệnh điều kiện if…else Trong ví dụ này, ta xét số số chẵn hay lẻ, sau hiển thị kết hình Cũng ví dụ 3.1, ta sử dụng phép chia lấy dư (%) để kiểm tra Nếu số thực phép chia lấy dư cho mà trả kết kết luận số số chẵn, ngược lại kết luận số lẻ Đoạn mã sau minh họa cho tố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 JavaScript Trang 141 VIETHANIT Chương Câu lệnh điều kiện Kết quả: Hình 7.2.1: Trường hợp nhập vào số chẵn Hình 7.2.2: Trường hợp nhập vào số lẻ HTML JavaScript Trang 142 VIETHANIT Chương Câu lệnh điều kiện 7.2.2 Câu lệnh switch Khi có nhiều tùy chọn if…else tốt ta nên sử dụng lệnh switch Lệnh xem lệnh case Câu lệnh switch cho phép chương trình định giá trị biểu thức thử so khớp giá trị biểu thức với trường hợp Nếu so khớp thỏa mãn chương trình thi hành câu lệnh tương ứng Nếu khơng tìm thấy giá trị danh sách case nó, khối lệnh phần default thực Lệnh break dùng để thoát khỏi câu lệnh switch Câu lệnh switch có dạng sau: switch (expression){ case label: statements; break; case label: statements; break; … defaul: statements; } Đầu tiên chương trình tìm nhãn trùng khớp với giá trị biểu thức thi hành câu lệnh tương ứng so khớp thành công Nếu nhãn so khớp không tìm thấy, chương trình tìm đến khối lệnh lựa chọn default, tìm thấy thực câu lệnh tương ứng Nếu khơng tìm thấy câu lệnh default, chương trình tiếp tục thi hành câu lệnh sau câu lệnh switch Câu lệnh tùy chọn break kết hợp với trường hợp đảm bảo chương trình khỏi lệnh switch câu lệnh so khớp thi hành tiếp tục thực thi câu lệnh câu lệnh switch Nếu không sử dụng câu lệnh break chương trình tiếp tục thi hành lệnh câu lệnh switch Ví dụ7.3: Trong ví dụ sau, exp ước lượng đến “Bananas”, chương trình so khớp giá trị với trường hợp “Bananas” thi hành câu lệnh kết hợp Khi bắt gặp break chương trình ngắt switch thi hành câu lệnh theo sau switch Nếu break bỏ qua, câu lệnh cho trường hợp “Cherries” 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 chọn loại trái cấy danh sách: ",""); switch (exp){ HTML JavaScript Trang 143 VIETHANIT Chương 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 JavaScript Trang 144 VIETHANIT Chương Câu lệnh điều kiện Hình 7.3.1: Câu lệnh switch Ở cần lưu ý câu lệnh break case Như nói trên, khơng có break, chương trình tiếp tục thực khối case khác Ví dụ, đoạn mã trên, ta không kết thúc khối case “Oranges” câu lệnh break, chương trình tiếp tục thực khối lệnh case “Apples” Xét đoạn mã đề 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 JavaScript Trang 145 VIETHANIT Chương 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 tập Câu hỏi: Các câu lệnh JavaScript kết thúc dấu phẩy (,) (Đúng/Sai) Một câu lệnh nằm nhiều dịng (Đúng/Sai) Nhiều câu lệnh không viết dòng cho dù câu lệnh phân tách dấu chấm phẩy (;) (Đúng/Sai) Bên khối lệnh có khối lệnh khác hay khơng? _ (Có/Khơng) HTML JavaScript Trang 146 VIETHANIT Chương Câu lệnh điều kiện JavaScript cung cấp hai câu lệnh điều kiện Một câu lệnh if có thiết phải có thành phần else theo sau hay khơng? _(Có/Khơng) Đối với câu lệnh if, chương trình kiểm tra điều kiện sau theo sau if khối lệnh sau if thực thi Đối với câu lệnh switch, chương trình khơng tìm thấy giá trị danh sách case nó, khối lệnh phần _ thực Lệnh dùng để thoát khỏi câu lệnh switch Bài tập thực hành chương 7: HTML JavaScript Trang 147 VIETHANIT Chương Câu lệnh điều kiện Viết chương trình cho phép người dùng nhập vào hai số songuyen1 songuyen2, kiểm tra xem songuyen1 có chia hết cho songuyen2 khơng, thông báo tương ứng Gợi ý: Thực sau: - Nhập vào giá trị số (dùng prompt) - Lấy số dư phép chia songuyen1 cho songuyen2 - Nếu số dư in thông báo “songuyen1 chia het cho songuyen2” - Nếu số dư khác in thơng báo “songuyen1 khong chia het cho songuyen2” Viết chương trình nhập vào ba số, tìm số lớn ba số Viết chương trình cho phép người dùng nhập vào năm, kiểm tra năm có phải năm nhuận hay không Gợi ý: Năm nhuận năm chia hết cho 4, ngoại trừ năm chia hết cho 100 mà khơng chia hết cho 400 Ví dụ 1700, 1800, 1900 năm nhuận, năm 1600, 2000 năm nhuận Viết chương trình xếp loại học viên theo điểm số nguyên sau: (dùng if else) - Nhập điểm từ bàn phím (dùng prompt) - In thông báo xếp loại tương ứng với điểm sau: o Nếu điểm 9, 10 xếp loại giỏi o Nếu điểm 7, xếp loại o Nếu điểm 5, xếp loại trung bình o Nếu điểm 0, 1, 2, 3, xếp loại yếu o Nếu điểm 10 thơng báo điểm nhập vào khơng hợp lệ Viết lại chương trình cách sử dụng lệnh switch HTML JavaScript Trang 148 VIETHANIT Chương 12 Xử lý form kiện cho phần tử form Hình 12.9.3: Khi nhấp chuột khỏi textbox (Nếu nội dung textbox thay đổi ) 12.3.2 Đối tượng Command Button Sự kiện onClick command button xảy người dùng nhấp chuột vào command button Ví dụ minh họa cách sử dụng kiện onClick đối tượng command button Trong ví dụ này, người dùng nhấp chuột vào nút Copy, kiện onClick xảy phần văn trường text thứ chép sang trường text thứ hai Ví dụ 12.11: Button Events function writeIt(value) { myfm.second_text.value = value;; } Kết quả: Hình 12.10.1: Kết ví dụ 9.10 Hình 12.10.2: Sau nhập văn vào trường text Hình 12.10.3: Sau nhấp vào nút Copy 12.3.3 Đối tượng Checkbox Checkbox đối tượng form hoạt động theo chế bật-tắt Điều có nghĩa Checkbox check không Cũng button, checkbox HTML JavaScript Trang 217 VIETHANIT Chương 12 Xử lý form kiện cho phần tử form nhận biết kiện onClick Ví dụ minh họa cách sử dụng đối tượng checkbox Trong ví dụ sau, form có chọn checkbox, người dùng kích chọn vào checkbox (tạm hiểu “bật đèn”) màu chuyển sang màu trắng, đồng thời kèm theo thông báo “Thanks!”, ngược lại, người dùng bỏ chọn (tạm hiểu “tắt đèn”) màu màu đen 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!"); } } The Light Switch HTML JavaScript Trang 218 VIETHANIT Kết quả: Chương 12 Xử lý form kiện cho phần tử form 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 kiện onClick nút radio tương tự checkbox, chúng khác cách dùng form Khi để checkbox chế độ tắt (bật) ta bật lại (tắt đi) Tuy nhiên nút radio khác, bật, tất radio khác chế độ tắt, ta thay đổi trạng thái radio cách nhấp vào checkbox Trạng thái nút giữ nguyên radio khác bật Lúc này, có radio bật trạng thái bật radio khác chế độ tắt HTML JavaScript Trang 219 VIETHANIT Chương 12 Xử lý form kiện cho phần tử form Ví dụ sau minh họa đối tượng radio Cũng tương tự ví dụ 9.11, ví dụ này, checkbox thay hai nút radio, nút “bật đèn” (Light on) nút “tắt đèn” (Light off) Với chức tương tự, chọn “Light on” màu màu trắng, thông báo kèm theo “Thanks!”, ngược lại, chọn “Light off” màu chuyển thành màu đen, 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!"); } } Light off Light on Kết quả: Hình 12.12.1: Khi chọn Light on HTML JavaScript Trang 221 VIETHANIT Chương 12 Xử lý form kiện cho phần tử 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 form HTML giống danh sách đổ xuống danh sách cuộn tùy chọn Danh sách tùy chọn mô tả giứ hai thẻ cách sử dụng thẻ ComboBox hỗ trợ kiện onBlur, onFocus, onChange 12.3.6 Kiểm tra tính hợp lệ nội dung trường form Chương trình ví dụ việc kiểm tra tính hợp lệ nội dung trường form trước chuyển cho server để tiếp tục xử lý Trong q trình kiểm tra tính hợp lệ nội dung trường form, người lập trình phải kiểm tra trường để bảo đảm khơng có trường bị bỏ trống chứa 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 JavaScript Trang 222 VIETHANIT Chương 12 Xử lý form kiện cho phần tử 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 JavaScript Trang 223 VIETHANIT Chương 12 Xử lý form kiện cho phần tử form

First name: Last name:

Email: Comments: Enter your comments

Kết quả: Hình 12.10.1: Kết ví dụ 9.11 HTML JavaScript Trang 224 VIETHANIT Chương 12 Xử lý form kiện cho phần tử form Hình 12.10.2: Sau nhập thơng tin vào form Hình 12.10.3: Sau bấm nút “Submit this form” HTML JavaScript Trang 225 VIETHANIT Chương 12 Xử lý form kiện cho phần tử form Chúng ta xét tiếp ví dụ sau, ví dụ đoạn chương trình kiểm tra tính đắn địa email 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