Cara Memanggil Fungsi JavaScript dari File Lain dalam HTML
Dalam pengembangan web, seringkali kita perlu memisahkan kode JavaScript dari file HTML untuk meningkatkan keterbacaan dan organisasi kode. Namun, bagaimana cara memanggil fungsi JavaScript yang berada di file terpisah dari file HTML? Artikel ini akan membahas cara memanggil fungsi JavaScript dari file lain dalam HTML.
1. Buat File JavaScript Terpisah
Pertama, buat file JavaScript baru (misalnya, myfunctions.js) dan tulis fungsi yang ingin Anda panggil dalam file ini. Misalnya:
// myfunctions.js
function sayHello() {
alert("Hello World!");
}
2. Sertakan File JavaScript dalam File HTML
Selanjutnya, sertakan file JavaScript yang berisi fungsi Anda ke dalam file HTML menggunakan tag <script>:
Memanggil Fungsi dari File Lain
Perhatikan bahwa tag <script> ditempatkan di bagian akhir body HTML. Hal ini memastikan bahwa file JavaScript di-load dan dijalankan setelah seluruh HTML di-render.
3. Panggil Fungsi dalam File HTML
Sekarang, Anda dapat memanggil fungsi yang ada di file JavaScript dengan menggunakan atribut onclick pada elemen HTML. Dalam contoh di atas, fungsi sayHello() akan dipanggil ketika tombol "Panggil Fungsi" di-klik.
Alternatif: Memanggil Fungsi Menggunakan Event Listener
Anda juga dapat memanggil fungsi JavaScript dengan menggunakan event listener. Berikut contohnya:
Memanggil Fungsi dari File Lain
Kode di atas menambahkan event listener click ke tombol dengan id myButton. Ketika tombol di-klik, fungsi sayHello() akan dipanggil.
Kesimpulan
Memanggil fungsi JavaScript dari file lain dalam HTML adalah teknik yang sangat berguna untuk mengorganisir kode dan meningkatkan keterbacaan. Dengan menggunakan metode yang dijelaskan di atas, Anda dapat dengan mudah mengakses dan menggunakan fungsi yang ada di file terpisah dalam halaman HTML Anda.