Bài 8 – Sử dụng hàm trong Javascript

bởi | Th7 10, 2022 | Chưa phân loại

Function trong Javascript là gì?

Function hay còn gọi là hàm, là tập hợp một đoạn code dùng để xử lý một nhiệm vụ nào đó. Code bên trong function không được biên dịch cho tới khi được gọi đến. Chính vì vậy khi sử dụng function sẽ giúp chương trình được linh hoạt hơn.

Hãy thử và quan sát ví dụ dưới đây

<!DOCTYPE html>
<html>
<body>
<h2>Hàm trong Javascript</h2>
<p>Ví dụ này, hàm sẽ thực hiện một phép toán và trả về kết quả:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 5);
</script>
</body>
</html>

Phân loại hàm

Hàm trong javascript được chia làm hai loại cơ bản: hàm không có tham số & hàm có tham số

  • Hàm không có tham số là hàm mà kết quả thực thi của nó luôn luôn không thay đổi.
<!DOCTYPE html>
<html>
<body>
   <script>
       function SayHello(){
            var name = "Wecode";
            document.write("Hello! Tôi là " + name);
        }
        SayHello();
        document.write("<br>");
        SayHello();
        document.write("<br>");
        SayHello();
    </script>
</body>
</html>

Trong ví dụ trên các bạn thấy rằng, hàm SayHello() được gọi 3 lần trong chương trình, nhưng kết quả hiển thị trên trình duyệt là không thay đổi.

  • Hàm có tham số là loại hàm mà khi gọi hàm ta phải truyền giá trị vào cho nó. Tùy vào giá trị được truyền mà hàm sẽ thực thi và cho ra kết quả khác nhau.
<!DOCTYPE html>
<html>
<body>
<h2>Hàm trong Javascript</h2>
<p>Ví dụ này, hàm sẽ thực hiện một phép toán và trả về kết quả:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
  return a * b;
}
document.write(myFunction(4, 5));
document.write('<br>');
document.write(myFunction(6, 9));
</script>
</body>
</html>

Trong ví dụ này các bạn thấy rằng hàm myFunction(a,b) được gọi tới 2 lần với 2 giá trị tham số được truyền vào và chúng ta nhận được 2 kết quả khác nhau.

Cách khai báo & gọi hàm “không có tham số”

Để khai báo (khởi tạo) một hàm thuộc thoại không có tham số, ta sử dụng cú pháp như sau:

function tênhàm() {
    //Danh sách các câu lệnh của hàm;
}

Để gọi một hàm thuộc loại không có tham số, ta sử dụng cú pháp:

tênhàm()

Hãy thử ví dụ sau:

<!DOCTYPE html>
<html>
<body>
   <script>
       function SayHello(){
            var name = "Wecode";
            document.write("Hello! Tôi là " + name);
        }
        SayHello();
    </script>
</body>
</html>

Cách khai báo & gọi hàm “có tham số”

Để khai báo một hàm thuộc thoại có tham số, ta sử dụng cú pháp như sau:

function tênhàm(tham số thứ nhất, tham số thứ hai, tham số thứ ba, ....) {
    //Danh sách các câu lệnh của hàm;
}

Trong đó:

tênhàm là tên của hàm các bạn muốn đặt.
tham số thứ nhất, tham số thứ hai …  là các tham số mà các bạn muốn truyền vào hàm (không giới hạn số lượng).

  • Tham số có tính năng gần giống như biến, tuy nhiên tham số thì chỉ có thể sử dụng bên trong hàm.
  • Khi khai báo hàm, ta khai báo danh sách các tham số thì điều này cũng gần giống như việc khai báo danh sách các biến.
  • Đối với hàm có tham số, khi gọi hàm ta phải truyền giá trị cho các tham số (được gọi là đối số) theo cú pháp như sau:
tênhàm(đối số thứ nhất, đối số thứ hai, đối số thứ ba, ....)

