JavaScript Functions - Các hàm trong JavaScript
Một hàm JavaScript là một khối code thiết kế để thực hiện một nghiệm vụ cụ thể.
Một hàm JavaScript được thực thi khi "cái gì đó" dẫn đến nó (gọi đến nó).
ví dụ
function myFunction(p1, p2) {
return p1 * p2; // The function returns the product of p1 and p2
}<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Các cú pháp của hàm trong JavaScript(JavaScript Function Syntax)
Một hàm của JavaScript được xác định với từ khóa function , theo sau là một cái tên, tiếp đến là hai dấu ngoặc đơn ().
Các tên của hàm chứa các chữ cái, các kí tự, các dấu gạch dưới, và các dấu đô la(giống với quy tắc đặt tên các biến).
Dấu ngoặc đơn có thể bao gồm các tên tham số được ngăn cách bởi các dấu phẩy:
(thamso1,thamso2,...)
Code được thực thi của hàm đó được đặt trong dấu ngoặc nhọn: {}
function name(parameter1, parameter2, parameter3) {
// code to be executed
}Các tham số của hàm được liệt kê giữa các dấu ngoặc đơn () lúc khai báo hàm.
Các đối số của hàm là các giá trị hàm đó được nhận khi nó được gọi đến.
Bên trong hàm, các đối số(tham số) sử dụng như các biến địa phương.
Tip: Một hàm rất giống với một phương thức thủ tục(Procedure) hay một chương trình con(Subrountine), trong các ngôn ngữ lập trình khác.
Gọi hàm(Function Invocation)
Code bên trong một hàm sẽ được sẽ được thực thi khi "cái gì đó" viện dẫn (gọi) hàm:
- Khi một sự kiện diễn ra (khi một người dung bấm một nút)
- Khi nó được viện dẫn(gọi) từ JavaScript code.
- Tự động (tự gọi chính nó).
Bạn sẽ được học thêm rất nhiều về gọi hàm sau trong hướng dẫn này.
Kết quả trả về của hàm(Function Return)
Khi JavaScript chạy đến một câu lệnh return , hàm sẽ dừng việc thực thi.
Nếu hàm được gọi từ một câu lệnh, JavaScript sẽ "return" để thực thi các dòng code phía sau câu lệnh gọi.
Các hàm thường tính toán một giá trị trả về. Giá trị trả về "được trả về" cho "người gọi":
ví dụ
Tính toán kết quả của hai số, và trả về kết quả:
var x = myFunction(4, 3); // Function is called, return value will end up in x
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function which performs a calculation and returns the result:</p>
<p id="demo"></p>
<script>
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Kết quả của x sẽ là:
12Tại sao có các hàm?
Bạn có thể sử dụng lại code: Định nghĩa code một lần, và dùng nó nhiều lần.
Bạn có thể sử dung một đoạn code nhiều lần với các đối số khác nhau, để cung cấp các kết quả khác nhau.
ví dụ
Chuyển đổi độ F sang độ C:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
</script>
</body>
</html>
Toán tử () gọi đến hàm
Sử dụng ví dụ trên, toCelsius đề cập đến đối tượng của hàm, và toCelsius() đề cập đến kết quả của hàm.
Truy cập một hàm không có () sẽ trả về một đối tượng của hàm thay vì một kết quả của hàm.
ví dụ
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Accessing a function without () will return the function definition instead of the function result:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius;
</script>
</body>
</html>
Hàm được sử dụng như các giá trị biến
Hàm có thể sử dụng giống với cách mà bạn dùng các biến, trong tất cả các loại công thức, tính chất gán, và sự tính toán.
ví dụ
Thay vì sử dụng một biến để chứa kết quả trả về của một hàm:
var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";Bạn có thể sử dụng hàm trực tiếp, như một giá trị biến:
var text = "The temperature is " + toCelsius(77) + " Celsius";<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"The temperature is " + toCelsius(77) + " Celsius";
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
</script>
</body>
</html>
Tip: Bạn sẽ được học thêm rất nhiều về các hàm sau trong hướng dẫn này.
Các biến địa phương(Local Variables)
Các biến được khai báo trong một hàm JavaScript, trở thành một biến ĐỊA PHƯƠNG trong hàm.
Các biến địa phương chỉ có thể được truy cập bên trong hàm.
ví dụ
// code here can NOT use carName
function myFunction() {
var carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carName<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Outside myFunction() carName is undefined.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
var carName = "Volvo";
document.getElementById("demo1").innerHTML =
typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML =
typeof carName;
</script>
</body>
</html>
Từ khi các biến địa phương chỉ được nhận ra ở bên trong chính hàm của nó, các biến với cùng một tên có thể sử dụng trong các hàm khác nhau.
Các biến địa phương được tạo ra khi hàm bắt đầu, và được xóa khi hàm đã được hoàn tất.
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
