Tài liệu trình bày về cấu trúc điều khiển, hàm và xử lý sự kiện trong lập trình, bao gồm các dạng lệnh lựa chọn từ đơn giản đến phức tạp, các loại lặp và cách khai báo biến cùng với phạm vi của chúng. Nó cũng đề cập đến sự kiện trong HTML và cách xử lý sự kiện thông qua các hàm, cũng như sử dụng các phương thức liên quan đến thời gian như setTimeout và setInterval. Cuối cùng, tài liệu cung cấp ví dụ và cú pháp cho từng khái niệm để minh họa cách áp dụng chúng trong thực tế.

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

2. 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
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

3. 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 (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

4. CẤU TRÚC
ĐIỀU KHIỂN
Biến và toán tử 4
CẤU TRÚC
ĐIỀU KHIỂN

5. 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
Lệnh lựa chọn
Cấu trúc điều khiển, hàm và xử lý sự kiện 5

6. Cú pháp
Ví dụ:
Lệnh lựa chọn kép
if (dieukien) {
//Thực hiện
}
else {
//Thực hiện
}
Cú pháp
Ví dụ:
Cấu trúc điều khiển, hàm và xử lý sự kiện 6
if (dieukien) {
//Thực hiện
}
else {
//Thực hiện
}
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)
}

7. Cú pháp
Lệnh đa lựa chọn
switch ( dieukien ) {
case giatri1:
//Thực hiện
break;
case giatri2:
//Thực hiện
break;
default:
//Thực hiện
}
Cấu trúc điều khiển, hàm và xử lý sự kiện 7
switch ( dieukien ) {
case giatri1:
//Thực hiện
break;
case giatri2:
//Thực hiện
break;
default:
//Thực hiện
}
…
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

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

9. 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.");
}
Cấu trúc điều khiển, hàm và xử lý sự kiện 9
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!

10. 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
Lệnh lặp
Cấu trúc điều khiển, hàm và xử lý sự kiện 10

11. Cú pháp
Giống lệnh Do While … Loop
Lỗi lặp vô hạn
Thay đổi giá trị điều kiện
Lệnh lặp While
while ( dieukien ) {
//Thực hiện
}
Cú pháp
Giống lệnh Do While … Loop
Lỗi lặp vô hạn
Thay đổi giá trị điều kiện
Cấu trúc điều khiển, hàm và xử lý sự kiện 11
var x = 0;
while ( x < 10) {
//Thực hiện
x++;
} Thay đổi giá
trị của x

12. Cú pháp
Giống lệnh Do … Loop While
Ví dụ
Lệnh lặp Do … While
do {
//Thực hiện
} while ( đieukien )
Cú pháp
Giống lệnh Do … Loop While
Ví dụ
Cấu trúc điều khiển, hàm và xử lý sự kiện 12
var dem = 0;
do {
document.write("dem den " + dem +"</br>");
dem++;
}while (dem < 5)

13. Cú pháp
Giống lệnh For… Next
Ví dụ
Lệnh lặp For
For ( khoitao; dieukien; buoctang) {
//Thực hiện
}
Cú pháp
Giống lệnh For… Next
Ví dụ
Cấu trúc điều khiển, hàm và xử lý sự kiện 13
for (var x = 0; x < 10; x++) {
document.write(x + "</br>")
}

14. 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] + "</br>");
}
Cấu trúc điều khiển, hàm và xử lý sự kiện 14

15. HÀM
Biến và toán tử 15
HÀM

16. 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)
Hàm trả về giá trị (giống thủ tục Function)
Hàm
function tenham (thamso1, thamso2, …, thamson) {
//Thực hiện
}
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)
Hàm trả về giá trị (giống thủ tục Function)
Cấu trúc điều khiển, hàm và xử lý sự kiện 16
function tenham (thamso1, thamso2, …, thamson) {
//Thực hiện
}
function tenham (thamso1, thamso2, …, thamson) {
//Thực hiện
return giatritrave;
}

17. Ví dụ định nghĩa và gọi hàm
Định nghĩa hàm
Gọi hàm
Chú ý: lời gọi hàm có thể ở một thẻ script khác với thẻ
script định nghĩa hàm
function myFunction (loichao1, loichao2 ) {
alert("Bien thu nhat la: " + loichao1);
alert("Bien thu hai la: " + loichao2);
}
Cấu trúc điều khiển, hàm và xử lý sự kiện 17
Định nghĩa hàm
Gọi hàm
Chú ý: lời gọi hàm có thể ở một thẻ script khác với thẻ
script định nghĩa hàm
myFunction ("Hi", "Hello")