Việc truyền giá trị cho tham số cũng tương tự như việc gán giá trị cho biến, nếu ta gọi hàm mà không truyền giá trị cho các tham số thì mặc định các tham số sẽ có giá trị là undefined

<!DOCTYPE html>
<html>
<body>
<h2>Hàm trong Javascript</h2>
<p>Ví dụ này, hàm sẽ thực hiện một phép toán và trả về kết quả:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
  return a * b; //a và b được gọi là các tham số
}
document.write(myFunction(4, 5));//4 và 5 được gọi là các đối số
document.write('<br>');
document.write(myFunction(6, 9));//6 và 9 được gọi là các đối số
</script>
</body>
</html>

Giá trị truyền vào của các tham số trong hàm được gọi là đối số

Hàm có tham số mặc định

Để tránh tình trạng tham số bị nhận giá trị undefined thì trong lúc khai báo hàm chúng ta có thể gán giá trị mặc định cho các tham số, khi đó nếu lúc gọi hàm ta không truyền giá trị cho tham số thì tham số sẽ sử dụng giá trị mặc định được gán lúc khai báo.

Đây thực ra là dạng hàm có truyền tham số và đồng thời xét luôn giá trị mặc định cho các tham số đó. Cú pháp:

function tênhàm(tham số 1 = giá trị 1, tham số 2 = giá trị 2...) {
	//Danh sách các câu lệnh của hàm
}

Trong đó:

  • tênhàm là tên của hàm các bạn muốn đặt.
  • tham số 1, tham số 2 …  là các tham số mà các bạn muốn truyền vào hàm (không giới hạn số lượng).
  • giá trị 1, giá trị 2… là các giá trị tương ứng với các tham số (hay còn gọi là đối số
<!DOCTYPE html>
<html>
<body>
<h2>Hàm trong Javascript</h2>
<p>Ví dụ này, hàm sẽ thực hiện một phép toán và trả về kết quả:</p>
<p id="demo"></p>
<script>
function myFunction(a=8, b=9) // tham số a và b được gán các giá trị mặc định tương ứng là 8 và 9
{
  return a * b;
}
document.write(myFunction());//khi gọi hàm không truyền đối số thì hàm sẽ dùng các giá trị mặc định
</script>
</body>
</html>

Gọi hàm thông qua một sự kiện

Ta có thể thiết lập việc một hàm nào đó sẽ được thực thi khi một sự kiện nào đó xảy ra (Ví dụ như: khi người dùng click chuột vào một phần tử, dí chuột vào một phần tử, ….) bằng cách đặt câu lệnh gọi hàm vào bên trong thuộc tính sự kiện của phần tử.

Hãy thử ví dụ sau:

<!DOCTYPE html>
<html>
<body>
    <button type="button" onclick="SayHello()">BẤM VÀO ĐÂY</button>
    <script>
       function SayHello(){
            alert("Hello! Tôi là Wecode");
        }
    </script>
</body>
</html>

Trong ví dụ này, hàm SayHello() được gọi khi chúng ta click chuột vào button Bấm vào đây

Lệnh return

Lệnh return dùng để trả về cho hàm một giá trị.

(Sau khi thực thi xong, hàm sẽ có một giá trị, lúc đó nó có thể được sử dụng giống như một biến)

<!DOCTYPE html>
<html>
<body>
<h2>Hàm trong Javascript</h2>
<p>Ví dụ này, hàm sẽ thực hiện một phép toán và trả về kết quả:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
  return a * b; //a và b được gọi là các tham số
}
document.write(myFunction(4, 5));//4 và 5 được gọi là các đối số
let ketqua=myFunction(9,6); //hàm có thể được gán cho 1 biến
document.write("<br>");
document.write("Kết quả = " +ketqua)
</script>
</body>
</html>

Lưu ý: Trong một hàm, sau khi thực thi xong lệnh return thì hàm sẽ kết thúc (tức là những câu lệnh nằm phía sau lệnh return sẽ không được thực thi). Cho nên trong một hàm, lệnh return cần phải được đặt ở vị trí cuối cùng.