Home Tutorial Javascript Javascript – Bài 10: hàm(function)

Javascript – Bài 10: hàm(function)

12 min read
0
207

Function là một nhóm mã có thể tái sử dụng có thể được gọi ở bất kỳ đâu trong chương trình của bạn. Điều này giúp loại bỏ nhu cầu viết đi viết lại cùng một mã. Nó giúp các lập trình viên viết mã mô-đun. Các hàm cho phép lập trình viên chia một chương trình lớn thành một số hàm nhỏ và có thể quản lý được.

Giống như bất kỳ ngôn ngữ lập trình nâng cao nào khác, JavaScript cũng hỗ trợ tất cả các tính năng cần thiết để viết mã mô-đun bằng các hàm. Chắc hẳn bạn đã thấy các hàm như alert() và write() trong các chương trước. Chúng tôi đã sử dụng đi sử dụng lại các chức năng này, nhưng chúng chỉ được viết bằng JavaScript lõi một lần.

JavaScript cũng cho phép chúng ta viết các hàm của riêng mình. Phần này giải thích cách viết các hàm của riêng bạn trong JavaScript.

Định nghĩa hàm

Trước khi sử dụng một hàm, chúng ta cần định nghĩa nó. Cách phổ biến nhất để xác định hàm trong JavaScript là sử dụng từ khóa function , theo sau là tên hàm duy nhất, danh sách tham số (có thể trống) và khối câu lệnh được bao quanh bởi dấu ngoặc nhọn.

cú pháp

Cú pháp cơ bản được hiển thị ở đây.

<script type = "text/javascript">
   <!--
      function functionname(parameter-list) {
         statements
      }
   //-->
</script>

Ví dụ

Hãy thử ví dụ sau. Nó định nghĩa một hàm gọi là sayHello không có tham số nào –

<script type = "text/javascript">
   <!--
      function sayHello() {
         alert("Hello there");
      }
   //-->
</script>

Gọi một chức năng

Để gọi một hàm ở đâu đó sau này trong tập lệnh, bạn chỉ cần viết tên của hàm đó như được hiển thị trong đoạn mã sau.

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello() {
            document.write ("Hello there!");
         }
      </script>
      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello">
      </form>      
      <p>Use different text in write method and then try...</p>
   </body>
</html>

Thông số chức năng

Cho đến bây giờ, chúng ta đã thấy các chức năng không có tham số. Nhưng có một cơ sở để truyền các tham số khác nhau trong khi gọi một hàm. Các tham số đã truyền này có thể được ghi lại bên trong hàm và mọi thao tác có thể được thực hiện trên các tham số đó. Một hàm có thể nhận nhiều tham số được phân tách bằng dấu phẩy.

Ví dụ

Hãy thử ví dụ sau. Chúng tôi đã sửa đổi chức năng sayHello tại đây. Bây giờ nó có hai tham số.

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello(name, age) {
            document.write (name + " is " + age + " years old.");
         }
      </script>      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
      </form>      
      <p>Use different parameters inside the function and then try...</p>
   </body>
</html>

 

Tuyên bố trở lại

Hàm JavaScript có thể có câu lệnh trả về tùy chọn . Điều này là bắt buộc nếu bạn muốn trả về một giá trị từ một hàm. Câu lệnh này phải là câu lệnh cuối cùng trong một hàm.

Ví dụ: bạn có thể chuyển hai số vào một hàm và sau đó bạn có thể mong đợi hàm trả về phép nhân của chúng trong chương trình gọi của bạn.

Ví dụ

Hãy thử ví dụ sau. Nó định nghĩa một hàm nhận hai tham số và nối chúng trước khi trả về kết quả trong chương trình gọi.

<html>
   <head>  
      <script type = "text/javascript">
         function concatenate(first, last) {
            var full;
            full = first + last;
            return full;
         }
         function secondFunction() {
            var result;
            result = concatenate('Zara', 'Ali');
            document.write (result );
         }
      </script>      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "secondFunction()" value = "Call Function">
      </form>      
      <p>Use different parameters inside the function and then try...</p>  
  </body>
</html>

 

Có rất nhiều điều để tìm hiểu về các hàm JavaScript, tuy nhiên, chúng tôi đã đề cập đến các khái niệm quan trọng nhất trong hướng dẫn này.

Load More Related Articles
Load More By quangvu
Load More In Javascript

Check Also

Tự làm web chatGPT đơn giản cho phép dùng nhiều OpenAI key

Trong thời đại công nghệ phát triển như hiện nay, chatbot đang dần trở thành một giải pháp…