JavaScript - Chức năng

Hàm là một nhóm mã có thể sử dụng lại 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 đoạn mã. Nó giúp các lập trình viên viết mã mô-đun. Các hàm cho phép người lập trình 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. Bạn chắc hẳn đã thấy các chức năng nhưalert()write()trong các chương trước. Chúng tôi đã sử dụng các hàm này nhiều lần, nhưng chúng chỉ được viết bằng JavaScript cốt lõi một lần.

JavaScript 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 xác định nó. Cách phổ biến nhất để xác định một hàm trong JavaScript là sử dụngfunction từ khóa, theo sau là tên hàm duy nhất, danh sách các 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>

Thí dụ

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

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

Gọi một hàm

Để gọi một hàm ở đâu đó sau này trong script, bạn chỉ cần viết tên của hàm đó như 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>

Đầu ra

Tham số chức năng

Cho đến bây giờ, chúng ta đã thấy các hàm 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ố được truyền này có thể được nắm bắt bên trong hàm và bất kỳ thao tác nào 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.

Thí dụ

Hãy thử ví dụ sau. Chúng tôi đã sửa đổisayHellochức năng ở đâ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>

Đầu ra

Tuyên bố trở lại

Một hàm JavaScript có thể có một tùy chọn returntuyên bố. Điều này là bắt buộc nếu bạn muốn trả về 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ố trong 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.

Thí 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 đang 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>

Đầu ra

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

  • Các hàm lồng nhau trong JavaScript

  • Hàm JavaScript () Khối mã lệnh

  • Chữ viết hàm JavaScript