Bài giảng Bài 3: Cấu trúc điều khiển, hàm và xử lý sự kiện - ĐH FPT

Bài 3:
Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n


Hệ thố ng bài cũ
Biế n và kiể u biế n
Ép kiể u
Khai báo biế n
Toán tử
Cấ u trúc điề u khiể n
Lệ nh lự a chọ n đơ n

Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

2


Mụ c tiêu bài họ c
Cấ u trúc điề u khiể n (tiế p)
Cấ u trúc lự a chọ n
Lệ nh lự a chọ n kép
Lệ nh đa lự a chọ n

Cấ u trúc lặ p
Lặ p không biế t trư ớ c số lầ n lặ p
Lặ p biế t trư ớ c số lầ n lặ p

Hàm
Phạ m vi biế n
Mả ng
Xử lý sự kiệ n

Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

3


CẤ U TRÚC
ĐI Ề U KHI Ể N

Biế n và toán tử

4


Lệ nh lự a chọ n
Lệ nh lự a chọ n đơ n (Bài 2)
Lệ nh lự a chọ n kép
Lệ nh đa lự a chọ n

Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

5


Lệ nh lự a chọ n kép
Cú pháp

if (dieukien) {
//Thự c hiệ n
}
else {

//Thự c hiệ n
}

Ví dụ :
var x = prompt("Hay nhap vao so be hon 100:");
if ( x > 50) {
alert("Ban vua nhap gia tri la: " + x + ", gia tri nay lon hon 50");
}
else{
alert("Ban vua nhap gia tri la: " + x)
}
Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

6


Lệ nh đa lự a chọ n
Cú pháp

switch ( dieukien ) {
case giatri1:
//Th
//Thự c hi
hiệ n
break;
case giatri2:
//Thự c hiệ n
break;
default:
//Thự

hiệ n
//Th c hi
}

Sử dụ ng break để thoát khỏ i lệ nh switch. Nế u không sẽ chuyể n
xuố ng thự c hiệ n lệ nh trong mệ nh đề case tiế p theo
Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

7


Ví dụ lệ nh đa lự a chọ n
var diem = prompt("Hay nhap diem:")
switch ( diem ) {
case "A":
alert("Tuyet voi!");
break;
case "B":
case "C":
alert("Kha.");
break;
case "D":
case "E":
case "F":
alert("Ban can co gang hon.");
break;
default:
alert("Gia tri ban nhap vao khong hop le.");
Cấ u trúc
} điề u khiể n, hàm và xử lý sự kiệ n

8


Ví dụ lệ nh đa lự a chọ n
var diem = prompt("Hay nhap diem:")
switch ( diem ) {
case "A":
alert("Tuyet voi!");
case "B":
case "C":
alert("Kha.");
case "D":
case "E":
case "F":
alert("Ban can co gang hon.");
default:
alert("Gia tri ban nhap vao khong hop le.");
}
Hãy cho biế t kế t quả củ a đoạ n mã trên nế u ngư ờ i dùng nhậ p
vào giá trị Tuyet voi!
Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

9


Lệ nh lặ p
Lệ nh lặ p không biế t trư ớ c số lầ n lặ p
While
Do … While

Lệ nh lặ p biế t trư ớ c số lầ n lặ p
For

Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

10


Lệ nh lặ p While
Cú pháp
Giố ng lệ nh Do While … Loop

while ( dieukien ) {
//Thự c hiệ n
}
Lỗ i lặ p vô hạ n
Thay đổ i giá trị điề u kiệ n

var x = 0;
while ( x < 10) {
//Thự c hiệ n
x++;
}
Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

Thay ổ i giá
trị củ a x
11

Lệ nh lặ p Do … While
Cú pháp
Giố ng lệ nh Do … Loop While

do {
//Thự c hiệ n
} while ( đieukien )
Ví dụ

