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

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

Biến và kiểu biếnÉp kiểuKhai báo biếnToán tửCấu trúc điều khiểnLệnh lựa chọn đơn

Hệ thống bài cũ

Biến và kiểu biếnÉp kiểuKhai báo biếnToán tửCấu trúc điều khiểnLệ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épLệnh đa lựa chọn

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

HàmPhạm vi biếnMảngXử 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épLệnh đa lựa chọn

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

HàmPhạm vi biếnMảngXử lý sự kiện


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

Biến và toán tử 4

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

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

Lệnh lựa chọn


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


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

Cú pháp

Lệnh đa lựa chọn

switch ( dieukien ) {case giatri1:

//Thực hiệnbreak;

case giatri2://Thực hiệnbreak;

default://Thực hiện

}


switch ( dieukien ) {case giatri1:

//Thực hiệnbreak;

case giatri2://Thực hiệnbreak;

default://Thực hiện

}…

Sử dụng break để thoát khỏi lệnh switch. Nếu không sẽ chuyểnxuống thực hiện lệnh trong mệnh đề case tiếp theo

Ví dụ lệnh đa lựa chọnvar 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.");

}

Ví dụ lệnh đa lựa chọnvar 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.");}


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ậpvào giá trị Tuyet voi!

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

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

Lệnh lặp


Cú phápGiống lệnh Do While … Loop

Lỗi lặp vô hạnThay đổi giá trị điều kiện

Lệnh lặp While

while ( dieukien ) {//Thực hiện

}

Cú phápGiống lệnh Do While … Loop

Lỗi lặp vô hạnThay đổi giá trị điều kiện


var x = 0;while ( x < 10) {

//Thực hiệnx++;

} Thay đổi giátrị của x

Cú phápGiống lệnh Do … Loop While

Ví dụ

Lệnh lặp Do … While

do {//Thực hiện

} while ( đieukien )

Cú phápGiống lệnh Do … Loop While

Ví dụ


var dem = 0;do {

document.write("dem den " + dem +"</br>");dem++;

}while (dem < 5)

Cú phápGiống lệnh For… Next

Ví dụ

Lệnh lặp For

For ( khoitao; dieukien; buoctang) {//Thực hiện

}

Cú phápGiống lệnh For… Next

Ví dụ


for (var x = 0; x < 10; x++) {document.write(x + "</br>")

}

Dùng lệnh Forduyệ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>");

}


HÀM


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)

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)


function tenham (thamso1, thamso2, …, thamson) {//Thực hiện

}

function tenham (thamso1, thamso2, …, thamson) {//Thực hiệnreturn giatritrave;

}

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

}


Đị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")

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


function nhanHaiSo (x, y) {return x*y

}

var tich = nhanHaiSo (3, 4)alert ( tich)

Là hộp thoại để nhập hồi đáp từ phía người dùngLờ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 OKTrả về False nếu người dùng nhấn vào Cancel

Hàm Confirm


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

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;

}


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

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

Biến toàn cụcBiến được khai báo ngoài hàmCó 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àmChỉ được tham chiếu đến trong phạm vi khai báo

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


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>


<html><head>


var x = "toi la bien toan cuc.";</script>

</head><body><script type="text/javascript">


Phạm vi biến<html><head>


function() {var x = "toi la bien cuc bo.";

}

</script></head><body><script type="text/javascript">



<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">


SỰ KIỆN


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

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 trangweb

onFocus, onBlur, onChangeĐược kích hoạt khi các trường nhận được focus, mất focushay được thay đổi giá trị

onMouseOverĐược kích hoạt khi người dùng di chuột lên một elementHTML 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 trangweb

onFocus, onBlur, onChangeĐược kích hoạt khi các trường nhận được focus, mất focushay được thay đổi giá trị

onMouseOverĐược kích hoạt khi người dùng di chuột lên một elementHTML trên form


Demo sự kiện Click cho element Body

<html ><head></head><body onclick="alert('Hi')"></body></html>


<html ><head></head><body onclick="alert('Hi')"></body></html>

Chú ý: IE không hỗ trợ sự kiện onclick của element body

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>


<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????

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>


<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


Người dùngnhấn vào Mũ

Người dùngnhấn vào

Giầy


Người dùngnhấn vào

Giầy

Xem Tai nguyen\Xu ly su kien

Timer

JavaScript cung cấp các phương thức để xử lý các sựkiện thời gianCác phương thức này thuộc đối tượng windowMộ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 trongtươ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

Timer

Cú pháp

Lệnh_javascirpt: Mã thực thi hoặc lời gọi hàmmili_giây: Sau thời gian này mã sẽ được thực hiệnsetTimeout() 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àmclearTimeout và truyền đối số t vàoCú 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àmmili_giây: Sau thời gian này mã sẽ được thực hiệnsetTimeout() 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àmclearTimeout và truyền đối số t vàoCú pháp tương tự đối với setInterval()


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>



function onClickEvent() {var t = setTimeout("alert('Hi');", 1000);


Demo setInterval


function onClickEvent() {var t = setInterval("alert('Hi');", 1000);




function onClickEvent() {var t = setInterval("alert('Hi');", 1000);


So sánh sự khác nhau với ví dụ setTimeout

JavaScript cung cấp 3 cấu trúc điều khiển: Cấu trúc tuầntự, cấu trúc lựa chọn và cấu trúc lặpCấu trúc lặp gồm lệnh lựa chọn đơn (if), lệnh lựa chọnké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ôngBiế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ầntự, cấu trúc lựa chọn và cấu trúc lặpCấu trúc lặp gồm lệnh lựa chọn đơn (if), lệnh lựa chọnké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ôngBiến có phạm vi cục bộ và toàn cục


Hàm Confirm là hàm được xây dựng sẵn dùng để lấythông tin hồi đáp từ người dùngJavaScript cung cấp sự kiện cho các element của trangweb. Mỗi element có một tập các sự kiện khác nhauJavascript cũng cung cấp các phương thức để xử lý cácsự 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ấythông tin hồi đáp từ người dùngJavaScript cung cấp sự kiện cho các element của trangweb. Mỗi element có một tập các sự kiện khác nhauJavascript cũng cung cấp các phương thức để xử lý cácsự kiện thời gian


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

Documents

Transcript of Bài 3: Cấu trúc điều khiển, hàm và xử lý sự kiện - Giáo trình FPT