JScriptKatana

Apa Itu “javascript:void(0)”? Panduan Lengkap tentang Makna, Penggunaan, dan Praktik Terbaik

Fungsi Utilitas Lainnya
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Pengantar – Apa Itu “javascript:void(0)”?

Saat mempelajari JavaScript, Anda mungkin menemui notasi “javascript:void(0)” dalam kode. Pada pandangan pertama, ini bisa sulit dipahami. Namun, ini adalah salah satu teknik berguna untuk mengontrol perilaku halaman dan mengelola penanganan event. Artikel ini menjelaskan secara jelas arti, tujuan, dan penggunaan “javascript:void(0)”. Ini juga membahas pencegahan penting dan alternatif modern.

1-1. Pertanyaan Umum: Apa Arti “javascript:void(0)”?

“javascript:void(0)” adalah notasi yang digunakan untuk mencegah perilaku default dari link atau tombol dan sebaliknya menjalankan JavaScript kustom. Biasanya, tag HTML <a> menavigasi ke halaman tujuan saat diklik. Tapi ketika Anda ingin link berperilaku seperti tombol tanpa menavigasi ke mana pun, “javascript:void(0)” menjadi berguna. Contoh:

<a href="javascript:void(0);">Click</a>

Mengklik link ini tidak melakukan apa-apa dengan sendirinya. Anda bisa melampirkan penanganan event JavaScript sendiri sebagai gantinya.

1-2. Tantangan Pembaca dan Tujuan Artikel

Saat menambahkan penanganan event kustom ke halaman web, ada banyak cara untuk mengontrol link dan tombol. Namun, “javascript:void(0)” bisa membingungkan bagi pemula dan mungkin memengaruhi SEO atau aksesibilitas jika disalahgunakan. Artikel ini membahas topik-topik berikut agar Anda bisa memahami dan menggunakannya dengan benar:

  1. Konsep dasar dan implementasi “javascript:void(0)”
  2. Pencegahan dan kerugian
  3. Alternatif yang lebih aman dan modern

Dengan pengetahuan ini, Anda akan bisa membangun aplikasi web yang lebih modern dan efisien.

2. Konsep Dasar “javascript:void(0)”

“javascript:void(0)” adalah jenis ekspresi JavaScript yang digunakan terutama untuk menonaktifkan perilaku default dari link atau tombol. Bagian ini menjelaskan bagaimana operator void bekerja dan apa arti “void(0)” sebenarnya.

2-1. Apa Arti Operator “void”

Di JavaScript, operator “void” tidak mengembalikan apa-apa (undefined). Biasanya, ekspresi JavaScript mengembalikan nilai, tapi “void” memaksa hasilnya menjadi undefined. Ini terutama digunakan untuk mengabaikan hasil evaluasi sambil melakukan efek samping. Contoh dasar:

console.log(void(0)); // Output: undefined

Ini mengonfirmasi bahwa void(0) mengembalikan undefined.

2-2. Apa yang Diwakili “void(0)”

“void(0)” mewakili “tidak melakukan apa-apa”. Ini dievaluasi menjadi undefined, mencegah navigasi halaman sambil mengizinkan perilaku klik kustom Anda. Contoh:

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

Link ini tidak menavigasi tapi memicu alert.

2-3. Mengapa “javascript:void(0)” Digunakan

Alasan utama meliputi:

  1. Nonaktifkan navigasi link Cegah reload halaman sambil menangani event klik kustom.
  2. Gunakan sebagai link mati Berguna sebagai placeholder selama pengembangan.
  3. Sederhana dan mudah diimplementasikan Sintaks ramah pemula.

3. Contoh Penggunaan dan Implementasi

Bagian ini menjelaskan contoh penggunaan dunia nyata “javascript:void(0)” dari snippet dasar hingga skenario terapan.

3-1. Contoh Kode Dasar

<a href="javascript:void(0);">Link</a>

Link ini tidak melakukan apa-apa saat diklik.

3-2. Menyesuaikan Event Klik

