Fungsi Terbilang Dengan JavaScript
Selamat datang di tutorial belajar membuat fungsi terbilang dengan JavaScript.
Pada saat membuat sebuah aplikasi atau website, terkadang kita diharuskan untuk membuat fungsi terbilang untuk mengubah format angka menjadi huruf ejaan.
Pada tutorial sebelumnya di malasngoding.com, kita telah belajar membuat fungsi terbilang dengan PHP.
Tapi, pada tutorial ini kita akan belajar membuat fungsi terbilang dengan javascript.
Membuat fungsi terbilang dengan JavaScript
Fungsi atau rumus terbilang adalah pengubahan angka menjadi format huruf ejaan atau yang dapat dibaca.
Misalnya dari angka 1.050.000 menjadi “satu juta lima puluh ribu“.
Oke langsung saja kita masuk ke penjelasan cara mengubah angka menjadi huruf dengan javascript berikut.
Contoh Fungsi Terbilang Dengan JavaScript
Di sarankan untuk teman-teman untuk membaca juga tutorial Javascript Dasar yang sudah dijelaskan sebelumnya di malasngoding.com.
Agar skill pondasi dasar dari javascript-nya semakin bagus.
Oke teman-teman, silahkan persiapkan file html atau php teman-teman. dan perhatikan coding berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<script> // www.malasngoding.com function terbilang(nilai) { // deklarasi variabel nilai sebagai angka matemarika // Objek Math bertujuan agar kita bisa melakukan tugas matemarika dengan javascript nilai = Math.floor(Math.abs(nilai)); // deklarasi nama angka dalam bahasa indonesia var huruf = [ '', 'Satu', 'Dua', 'Tiga', 'Empat', 'Lima', 'Enam', 'Tujuh', 'Delapan', 'Sembilan', 'Sepuluh', 'Sebelas', ]; // menyimpan nilai default untuk pembagian var bagi = 0; // deklarasi variabel penyimpanan untuk menyimpan proses rumus terbilang var penyimpanan = ''; // rumus terbilang if (nilai < 12) { penyimpanan = ' ' + huruf[nilai]; } else if (nilai < 20) { penyimpanan = terbilang(Math.floor(nilai - 10)) + ' Belas'; } else if (nilai < 100) { bagi = Math.floor(nilai / 10); penyimpanan = terbilang(bagi) + ' Puluh' + terbilang(nilai % 10); } else if (nilai < 200) { penyimpanan = ' Seratus' + terbilang(nilai - 100); } else if (nilai < 1000) { bagi = Math.floor(nilai / 100); penyimpanan = terbilang(bagi) + ' Ratus' + terbilang(nilai % 100); } else if (nilai < 2000) { penyimpanan = ' Seribu' + terbilang(nilai - 1000); } else if (nilai < 1000000) { bagi = Math.floor(nilai / 1000); penyimpanan = terbilang(bagi) + ' Ribu' + terbilang(nilai % 1000); } else if (nilai < 1000000000) { bagi = Math.floor(nilai / 1000000); penyimpanan = terbilang(bagi) + ' Juta' + terbilang(nilai % 1000000); } else if (nilai < 1000000000000) { bagi = Math.floor(nilai / 1000000000); penyimpanan = terbilang(bagi) + ' Miliar' + terbilang(nilai % 1000000000); } else if (nilai < 1000000000000000) { bagi = Math.floor(nilai / 1000000000000); penyimpanan = terbilang(nilai / 1000000000000) + ' Triliun' + terbilang(nilai % 1000000000000); } // mengambalikan nilai yang ada dalam variabel penyimpanan return penyimpanan; } // tampilkan alert dari hasil fungsi terbilang dari angka 1850000. // angka yang ingin dibuat fungsi terbilangnya bisa diisi ke dalam fungsi terbilang() alert(terbilang(1850000)); </script> |
Pada coding di atas, kita membuat sebuah function dengan nama terbilang().
Dalam rumus coding ini angka di bedah agar ketahuan apakah bagian-bagian penyebutnya puluhan, ratusan, jutaan dan lain-lain.
dan terakhir kita kembalikan nilai hasil prosesnya dengan return penyimpanan;.
Seperti yang terlihat pada contoh fungsi terbilang di atas, untuk menjalankan fungsi terbilang() ini, kita akan mencoba memanggilnya dalam fungsi alert().
alert(terbilang(1850000));
Kita coba lihat hasilnya.
Seperti yang bisa teman-teman lihat pada gambar diatas, nilai yang kita isi pada fungsi terbilang(1850000) menampilkan hasil “Satu Juta Delapan Ratus Lima Puluh Ribu“.
Mengubah Angka Menjadi Huruf Dengan Javascript
Untuk contoh yang lebih lengkap dan agak luas kita akan membuat contoh baru.
Pada contoh ini, kita akan membuat sebuah form untuk tempat pengetikan angka.
Dan pada saat form tersebut diisikan nilai angka, maka sistem akan secara otomatis menampilkan nilai angka tersebut ke dalam huruf fungsi terbilang.
malasngoding_terbilang.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>www.malasngoding.com</title> </head> <body> <h1>Membuat fungsi terbilang dengan JavaScript</h1> <h2>www.malasngoding.com</h2> <div> <label>Isi angka :</label> <input type="number" name="angka" id="angka"> <br> <br> <label>Hasil :</label> <div id="huruf"></div> </div> <script type="text/javascript"> // www.malasngoding.com function terbilang(nilai) { // deklarasi variabel nilai sebagai angka matemarika // Objek Math bertujuan agar kita bisa melakukan tugas matemarika dengan javascript nilai = Math.floor(Math.abs(nilai)); // deklarasi nama angka dalam bahasa indonesia var huruf = [ '', 'Satu', 'Dua', 'Tiga', 'Empat', 'Lima', 'Enam', 'Tujuh', 'Delapan', 'Sembilan', 'Sepuluh', 'Sebelas', ]; // menyimpan nilai default untuk pembagian var bagi = 0; // deklarasi variabel penyimpanan untuk menyimpan proses rumus terbilang var penyimpanan = ''; // rumus terbilang if (nilai < 12) { penyimpanan = ' ' + huruf[nilai]; } else if (nilai < 20) { penyimpanan = terbilang(Math.floor(nilai - 10)) + ' Belas'; } else if (nilai < 100) { bagi = Math.floor(nilai / 10); penyimpanan = terbilang(bagi) + ' Puluh' + terbilang(nilai % 10); } else if (nilai < 200) { penyimpanan = ' Seratus' + terbilang(nilai - 100); } else if (nilai < 1000) { bagi = Math.floor(nilai / 100); penyimpanan = terbilang(bagi) + ' Ratus' + terbilang(nilai % 100); } else if (nilai < 2000) { penyimpanan = ' Seribu' + terbilang(nilai - 1000); } else if (nilai < 1000000) { bagi = Math.floor(nilai / 1000); penyimpanan = terbilang(bagi) + ' Ribu' + terbilang(nilai % 1000); } else if (nilai < 1000000000) { bagi = Math.floor(nilai / 1000000); penyimpanan = terbilang(bagi) + ' Juta' + terbilang(nilai % 1000000); } else if (nilai < 1000000000000) { bagi = Math.floor(nilai / 1000000000); penyimpanan = terbilang(bagi) + ' Miliar' + terbilang(nilai % 1000000000); } else if (nilai < 1000000000000000) { bagi = Math.floor(nilai / 1000000000000); penyimpanan = terbilang(nilai / 1000000000000) + ' Triliun' + terbilang(nilai % 1000000000000); } // mengambalikan nilai yang ada dalam variabel penyimpanan return penyimpanan; } // membuat event pada saat form angka di ketik document.getElementById("angka").addEventListener("keyup", function(){ // deklarasi id angka ke variabel input var input = document.getElementById("angka").value; // menyimpan hasil terbilang ke variabel huruf; let huruf = terbilang(input); // menampilkan hasil terbilang ke id huruf document.getElementById("huruf").innerHTML = huruf; }); </script> </body> </html> |
Coba kita lihat hasilnya.
Angka yang diketikkan pada form angka akan ditampilkan dalam bentuk huruf menggunakan fungsi terbilang yang telah kita buat.
Penjelasan
Perhatikan pada contoh coding di atas. khusus nya pada bagian form.
Di sini kita membuat form inputan angka dengan memberikan id dengan nama “angka”.
|
1 |
<input type="number" name="angka" id="angka"> |
Kemudian pada element <div> kita membuat id dengan nama “huruf” sebagai tempat output dari hasil proses terbilang.
|
1 |
<code><div id="huruf"></div></code> |
Selanjutnya kita membuat event pada saat form angka diketik, maka kita perintahkan untuk menjalankan fungsi terbilang(). dan menulis hasilnya ke element div yang kita beri id “huruf“.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// membuat event pada saat form angka di ketik document.getElementById("angka").addEventListener("keyup", function(){ // deklarasi id angka ke variabel input var input = document.getElementById("angka").value; // menyimpan hasil terbilang ke variabel huruf; let huruf = terbilang(input); // menampilkan hasil terbilang ke id huruf document.getElementById("huruf").innerHTML = huruf; }); |
Demikian tutorial cara membuat fungsi terbilang pada javascript.
Semoga dapat bermanfaat untuk teman-teman yang sedang belajar javascript.
Berikut kami cantumkan demo source code fungsi terbilang javascript ini.
See the Pen
Fungsi terbilang javascript by Malas Ngoding (@malasngoding)
on CodePen.0
Silahkan baca juga tutorial javascript lainnya:
Terima kasih.
Tutorial Menarik Lainnya
Membuat Game Tebak Angka Dengan JavaScript
Membuat Show Hide Password Di HTML
Menghitung Jumlah Kata Menggunakan Javascript
Menghitung Jumlah Karakter di Javascript
