Tự học JavaScript (Phần 9) - Function

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.

Bài cùng chuyên mục

Phản hồi mới nhất
Video
Top Rate
Xem nhiều nhất

Chủ đề đang thảo luận trong diễn đàn

Xem tiếp