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

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

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

Ví dụ, bạn có thể sử dụng một nhãn để chỉ ra một vòng lặp, và sau đó sử dụng các câu lệnh break hoặc continue để chỉ ra một chương trình sẽ thoát khỏi vòng lặp hoặc tiếp tục thi hành n[r]

(1)

CHƯƠNG 7

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 }

(2)

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:

<HTML> <HEAD>

<SCRIPT> var x = 4; r=x%2; if (r==0) {

document.write("so "+x+" la so chan"); }

</SCRIPT> </HEAD>

</HTML>

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

(3)

{

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

<HTML> <HEAD>

<SCRIPT>

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"); }

</SCRIPT> </HEAD>

(4)

Kết quả:

Hình 7.2.1: Trường hợp nhập vào số chẵn

(5)

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:

<HTML> <HEAD>

<SCRIPT>

document.write("1.Oranges"); document.write("<br>2.Apples"); document.write("<br>3.Bananas"); document.write("<br>4.Cherries");

var exp=prompt ("Vui lòng chọn loại trái cấy danh sách: ","");

(6)

case "Oranges":

document.write("<br>Oranges are $0.59 a pound."); break;

case "Apples":

document.write("<br>Apples are $0.32 a pound."); break;

case "Bananas":

document.write("<br>Bananas are $0.48 a pound."); break;

case "Cherries":

document.write("<br>Cherries are $3.00 a pound."); break;

default:

document.write ("<br>Sorry, we have no this kind of fruit!!"); }

</SCRIPT> </HEAD>

</HTML>

(7)

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("<br>Oranges are $0.59 a pound."); case "Apples":

document.write("<br>Apples are $0.32 a pound."); break;

case "Bananas":

document.write("<br>Bananas are $0.48 a pound."); break;

… }

(8)

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:

1 Các câu lệnh JavaScript kết thúc dấu phẩy (,) (Đúng/Sai)

2 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

được phân tách dấu chấm phẩy (;) (Đúng/Sai)

(9)

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

7 Đố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

8 Đố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

9 Lệnh dùng để thoát khỏi câu lệnh switch

(10)

1 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”

2 Viết chương trình nhập vào ba số, tìm số lớn ba số

3 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 khơng phải năm nhuận, năm 1600, 2000 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 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 <0 điểm>10 thơng báo điểm nhập vào không hợp lệ

(11)

CHƯƠNG 8

CÂU LỆNH VỊNG LẶP

8.1 Các lệnh vịng lặp JavaScript

Vòng lặp tập hợp lệnh thi hành lặp lặp lại điều kiện cụ thể xác định Có nhiều loại vòng lặp:

- Vòng lặp thực lặp lặp lại lệnh điều kiện false - Vòng lặp thực lặp lặp lại lệnh điều kiện true - Vòng lặp thực lặp lặp lại lệnh theo số lần định

JavaScript cung cấp câu lệnh vòng lặp for, while, while Ngồi sử dụng câu lệnh chuyển điều khiển bên câu lệnh vòng lặp break, continue label (mặc dù label khơng phải câu lệnh vịng lặp, sử dụng thường xuyên với câu lệnh vòng lặp)

Ngồi ra, chương cịn tìm hiểu hai câu lệnh vịng lặp thao tác đối tượng for in with

8.1.1 Câu lệnh for

Vòng lặp for thực lặp lặp lại khối lệnh điều kiện false Số lần thực vòng lặp thường điều khiển thông qua biến đếm

Câu lệnh for bao gồm ba thành phần, phân cách dấu chấm phẩy (;) Cả ba thành phần khơng bắt buộc phải có, chúng điều khiển việc thực vòng lặp for Nếu có nhiều câu lệnh thực thân vịng lặp, chương trình phải sử dụng cặp dấu ngoặc móc ({}) để chứa câu lệnh

Cú pháp lệnh sau:

for([initialExpression];[condition];[incrementExpresion]){ statements;

}

Trong đó:

