Apa Itu Vanilla JS

Apa Itu Vanilla JS?

Vanilla JS adalah istilah yang digunakan untuk menyebut JavaScript murni, tanpa menggunakan library tambahan seperti jQuery, React, atau Vue.

Dengan kata lain, kamu menggunakan JavaScript langsung dari browser tanpa framework eksternal.

Kenapa Disebut Vanilla?

Istilah “vanilla” di sini artinya “polos” atau “asli”. Jadi, Vanilla JS berarti JavaScript asli tanpa tambahan rasa (library atau framework).

Keunggulan Vanilla JS

💨 Ringan: Tidak perlu mengimpor library tambahan, lebih cepat dimuat.
🧠 Didukung browser modern: API JavaScript saat ini sudah sangat lengkap.
⚡ Cepat dan efisien: Tidak ada overhead dari library eksternal.
🧩 Fleksibel: Bisa digabungkan dengan framework bila diperlukan.

Contoh Kode Vanilla JS

1. Mengubah Isi Teks

<h1 id="judul">Halo Dunia!</h1>
<button onclick="ubahTeks()">Klik Saya</button>

<script>
function ubahTeks() {
  document.getElementById('judul').textContent = 'Teks Berubah!';
}
</script>

2. Menangani Event

document.querySelector('#tombol').addEventListener('click', () => {
  alert('Tombol diklik!');
});

3. Menggunakan Fetch (AJAX)

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

Perbandingan Vanilla JS vs jQuery

Fungsi	Vanilla JS	jQuery
Seleksi Elemen	document.querySelector(‘#id’)	$(‘#id’)
Event Listener	element.addEventListener(‘click’, …)	$(‘#id’).click(…)
AJAX	fetch(‘url’)	$.ajax({ url: ‘url’ })
Manipulasi Class	element.classList.add(‘active’)	$(‘#id’).addClass(‘active’)

Kapan Sebaiknya Menggunakan Vanilla JS?

✅ Saat kamu hanya membutuhkan manipulasi DOM atau event sederhana
✅ Jika ingin website cepat dan tidak berat
✅ Untuk belajar dan memahami JavaScript dari dasar
✅ Untuk membuat project kecil atau menengah tanpa ketergantungan

Kesimpulan

Vanilla JS adalah fondasi dari semua library JavaScript. Menguasainya akan membuatmu lebih fleksibel dalam membangun website, baik sederhana maupun kompleks.

Browser modern saat ini sudah sangat mendukung JavaScript murni, jadi kamu tidak perlu takut untuk menggunakan Vanilla JS.

Implementasi Vanilla JS dengan Bootstrap Modal dan DataTables

Berikut adalah contoh bagaimana kamu bisa menggunakan Vanilla JS untuk memanipulasi Bootstrap Modal dan DataTables tanpa menggunakan jQuery.

1. Contoh Bootstrap Modal dengan Vanilla JS

Bootstrap 5 sudah tidak memerlukan jQuery, jadi kamu bisa memicu modal dengan JavaScript murni:

<!-- Tombol Trigger Modal -->
<button id="openModalBtn" class="btn btn-primary">Buka Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Contoh Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
      </div>
      <div class="modal-body">
        <p>Ini adalah isi modal menggunakan Vanilla JS!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

<!-- Script Bootstrap Bundle & Vanilla JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
  const modalElement = document.getElementById('myModal');
  const myModal = new bootstrap.Modal(modalElement);
  document.getElementById('openModalBtn').addEventListener('click', () => {
    myModal.show();
  });
</script>

2. Contoh DataTables dengan Vanilla JS

Sejak versi 2.x, DataTables sudah bisa digunakan tanpa jQuery. Cukup import CSS & JS lalu panggil dengan JavaScript biasa.

<!-- DataTables Stylesheet -->
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.7/css/dataTables.dataTables.min.css">

<!-- Tabel -->
<table id="myTable" class="display">
  <thead>
    <tr>
      <th>Nama</th>
      <th>Email</th>
      <th>Umur</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Ani</td><td>ani@example.com</td><td>25</td></tr>
    <tr><td>Budi</td><td>budi@example.com</td><td>30</td></tr>
    <tr><td>Citra</td><td>citra@example.com</td><td>22</td></tr>
  </tbody>
</table>

<!-- DataTables JS -->
<script src="https://cdn.datatables.net/2.0.7/js/dataTables.min.js"></script>
<script>
  new DataTable('#myTable');
</script>

Kesimpulan

Dengan Bootstrap 5 dan DataTables 2.x, kamu bisa membangun UI interaktif dan dinamis hanya dengan Vanilla JS, tanpa jQuery.

Bootstrap Modal: Bisa dipanggil dengan new bootstrap.Modal()
DataTables: Bisa dipanggil dengan new DataTable('#table-id')

Hasilnya lebih ringan, lebih cepat, dan modern!

Selamat belajar dan menulis kode tanpa beban library tambahan! 🚀