var dem = 0;
do {
document.write("dem den " + dem +"
");
dem++;
}while (dem < 5)
Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

12


Lệ nh lặ p For
Cú pháp
Giố ng lệ nh For… Next

For ( khoitao; dieukien; buoctang) {
//Thự c hiệ n
}
Ví dụ

for (var x = 0; x < 10; x++) {

document.write(x + "
")
}

Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

13


Dùng lệ nh For
duyệ t qua các phầ n tử củ a mả ng
var convat = new Array("meo", "ho", "voi");
for (var i = 0; i < convat.length; i++) {
document.write(convat[i] + "
");
}

Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

14


HÀM

Biế n và toán tử

15


Hàm
Hàm để thự c hiệ n mộ t chứ c năng cụ thể (Giố ng thủ
tụ c trong VB)

Cú pháp
Hàm không trả về giá trị (giố ng thủ tụ c Sub)
function tenham (thamso1, thamso2, …, thamson) {
//Thự c hiệ n
}

Hàm trả về giá trị (giố ng thủ tụ c Function)
function tenham (thamso1, thamso2, …, thamson) {
//Thự c hiệ n
return giatritrave;
}

Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

16


Ví dụ đị nh nghĩa và gọ i hàm
Đị nh nghĩa h àm
function myFunction (loichao1, loichao2 ) {
alert("Bien thu nhat la: " + loichao1);
alert("Bien thu hai la: " + loichao2);
}
Gọ i hàm
myFunction ("Hi", "Hello")
Chú ý: lờ i gọ i hàm có thể ở mộ t thẻ script khác vớ i thẻ
script đị nh nghĩa hàm

Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

17


Ví dụ về hàm có giá trị trả về
Đị nh nghĩa h àm
function nhanHaiSo (x, y) {
return x*y
}
Gọ i hàm
var tich = nhanHaiSo (3, 4)
alert ( tich)

Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

18


Hàm Confirm
Là hộ p thoạ i để nhậ p hồ i đáp từ phía ngư ờ i dùng
Lờ i gọ i hàm: Confirm( thông_diệ p )
Hàm trả về hồ i đáp củ a ngư ờ i dùng
Trả về True nế u ngư ờ i dùng nhấ n vào OK
Trả về False nế u ngư ờ i dùng nhấ n vào Cancel

confirm("Ban chac chan muon xoa chu?")

Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

19

Ví dụ về hàm Confirm
function xacNhan(traloi) {
var ketQua = "";
if (traloi) {
ketQua = "Tuyet voi. Chuc ban chien thang!";
} else {
ketQua = "Hen gap lai ban nhe!";
}
return ketQua;
}
var traloi = confirm("Ban se choi game chu?");
var thongbao = xacNhan(traloi);
alert (thongbao);
Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

20


Phạ m vi biế n
Biế n cụ c bộ
Biế n đư ợ c khai báo trong hàm
Chỉ đư ợ c tham chiế u đế n trong phạ m vi khai báo

Biế n toàn cụ c
Biế n đư ợ c khai báo ngoài hàm
Có thể tham chiế u đế n từ bấ t cứ đâu

Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

21


Phạ m vi biế n
<html>
<head>
<title>Scoping Example</title>
<script type="text/javascript">
var x = "toi la bien toan cuc.";
</script>
</head>
<body>
<script type="text/javascript">
alert(x);
</script>
</body>
</html>
Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

22


Phạ m vi biế n
<html><head>
<title>Scoping Example</title>
<script type="text/javascript">
function() {
var x = "toi la bien cuc bo.";
}
</script>

</head>
<body>
<script type="text/javascript">
alert(x);
</script>
</body></html>
Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

23


SỰ

Biế n và toán tử

KI Ệ N

24


Xử

lý sự

kiệ n

Tấ t cả các element trên trang web đề u có mộ t tậ p các sự
kiệ n tư ơ ng ứ ng vớ i nó

Chú ý: Đố i vớ i cùng mộ t element sẽ đư ợ c các browser khác nhau hỗ trợ

các tậ p sự kiệ n khác nhau
Cấ u trúc điề u khiể n, hàm và xử lý sự kiệ n

25