A Href Onclick Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

25

Share

Memahami a href dan onclick dalam JavaScript

a href dan onclick adalah dua atribut HTML yang bekerja bersama untuk memberikan interaksi yang dinamis pada halaman web.

a href (hypertext reference) digunakan untuk mendefinisikan tautan ke sumber daya lain, seperti halaman web lain, file, atau bahkan bagian lain dari halaman yang sama.

onclick adalah atribut HTML yang memungkinkan Anda untuk menjalankan kode JavaScript ketika elemen HTML diklik.

Berikut adalah contoh sederhana bagaimana a href dan onclick digunakan bersama:

Klik di sini

Kode di atas membuat sebuah tautan dengan teks "Klik di sini" yang mengarah ke situs https://www.example.com. Ketika tautan tersebut diklik, fungsi JavaScript myFunction() akan dijalankan.

Berikut adalah penjelasan lebih detail mengenai kedua atribut:

1. a href

a href digunakan untuk menentukan tujuan tautan. Ini dapat berupa:

• URL absolut: Alamat web lengkap, seperti https://www.example.com.
• URL relatif: Alamat yang relatif terhadap lokasi halaman web saat ini, seperti /about.html atau ../index.html.
• URL dengan fragmen: Menunjukkan bagian tertentu dalam halaman yang sama, seperti #contact.

2. onclick

onclick adalah atribut yang memungkinkan Anda menjalankan kode JavaScript saat sebuah elemen diklik.

Contoh Penggunaan:

• Menjalankan Fungsi JavaScript:

  Klik untuk melihat pesan
  

  Kode ini akan menjalankan fungsi myFunction() ketika tautan diklik.

• Mencegah Tautan Diikuti:

  Jangan ikuti tautan ini
  

  Kode ini akan mencegah tautan mengikuti URL yang ditentukan dan mencegah halaman untuk di-reload.

• Mencegah Tautan Diikuti dan Melakukan Tindakan Lainnya:

  Klik di sini
  

  Kode ini akan menampilkan pesan pop-up "Anda telah mengklik tautan!" dan mencegah tautan mengikuti URL yang ditentukan.

Penting:

• Hindari menggunakan inline JavaScript (JavaScript langsung dalam tag HTML). Sebaiknya tempatkan kode JavaScript dalam file .js terpisah untuk meningkatkan struktur dan maintainability.
• Gunakan addEventListener untuk memanipulasi event klik secara lebih terstruktur.

Contoh dengan addEventListener:

Klik di sini

Kode di atas menggunakan addEventListener untuk menambahkan listener ke event klik pada elemen a dengan id myLink. Ketika tautan diklik, fungsi anonim akan dijalankan, menampilkan pesan pop-up dan mencegah tautan mengikuti URL yang ditentukan.

Dengan memahami cara menggunakan a href dan onclick, Anda dapat membuat halaman web Anda lebih interaktif dan dinamis.