JavaScript - Hàm function trong Javascript

17/03/2019, 10:47 AM | 17/03/2019, 10:47 AM | 577 | 018

Hàm là một hay nhiều đoạn mã được gom lại với nhau, hàm có thể được gọi lại nhiều lần - đây là tiện ích lớn của hàm. Trong các bài trước ta đã sử dụng các hàm có sẵn trong Javascript như alert(), prompt()... Các hàm đó được Javascript viết sẵn và khi dùng ta chỉ việc gọi lại. Vậy nên chúng ta cũng có thể tự tạo những hàm riêng để có thể gọi lại khi cần.
1. Hàm - function trong Javascript
- Hàm không có tham số chuyền vào :

function Name(){
    // các đoạn mã
}

Trong đó :
function là từ khóa bắt buộc.
Name là tên hàm bạn có thể đặt khác.
- Tên hàm phải bắt đầu bằng chữ cái hoặc dấu gạch dưới _
- Tên hàm không được bắt đầu bằng số hoặc các kí tự khác dấu gạch dưới _
Ví dụ : In ra câu xin chào

<script language="javascript">
          
     function Hello(){
         document.write('Xin chào !');
     }
             
     // gọi hàm
     Hello();
          
</script>

Kết quả in ra :

Xin chào !

- Hàm có tham số truyền vào :

function Name(Value1, Value2, Value3){
    // các câu lệnh
}

Trong đó :
function : là từ khóa bắt buộc
Name : là tên hàm.
- Tên hàm phải bắt đầu bằng chữ cái hoặc dấu gạch dưới _
- Tên hàm không được bắt đầu bằng số hoặc các kí tự khác dấu gạch dưới _
Value1, Value2, Value3 : là các tham số truyền vào. ( có thể là một hoặc nhiều tham số )
Ví dụ :

<html>
    <head>
        <script language="javascript">
          
            function Print(value){
                document.write(value);
            }
             
            // gọi hàm và truyền vào chuỗi muốn hiển thị
            Print('chào bạn đến với vnfree.net');
          
        </script>
    </head>
    <body>
        
    </body>
</html>

Kết quả sẽ in ra :

chào bạn đến với vnfree.net

Như vậy ở ví dụ trên ta tạo ra hàm Print() có 1 tham số. Bất cứ khi nào bạn muốn hiển thị ra màn hình đoạn mã nào chỉ cần gọi lại hàm Print() và truyền vào giá trị muốn hiển thị như trên.

2. Hàm có return và không có return
Hàm có return hay còn gọi là hàm có kết quả trả về, với hàm này sẽ có từ return đặt ở cuối với mục đích trả về kết quả.
Ví dụ : Tính tổng hai số

Xem DEMO

<html>
    <head>
        <script language="javascript">
            // tạo hàm
            function Tong(x, y){
                // trả về tổng x + y
                return x + y;
            }
             
            // khởi tạo biến
            var number1 = 10;
            var number2 = 5;
            // gọi hàm và truyền vào biến
            var sum = Tong(number1, number2);
            // in ra kết quả
            document.write(sum);
        </script>
    </head>
    <body>
        
    </body>
</html>

Hàm không có return hay là hàm không có kết quả trả về :
Ví dụ :

Xem DEMO

<html>
    <head>
        <script language="javascript">
            // tạo hàm
            function Tong(x, y){
                 // in ra kết quả
                 document.write(x + y);
            }
             
            // khởi tạo biến
            var number1 = 10;
            var number2 = 5;
            // gọi hàm và truyền vào biến
            Tong(number1, number2);
          
        </script>
    </head>
    <body>
        
    </body>
</html>

Ví dụ tổng hợp :Cho người dùng nhập vào lần lượt 2 giá trị, kiểm tra giá trị nhập vào có phải số hay không, nếu đúng thì tính tổng.

Xem DEMO

<!DOCTYPE html>
<html>
    <head>
        <script language="javascript">
            // tạo hàm kiểm tra Number có phải 1 số hay không
            function KiemTraSo(Number){
                 // Nếu là số thì trả về true, ngược lại trả về false
                 if(isNaN(Number))
                    return false;
                 else
                    return true;
            }
             
            // Hàm tính tổng
            function Tong(x, y){
                return x + y;
            }
            
            // Tạo hàm chính
            function Main(){
               // khởi tạo biến
               var number1 = parseInt(prompt('Bạn nhập số thứ nhất :'));
               var number2 = parseInt(prompt('Bạn nhập số thứ hai :'));
          
               // nếu number1 và number2 cùng là số thì tính tổng
               // nếu không thì thông báo lỗi
               if(KiemTraSo(number1) && KiemTraSo(number2))
                  document.write('Tổng hai số là : ' + Tong(number1, number2));
               else
                  document.write('Lỗi ! bạn cần nhập số ! ');
            }
            
            // gọi hàm
            Main();

        </script>
    </head>
    <body>
        
    </body>
</html>

Ở ví dụ trên mình đã kết hợp một số kiến thức của các bài trước để giải bài toán. Bạn có thể tự đưa ra bài toán sau đó kết hợp kiến thức lại để giải, chúc bạn lập trình vui vẻ nhé :)