Code, Create, Innovate: Welcome to Programmer World Code, Create, Innovate: Welcome to Programmer World
4 Cara Menulis Kode JavaScript pada HTML yang Wajib Kamu Ketahui
JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan interaktivitas pada halaman web. Artikel ini menjelaskan 4 cara menulis kode JavaScript pada HTML untuk membantu kamu memahami berbagai pendekatan yang dapat digunakan.
1. Inline JavaScript
Inline JavaScript adalah cara menulis kode JavaScript langsung di dalam atribut elemen HTML, seperti onclick, onmouseover, atau atribut event lainnya.
Contoh:
<button onclick="alert('Tombol diklik!')">Klik Saya</button>Ketika tombol diklik, pesan “Tombol diklik!” akan muncul di layar.
Kelebihan:
- Mudah digunakan untuk kode sederhana.
Kekurangan:
- Sulit dipelihara jika kode bertambah kompleks.
- Memisahkan logika dari HTML menjadi sulit.
2. Internal JavaScript
Internal JavaScript ditulis di dalam elemen <script> di dalam file HTML.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Internal JavaScript</title>
</head>
<body>
<button id="btn">Klik Saya</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
alert('Tombol diklik!');
});
</script>
</body>
</html>Kelebihan:
- Kode lebih terstruktur dibandingkan inline.
- Memungkinkan penggunaan lebih banyak logika.
Kekurangan:
- Kode HTML dan JavaScript tetap tidak sepenuhnya terpisah.
3. External JavaScript
External JavaScript ditulis di file terpisah dengan ekstensi .js. File ini dihubungkan ke file HTML menggunakan elemen <script> dengan atribut src.
Contoh:
File HTML:
<!DOCTYPE html>
<html>
<head>
<title>External JavaScript</title>
<script src="script.js"></script>
</head>
<body>
<button id="btn">Klik Saya</button>
</body>
</html>File script.js:
document.getElementById('btn').addEventListener('click', function() {
alert('Tombol diklik!');
});Kelebihan:
- Kode JavaScript sepenuhnya terpisah dari HTML.
- Mempermudah pengelolaan dan pemeliharaan kode pada proyek besar.
Kekurangan:
- Membutuhkan koneksi jaringan jika file JavaScript berada di server eksternal.
4. JavaScript dalam Event Listeners
Cara ini menggunakan metode addEventListener untuk menambahkan event ke elemen HTML. Cara ini sering digunakan pada pendekatan modern.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Event Listeners</title>
</head>
<body>
<button id="btn">Klik Saya</button>
<script>
const button = document.getElementById('btn');
button.addEventListener('click', function() {
alert('Tombol diklik!');
});
</script>
</body>
</html>Kelebihan:
- Memisahkan logika event dari atribut HTML.
- Mendukung banyak event listener pada elemen yang sama.
Kekurangan:
- Lebih kompleks dibandingkan inline untuk kasus sederhana.
Kesimpulan
Masing-masing cara menulis JavaScript pada HTML memiliki kelebihan dan kekurangan. Untuk proyek besar, disarankan menggunakan external JavaScript atau event listeners untuk menjaga kode tetap terstruktur dan mudah dipelihara.
