JavaScript adalah bahasa pemrograman yang digunakan untuk:
- Memberi respon saat tombol diklik
- Menampilkan pesan
- Mengubah isi halaman tanpa reload
- Membuat website terasa hidup dan interaktif
Contoh di kehidupan nyata:
- Saat klik tombol “Beli” lalu muncul pesan
- Saat angka keranjang bertambah
- Saat muncul peringatan “Form belum diisi”
Semua itu dikendalikan oleh JavaScript.
Jika HTML adalah tubuh,
CSS adalah pakaian,
maka JavaScript adalah otak dari sebuah website.
Sekarang kita masuk ke TAHAP 3 – HTML + CSS + JavaScript
Di tahap ini kita belajar bahwa:
“Website bukan hanya untuk dilihat,
tapi juga bisa merespon aksi pengguna.”
Kita akan membuat tombol Beli benar-benar “hidup”:
- Saat diklik → muncul pesan
- Kita tambahkan penghitung sederhana “Keranjang: 0”
🟡 Langkah 1 – Membuat File JavaScript
Buat file baru di folder project:
script.js
Lalu hubungkan ke index.html tepat sebelum </body>:
<script src="script.js"></script>
</body>
Penjelasan:
“HTML untuk struktur,
CSS untuk tampilan,
JavaScript untuk logika dan interaksi.”
🟡 Langkah 2 – Alert Sederhana
Isi script.js:
function beliProduk() {
alert("Produk berhasil ditambahkan ke keranjang!");
}
Lalu ubah tombol di HTML:
<button onclick="beliProduk()">Beli</button>
Sekarang, setiap tombol Beli diklik → muncul pesan.
Penjelasan:
function= membuat perintah sendirionclick= menjalankan perintah saat diklikalert()= menampilkan pesan
🟡 Langkah 3 – Menampilkan Jumlah Keranjang
Di bagian atas halaman (misalnya di header), tambahkan:
<p>Keranjang: <span id="cart">0</span></p>
Lalu ubah script.js menjadi:
let jumlah = 0;
function beliProduk() {
jumlah = jumlah + 1;
document.getElementById("cart").innerText = jumlah;
alert("Produk berhasil ditambahkan ke keranjang!");
}
Penjelasan:
“Setiap kali tombol diklik,
angka keranjang akan bertambah.”
Penjelasan sederhana:
let jumlah = 0→ menyimpan angkagetElementById("cart")→ mengambil elemen HTMLinnerText→ mengubah isinya
🟡 Langkah 4 – Memberi Pesan Dinamis
Agar lebih menarik, kita kirim nama produk.
Ubah tombol HTML:
<button onclick="beliProduk('Kaos Polos')">Beli</button>
<button onclick="beliProduk('Sepatu Sneakers')">Beli</button>
<button onclick="beliProduk('Tas Ransel')">Beli</button>
Ubah script.js:
let jumlah = 0;
function beliProduk(namaProduk) {
jumlah++;
document.getElementById("cart").innerText = jumlah;
alert(namaProduk + " berhasil ditambahkan ke keranjang!");
}