- initialExpression: Lệnh khởi tạo, thực lần thường dùng để khởi tạo biến đếm

- condition: điều kiện vòng lặp

- incrementExpression: Lệnh tăng, thay đổi giá trị biến đếm vòng lặp - statements: Các lệnh bên vòng lặp

Vòng lặp for thi hành sau:

(12)

2 Biểu thức condition ước lượng Nếu giá trị condition true, câu lệnh vòng lặp thi hành Nếu giá trị condition false khỏi vịng lặp Nếu bỏ qua hồn tồn biểu thức condition điều kiện thừa nhận true

3 Thực thi statements

4 Cập nhật biểu thức incrementExpression, trở bước Ví dụ sau tính tổng số từ đế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 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 cách dùng toán tử dấu phẩy (đã học chương 2: Toán tử biểu thức )

Xét ví dụ trên, ta khởi tạo giá trị cho biến tổng thành phần vịng lặp for thơng qua tốn tử dấu phẩy:

for (var i = 0, tong = 0; i<= 9; i++) { tong += i;

}

Ví dụ 8.1: Hàm sau có câu lệnh for đếm số mục lựa chọn

danh sách cuộn (một đối tượng Select cho phép có nhiều lựa chọn) Câu lệnh for khai báo biến i khởi tạo cho giá trị Vòng lặp kiểm tra, i nhỏ số tùy chọn đối tượng Select, thi hành câu lệnh if thành công, tăng i lên sau thi hành xong lần lặp

<HTML> <HEAD>

<SCRIPT LANGUAGE="JavaScript"> function howMany(selectObject){

var numberSelected = 0;

for(var i=0;i<selectObject.options.length; i++) {

if(selectObject.options[i].selected == true) numberSelected ++;

}

return numberSelected; }

(13)

<BODY>

<FORM NAME = “selectForm”>

<P><B>Choose some music types, then click the button blow: </B> <BR><SELECT NAME =”musicTypes”MULTIPLE>

<OPTION SELECTED> R&B <OPTION>Jazz

<OPTION>Blues <OPTION>New Age <OPTION>Classical <OPTION>Opera </SELECT>

<P><INPUT TYPE = “button” VALUE = “How many are selected?” onClick = “alert (‘Number of options selected:’+ howMany(document.selectForm.musicTypes))”>

</FORM> </BODY> </HTML>

Kết quả:

Hình 8.1: Vòng lặp for

8.1.2 Câu lệnh while

(14)

Cú pháp lệnh sau: {

statement

} while (condition)

Trước hết, câu lệnh thi hành statement lần Tại lúc kết thúc lần thi hành vòng lặp, condition kiểm tra: Nếu condition true, câu lệnh tiếp tục thi hành lần nữa, ngược lại, điều kiện false, thi hành ngừng điều khiển chuyển tới câu lệnh câu lệnh do…while

Ví dụ 8.2: Trong ví dụ sau, vòng lặp do…while làm làm lại biến i

khơng cịn nhỏ {

i += 1;

document.write (i); } while (i<5)

8.1.3 Câu lệnh while

Lệnh while cấu trúc lặp khác JavaScript Nó dùng để thực khối câu lệnh chừng điều kiện true Nếu có nhiều câu lệnh thực thân vịng lặp, chương trình phải sử dụng cặp dấu ngoặc móc ({}) để chứa câu lệnh

Khác biệt vịng lặp while do…while lệnh thân vòng lặp while khơng thực lần kiểm tra điều kiện trước, từ ban đầu điều kiện false Tuy nhiên vịng lặp do…while thực lần

Cú pháp lệnh sau: while (condition) {

statement; }

Nếu điều kiện false, câu lệnh vịng lặp dừng thi hành điều khiển chuyển tới câu lệnh sau vòng lặp

Việc kiểm tra điều kiện xảy trước câu lệnh vòng lặp thi hành Nếu điều kiện trả true, câu lệnh vòng lặp thi hành điều kiện kiểm tra lại lần Nếu điều kiện trả false, dừng thi hành điều khiển chuyển tới câu lệnh câu lệnh while

