Kenapa Kita Butuh Fungsi $(document).ready() Pada Saat Menggunakan jQuery, Pada Artikel Kali Ini akan Mimin Jelaskan Fungsi $(document).ready() Pada Framework jQuery

Kenapa Kita Butuh Fungsi $(document).ready() Pada Saat Menggunakan jQuery
Kenapa Kita Butuh Fungsi $(document).ready() Pada Saat Menggunakan jQuery

Kenapa Kita Butuh Fungsi $(document).ready() Pada Saat Menggunakan jQuery

Apakah Anda Sering Melihat Kode Javascript Dengan Framework jQuery Di Awali Dengan Fungsi $(document).ready(), Kenapa Kita Butuh Fungsi Tersebut ??

Fungsi

Fungsinya Adalah Mengeksekusi Kode Saat Browser Telah Sukses Membaca Page HTML Dari Tag <html> Sampai Tag Penutup </html>, Tapi Saya Nggak Pake Framework jQuery ?? Untuk Non Framework Itu Pakai Event ‘DOMContentLoaded’

document.addEventListener('DOMContentLoaded', ...)

Lalu Apa Bedanya Sama Event $(window).on('load', ...), window.addEventListener('load', ...), dan window.onload

Bedanya Adalah Jika $(window).on('load', ...) Akan Mengeksekusi Kode Saat Satu Halaman Full Terunduh (Gambar, CSS, Javascript, dan Lain Lain) Atau Bisa Di Bilang Saat Loading Bar Selesai, Maka $(window).on('load', ...) Akan Mengeksekusi Kodenya

Kenapa Butuh Fungsi Ini

Sebelum Mengarah Ke ‘Kenapa Butuh Fungsi Ini’, Akan Mimin Beri Contoh

Mimin Punya Kode HTML Seperti Ini

<!doctype html>
<html>
    <head>
        <title>HTML Test</title>
        <script type="text/javascript">
        console.log('JS di tag head');
        </script>
    </head>
    <body>
        <script type="text/javascript">
        console.log('JS di tag body');
        </script>
    </body>
</html>

Lalu Lihat Di Console Log, Maka Kode Akan Di Eksekusi Langsung Oleh Browser

contoh javascript

Ingat, Browser Itu Membaca Kode Dari Atas Ke Bawah Dan Dari Kiri Ke Kanan

Lalu Kita Tambahkan Kode Event DOMContentLoaded, Menjadi Seperti Ini

<!doctype html>
    <html>
        <head>
            <title>HTML Test</title>
            <script type="text/javascript">
            console.log('JS di tag head');
            document.addEventListener('DOMContentLoaded', function(){ // Fungsi Ini Sama Saja Dengan $(document).ready()
            console.log('JS di tag head di dalam DOMContentLoaded');
            });
            </script>
        </head>
        <body>
            <script type="text/javascript">
            console.log('JS di tag body');
            document.addEventListener('DOMContentLoaded', function(){ // Fungsi Ini Sama Saja Dengan $(document).ready()
            console.log('JS di tag body di dalam DOMContentLoaded');
            });
        </script>
    </body>
</html>

Lalu Lihat Kembali Console Log, Maka Akan Seperti Gambar Di Bawah Ini

contoh javascript

Kode Yang Ada Di Fungsi DOMContentLoaded Akan Terabaikan Terlebih Dahulu Sampai Event DOMContentLoaded Tertriggerd

Untuk Melihat Kapan Event DOMContentLoaded Tertriggerd Silahkan (Mimin Di Sini Menggunakan Chrome) Ke Menu Inspect, Lalu Pilih Tab Network Dan Lihat Di Bagian Bawah Akan Terlihat Waktu Di Mana Event DOMContentLoaded dan Load Tertriggerd

contoh javascript

Nah Sekarang Kita Lihat Ke Poin Kenapa Butuh Fungsi Ini
Misalnya Kita Ingin Menghitung Suatu Element Di Tag Body Tapi Script Kita Ada Di Atas Tag Body Atau Sebelum Adanya Element Tersebut, Contohnya Seperti Kita Punya HTML Seperti Ini

<!doctype html>
<html>
    <head>
        <title>HTML Test</title>
        <script type="text/javascript">
            var div = document.getElementsByTagName('div').length;
            console.log('JS di tag head Tag DIV ada '+div);
        </script>
    </head>
    <body>
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
        <script type="text/javascript">
            var div = document.getElementsByTagName('div').length;
            console.log('JS di tag body Tag DIV ada '+div);
        </script>
     </body>
</html>

Lalu Kembali Lagi Ke Console Log, Maka JS di tag head Tidak Bisa Mengetahui Berapa Element Div Di Dalam Tag Body, Sementara JS di tag body Bisa Mengetahui Berapa Element Div Di Tag Body Di Karenakan Waktu Kode di Eksekusi, Browser Sudah Mendapatkan Element Div

contoh javascript

Pada Kasus Seperti Ini Lah Kita Membutuhkan Fungsi $(document).ready()

Dan Jika Kita Masukan Kode Ke Dalam Event DOMContentLoaded Seperti Kode Di Bawah Ini

document.addEventListener('DOMContentLoaded', function(){ // Fungsi Ini Sama Saja Dengan $(document).ready()
    var div = document.getElementsByTagName('div').length;
    console.log('JS di tag head Tag DIV ada '+div);
});

Maka Hasilnya Console Log Akan Seperti Ini

contoh javascript

Dan Bisa Di Lihat Waktu Eksekusinya Pun Berbeda

Kesimpulan

Pada jQuery $(document).ready() Dan Pada Non Framework document.addEventListener('DOMContentLoaded', ...) Fungsi Ini Sebaiknya Di Gunakan Untuk Penggunaan Manipulasi DOM / Element Jika Script Berada Di Atas Tag Head Atau Script Berada Di Tengah Tengah Body, Dan Jangan Gunakan Fungsi Ini Jika Script Berada Di Bawah Body / Sebelum Tag Penutup </body> Karena Itu Akan Sia Sia

Referensi