Variabel & Kondisional
Mengenal variabel, tipe data, dan struktur kondisional dalam JavaScript
Membuat File JavaScript Pertama
Buat sebuah file HTML baru dengan nama index.html dan file JavaScript dengan nama script.js. Hubungkan file JavaScript dengan file HTML menggunakan tag script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Dasar</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<!-- Tailwind opsional karna kali ini kita tidak fokus ke styling -->
</head>
<body>
<h1>Belajar JavaScript Dasar</h1>
<div id="result"></div>
<!-- Menghubungkan dengan file JavaScript -->
<script src="script.js"></script>
</body>
</html>Tag script dapat diletakkan di dalam head atau sebelum penutup body. Menempatkannya sebelum penutup body memastikan bahwa semua elemen HTML telah dimuat sebelum JavaScript dijalankan.
Mengenal Variabel dan Output
Buka file script.js dan tulis kode berikut untuk mendeklarasikan variabel dan menampilkan output:
// Mendeklarasikan variabel dengan var, let, dan const
var nama = "Budi";
let usia = 20;
const TAHUN_LAHIR = 2004;
// Menampilkan output ke konsol
console.log("Nama: " + nama);
console.log("Usia: " + usia);
console.log("Tahun Lahir: " + TAHUN_LAHIR);
// Menampilkan output ke halaman HTML
document.getElementById("result").innerHTML = `
<p>Nama: <strong>${nama}</strong></p>
<p>Usia: <strong>${usia}</strong></p>
<p>Tahun Lahir: <strong>${TAHUN_LAHIR}</strong></p>
`;Buka file HTML Kalian di browser dan buka konsol pengembang (F12 atau klik kanan → Inspect → Console) untuk melihat output log yang dihasilkan.
Template literals (menggunakan backticks ``) memungkinkan Kalian untuk menyisipkan variabel langsung ke dalam string dengan menggunakan sintaks ${variabel}.
Implementasi Struktur Kondisional
Tambahkan kode berikut untuk mempelajari struktur kondisional dalam JavaScript:
// Struktur kondisional
let nilai = 85;
let grade = "";
// If-else if-else
if (nilai >= 90) {
grade = "A";
} else if (nilai >= 80) {
grade = "B";
} else if (nilai >= 70) {
grade = "C";
} else if (nilai >= 60) {
grade = "D";
} else {
grade = "E";
}
console.log("Nilai: " + nilai + ", Grade: " + grade);
document.getElementById("result").innerHTML += `
<hr>
<p>Nilai: <strong>${nilai}</strong></p>
<p>Grade: <strong>${grade}</strong></p>
`;
// Ternary operator
let status = nilai >= 60 ? "Lulus" : "Tidak Lulus";
console.log("Status: " + status);
document.getElementById("result").innerHTML += `
<p>Status: <strong>${status}</strong></p>
`;
// Switch case
let hari = new Date().getDay();
let namaHari = "";
switch (hari) {
case 0:
namaHari = "Minggu";
break;
case 1:
namaHari = "Senin";
break;
case 2:
namaHari = "Selasa";
break;
case 3:
namaHari = "Rabu";
break;
case 4:
namaHari = "Kamis";
break;
case 5:
namaHari = "Jumat";
break;
case 6:
namaHari = "Sabtu";
break;
default:
namaHari = "Hari tidak valid";
}
console.log("Hari ini adalah: " + namaHari);
document.getElementById("result").innerHTML += `
<p>Hari ini adalah: <strong>${namaHari}</strong></p>
`;JavaScript menyediakan beberapa cara untuk membuat keputusan berdasarkan kondisi: if-else, ternary operator (?:), dan switch-case. Pilih yang paling sesuai dengan kebutuhan kode Kalian.
Latihan
- Buat variabel untuk menyimpan data diri Kalian (nama, umur, kota asal) menggunakan
constdanlet - Implementasikan program pengecekan kelulusan dengan syarat nilai >= 70
- Buat program untuk mengecek kategori umur (anak: <12, remaja: 12-17, dewasa: 18-59, lansia: >=60)
- Gunakan switch-case untuk membuat program konversi angka hari (1-7) ke nama hari dalam bahasa Inggris
- Buat kalkulator sederhana grade nilai dengan ternary operator
Selanjutnya, mari kita lanjut ke Loop & Fungsi untuk mempelajari perulangan dan pembuatan fungsi.