Ví dụ 8.3: Vịng lặp while sau lặp lặp lại miễn n nhỏ 3:

n = 0; x = 0;

(15)

}

Mỗi lần lặp lại, vòng lặp tăng n gán giá trị cho x Vì thế, x n có giá trị sau:

- Sau vòng lặp đầu tiên: n = x = - Sau vòng lặp thứ 2: n = x = - Sau vòng lặp thứ 3: n = x =

Sau kết thúc vòng lặp thứ 3, điều kiện n<3 khơng cịn đúng, vịng lặp kết thúc

Chúng ta lưu ý phải đảm bảo điều kiện vịng lặp cuối có giá trị false, khơng vịng lặp khơng thốt, lúc nói vịng lặp vơ tận

Ví dụ 8.4: Các câu lệnh vòng lặp while sau thi hành mãi

điều kiện khơng có giá trị false: while (true) {

alert (“Hello, word!”) }

8.2 Các lệnh chuyển điều khiển vòng lặp

8.2.1 Câu lệnh label

Một label bao gồm câu lệnh với danh hiệu cho phép tham khảo tới nơi khác chương trình bạn Ví dụ, bạn sử dụng nhãn để vòng lặp, sau sử dụng câu lệnh break continue để chương trình khỏivịng lặp tiếp tục thi hành

Cú pháp câu lệnh label sau: label:

statement

Giá trị label danh hiệu JavaScript khơng phải từ khóa có sẵn JavaScript

statement câu lệnh

Ví dụ 8.5 : Trong ví dụ này, nhãn markLoop vòng lặp while

markLoop:

while (theMark == true) { doSomething (); }

8.2.2 Câu lệnh break

(16)

Chúng ta sử dụng câu lệnh break để thoát khỏi vòng lặp, câu lệnh switch câu lệnh label

• Khi sử dụng break mà khơng có label, khỏi vịng lặp while, do…while, for câu lệnh switch chuyển điều khiển tới câu lệnh theo sau

• Khi sử dụng break với nhãn (label), nhảy tới câu lệnh gán nhãn cụ thể

Cú pháp câu lệnh break sau: break

2 break label

Dạng thứ cú pháp khỏi vịng lặp câu lệnh switch, dạng thứ hai nhảy tới câu lệnh có label đính kèm

Ví dụ 8.6: Ví dụ sau lặp lặp lại thông qua phần tử mảng cho

tới tìm thấy số phần tử mà giá trị theValue: for (i = 0; i < a.length; i++) {

if (a[i] = theValue) break; }

Ví dụ 8.7: Hàm sau có câu lệnh break chấm dứt vịng lặp while i 3, sau

đó trả giá trị 3*x

function testBreak (x) { var i = 0;

while (i<6) { if (i == 3) break; i++; }

return i*x; }

8.2.3 Câu lệnh continue

Một lệnh đặc biệt khác sử dụng vịng lặp lệnh continue Continue dừng lần lặp quay lại kiểm tra điều kiện để thực lần lặp Nó sử dụng để khởi động lại câu lệnh while, do…while, for câu lệnh label

(17)

ngược trở lại phần điều kiện Trong vịng lặp for, nhảy tới phần incrementExpression

• Khi sử dụng continue với label, tiếp tục với câu lệnh lặp với label

Cú pháp câu lệnh continue sau: continue

2 continue label

Ví dụ 8.8: Ví dụ sau trình bày vịng lặp while với câu lệnh continue thi hành

giá trị i i = 0; n = 0;

while (i<5) { i++; if (i == 3)

continue; n+=i;

}

Ví dụ 8.9: Trong ví dụ sau, câu lệnh gắn nhãn checkiandj chứa câu

lệnh gắn nhãn checkj Nếu gặp phải continue, chương trình kết thúc lần lặp checkj bắt đầu lần lặp Mỗi lần gặp phải continue, checkj lặp lại điều kiện trả giá trị false Khi giá trị false trả về, phần cịn lại câu lệnh checkiandj hồn thành, checkiandj lặp lại điều kiện trả false Khi giá trị false trả về, chương trình tiếp tục câu lệnh sau checkiandj

