Cara menggunakan CALL-BACKS pada JavaScript

Desember 19, 2016 Pemprograman 3,307 Views

Table of Contents Show

Simple Javascript Autocomplete [Bagian 2]
Pada Javascript Apa yang dimaksud dengan callback?
Kapan kita menggunakan asynchronous?
Apa itu callback dalam film?
Apa Itu Promise di Javascript?

Bagi yang terbiasa menggunakan javascript sebagai client site sudah sering berhubungan dengan yang namanya Callback, Callback itu apa sih? yaitu fungsi yang dipanggil setelah sebuah fungsi dieksekusi, biasanya terdapat parameter yang dikirimkan pada fungsi Callback ini. Kita akan membuat fungsi sederhana untuk memfilter inputan pada form registrasi, fungsi ini dapat kalian terapkan juga pada project yang kalian buat.

Pada fungsi Callback ini akan menerima respon dari fungsi utama yaitu berupa object value hasil dari registrasi member, mari kita buat skenario penggunaan fungsi callback pada artikel kali ini

1. Member mengisi form Registrasi.

2. Member mengeksekusi dengan klik tombol Submit (menjalankan fungsi regMember).

3. Pada fungsi regMember akan menangkap isi dari form registrasi sekaligus memanggil fungsi callback untuk memfilter aturan pengisian Form.

4. Pada fungsi Callback akan mengembalikan semua object yang dikiriman dari fungsi regMember.

5. Fungsi Callback menghitung bisa object yag dikirim, bila lebih dari 0 akan menampilkan pesan.

Berikut susunan codenya.

<html>
    <head>
        <title>Javascript callback</title>
    </head>
    <body>
        <form action=”” method=”post” id=”frm_register”>
            <table cellpadding=”1″ cellspacing=”2″>
                <tbody>
                    <tr>
                        <td>Username</td>
                        <td>:</td>
                        <td><input type=”text” name=”username” id=”username” /></td>
                    </tr>
                    <tr>
                        <td>Password</td>
                        <td>:</td>
                        <td><input type=”password” name=”password” id=”password” /></td>
                    </tr>
                    <tr>
                        <td>Konfirmasi password</td>
                        <td>:</td>
                        <td><input type=”password” name=”cpassword” id=”cpassword” /></td>
                    </tr>
                    <tr>
                        <td>Email</td>
                        <td>:</td>
                        <td><input type=”text” name=”email” id=”email” /></td>
                    </tr>
                    <tr>
                        <td colspan=”3″>
                            <input type=”button” name=”submit” id=”submit” value=”Kirim” onclick=”regMember();” />
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
    </body>
</html>

Diatas adalah kode HTML untuk registrasi, untuk kode javascriptnya sebagai berikut :

<script type=”text/javascript”>
    function cekMail(mail){ // cek email validasi
        var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
        return filter.test(mail);
    }
        function cekInput(arrForm, callback){
        if(arrForm[‘username’] != “”){ // cek username kosong atau tidak
            if(arrForm[‘username’].length >= 5){ // cek total karakter username tidak boleh kurang dari 5
                if(arrForm[‘password’] != “”){ // password tidak boleh kosong
                    if(arrForm[‘password’].length >= 6){ // cek total karakter password tidak boleh kurang dari 6
                        if(arrForm[‘password’] == arrForm[‘cpassword’]){ // cek password dan konfirmasi password harus sama
                            if(arrForm[‘email’] != “” && cekMail(arrForm[‘email’]) == true){ // email tidak boleh kosong dan cek validasi email
                                if (typeof(callback) == “function”) { // cek apakah callback bertype function
                                    callback(arrForm); // panggil fungsi callback
                                }
                            }else{
                                alert(“Email tidak boleh kosong atau Email tidak Valid.”);
                            }
                        }else{
                            alert(“Password tidak sama.”);
                        }
                    }else{
                        alert(“Password minimal 6 karakter”);
                    }
                }else{
                    alert(“Password tidak boleh kosong”);
                }
            }else{
                alert(“Username minimal 5 Karakter”);
            }
        }else{
            alert(“Username tidak boleh kosong”);
        }
                return false;
    }
        function regMember(){
        var obj = new Object(); // buat variabel object

                var uname = document.getElementById(“username”).value;
        var pass = document.getElementById(“password”).value;
        var cpass = document.getElementById(“cpassword”).value;
        var email = document.getElementById(“email”).value;
                obj.username = uname;
        obj.password = pass;
        obj.cpassword = cpass;
        obj.email   = email;
                cekInput(obj, function(data){ // panggil fungsi cekInput
            if(Object.keys(data).length > 0){ // respon dari callback berupa object data
                alert(“validasi berhasil”);
            }
        });
    }
</script>

Saya menggunakan Native javascript untuk script diatas untuk penerapan pada framework seperti jQuery atau yang lain atau anda ingin menggunakan nodeJS tidak jauh berbeda penerapannya jadi tidak perlu pusing untuk belajar lagi bila ingin menerapkannya pada framework javascript.

Semoga bermanfaat

Check Also

Simple Javascript Autocomplete [Bagian 2]

Artikel ini merupakan kelanjutan dari Artikel sebelumnya Simple javascript Autocomplete dimana terdapat beberapa bagian yang …

Pada Javascript Apa yang dimaksud dengan callback?

Callback sebenarnya adalah function bedanya dengan function pada umumnya adalah di cara eksekusinya. Jika function pada umumnya di eksekusi berurutan dari atas ke bawah maka callback di eksekusi pada point tertentu, itu sebabnya di sebut callback. Callback disebut juga dengan high-order function.

Kapan kita menggunakan asynchronous?

Proses asynchronous sering digunakan untuk komunikasi data, karena data menjadi bagian inti dari sebuah aplikasi maka konsep asynchronous sangat penting untuk dipahami.

Apa itu callback dalam film?

Callback. Audisi lanjutan untuk aktor yang telah melakukan audisi sebelumnya.

Apa Itu Promise di Javascript?

Sooo jadi promise adalah Sebuah mekanisme baru pada fitur javascript / ES6 yang merepresentasikan sebuah object request pengolahan data yang dilakukan secara asynchronous seperti ajax, dan promise ini mewakili sebuah operasi yang belum selesai, tetapi diharapkan di masa mendatang.