Fungsi atau biasa kita sebut prosedur adalah program blog yang memiliki tugas-tugas tertentu berdasarkan tujuan dari fungsi/prosedur itu sendiri. Dalam topik pemrograman lain seperti Pascal, fungsi dan prosedur dibedakan dalam cara mereka didefinisikan, misalnya dalam Pascal ada prosedur dan pernyataan fungsi untuk definisi mereka, tetapi dalam javascript tidak ada perbedaan khusus dalam cara mereka didefinisikan untuk fungsi dan prosedur. Cara untuk mengetahui apakah sebuah blok program adalah sebuah fungsi adalah jika ia memiliki nilai kembalian sedangkan prosedurnya tidak
Artikel terkait. Perbedaan antara fungsi dan prosedur di C++
Penggunaan fungsi dan prosedur akan sering digunakan ketika teman-teman menerapkan konsep object oriented programming (OOP). Kami akan membahas konsep ini di artikel lain
Daftar isi
2 Jenis Fungsi dalam Javascript
Fungsi atau prosedur dalam javascript terbagi menjadi dua yaitu
- Fungsi yang telah dibuat oleh javascript (fungsi bawaan)
- Fungsi yang dibuat oleh pengembang (fungsi yang ditentukan pengguna)
Pada artikel ini saya akan membahas fungsi yang didefinisikan oleh developer (pengguna)
Mendeklarasikan Fungsi dan Prosedur dalam Javascript
Sebenarnya ada beberapa bentuk/cara mendeklarasikan fungsi pada javascript, misalnya dengan mendeklarasikan secara langsung (tanpa kata kunci function di depan nama fungsi) atau dengan ekspresi penugasan. Namun bentuk umum dan yang saya sarankan adalah menggunakan kata kunci fungsi sebelum nama fungsi. Seperti yang terlihat pada contoh di bawah ini
Deklarasi Fungsi
function nama_fungsi(){ return blok_program }Deklarasi Prosedural
function nama_fungsi(){ blok_program }_Dari bentuk diatas dapat dilihat dengan jelas perbedaan antara fungsi dan prosedur dimana fungsi memiliki nilai kembalian (return value) sedangkan prosedur tidak memiliki
artikel lainnya. Pelajari array dalam javascript
Cara Memanggil Fungsi
Setelah kita mendeklarasikan sebuah fungsi dan kemudian kita ingin menggunakannya, kita perlu memanggilnya. Ada 3 cara untuk memanggil suatu fungsi dalam javascript, yaitu
- Menelepon langsung dari dokumen HTML
- Memanggil dengan hyperlink
- Menggunakan Acara
Hubungi Langsung
Kita bisa langsung memanggil 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 lalu kemudian saya panggil fungsi tersebut dari tag .
Perlu diketahui bahwa karena program dibuat secara berurutan (program dijalankan dari atas ke bawah) definisi fungsi harus dideklarasikan terlebih dahulu sebelum kita memanggilnya
Memanggil Fungsi Dari Hyperlink
Fungsi juga dapat dipanggil dari hyperlink melalui atribut href. Lihatlah contoh di bawah 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 melalui atribut href dengan nilai 'Javascript'. function_name()' dapat digunakan saat Anda ingin membuat tindakan saat pengguna mengklik tautan
Menggunakan Acara (Reaksi terhadap suatu acara)
Javascript mampu bereaksi terhadap elemen HTML dengan menggunakan event
Baca jenis acara di javascript
Ada banyak jenis event, tapi saya akan memberikan 2 contoh event berikut ini
OnClick Suatu peristiwa yang terjadi ketika suatu elemen diklik OnChange Suatu peristiwa yang terjadi ketika nilai suatu elemen berubahContoh Acara 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 di atas bahwa fungsi Hello() dipanggil melalui event title, ketika pengguna mengklik link maka akan memicu terjadinya event ini.
Contoh Pergantian Acara
<!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 dipanggil dari event onchange, ketika ada perubahan nilai pada combobox, maka event ini akan terpicu untuk bekerja.
Acara ini akan saya bahas lebih detail di artikel lain
Fungsi Dengan Parameter
Fungsi dalam pemrograman juga dapat disematkan ke daftar variabel yang berisi nilai untuk diproses dalam fungsi tersebut. Dalam parameter lewat javascript dapat dilakukan dengan nilai
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 sum() memiliki 2 parameter yaitu a dan b dengan menampilkan hasil penjumlahan dari kedua variabel tersebut
Saat fungsi dipanggil, kita harus menyematkan nilai untuk setiap parameter dalam fungsi
Nilai yang saya masukkan ke dalam fungsi sum() masing-masing adalah 3 dan 6, dan nilai tersebut akan dimasukkan ke dalam variabel yang terdapat di parameter fungsi sum()
Kesimpulan
Fungsi yang didefinisikan oleh pengguna sangat penting untuk kita pelajari ketika mempelajari dasar-dasar javascript, karena di masa depan kita akan banyak bekerja dalam manipulasi elemen HTML menggunakan fungsi atau membuat objek dan banyak lagi.
Anda bisa bereksplorasi dengan belajar dari referensi lain untuk menambah pengetahuan Anda. Silahkan berkomentar di bawah artikel ini jika ada pertanyaan, terima kasih