Function JavaScript

Function adalah kumpulan beberapa code yang disatukan kemudian digunakan untuk menyelesaikan sebuah tugas tertentu.

Syntax

Berikut ini adalah beberapa aturan dalam membuat sebuah function.

function namaFunction(parameter1, parameter2, ...) {
    code block;
};
  • Untuk membuat sebuah function, tulis [function] terlebih dahulu diikuti dengan nama function yang diinginkan dan symbol kurung ().
  • Nama function boleh mengandung garis bawah _ dan symbol dolar $ (sama seperti aturan penamaan variable).
  • Parameter dipisahkan oleh koma [,].
  • {code block} adalah kumpulan code yang akan dieksekusi bila function dipanggil.

Membuat function

Berikut ini kita akan membuat sebuah function sederhana bernama tambahkan(). Function ini berguna untuk mengetahui hasil dari penjumlahan dua buah angka.

Contoh 1:

<script>
function tambahkan(a, b) {
    document.write(a + b);
};
</script>

Pada contoh di atas yang dinamakan parameter adalah [a] dan [b].

Function ini dibuat untuk mengetahui hasil dari [a] ditambah [b].

Nilai dari [a] dan [b] sendiri belum ditentukan pada tahap ini.

Untuk menampilkan hasil dari penambahan, maka kita menggunakan sebuah function yang bernama document.write(). Function ini merupakan function yang sudah ada pada JavaScript sehingga kita tidak perlu membuatnya.

Menjalankan function

Semua code yang berada di dalam sebuah function tidak bisa dijalankan jika function tersebut tidak dijalankan. Ada beberapa cara untuk menjalankan function yang telah dibuat, diantaranya yaitu:

  • Memanggil function tersebut
  • Menggunakan event
  • Otomatis jalan sendiri

Memanggil function

Untuk memanggil sebuah function cukup dengan menuliskan nama function tersebut:

namaFunction();

Pada contoh berikut ini kita akan memanggil tambahkan() function yang sudah dibuat di atas.

Contoh 2:

<script>
function tambahkan(a, b) {
    document.write(a + b);
};

tambahkan(2, 3);
</script>

Hasil contoh 2:

5

Pada contoh di atas kita memanggil tambahkan() function dengan angka [2] dan [3]. Angka [2] dan [3] ini akan digunakan untuk mengganti [a] dan [b] pada tambahkan() function.

Angka [2] dan [3] sebagai pengganti [a] dan [b] disebut sebagai argument. Jadi yang dimaksud dengan argument adalah nilai yang dimasukkan ke dalam sebuah function sebagai pengganti parameter.

Selanjutnya hasil dari [2 + 3] ditampilkan menggunakan code document.write().

Berikut ini adalah contoh function yang dipanggil menggunakan property innerHTML:

Contoh 3:

<html>
<head>
</head>
<body>
<p id="coba"></p>
    <script>
    function tambahkan(a, b) {
        return a * b;
    };
    document.getElementById("coba").innerHTML = tambahkan(2, 3);
    </script>
</body>
</html>

Hasil contoh 3:

5

Pada contoh di atas, return statement berguna untuk menghentikan function yang sedang berjalan dan menghasilkan nilai dari return statement tersebut.

Elemen HTML dengan id "coba" diubah menjadi nilai dari property innerHTML yang berisi hasil dari tambahkan() function.

Menyimpan nilai function di dalam variable

Nilai yang dihasilkan oleh function bisa disimpan di dalam variable:

Contoh 4:

<script>
    function tambahkan(a, b) {
    return a + b;
};

var c = tambahkan(2, 3);
document.write(c);
</script>

Hasil contoh 4:

5

Pada contoh di atas, nilai dari tambahkan() function disimpan di dalam variable c yang kemudian ditampilkan menggunakan code document.write().

Function tanpa parameter

Berikut ini adalah contoh function yang dibuat tanpa menggunakan parameter:

Contoh 5:

<script>
function salam() {
    document.write("Selamat Pagi!");
};
salam()
</script>

Hasil contoh 5:

Selamat Pagi!

Berikut ini adalah contoh lainnya dari function yang tidak menggunakan parameter:

Contoh 6:

<html>
<head>
</head>
<body>
<p id="coba"></p>
    <script>
    function salam() {
        document.getElementById("coba").innerHTML = "Selamat Pagi!";
    };
    salam()
    </script>
</body>
</html>

Hasil contoh 6:

Selamat Pagi!

Manfaat function

Bisa digunakan berulang-kali

Salah satu manfaat dari function yaitu kita hanya perlu membuat function satu kali kemudian function tersebut bisa digunakan berulang-kali untuk mendapatkan hasil yang berbeda.

Contoh 7:

<script>
function tambahkan(a, b) {
    document.write(a + b);
};

tambahkan(2, 3);
document.write("<br />");
tambahkan(5,4);
</script>

Hasil contoh 7:

5
9

Pada contoh di atas kita membuat tambahkan() function dan kemudian memanggilnya sebanyak dua kali dengan argument yang berbeda.

Merapikan code

Manfaat lainnya dari menggunakan function adalah sebuah function bisa digunakan untuk merapikan code yang berantakan dengan menggabungkan beberapa statement yang berbeda:

Contoh 8:

<html>
<head>
</head>
<body>
<p id="pagi"></p>
<p id="sore"></p>
<p id="malam"></p>
    <script>
    function salam() {
        document.getElementById("pagi").innerHTML = "Selamat Pagi!";
        document.getElementById("sore").innerHTML = "Selamat Sore!";
        document.getElementById("malam").innerHTML = "Selamat Malam!";
    };
    salam()
    </script>
</body>
</html>

Hasil contoh 8:

Selamat Pagi!
Selamat Sore!
Selamat Malam!

Menggunakan event

Salah satu cara menjalankan function yang telah dibuat adalah dengan menggunakan event.

Contoh event yang akan kita gunakan di bawah adalah saat user meng-click sebuah tombol. Mengenai event akan dibahas lebih mendalam pada tutorial mendatang.

Berikut ini kita akan membuat sebuah function yang akan memunculkan sebuah kotak pesan. Function ini akan dijalankan saat ada user yang meng-click tombol popup.

Mengenai tombol popup sudah pernah dibahas pada tutorial submit button HTML.

Contoh 9:

<html>
<head>
    <script>
    function popup() {
        alert("Hello World");
    };
    </script>
</head>
<body>
    <input type="button" onclick="popup()" value="popup">
</body>
</html>

Hasil contoh 9:

Pada contoh di atas, kita memiliki sebuah function yang bernama popup().

Di dalam popup() function terdapat alert() function. alert() function ini merupakan sebuah function khusus yang sudah ada di JavaScript untuk memunculkan sebuah kotak pesan.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>