Cara Memanggil Fungsi JavaScript di HTML dari File JS
Dalam pengembangan web, seringkali kita perlu memisahkan kode JavaScript dari kode HTML untuk meningkatkan keterbacaan, organisasi, dan modularitas. Salah satu cara untuk mencapai ini adalah dengan menempatkan fungsi JavaScript dalam file terpisah (.js) dan memanggilnya dari HTML. Berikut cara melakukannya:
1. Membuat File JavaScript (.js)
Buat file JavaScript baru (misalnya, script.js) dan tulis fungsi JavaScript yang ingin Anda panggil dalam file tersebut.
// script.js
function sayHello() {
alert("Hello World!");
}
2. Menyertakan File JavaScript dalam HTML
Tambahkan tag <script> ke dalam file HTML Anda untuk menyertakan file JavaScript yang dibuat. Pastikan tag <script> ditempatkan di dalam tag <head> atau <body> HTML.
Memanggil Fungsi JavaScript
3. Memanggil Fungsi JavaScript dari HTML
Anda dapat memanggil fungsi JavaScript dari HTML dengan menggunakan atribut onclick pada elemen HTML, seperti tombol. Di contoh di atas, tombol dengan teks "Panggil Fungsi" akan menjalankan fungsi sayHello() saat diklik.
Cara Lain Memanggil Fungsi JavaScript:
a. Menggunakan Event Listener:
Anda juga dapat memanggil fungsi JavaScript menggunakan Event Listener. Contohnya, jika Anda ingin memanggil fungsi saat halaman dimuat, gunakan event load pada objek window.
// script.js
function sayHello() {
alert("Hello World!");
}
window.onload = sayHello;
b. Menggunakan Tag <script> Inline:
Anda dapat meletakkan kode JavaScript langsung di dalam tag <script> dalam HTML. Namun, ini kurang disarankan karena membuat kode HTML menjadi lebih kompleks.
Memanggil Fungsi JavaScript
Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah memisahkan kode JavaScript dari kode HTML dan memanggil fungsi JavaScript dari HTML. Ini membantu Anda membuat kode yang lebih terstruktur, mudah dipelihara, dan mudah di-debug.