JavaScript Functions - Các hàm trong JavaScript

by GokiSoft.Com - 09:42 20/05/2020 3,364 Lượt Xem

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

Tạ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.

Ứng Dụng Học

Theo dõi cập nhật nội dung học trên Youtube & Facebook

Thông Tin Liên Hệ

Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.

Website: https://gozic.vn

SĐT: 096 - 70 25 996

Email: ziczacgroup@gmail.com

Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website

Tags:

javascript khoa hoc javascript khóa học javascript tài liệu javascript

Bình luận

Tôi muốn xem code từ thành viên khác

Tài Liệu Tham Khảo

Ứng Dụng Tiện Ích

MD5 Chuyển Đổi Chữ Hoa - UpperCase JSON Editor Coding Online Database Diagram Fake API Base64

Tài Liệu Học

Khai báo biến & hàm mặc định trong Javascript

Mệnh đề điều kiện

Vòng lặp for, while, do..while

Array & Function & Object

Xử lý sự kiện & thao tác thẻ HTML

Lưu trữ Javascript

Examination & Ôn Tập Tổng Quát