Javascript Game #3:
Jurus #1: Kotak Ajaib Penyelamat (Variabel)
✨ APA ITU VARIABEL? ✨
Variabel itu seperti kotak ajaib yang bisa kamu kasih nama dan isi dengan apa saja! Angka, teks, bahkan data rahasia game-mu!
Bayangin kamu punya kotak mainan. Kamu tulis nama di kotak itu, misal "SKOR", lalu kamu masukkan angka 0. Nanti kalau dapat koin, kamu buka kotaknya, ambil angkanya, tambah 10, dan simpan lagi. Kotaknya tetap, isinya berubah! Itulah variabel.
Kotak Mainan
Kotak diberi nama "SKOR"
Isi Kotak
Angka 0, lalu berubah jadi 10, 20,...
Nama Unik
Kita panggil dengan namanya
CARA MEMBUAT KOTAK AJAIB (VARIABEL)
Di JavaScript, kita punya 3 cara bikin kotak: let, const, dan var. Tapi kita fokus ke dua yang paling sering dipakai:
let skorSaya = 0;
let namaPemain = "Budi";
// Cara 2: const - Kotak ajaib yang isinya tetap (tidak bisa diubah)
const jumlahNyawa = 3;
const judulGame = "Petualangan JavaScript";
// Kalau isi const diubah bakal error! Coba aja:
// jumlahNyawa = 5; // ERROR!
Kata kunci let dan const itu kayak mantra untuk memanggil kotak ajaib. Setelah itu kita kasih nama kotaknya, lalu isi dengan tanda = dan nilainya.
🏷️ ATURAN NAMA KOTAK (VARIABEL)
- ✅ Boleh pakai huruf, angka, tanda $ dan _
- ❌ NGGAK BOLEH pakai spasi! (Misal:
skor saya) - ❌ NGGAK BOLEH diawali angka (Misal:
1skor) - ✅ Harus unik, nggak boleh sama dengan nama kotak lain
- ✅ Usahakan nama yang mudah diingat, misal
skorPemain,namaHero
💡 Tips: Kalau nama panjang, gabung pakai huruf besar di tengah. Contoh: jumlahNyawaTersisa (ini namanya camelCase, seperti punuk unta 🐫)
PRAKTEK LANGSUNG! Buka Console dan Lihat Keajaiban
Buka browser-mu, tekan F12 atau klik kanan → Inspect → pilih tab Console. Di sanalah kita bisa lihat isi variabel!
let kotakRahasia = "Aku suka JavaScript";
console.log(kotakRahasia);
let umurku = 10;
console.log("Umurku " + umurku + " tahun");
umurku = 11; // Isi kotak diganti
console.log("Sekarang umurku " + umurku);
⚡ LABORATORIUM KOTAK AJAIB ⚡
Klik tombol di bawah untuk melihat variabel beraksi!
Coba lihat juga di Console (F12) untuk lihat prosesnya!
CONTOH LENGKAP DALAM FILE HTML
Coba buat file HTML baru, lalu tulis kode ini. Simpan dan buka di browser.
<html>
<head>
<title>Praktek Variabel</title>
</head>
<body>
<h1>Petualangan Variabel</h1>
<script>
// Membuat variabel
let namaHero = "Kancil";
let skorHero = 0;
const nyawaHero = 3;
// Tampilkan dengan alert
alert("Selamat datang, " + namaHero + "! Kamu punya " + nyawaHero + " nyawa.");
// Ubah skor
skorHero = skorHero + 10;
console.log("Skor sekarang: " + skorHero);
// Tulis ke halaman web
document.write("<p>Nama Hero: " + namaHero + "</p>");
document.write("<p>Skor: " + skorHero + "</p>");
document.write("<p>Nyawa: " + nyawaHero + "</p>");
</script>
</body>
</html>
Coba ubah-ubah sendiri, misal ganti skorHero = skorHero + 10 jadi skorHero = skorHero + 100, lalu refresh halaman. Asyik kan?
MISI JAGOAN VARIABEL
- Buat file HTML baru dengan nama variabelku.html
- Di dalam tag
<script>, buat 3 variabel:let namaSaya = "..."(isi dengan namamu)let umurSaya = ...(isi dengan umurmu)const makananFavorit = "..."
- Tampilkan semua variabel itu dengan
alert()ataudocument.write() - Ganti nilai
umurSayadengan umurmu tahun depan (tambah 1), lalu tampilkan lagi - Coba ganti
makananFavoritdengan makanan lain, lihat error di console! (Ini bukti kalau const memang tetap)
📸 Minta tolong orang tua foto hasil karyamu, simpan sebagai kenang-kenangan!
✨ RANGKUMAN SERU
- Variabel = kotak ajaib berisi data.
- Pakai let untuk kotak yang isinya bisa diubah.
- Pakai const untuk kotak yang isinya tetap.
- Nama variabel tidak boleh pakai spasi, tidak boleh diawali angka.
- Isi variabel bisa angka, teks, dan masih banyak lagi!