Belajar JavaScript Dasar: Membuat Tombol Interaktif di Halaman Web
Belajar JavaScript Dasar: Membuat Tombol Interaktif di Halaman Web
Website yang interaktif pasti lebih menarik daripada yang hanya menampilkan teks dan gambar statis. Nah, JavaScript adalah kunci untuk membuat halaman web menjadi hidup dan bisa berinteraksi dengan pengguna.
1. Apa Itu JavaScript?
JavaScript (JS) adalah bahasa pemrograman yang digunakan untuk menambahkan fitur interaktif pada halaman web. HTML membangun struktur, CSS mempercantik tampilannya, dan JavaScript membuatnya bisa “beraksi”.
- Menampilkan pop-up notifikasi
- Membuat tombol bisa diklik
- Validasi form sebelum dikirim
- Efek animasi sederhana
2. Menulis JavaScript Pertamamu
JavaScript ditulis di dalam tag <script></script>. Bisa ditaruh di bagian <head> atau <body>.
Contoh JavaScript sederhana:
<script>
alert("Halo Dunia!");
</script>
Kode di atas akan memunculkan pop-up saat halaman dibuka.
3. Membuat Tombol Interaktif
Kita akan membuat tombol yang ketika diklik, akan menampilkan pesan menggunakan JavaScript.
Langkah:
- Buat tombol HTML:
<button>Klik Saya</button> - Tambahkan atribut
onclickagar JavaScript dijalankan saat tombol diklik.
4. Contoh Kode Lengkap: HTML + JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Tombol Interaktif</title>
<style>
body { text-align: center; font-family: sans-serif; margin-top: 50px; }
button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
</style>
</head>
<body>
<h1>Coba Klik Tombol Ini</h1>
<button onclick="tampilkanPesan()">Klik Saya</button>
<script>
function tampilkanPesan() {
alert("Tombol berhasil diklik!");
}
</script>
</body>
</html>
5. Hasil Interaksi
Gambar di atas memperlihatkan tombol sederhana yang bisa diklik dan akan memunculkan pop-up pesan. Ini adalah dasar dari banyak fitur keren yang bisa dibuat dengan JavaScript!
6. Kesimpulan
Selamat! Kamu baru saja membuat elemen web pertamamu yang interaktif menggunakan JavaScript. Ke depannya, kamu bisa membuat efek yang lebih kompleks seperti validasi form, efek animasi, atau menu dropdown.
➡️ Apa Selanjutnya?
Di artikel berikutnya, kita akan belajar tentang variabel dan logika dasar di JavaScript, agar kamu bisa menyimpan data dan membuat keputusan dalam kode.
Yuk terus belajar dan eksplorasi dunia coding!
Label: #javascriptdasar #belajarcoding #webinteraktif #htmlcssjs #codingpemula
Komentar
Posting Komentar