Bài 04: Bài tập tạo hàm trong Javascript

Để hiểu rõ hơn về hàm và cách tạo hàm trong Javascript thì mình sẽ đưa ra một số bài tập và giải nó với nhiều cách khác nhau, từ đó bạn sẽ hiểu được ý nghĩa của hàm và cách tạo hàm trong Javascript. Đáng lẽ các bài trước mình không nên giải bài tập bằng hàm nhưng lỡ rồi nên mình cũng không sửa lại nữa, vì vậy có gì mong bạn thông cảm nhé crying

1. Một số bài tập tạo hàm trong Javascript

Những bài tập này mình sẽ cố gắng giải cả hai cách là có return và không có return để giúp bạn phân biệt hai khái niệm này.

Viết chương trình cộng hai số

Ý tưởng cho bài này như sau: trước tiên cần viết một hàm công hai số và nó có có hai tham số truyền vào, lúc này hai tham số đó chúng ta sẽ sử dụng hàm prompt() để lấy. Lưu ý khi lấy dữ liệu từ người dùng thì bạn nên sử dụng hàm parseInt() để chuyển sang kiểu number nhé, nếu không nó sẽ hiểu là cộng hai chuỗi nên dẫn đến kết quả sai.

Cách 1: Có return

XEM DEMO

// Hàm cộng hai số
function tinh_tong(a, b)
{
    return a + b;
}

// Lấy thông tin từ người dùng
var a = parseInt(prompt("Nhập số a"));
var b = parseInt(prompt("Nhập số b"));

// Tính tổng
var tong = tinh_tong(a, b);

// In ra màn hình
document.write("Tổng hai số " + a + " + " + b + " là " + tong);

Cách 2: Không có return

XEM DEMO

// Hàm cộng hai số
function tinh_tong()
{
    // Lấy thông tin từ người dùng
    var a = parseInt(prompt("Nhập số a"));
    var b = parseInt(prompt("Nhập số b"));
    
    // Tính tổng
    var tong = a + b;

    // In ra màn hình
    document.write("Tổng hai số " + a + " + " + b + " là " + tong);
}

// Gọi hàm tính tổng
tinh_tong();

Xem kỹ hai cách trên ta đưa ra được nhận xét như sau:

  • Đối với hàm có return thì nó chỉ thực hiện một mục đích duy nhất là tính tổng hai số a và b, sau đó trả kết quả về.
  • Đối với hàm không có return thì ta gom hết tất cả code vào trong hàm luôn

Tính tổng các số lẻ trong mảng

Bài này mình sẽ cho trước một mảng các phần tử, sau đó yêu cầu viết chương trình tính tổng các số lẻ trong mảng đó. Mảng cho trước như sau:

var mang = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,17, 18, 19, 20];

Cách 1: Có return

XEM DEMO

var mang = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,17, 18, 19, 20];

// Hàm tính tổng số lẻ
function tong_so_le(mang)
{
    // Biến lưu trữ tổng
    var tong = 0;

    // Lặp qua mảng và cộng thêm tổng nếu là số lẻ
    for (var i = 0; i < mang.length; i++){
        if (mang[i] % 2 != 0){
            tong += mang[i];
        }
    }

    // Trả kết quả về
    return tong;
}

// In ra trình duyệt
document.write("Tổng số lẻ là: " + tong_so_le(mang));

Cách 2: Không có return

XEM DEMO

var mang = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,17, 18, 19, 20];

// Hàm tính tổng số lẻ
function tong_so_le(mang)
{
    // Biến lưu trữ tổng
    var tong = 0;

    // Lặp qua mảng và cộng thêm tổng nếu là số lẻ
    for (var i = 0; i < mang.length; i++){
        if (mang[i] % 2 != 0){
            tong += mang[i];
        }
    }

    document.write("Tổng số lẻ là: " + tong);
}

// Gọi hàm tính tổng số lẻ
tong_so_le(mang);

Như vậy sự khác nhau giữa hàm có return và không có return là một bên có trả về giá trị và một bên không trả về giá trị.

Tính giá trị của biểu thức

Viết chương trình cho người dùng nhập vào số n lớn hơn 0, sau đó dựa vào n tính giá trị của biểu thức: expres = 1/n + 2/n + 3/n + ... + n/n.

Với bài này chúng ta chỉ cần sử dụng vòng lặp for là được. Tuy nhiên mình vẫn lưu ý với bạn là nên chuyển đổi kiểu dữ liệu và kiểm tra điều kiện nhập của người dùng nhé.

Cách 1: Có return

XEM DEMO

function tinh_bieu_thuc(n)
{
    // Biến tính tổng
    var tong = 0;

    // Tính toán
    for (var i = 1; i <= n; i++){
        tong += (1/i);
    }

    return tong;
}



// Lấy giá trị
var n = parseInt(prompt("Nhập số cần tính"));

// Kiểm tra giá trị
if (n <= 0){
    alert("Bạn phải nhập số lớn hơn 0");
}
else{
    document.write("Tổng giá trị biểu thức là: " + tinh_bieu_thuc(n));
}

Cách 2: Không có return

XEM DEMO

function tinh_bieu_thuc()
{
    // Biến tính tổng
    var tong = 0;

    // Lấy giá trị
    var n = parseInt(prompt("Nhập số cần tính"));

    // Kiểm tra giá trị
    if (n <= 0){
        alert("Bạn phải nhập số lớn hơn 0");
    }
    else{
        // Tính toán
        for (var i = 1; i <= n; i++){
            tong += (1/i);
        }
        document.write("Tổng giá trị biểu thức là: " + tong);
    }
}

// Gọi hàm
tinh_bieu_thuc();

2. Lời kết

Bạn có thể giải theo nhiều cách khác nhau và không cần phải giải đúng như cách của mình. Nhưng nếu bạn chưa biết cách giải thì hãy xem và hiểu cách giải của mình vì như vậy bạn mới có phản xạ nhanh hơn trong quá trình học của mình.

Những bài tập tạo hàm này nhằm giúp các bạn hiểu rõ hơn bản chất của hàm có return và hàm không có return nên mình chỉ đưa ra những bài khá đơn giản và dễ hiểu. Hy vọng qua loạt bài tập ví dụ cách tạo hàm trong Javascript này giúp được một phần nào cho các bạn.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.