بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

Kumpulan Materi Management Informatika untuk SMA Islam Lembah Arafah

dan Kumpulan Hasil karya Siswa Lembah Arafah


Kategori javascript    
  • 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

    Event Kapan Terjadi Contoh Penggunaan
    click Saat elemen diklik Tombol, link, gambar
    input Saat isi input berubah Form teks
    change Saat nilai input berubah (dan keluar dari fokus) Dropdown, checkbox
    submit Saat form dikirim Validasi form
    keydown Saat tombol keyboard ditekan Game, pencarian

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