Hàm trong JavaScript

Một hàm là một nhóm code có thể tái sử dụng mà có thể được gọi bất cứ đâu trong chương trình của bạn. Điều này giúp bạn không cần thiết phải viết cùng một code lại nhiều lần. Nó giúp các nhà lập trình viết các modular code. Các hàm cho phép một nhà lập trình phân chia một chương trình lớn thành các hàm nhỏ và dễ quản lý.

Giống như bất kỳ ngôn ngữ chương trình cấp cao khác, JavaScript cũng hỗ trợ tất cả tính năng cần thiết để viết các code có tính modun bởi sử dụng các hàm. Bạn đã xem các hàm như alert() và 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 mới chỉ được viết trong core JavaScript.

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

Định nghĩa hàm

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

Cú pháp

Cú pháp đơn giản như sau:

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

Quảng cáo

Ví dụ

Bạn thử ví dụ sau. Nó định nghĩa một hàm gọi là sayHello mà không nhận tham số nào:

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

Gọi một hàm

Để gọi một hàm ở đâu đó sau khi trong script, bạn đơn giản sẽ cần viết tên của hàm đó như code 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="Xin chao!">
      </form>
      
      <p>Use different text in write method and then try...</p>
   </body>
</html>

Kết quả

Quảng cáo

Tham số của hàm

Tới chương này, chúng ta đã thấy các hàm mà không có tham số. Nhưng có một sự tiện lợi khi truyền các tham số khác nhau trong khi gọi một hàm. Những 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 biệt riêng rẽ bởi dấu phảy.

Ví dụ

Bạn thử ví dụ sau. Chúng tôi đã chỉnh sửa hàm sayHello ở đây. Bây giờ nó nhận 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="Xin chao!">
      </form>
      
      <p>Use different parameters inside the function and then try...</p>
   </body>
</html>

Kết quả

Lệnh return

Một hàm JavaScript có thể có một lệnh return tùy ý. Lệnh này được yêu cầu nếu bạn muốn trả về một giá trị từ một hàm. Lệnh này nên là lệnh cuối của một hàm.

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

Ví dụ

Bạn thử ví dụ sau. Nó định nghĩa một hàm 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 hàm.

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

Kết quả

Có nhiều thứ để học về hàm trong JavaScript, tuy nhiên chúng tôi đã trình bày hầu hết các khái niệm quan trọng trong chương này.

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Các bạn có thể mua thêm khóa học JAVA CORE ONLINE VÀ ỨNG DỤNG cực hay, giúp các bạn vượt qua các dự án trên trường và đi thực tập Java. Khóa học có giá chỉ 300K, nhằm ưu đãi, tạo điều kiện cho sinh viên cho thể mua khóa học.

Nội dung khóa học gồm 16 chuơng và 100 video cực hay, học trực tiếp tại https://www.udemy.com/tu-tin-di-lam-voi-kien-thuc-ve-java-core-toan-tap/ Bạn nào có nhu cầu mua, inbox trực tiếp a Tuyền, cựu sinh viên Bách Khoa K53, fb: https://www.facebook.com/tuyen.vietjack

Follow facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Các bài học JavaScript khác tại VietJack: