LAB 6: JAVASCRIPT
FUNCTION (HÀM) TRONG JAVASCRIPT
A – LÝ THUYẾT
I – FUNCTION (HÀM) DO
NGƯỜI DÙNG TỰ ĐỊNH NGHĨA
1 – Khái niệm Function
Function hay còn được gọi
là hàm dùng để đóng gói một nhóm mã có chức năng nhất định.
2 – Tự định nghĩa một hàm
Cú pháp:
function ten_ham(){
/* Thực
thi hàm */
}
Chú ý: Cách đặt tên cho hàm tương tự như cách đặt tên
cho biến
3 – Hàm tự định nghĩa không có tham số
Cú pháp:
function ten_ham(){
/*
Thực thi hàm */
}
4 – Hàm tự định nghĩa có tham số truyền vào
Cú pháp:
function ten_ham(gia_tri_1, gia_tri_2,.. ,gia_tri_n){
/*
Thực thi hàm */
}
5 – Hàm tự định nghĩa có giá trị trả về
Cú pháp:
function ten_ham(){
/*
Thực thi hàm */
return
ket_qua;
}
6 – Biến toàn cục và biến cục bộ đới với Hàm
Biến cục bộ là biến được khai
báo bên trong hàm và chỉ có tác dụng trong phạm vi của hàm đó.
Biến toàn cục là biến được
khai báo bên ngoài hàm và có tác dụng trong cả trong lẫn ngoài hàm hay nói cách
khác là có tác dụng trong toàn bộ file hiện hành
II – MỘT SỐ HÀM HỖ TRỢ
TRONG JAVASCRIPT
1 – Hàm Number()
Hàm Number()
chuyển đổi một "đối tượng" sang dạng số. Nếu thất bại trả về NaN (not
a number)
Cú pháp:
number(gia_tri_truyen_vao);
2 – Hàm isNaN
Hàm isNaN() kiểm
tra giá trị. Nếu không phải số trả về true, ngược lại nếu là số trả về false
Cú pháp:
isNaN (gia_tri_truyen_vao);
3 – Hàm eval()
Hàm eval() biến
chuỗi thành biểu thức tính toán được, hoặc biến chuỗi thành lệnh thi hành được
như là mã lệnh của JS.
Cú pháp:
eval (chuoi_truyen_vao);
4 – Hàm setTimeout()
Hàm setTimeout() có
tác dụng gọi một hàm sau thời gian định trước, và chỉ thực thi một lần duy nhất.
Cú pháp:
setTimeout(“ham_truyen_vao”,
thoi_gian_thuc_thi);
Chú ý: Thời gian truyền vào được tính theo
ms (mily giây)
5 – Hàm setInterval()
Hàm setInterval() có
tác dụng gọi một hàm sau những khoảng thời gian được định trước, được thực thi
trong suốt quá trình chạy file hiện hành.
Cú pháp:
setInterval(“ham_truyen_vao”,
thoi_gian_thuc_thi);
Chú ý: Thời gian truyền vào được tính theo
ms (mily giây)
III – MỘT SỐ HÀM HỖ TRỢ ĐỐI TƯỢNG TOÁN HỌC (MATH)
1 – Bảng các phương thức (hàm) thông dụng
trong đối tượng Math
|
Stt |
Phương thức |
Chức năng |
Ví dụ |
|
1 |
Math.round(x) |
Làm tròn lên |
Math.round(5.2)
= 6 |
|
2 |
Math.floor(x) |
Làm tròn xuống |
Math.round(4.5)
= 4 |
|
3 |
Math.random() |
Lấy một số ngẫu nhiên 0 < x < 1 |
Math.random()
= 0.73… |
|
4 |
Math.max(x,y,z,...,n) |
Lấy số có giá trị lớn nhất trong chuỗi số |
Math.max(1,5,7,3) = 7 |
|
5 |
Math.min(x,y,z,...,n) |
Lấy số có giá trị nhỏ nhất
trong chuỗi số |
Math.max(1,5,7,3) = 1 |
|
6 |
Math.abs(x) |
Trả về giá trị số dương |
Math.abs(-9.5)
= 9.5 |
|
7 |
Math.PI |
Hằng số PI |
Math.PI = 3.14 |
|
8 |
Math.sqrt(x) |
Lấy căn bậc hai của một số |
Math.sqrt(9) = 3 |
B – THỰC HÀNH
I – BÀI TẬP THỰC HÀNH
Bài 1:
Xây dựng chương trình máy tính
theo hướng Function như bai_tap_1.html
Bài 2:
Xây dựng chương trình quảng
cáo tự động với thời gian xuất hiện quảng cáo do người dùng nhập vào. Chạy ứng
dụng bằng cách mở file bai_tap_2.html để việc xây dựng được chính xác nhất
II – BÀI TẬP VỀ NHÀ
Bài 3:
Xây dựng chương trình tạo số
ngẫu nhiên với số chữ số do người dùng nhập vào, chương trình cho phép chạy
tuần hoàn 5s sau mỗi lần thực hiện tạo xong 1 số ngẫu nhiên. Chạy chương trình
bằng cách mở file bai_tap_3.html để việc xây dựng được chính xác nhất
Bài 4:
Xây dựng ứng dụng cho phép mỗi
lần tải trang web lên thì hiển thị một bức ảnh ngẫu nhiên. Để việc xây dựng
được chính xác so với yêu cầu thiết kế, hãy mở file bai_tap_4.html và F5
(Refresh) trang liên tục để chạy ứng dụng
Chú ý: Tất cả các bài toán trên đều phải được giải quyết theo hướng Function
Đáp án:
Bài 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bài 1</title>
</head>
<body>
<script language="javascript">
function mayTinh(a, phepToan, b){
if(phepToan == "+"){
var tong = (a+b);
alert("Tổng của "+a+" và"+b+" bằng "+tong);
}
else if(phepToan == "-"){
var hieu = (a-b);
alert("Hiệu của "+a+" và"+b+" bằng "+hieu);
}
else if(phepToan == "x"){
var tich = (a*b);
alert("Tích của "+a+" và"+b+" bằng "+tich);
}
else if(phepToan == ":"){
var thuong = (a/b);
alert("Thương của "+a+" và"+b+" bằng "+thuong);
}
else if(phepToan == "%"){
var phanTram = (a%b);
alert("Phần trăm của "+a+" và"+b+" dư "+phanTram);
}
else{
alert("Bạn vừa nhập một phép toán không hợp lệ!");
}
}
var a = prompt("Bạn hãy nhập số thứ nhất");
a = parseFloat(a);
var phepToan = prompt("Sử dụng 1 trong 5 phép toán sau đây: '+, -, x, :, %'");
var b = prompt("Bạn hãy nhập số thứ hai");
b = parseFloat(b);
mayTinh(a, phepToan, b);
</script>
</body>
</html>
Bài 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bài 2</title>
</head>
<body>
<script language="javascript">
function thongBao(timeS){
timeMs = timeS*1000;
alert("Trung Tâm Đào Tạo Lập Trình - Thiết Kế - Đồ Họa Website VietPro!");
//document.write("Sau khoảng thời gian "+timeS+"s thì quảng cáo sẽ tiếp tục xuất hiện...");
setTimeout("thongBao(timeS)", timeMs);
}
alert("Đây là chương trình quảng cáo tự động");
var timeS = prompt("Bạn hãy nhập vào khoảng thời gian được tính theo S(giây) mà bạn muốn xuất hiện mẩu tin Quảng cáo");
timeS = parseInt(timeS);
thongBao(timeS);
</script>
</body>
</html>
Bài 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bài 3</title>
</head>
<body>
<script language="javascript">
function randNum(){
alert("Đây là chương trình tạo số ngẫu nhiên với số chữ số do người dùng nhập vào");
var num = prompt("Bạn muốn khởi tạo một số ngẫu nhiên có mấy chữ số");
num = parseInt(num);
if(num == 0){
alert("Không tồn tại một số nguyên nào có không chữ số");
}
else if(isNaN(num) == true){
alert("Bạn vui lòng nhập vào một số nguyên dương khác 0");
}
else{
var randomNum = Math.random();
var result = randomNum*Math.pow(10, num);
result = Math.round(result);
alert("Bạn vừa khởi tạo một số ngẫu nhiên sau: "+result);
}
alert("Chương trình sẽ tiếp tục cho phép bạn khởi tạo các số ngẫy nhiên tiếp theo sau 5s...");
setTimeout("randNum()", 5000);
}
randNum();
</script>
</body>
</html>
Bài 4:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bài 4</title>
</head>
<body>
<script language="javascript">
function randImg(){
var randNum = Math.random();
var imgNum = randNum*10;
imgNum = Math.round(imgNum);
if(imgNum == 0){
imgNum = 1;
}
document.write("<img border=5 src='images/hotgirl"+imgNum+".jpg'>");
}
randImg();
</script>
</body>
</html>
>>Xem bài trước: Bài 18 mảng trong javascript
>>Xem bài tiếp theo: Bài 20 sự kiện trong javascript
No comments:
Post a Comment