Mengenal Variabel dan Logika Dasar di JavaScript: Fondasi Coding Interaktif

JavaScript bukan hanya untuk klik tombol. Kamu juga bisa menyimpan data, memproses informasi, dan membuat website yang bisa “berpikir”. Caranya? Mulai dari belajar variabel dan logika dasar.

1. Apa Itu Variabel?

Variabel adalah wadah untuk menyimpan data. Data bisa berupa teks (string), angka (number), atau nilai lain.

Contoh deklarasi variabel di JavaScript:

let nama = "Fauzan";
let umur = 25;

Penjelasan:

let : Digunakan untuk membuat variabel (pemula bisa pakai ini dulu)
nama : Nama variabel
"Fauzan" : Nilai string yang disimpan

2. Menampilkan Data di Layar

Kamu bisa menampilkan data variabel dengan:

alert() – munculkan pop-up
console.log() – tampilkan di konsol browser
document.write() – tulis langsung di halaman

Contoh:

let nama = "Fauzan";
alert("Halo, nama saya " + nama);

3. Logika If/Else: Membuat Keputusan

Dengan logika if/else, kamu bisa membuat program bertindak berdasarkan kondisi tertentu.

let umur = 20;

if (umur >= 18) {
  alert("Kamu sudah dewasa!");
} else {
  alert("Kamu masih remaja.");
}

Penjelasan: Jika umur lebih dari/sama dengan 18, tampilkan pesan dewasa. Jika tidak, tampilkan remaja.

4. Mini Proyek: Cek Umur Pengunjung

Kita akan membuat program interaktif:

User memasukkan nama & umur
Website memberikan respons sesuai usia

Contoh Kode Lengkap:

<!DOCTYPE html>
<html>
  <head>
    <title>Cek Umur Pengunjung</title>
    <style>
      body { font-family: sans-serif; text-align: center; margin-top: 50px; }
      button { padding: 10px 20px; font-size: 16px; }
    </style>
  </head>
  <body>

    <h1>Cek Umurmu Sekarang</h1>
    <button onclick="cekUmur()">Mulai</button>

    <script>
      function cekUmur() {
        let nama = prompt("Masukkan namamu:");
        let umur = prompt("Berapa umurmu?");

        if (umur >= 18) {
          alert("Halo " + nama + ", kamu sudah dewasa!");
        } else {
          alert("Halo " + nama + ", kamu masih remaja.");
        }
      }
    </script>

  </body>
</html>

5. Hasil Interaksi

Gambar di atas menunjukkan proses: input nama dan umur, lalu muncul pesan sesuai hasil logika program.

6. Kesimpulan

Variabel dan logika if/else adalah dasar penting untuk membangun aplikasi web interaktif. Sekarang kamu sudah bisa menyimpan data dan membuat keputusan di dalam program.

➡️ Apa Selanjutnya?

Di artikel berikutnya, kita akan belajar perulangan (loop) dan fungsi sederhana, agar bisa menjalankan kode berulang dan membuat program lebih efisien.

Terus semangat belajar coding, ya!

Label: #javascriptdasar #variabel #ifelse #logika #belajarcoding #webinteraktif #htmlcssjs

Cari Blog Ini

Mengenal HTML, CSS, dan JavaScript: Pondasi Utama Dunia Web