Postingan
Tutorial Web Dasar Part 5: Mengenal Dasar JavaScript & Membuat Tombol Interaktif
Assalamualaikum Wr. Wb.
Tutorial Web Dasar Part 5: Mengenal Dasar JavaScript & Membuat Tombol Interaktif | Web Jadi Lebih Hidup | Setelah HTML membuat kerangka dan CSS mempercantik tampilan, langkah pamungkas adalah menambahkan JavaScript agar website kita bisa merespons aksi pengunjung, misalnya menampilkan notifikasi atau mengubah teks saat tombol diklik. Kali ini saya akan berbagi panduan dasar penggunaan JavaScript yang mudah dipahami pemula dan work 100%.
Cara Memasang JavaScript
Sama seperti CSS, JavaScript bisa ditulis langsung di dalam tag <script> atau menggunakan file eksternal .js.
- Tag
<script>biasanya diletakkan tepat sebelum penutup</body>agar halaman web termuat cepat terlebih dahulu. - Fungsi paling mendasar adalah
alert()untuk menampilkan pop-up pesan, dan manipulasi DOM (sepertidocument.getElementById) untuk mengubah konten halaman.
.png)
Maka akan tampil pop-up dan perubahan teks seperti di atas
Source Code Lengkap Latihan JavaScript Sederhana
Berikut adalah source code halaman dengan tombol interaktif yang bisa langsung anda coba di browser:
<!DOCTYPE html>
<html>
<head>
<title>Latihan Interaksi JavaScript</title>
<style>
body { font-family: Arial, sans-serif; padding: 25px; }
button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover { background-color: #218838; }
#pesan { font-weight: bold; color: #0056b3; margin-top: 15px; }
</style>
</head>
<body>
<h2>Klik Tombol di Bawah Ini</h2>
<button onclick="tampilkanPesan()">Klik Saya!</button>
<p id="pesan">Teks ini akan berubah saat tombol diklik.</p>
<script>
function tampilkanPesan() {
// Menampilkan pop-up alert
alert("Tombol berhasil diklik!");
// Mengubah isi paragraf
document.getElementById("pesan").innerHTML = "Selamat! JavaScript anda berhasil berjalan 100%.";
}
</script>
</body>
</html>Itulah langkah awal mengenal JavaScript untuk membuat website lebih interaktif. Jika fungsi tidak jalan saat diklik, cek console browser anda (tekan F12) untuk melihat apakah ada kesalahan penulisan tanda kurung atau titik koma.
Sekian tutorial kali ini, semoga bermanfaat, jika ada kesalahan mohon di maafkan, jika berguna mohon di share ke Social Media.
Terima Kasih.
Wassalamualaikum Wr. Wb.
Sumber gambar: Koleksi Pribadi / Screenshot Praktik
0 Komentar
Posting Komentar
Pengunjung yang baik selalu meninggalkan komentar
Silahkan berikan komentar/kritik/saran tentang artikel ini untuk kemajuan blog ini,
Mohon untuk tidak berkomentar berbau SARA, Pornografi, Spam, dan kata-kata kasar agar tidak terjadi kesalah pahaman disini.
Terima Kasih