JavaScript Dasar untuk Website: DOM, Event, Validasi Form

JavaScript • 2026-01-12

Panduan JavaScript untuk website: manipulasi DOM, event listener, validasi form, dan contoh interaksi sederhana.

JavaScript membuat website “hidup”: tombol bekerja, form divalidasi, animasi berjalan, hingga mengambil data dari API.

Dasar JavaScript untuk website

Taruh script di akhir <body> atau pakai defer supaya halaman tidak lambat.

<script src="js/app.js" defer></script>

DOM: ambil & ubah elemen

const title = document.querySelector("h1");
title.textContent = "Judul Baru";

Event: klik, submit, input

document.querySelector("#btn").addEventListener("click", () => {
  alert("Halo!");
});

Contoh validasi form + kirim WhatsApp

Contoh: form diubah menjadi pesan WhatsApp. Ganti nomor WA sesuai bisnis kamu.

const form = document.querySelector("#contactForm");
form?.addEventListener("submit", (e) => {
  e.preventDefault();
  const name = document.querySelector("#name").value.trim();
  const message = document.querySelector("#message").value.trim();

  if (!name || !message) {
    alert("Nama dan pesan wajib diisi.");
    return;
  }

  const text = `Halo, saya ${name}.\n\n${message}`;
  const wa = "6281234567890"; // ganti nomor
  const url = `https://wa.me/${wa}?text=${encodeURIComponent(text)}`;
  window.open(url, "_blank");
});

Catatan: Jangan taruh data sensitif di URL. Untuk kebutuhan serius (order, pembayaran), gunakan backend.

Fetch API (ambil data)

async function loadPosts() {
  const res = await fetch("/data/posts.json");
  const posts = await res.json();
  console.log(posts);
}

Best practice dan keamanan dasar

Selalu escape atau sanitasi data sebelum dimasukkan ke HTML untuk mencegah XSS.
Pisahkan file JS per fitur (mis. form.js, analytics.js) agar mudah dirawat.
Gunakan event delegation bila elemen dinamis.

Langkah berikutnya

Kalau kamu butuh penyimpanan data (order, member, dll), lanjut ke PHP/SQL atau Laravel. Untuk step lengkap, baca Tutorial Membuat Website dari Nol.

Butuh bantuan bikin website? Cek layanan dan konsultasi gratis di halaman kontak.