Fungsi atau yang bisa kita sebut prosedur adalah suatu blog program yang mempunyai tugas tertentu berdasarkan tujuan dari fungsi/prosedur itu sendiri. Dalam bahas pemrograman lain seperti pascal fungsi dan prosedur dibedakan dalam cara pendeklarasian, contohnya di dalam pascal ada pernyataan procedure dan function untuk pendeklarasiannya, Namun di javascript tidak ada perbedaan secara khusus dalam cara pendeklarasian untuk fungsi maupun prosedur. Cara untuk mengetahui apakah suatu blok program merupakan fungsi adalah jika memiliki nilai balik (return value) sedangkan prosedur tidak memiliki.
Artikel terkait : Perbedaan fungsi dan prosedur di C++
Penggunaan fungsi dan prosedur akan sering digunakan saat teman-teman menerapkan konsep object oriented programming (OOP). Konsep ini akan kita bahas di artikel lain.
Daftar Isi
2 Jenis Fungsi di Javascript
Fungsi atau prosedur di dalam javascript dibedakan menjadi dua yaitu:
- Fungsi yang telah dibuat oleh javascript (built-in function)
- Fungsi yang dibuat oleh pengembang (user defined function)
Pada artikel kali ini saya akan membahas fungsi yang di definsikan oleh pengembang (user).
Mendeklarasikan Fungsi dan Prosedur di Javascript
Sebenarnya ada beberapa bentuk/cara mendeklarasikan fungsi di javascript misalnya dengan mendeklarasikan secara langsung (tanpa kata kunci function di depan nama fungsi) atau dengan ekspresi assignment. Tetapi bentuk umum dan yang saya rekomendasikan adalah dengan menggunakan kata kunci function sebelum nama fungsi. Seperti yang terlihat pada contoh dibawah ini:
Deklarasi Fungsi
function nama_fungsi(){ return blok_program }Deklarasi Prosedur
function nama_fungsi(){ blok_program }Dari bentuk di atas dapat dilihat dengan jelas perbedaan antara fungsi dan prosedur di mana fungsi memiliki nilai balik (return value) sedangkan prosedur tidak memiliki.
Artikel lainnya : Belajar array (larik) di javascript
Cara Memanggil Fungsi
Setelah kita mendeklarasikan suatu fungsi dan kemudian ingin kita gunakan maka kita perlu memanggilnya. Ada 3 cara memanggil fungsi di javascript yaitu:
- Memanggil secara langsung dari dokumen HTML
- Memanggil dengan hyperlink
- Menggunakan Event
Memanggil Secara Langsung
Kita dapat langsung memanggil suatu fungsi yang telah dibuat dalam dokumen HTML
<!DOCTYPE html> <html> <head> <script> //Membuat fungsi Hello() function Hello(){ return alert('Hello Guys') } </script> </head> <body> <script> //Memanggil fungsi Hello() Hello() </script> </body> </html>Perhatikan pada contoh diatas fungsi Hello() saya buat di dalam tag <head> lalu kemudian saya panggil fungsi tersebut dari tag <body>.
Harap diperhatikan karena program yag dibuat secara sekuensial (program di eksekusi dari atas ke bawah) maka pendeklarasian fungsi harus terlebih dahulu di deklarasikan sebelum kita memanggilnya.
Memanggil Fungsi Dari Hyperlink
Fungsi juga dapat dipanggil dari hyperlink melalui atribut href. Perhatikan contoh dibawah ini:
<!DOCTYPE html> <html> <head> <script> function Hello(){ return alert('Hello Guys') } </script> </head> <body> <a href='Javascript:Hello()'>Klik Disini</a><br> </body> </html>Kita dapat memanggil fungsi javascript dari link lewat atribut href dengan nilai ‘Javascript:nama_fungsi()’ penggunaan ini bisa kalian terapkan saat ingin membuat sebuah aksi saat pengguna mengklik link.
Menggunakan Event (Rekasi Terhadap Suatu kejadian)
Javascript mampu memberikan reaksi pada suatu elemen HTML yaitu dengan menggunakan event.
Baca jenis-jenis event di javascript.
Ada banyak jenis event namun saya akan beri 2 contoh event berikut:
OnClickKejadian yang terjadi ketika suatu elemen di klikOnChangeKejadian yang terjadi ketika nilai suatu elemen berubahContoh Event Onclick
<!DOCTYPE html> <html> <head> <script> //Membuat fungsi Hello() function Hello(){ return alert('Hello Guys') } </script> </head> <body> <a href='#' title="Hello()">Klik Disini</a> </body> </html>Dapat dilihat pada contoh diatas fungsi Hello() dipanggil melalui event title, ketika pengguna mengklik link tersebut maka akan memicu event ini terjadi.
Contoh Event Onchange
<!DOCTYPE html> <html> <head> <script> //Membuat fungsi Hello() function tampilNama(){ var nama = document.getElementById("nama").value document.getElementById("tampil").innerHTML="Nama : "+nama } </script> </head> <body> <select id="nama" OnChange="tampilNama()"> <option value="Nia">Nia</option> <option value="Okta">Okta</option> <option value="Saras">Saras</option> </select> <br> <div id='tampil'></div> </body> </html>Pada contoh kedua fungsi akan di panggil dari event onchange, ketika terdapat perubahan nilai dalam combobox maka memicu event ini bekerja.
Pembahasan mengenai event ini akan saya bahas lebih detail pada artikel lain.
Fungsi Dengan Parameter
Fungsi di dalam pemrograman juga dapat disematkan daftar variabel yang berisi nilai untuk diproses pada fungsi tersebut. Di javascript pelewatan parameter bisa dilakukan dengan nilai (value)
Contoh :
//Membuat fungsi jumlah dengan parameter a dan b function jumlah(a,b) { return document.write('Hasil = '+(a+b)) } //Memanggil fungsi jumlah jumlah(3,6)Hasil :
Hasil = 9Fungsi jumlah() memiliki 2 parameter yaitu a dan b dengan menampilkan hasil penjumlahan dari kedua variabel tersebut.
Ketika fungsi tersebut dipanggil maka, harus kita sematkan nilai (value) untuk masing-masing parameter dalam fungsi tersebut.
Nilai yang saya sematkan pada fungsi jumlah() adalah 3 dan 6 masing-masing nilai tersebut akan di masukan pada variabel yang terdapat dalam parameter fungsi jumlah().
Kesimpulan
Fungsi yang didefinisikan oleh user sangatlah penting untuk kita pelajari saat belajar dasar javascript, karena ke depan kita akan banyak bekerja dalam manipulasi elemen HTML menggunakan fungsi atau membuat objek dan masih banyak lagi.
Kalian bisa explore dengan belajar dari referensi yang lain untuk menambah pengetahuan kalian. Silahkan beri komentar kalian di bawah artikel ini jika ada yang ingin ditanyakan, Terima kasih.