Function là một chức năng mà thông thường chúng ta gọi làm
hàm. Trong JavaScript hàm thường được gọi thông qua một sự kiện hoặc hàm nào
đó.
Để trình duyệt kết hợp với JavaScript một cách linh
động chúng ta có thể đưa các đoạn mã JavaScript mà một hàm và khi cần dùng đến
chức năng mà hàm cung cấp chúng ta chỉ cần gọi hàm ra sử dụng.
Khi sử dụng hàm chúng ta có nhiều lợi ích như không
phải viết lại các đoạn mã giống nhau, có thể gọi hàm ở bất kỳ nơi đâu trên
trang HTML mà chúng ta muốn và cũng có thể gọi hàm trên các trang HTML khác nếu
chúng ta đưa hàm này vào tập tin .js
Hàm có thể để ở nhiều nơi trong trang HTML: trong cặp
thẻ <head>, trong cặp thẻ <body>, trong tập tin .js, hoặc sau thẻ
</html> ở cuối trang HTML.
Cú pháp:
function
function_name(var1,var2,...,varX)
{
//Code goes here
}
var1, var2 … varX: được gọi là các tham số của
hàm. Hàm có thể có nhiều tham số hoặc không có tham sao nào cả.
Chú ý: cách đặt tên hàm tương tự như cách đặt
tên biến. Hoặc chúng ta dùng dấu gạch dưới ( _ ) trong hàm có tên là một cụm
từ.
a. Hàm không có tham số
Ví dụ:
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>JavaScript
training </title>
<script
type="text/javascript">
function show_alert()
{
alert("Đây là hộp thoại hiển thị
cảnh báo!");
}
</script>
</head>
<body>
<input
type="button" onclick="show_alert()" value="Hiện Alert
Box" />
</body>
</html>
b. Hàm có tham số
Ví dụ:
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>JavaScript
training </title>
<script
type="text/javascript">
function show_alert(text)
{
alert(text);
}
</script>
</head>
<body>
<input type="button"
onclick="show_alert('Hay nhap vao nhung gi ban muon')"
value="Hiện Alert Box" />
</body>
</html>
c. Giá trị trả về sau khi thực hiện hàm (lệnh return)
Thông thường hàm sử dụng để xử lý một chức năng nào đó và
sau khi xử lý xong thường phải trả về các giá trị. Để trả về một giá trị nào đó
sau khi xử lý chúng ta dùng lệnh return.
Ví dụ:
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>JavaScript
training </title>
</head>
<body>
<script
type="text/javascript">
function phepCong(a,b)
{
var tongGiaTri;
tongGiaTri = a + b;
return tongGiaTri;
}
var phepToan;
phepToan = phepCong(10,7);
document.write(phepToan);
</script>
</body>
</html>
d. Gọi hàm trong một hàm khác
Chúng ta có thể xây dựng nhiều hàm xử lý và chúng ta
có thể sử dụng hàm xử lý này trong một hàm xử lý khác.
Ví dụ:
<script
type="text/javascript">
function
xuLyPhepToan(val_1,val_2,operator){
var phepToan;
if(operator == "cong"){
phepToan = phepCong(val_1,val_2);
}
if(operator == "tru"){
phepToan =
phepTru(val_1,val_2);
}
return phepToan;
}
function phepCong(a,b)
{
var tongGiaTri;
tongGiaTri = a + b;
return tongGiaTri;
}
function phepTru(a,b)
{
var tongGiaTri;
tongGiaTri = a - b;
return tongGiaTri;
}
var phepToan;
phepToan =
xuLyPhepToan(10,7,"tru");
document.write(phepToan);
</script>
Chú ý: Biến trong các một hàm bất kỳ chỉ có
tác dụng trong hàm đó chứ không hề ảnh hưởng đến các hàm khác cho dù tên biến
giống nhau.
Posted in: Chuyên đề JavaScript cơ bản
