Tutorial Membuat Function dan Penerapannya Pada Javascript

Tutorial Membuat Function dan Penerapannya Pada Javascript - Kali ini kita akan mempelajari tentang contoh function Javascript dan penggunannya.

Sebelum kita mempelajarinya, sebaiknya Anda sudah memahami materi Javascript sebelumnya pada blog ini melalui menu Javascript atau menggunakan kolom pencarian.

Jika sudah, maka Anda akan lebih mudah memahami materi kali ini.

Insya Allah.

Baik, mari kita mulai materi penerapan function pada Javascript terlebih dahulu.

Pertama-tama kita mesti tahu apa itu Function?

Function atau yang biasa disebut fungsi merupakan blok dari statement yang bertujuan untuk mengerjakan task atau tugas tertentu.

Contoh:

function show(){
 alert("Selamat datang!");
}

Fungsi didefiniskan dengan cara menggunakan keyword function, kemudian diikuti oleh nama fungsi dan kurung buka-tutup ( ).

Nama fungsi bisa mengandung huruf, angka, garis bawah maupun dollar.

Di antara kurung buka-tutup ("...") Anda bisa sisipkan satu parameter.

Namun jika parameter lebih dari dua maka dipisah dengan koma.

Kode-kode dari fungsi tersebut diletakan di dalam tanda kurung kurawal ( { .... code ....} ).

Contoh:

function contoh(parameter1, parameter2, parameter3){
 // code program
}

Pemanggilan Fungsi

Sebuah fungsi yang sudah dideklarasikan bisa dipanggil dari baris kode yang lain.

Pemanggilan fungsi dilakukan dengan cara menuliskan nama fungsi tersebut dan kurang buka-tutup ();.

Jangan lupa memberikan parameter diantara kurung buka-tutup (param) jika fungsi tersebut membutuhkan parameter.

Contoh:

getName();
getClass();

Function Return

Sebuah fungsi juga mampu mengembalikan nilai kepada pemanggilnya.

Untuk memanggil sebuah fungsi dapat mengembalikan nilai, anda bisa menggunakan keyword return.

Misalnya:

var hitung = myCalc(4,5); // memanggil function

function myCalc(nilai1, nilai2){
 return nilai1 * nilai2;
}

Mengapa Menggunakan Function

Mungkin Anda bertanya-tanya mengapa harus menggunakan function dan fungsinya buat apa.

Jawabannya adalah:

1. Reuse Code: Anda bisa menggunakan code yang sama berulang kali tanpa harus menuliskan kodenya lagi.
2. Anda bisa menggunakan code yang sama menggunakan parameter yang berbeda untuk menghasilkan nilai yang berbeda.

Variabel Lokal

Di dalam sebuah function Anda bisa menyisipkan variabel.

Variabel yang ada di dalam function bisa disebut variabel lokal.

Variable lokal tidak dapat diakses di luar scope dimana variable tersebut dideklarasikan.

Dalam hal ini scope untuk variable tersebut adalah fungsi dimana variable tersebut dideklarasikan.

Contoh:

// variabel di sini tidak bisa menggunakan variabel name

function myShow(){
 var name = "Wildan Fuady";

 // kode di sini bisa menggunakan variabel name

}

// variabel di sini tidak bisa menggunakan variabel name

Beberapa Fungsi Built-in Pada Javascript

Pada contoh sebelumnya, kita telah mencoba fungsi getElementById.

Jika belum, boleh dilewatkan dulu.

Fungsi ini adalah untuk mencari elemen HTML dengan id tertentu pada dokumen HTML.

Selain getElementById, ada beberapa fungsi lain:

1. getElementsByTagName

Fungsinya untuk mencari elemen HTML berdasarkan nama tag.

Misal: document.getElementByTagName("h1").

2. getElementsByClassName

Fungsinya untuk mencari elemen HTML berdasarkan css class.

Misal: document.getElementByClassName("center").

3. querySelectorAll

Fungsinya untuk mencari elemen HTML berdasarkan css selector.

Misal: document.querySelectorAll("p.center").

Perhatikan baik-baik perbedaannya, ketiga fungsi terakhir bisa mengembalikan lebih dari satu elemen, berbeda dengan getElementById yang hanya mengembalikan 1 elemen.

Ketiga fungsi terakhir (getElementByTagName, getElementByClassName, querySelectorAll) mengembalikan object berupa array.

Untuk melihat penerapan dari masing-masing function, silahkan membaca materi lanjutan dari Javascript ini.

Anda bisa menggunakan menu daftar isi untuk melihat materi-materi Javascript di situs ini.

Semoga bermanfaat.

Aamiin.