Nếu câu lệnh continue có nhãn checkiandj, chương trình tiếp tục đầu câu lệnh checkiandj

checkiandj:

while (i<4) {

document.write (i + “<BR>”); i +=1;

checkj:

while (j>4) {

document.write (j + “<BR>”); j -=1;

if ((j%2) == 0) continue checkj;

(18)

document.write(“i =” + i + “<BR>”); document.write(“j =” + j + “<BR>”); }

8.3 Các lệnh thao tác đối tượng

JavaScript sử dụng câu lệnh for…in with để thao tác đối tượng

8.3.1 Câu lệnh for…in

Câu lệnh for…in lặp lặp lại biến định tất thuộc tính đối tượng Với thuộc tính riêng, JavaScript thực thi câu lệnh Ví dụ sử dụng câu lệnh for…in để thực khối câu lệnh cho phần tử mảng

Cú pháp lệnh sau: for (variable in object) {

statements; }

Ví dụ 8.10: Hàm sau có đối số đối tượng tên đối tượng Sau

nó lặp lặp lại tồn thuộc tính đối tượng trả chuỗi liệt kê tên thuộc tính giá trị chúng

function dump_props (obj, obj_name) { var result = “”;

for (var i in obj) {

result += obj_name + “.” + i + “=” + obj[i] + “<BR>” }

result += “<HR>”; return result; }

Với đối tượng car, thuộc tính make model, result là: car.make = Ford

car.model = Mustang

Ví dụ 8.11: Trong ví dụ đây, mảng “color” tạo Các phần tử

mảng “red”, “blue” “green” Vòng lặp for…in dùng để duyệt qua mảng màu hiển thị phần tử

<HTML> <HEAD>

(19)

for (var prop in color){

record += prop + "=" + color[prop] + "<BR>" }

record += "<BR>" document.write (record) </SCRIPT>

</HEAD> </HTML>

Kết quả:

Hình 8.1: Câu lệnh for…in

8.3.2 Câu lệnh with

Câu lệnh with thiết lập đối tượng mặc định cho tập hợp câu lệnh JavaScript tìm kiếm tên tuyệt đối nằm tập hợp câu lệnh để xác định xem tên có thuộc tính đối tượng mặc định hay không Nếu tên tuyệt đối so khớp với thuộc tính, thuộc tính sử dụng nằm câu lệnh, khơng biến cục toàn cục sử dụng

Cú pháp lệnh sau: with (object) { statements; }

Ví dụ 8.12: Câu lệnh with sau cho thấy đối tượng Math đối tượng mặc

định Các câu lệnh theo sau câu lệnh with tham khảo tới thuộc tính PI phương thức cos sin mà không rõ đối tượng JavaScript thừa nhận đối tượng Math cho tham khảo

(20)

var r =10 with (Math) {

a = PI * r * r; x = r * cos (PI); y = r * sin (PI/2); }

8.4 Câu hỏi tập

1 Khi sử dụng vòng lặp, ta phải xác định số lần lặp cụ thể _ (Đúng/Sai)

2 Vòng lặp for thực lặp lặp lại khối lệnh điều kiện (true/false)

3 Câu lệnh for bao gồm thành phần, phân cách dấu

4 Một vịng lặp for phải có đầy đủ thành phần _(Đúng/Sai)

5 Trong vịng lặp for, ta 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 cách dùng toán tử _

6 Câu lệnh do…while lặp điều kiện cụ thể có giá trị false _ (Đúng/Sai)

7 Câu lệnh while dùng để thực khối câu lệnh chừng điều kiện _

8 Khác biệt vịng lặp while do…while vịng lặp khơng thực lần kiểm tra điều kiện trước

Bài tập thực hành chương 8:

Ngày đăng: 09/03/2021, 03:47

Tài liệu cùng người dùng

Tài liệu liên quan