18. Định nghĩa hàm
Gọi hàm
Ví dụ về hàm có giá trị trả về
function nhanHaiSo (x, y) {
return x*y
}
var tich = nhanHaiSo (3, 4)
alert ( tich)
Định nghĩa hàm
Gọi hàm
Cấu trúc điều khiển, hàm và xử lý sự kiện 18
function nhanHaiSo (x, y) {
return x*y
}
var tich = nhanHaiSo (3, 4)
alert ( tich)

19. 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
Hàm Confirm
Cấu trúc điều khiển, hàm và xử lý sự kiện 19
confirm("Ban chac chan muon xoa chu?")

20. 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;
}
Cấu trúc điều khiển, hàm và xử lý sự kiện 20
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);

21. 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
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

22. 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
<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>

23. 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
<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>

24. SỰ KIỆN
Biến và toán tử 24

25. 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ó
Cấu trúc điều khiển, hàm và xử lý sự kiện 25
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

26. Một số sự kiện
onClick
Được kích hoạt khi nhấn chuột vào một element
onLoad và on Unload
Được kích hoạt khi người dùng vào hoặc thoát khỏi trang
web
onFocus, onBlur, onChange
Được kích hoạt khi các trường nhận được focus, mất focus
hay được thay đổi giá trị
onMouseOver
Được kích hoạt khi người dùng di chuột lên một element
HTML trên form
onClick
Được kích hoạt khi nhấn chuột vào một element
onLoad và on Unload
Được kích hoạt khi người dùng vào hoặc thoát khỏi trang
web
onFocus, onBlur, onChange
Được kích hoạt khi các trường nhận được focus, mất focus
hay được thay đổi giá trị
onMouseOver
Được kích hoạt khi người dùng di chuột lên một element
HTML trên form
Cấu trúc điều khiển, hàm và xử lý sự kiện 26

27. Demo sự kiện Click cho element Body
<html >
<head>
</head>
<body onclick="alert('Hi')">
</body>
</html>
Cấu trúc điều khiển, hàm và xử lý sự kiện 27
<html >
<head>
</head>
<body onclick="alert('Hi')">
</body>
</html>
Chú ý: IE không hỗ trợ sự kiện onclick của element body

28. Demo sự kiện Click cho element Body
Có thể thêm nhiều dòng lệnh
<html >
<head>
</head>
<body onclick="alert('Hi'); alert('Hello');">
</body>
</html>
Cấu trúc điều khiển, hàm và xử lý sự kiện 28
<html >
<head>
</head>
<body onclick="alert('Hi'); alert('Hello');">
</body>
</html>
 Trong trường hợp xử lý phức tạp cho sự kiện????

29. Xử lý phức tạp cho sự kiện
Sử dụng hàm để thực hiện các xử lý cho sự kiện
<html >
<head>
<script type="text/javascript">
function hienThiLoiChao() {
alert("Hi");
alert("Hello");
}
</script>
</head>
<body>
<button type="button" onclick="hienThiLoiChao();">Hien thi loi chao</button>
</body>
</html>
Cấu trúc điều khiển, hàm và xử lý sự kiện 29
<html >
<head>
<script type="text/javascript">
function hienThiLoiChao() {
alert("Hi");
alert("Hello");
}
</script>
</head>
<body>
<button type="button" onclick="hienThiLoiChao();">Hien thi loi chao</button>
</body>
</html>
Sự kiện click được hỗ trợ trên cả IE và FireFox

30. Xử lý phức tạp cho sự kiện
Người dùng
nhấn vào Mũ
Người dùng
nhấn vào
Giầy
Cấu trúc điều khiển, hàm và xử lý sự kiện 30
Người dùng
nhấn vào
Giầy
Xem Tai nguyenXu ly su kien

31. Xử lý phức tạp cho sự kiện
<html ><head>
<script type="text/javascript">
function hienThiAnh(dovat) {
if (dovat == "mu") {
document.write("<img src = 'mu.jpg'>");
} else {
document.write("<img src = 'giay.jpg'>");
}
}
</script>
</head>
<body>
<p> Hãy chọn đồ vật mà bạn thích:</p>
<input type="button" value="Mũ" onclick="hienThiAnh('mu');"/>
<input type="button" value="Giầy" onclick="hienThiAnh('giay');"/>
</body>
</html>
Cấu trúc điều khiển, hàm và xử lý sự kiện 31
<html ><head>
<script type="text/javascript">
function hienThiAnh(dovat) {
if (dovat == "mu") {
document.write("<img src = 'mu.jpg'>");
} else {
document.write("<img src = 'giay.jpg'>");
}
}
</script>
</head>
<body>
<p> Hãy chọn đồ vật mà bạn thích:</p>
<input type="button" value="Mũ" onclick="hienThiAnh('mu');"/>
<input type="button" value="Giầy" onclick="hienThiAnh('giay');"/>
</body>
</html>

