contoh Fungsi di Javascript

Bagus banget! 🎯 Kita lanjut ke contoh function yang digunakan dengan event di JavaScript, seperti klik tombol (click event) — ini salah satu cara paling umum untuk berinteraksi dengan pengguna di web.

⚙️ 1. Konsep Dasar Event di JavaScript

Event adalah kejadian yang terjadi di halaman web, seperti:

• klik tombol ➡️ click
• ubah input ➡️ change
• tekan tombol keyboard ➡️ keydown
• halaman selesai dimuat ➡️ load

Kita bisa menjalankan fungsi (function) ketika event itu terjadi.

💡 Contoh 1 — Event onclick di HTML

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Event di JavaScript</title>
</head>
<body>
  <h2>Contoh Klik Tombol</h2>

  <button onclick="tampilkanPesan()">Klik Saya!</button>

  <script>
    function tampilkanPesan() {
      alert("Halo! Kamu baru saja menekan tombol.");
    }
  </script>
</body>
</html>

🧠 Penjelasan:

• Tombol <button> punya atribut onclick.
• Saat tombol diklik, fungsi tampilkanPesan() dijalankan.
• Fungsi itu memunculkan pop-up pesan (alert).

💡 Contoh 2 — Menggunakan addEventListener() (Cara Modern)

<!DOCTYPE html>
<html>
<head>
  <title>Event Listener Example</title>
</head>
<body>
  <h2>Tambah Angka</h2>

  <button id="tombolTambah">Tambah</button>
  <p id="hasil">Hasil: 0</p>

  <script>
    let nilai = 0;

    // Ambil elemen tombol dan teks hasil
    const tombol = document.getElementById("tombolTambah");
    const teksHasil = document.getElementById("hasil");

    // Tambahkan event listener untuk tombol
    tombol.addEventListener("click", function() {
      nilai++;
      teksHasil.textContent = "Hasil: " + nilai;
    });
  </script>
</body>
</html>

🧠 Penjelasan:

• addEventListener("click", function() {...}) → mendengarkan event klik.
• Setiap kali tombol diklik, variabel nilai bertambah 1.
• Lalu teks <p> diperbarui dengan hasil baru.

💡 Contoh 3 — Event Input (mengetik di field)

<!DOCTYPE html>
<html>
<head>
  <title>Event Input</title>
</head>
<body>
  <h2>Menampilkan Nama</h2>

  <input type="text" id="namaInput" placeholder="Ketik namamu..." />
  <p id="pesan"></p>

  <script>
    const input = document.getElementById("namaInput");
    const pesan = document.getElementById("pesan");

    input.addEventListener("input", function() {
      pesan.textContent = "Halo, " + input.value + "!";
    });
  </script>
</body>
</html>

🧠 Penjelasan:

• Event input berjalan setiap kali pengguna mengetik sesuatu.
• Fungsi menampilkan sapaan sesuai teks yang diketik.

💬 Kesimpulan

Apakah kamu ingin saya lanjutkan dengan contoh event submit pada form (misalnya validasi form sebelum dikirim) juga? Itu bagus untuk latihan real di web.