IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

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

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

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

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

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

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

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

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

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

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS JavaScript Functions - Các hàm trong JavaScript

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

12



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.





Bình luận



Tài Liệu Tham Khảo

Đã sao chép!!!