32. Timer
JavaScript cung cấp các phương thức để xử lý các sự
kiện thời gian
Các phương thức này thuộc đối tượng window
Một số phương thức quan trọng
Phương thức Giải thích
Lập trình hướng đối tượng và mô hình BOM 32
Phương thức Giải thích
setTimeout Thực hiện công việc sau một khoảng thời gian trong
tương lai
clearTimeout Hủy bỏ setTimeout trước đó
setInterval Thực hiện lặp lại công việc sau một khoảng thời gian
clearInterval Hủy bỏ setInterval

33. Timer
Cú pháp
Lệnh_javascirpt: Mã thực thi hoặc lời gọi hàm
mili_giây: Sau thời gian này mã sẽ được thực hiện
setTimeout() trả về giá trị, giá trị được lưu trong biến t.
Muốn muốn hủy bỏ setTimeout, sử dụng hàm
clearTimeout và truyền đối số t vào
Cú pháp tương tự đối với setInterval()
var t=setTimeout("Lệnh_javascript",số_mili _giây );
Cú pháp
Lệnh_javascirpt: Mã thực thi hoặc lời gọi hàm
mili_giây: Sau thời gian này mã sẽ được thực hiện
setTimeout() trả về giá trị, giá trị được lưu trong biến t.
Muốn muốn hủy bỏ setTimeout, sử dụng hàm
clearTimeout và truyền đối số t vào
Cú pháp tương tự đối với setInterval()
Lập trình hướng đối tượng và mô hình BOM 33

34. Demo setTimeout
<html>
<head></head>
<body id ="bd">
<input type="button" value = "Hãy nhấn vào đây"
onclick="onClickEvent();"/>
<script type="text/javascript">
function onClickEvent() {
var t = setTimeout("alert('Hi');", 1000);
}
</script>
</body>
</html>
Lập trình hướng đối tượng và mô hình BOM 34
<html>
<head></head>
<body id ="bd">
<input type="button" value = "Hãy nhấn vào đây"
onclick="onClickEvent();"/>
<script type="text/javascript">
function onClickEvent() {
var t = setTimeout("alert('Hi');", 1000);
}
</script>
</body>
</html>

35. Demo setInterval
<html>
<head></head>
<body id ="bd">
<input type="button" value = "Hãy nhấn vào đây"
onclick="onClickEvent();"/>
<script type="text/javascript">
function onClickEvent() {
var t = setInterval("alert('Hi');", 1000);
}
</script>
</body>
</html>
Lập trình hướng đối tượng và mô hình BOM 35
<html>
<head></head>
<body id ="bd">
<input type="button" value = "Hãy nhấn vào đây"
onclick="onClickEvent();"/>
<script type="text/javascript">
function onClickEvent() {
var t = setInterval("alert('Hi');", 1000);
}
</script>
</body>
</html>
So sánh sự khác nhau với ví dụ setTimeout

36. JavaScript cung cấp 3 cấu trúc điều khiển: Cấu trúc tuần
tự, cấu trúc lựa chọn và cấu trúc lặp
Cấu trúc lặp gồm lệnh lựa chọn đơn (if), lệnh lựa chọn
kép (if…else), lệnh đa lựa chọn (switch)
Cấu trúc lặp gồm các lệnh lặp không biến số lần lặp
(while, do…while) và lặp biết số lần lặp (for)
Hàm thực hiện một chức năng cụ thể. Hàm có thể trả về
giá trị hoặc không
Biến có phạm vi cục bộ và toàn cục
Tổng kết bài học
JavaScript cung cấp 3 cấu trúc điều khiển: Cấu trúc tuần
tự, cấu trúc lựa chọn và cấu trúc lặp
Cấu trúc lặp gồm lệnh lựa chọn đơn (if), lệnh lựa chọn
kép (if…else), lệnh đa lựa chọn (switch)
Cấu trúc lặp gồm các lệnh lặp không biến số lần lặp
(while, do…while) và lặp biết số lần lặp (for)
Hàm thực hiện một chức năng cụ thể. Hàm có thể trả về
giá trị hoặc không
Biến có phạm vi cục bộ và toàn cục
Cấu trúc điều khiển, hàm và xử lý sự kiện 36

37. Hàm Confirm là hàm được xây dựng sẵn dùng để lấy
thông tin hồi đáp từ người dùng
JavaScript cung cấp sự kiện cho các element của trang
web. Mỗi element có một tập các sự kiện khác nhau
Javascript cũng cung cấp các phương thức để xử lý các
sự kiện thời gian
Tổng kết bài học
Hàm Confirm là hàm được xây dựng sẵn dùng để lấy
thông tin hồi đáp từ người dùng
JavaScript cung cấp sự kiện cho các element của trang
web. Mỗi element có một tập các sự kiện khác nhau
Javascript cũng cung cấp các phương thức để xử lý các
sự kiện thời gian
Cấu trúc điều khiển, hàm và xử lý sự kiện 37