cara memanggil fungsi javascript pada html

Beberapa kali, saat membuat aplikasi web, kamu akan perlu memanggil fungsi JavaScript dari HTML. Dalam artikel singkat ini, kita akan membahas dua metode utama yang bisa kamu gunakan.

Metode 1: Menggunakan Tag Script

Pada metode ini, kamu menggunakan tag script HTML untuk memasukkan kode JavaScript secara langsung ke dalam halaman HTML.

Berikut adalah langkah-langkahnya:

Pertama, buatlah bagian script pada halaman HTML kamu menggunakan tag <script>.
Selanjutnya, tulis fungsi JavaScript yang ingin kamu panggil di dalam tag script tersebut. Misalnya, mari kita buat fungsi sederhana yang menampilkan pesan “Halo Dunia!” ketika dipanggil.
Panggil fungsi tersebut menggunakan atribut HTML seperti onclick, onload, atau yang lainnya.

Berikut contoh kode nya:

<html>
  <body>
    <button onclick="showMessage()">Klik Saya!</button>
    <script>
      function showMessage() {
        alert("Halo Dunia!");
      }
    </script>
  </body>
</html>

Dalam contoh di atas, ketika kamu mengklik tombol, fungsi showMessage() akan dipanggil dan pesan “Halo Dunia!” akan ditampilkan.

Metode 2: Menghubungkan File JavaScript Externa

Jika kamu memiliki banyak kode JavaScript atau jika kamu ingin menggunakan kode JavaScript yang sama di banyak halaman, lebih baik untuk memasukkannya ke dalam file terpisah dan kemudian menghubungkannya ke halaman HTML kamu.

Berikut adalah langkah-langkahnya:

Pertama, buatlah file JavaScript (.js) dan tulis fungsi yang kamu inginkan di sana.
Lalu, hubungkan file JavaScript tersebut ke halaman HTML kamu menggunakan tag <script> dan atribut src.

Berikut contoh kode nya:

<html>
  <body>
    <button onclick="showMessage()">Klik Saya!</button>
    <script src="myscripts.js"></script>
  </body>
</html>

Dan di dalam file myscripts.js, kamu menulis:

function showMessage() {
  alert("Halo Dunia!");
}

Sama seperti sebelumnya, ketika kamu mengklik tombol, fungsi showMessage() akan dipanggil dan pesan “Halo Dunia!” akan ditampilkan.

Itulah cara memanggil fungsi JavaScript dari HTML. Dengan metode-metode ini, sekarang kamu dapat dengan mudah mengintegrasikan JavaScript ke dalam proyek HTML kamu. Selamat mencoba!

CARA MEMANGGIL FUNGSI JAVASCRIPT PADA HTML

Berikut bagaimana cara memanggil fungsi Javascript pada file HTML kamu

Metode 1: Menggunakan Tag Script

Metode 2: Menghubungkan File JavaScript Externa

Kursus online Javascript