Contoh 1: Tampilkan Alert

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

3-3. Contoh Berdasarkan Skenario

Memicu Jendela Modal HTML:

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript:

document.getElementById('openModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'none';
});

4. Manfaat dan Kerugian – Apakah Anda Benar-Benar Harus Menggunakannya?

“javascript:void(0)” banyak digunakan, tetapi memiliki beberapa kekurangan. Bagian ini menjelaskan keuntungan dan peringatan.

4-1. Manfaat

  1. Mencegah navigasi default
  2. Sintaks sederhana dan intuitif
  3. Berguna untuk tautan placeholder

4-2. Kekurangan

  1. Dampak SEO Mesin pencari tidak dapat merayapi konten href.
  2. Masalah aksesibilitas Pembaca layar dan navigasi keyboard mungkin tidak berfungsi dengan baik.

4-3. Kapan Menggunakan dan Kapan Menghindari

Kasus Penggunaan yang Direkomendasikan:

  • Berperilaku seperti tombol tetapi diimplementasikan sebagai tautan
  • Tautan mati sementara

Hindari Saat:

  • Anda membutuhkan tautan yang ramah SEO
  • Aksesibilitas penting

5. Alternatif dan Praktik Terbaik Modern

Meskipun “javascript:void(0)” nyaman, pendekatan yang lebih modern dan aman ada.

5-1. Menggunakan event.preventDefault()

Konsep Metode ini membatalkan perilaku default seperti navigasi tautan atau pengiriman formulir. Contoh HTML:

<a href="#" id="customLink">Link</a>

JavaScript:

document.getElementById('customLink').addEventListener('click', function(event) {
  event.preventDefault();
  alert('Custom event executed!');
});

5-2. Menggunakan Tag <button>

HTML5 merekomendasikan menggunakan elemen <button> saat mengimplementasikan perilaku seperti tombol. HTML:

<button id="actionButton">Click</button>

JavaScript:

document.getElementById('actionButton').addEventListener('click', function() {
  alert('Button clicked!');
});

5-3. Contoh Ramah Aksesibilitas & SEO

HTML:

<a href="#" id="accessibleLink" tabindex="0">Click</a>

JavaScript:

document.getElementById('accessibleLink').addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    alert('Executed with Enter key!');
  }
});

6. Contoh Kode berdasarkan Kasus Penggunaan

6-1. Membuat Menu Navigasi

HTML:

<a href="javascript:void(0);" id="menuToggle">Menu</a>
<ul id="menu" style="display: none;">
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

JavaScript:

document.getElementById('menuToggle').addEventListener('click', function() {
  const menu = document.getElementById('menu');
  menu.style.display = (menu.style.display === 'none') ? 'block' : 'none';
});

6-2. Pemicu Jendela Modal

HTML:

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript:

const modal = document.getElementById('modal');
document.getElementById('openModal').addEventListener('click', function() {
  modal.style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  modal.style.display = 'none';
});

7. Ringkasan – Menggunakan “javascript:void(0)” dan Opsi Masa Depan

7-1. Poin Utama

  1. Konsep dasar : Nonaktifkan perilaku tautan default dan jalankan logika kustom.
  2. Peringatan dan alternatif : Gunakan event.preventDefault() atau <button> untuk SEO dan aksesibilitas.
  3. Contoh praktis : Menu navigasi, pemicu modal, dan lainnya.

7-2. Rekomendasi untuk Pengembangan Modern

Meskipun “javascript:void(0)” masih digunakan, pengembangan modern memprioritaskan SEO dan kegunaan. Pendekatan yang direkomendasikan:

  • Gunakan “javascript:void(0)” untuk prototipe cepat atau proyek sangat kecil.
  • Gunakan event.preventDefault() atau <button> di lingkungan produksi.

7-3. Pikiran Akhir

Menggunakan teknik yang diperkenalkan di sini, implementasikan pengkodean yang mempertimbangkan SEO dan pengalaman pengguna.

広告