Cara Membuat If Else di JavaScript – If-else merupakan salah satu struktur kontrol yang sangat penting dalam pemrograman JavaScript (dan juga dalam banyak bahasa pemrograman lainnya). Struktur ini memungkinkan kita untuk mengatur alur eksekusi program berdasarkan kondisi tertentu, sehingga membuat program lebih dinamis dan responsif.
Selain itu, if-else juga memungkinkan kita untuk mengevaluasi suatu ekspresi logika dan melakukan tindakan yang berbeda tergantung pada apakah kondisi tersebut benar atau salah. Hal ini memberikan fleksibilitas yang besar dalam pengembangan program, pada artikel kali ini kelasjava akan menjelaskan pengertian dan memberikan panduan cara pembuatan if-else di JS.
Pengertian Dasar If-Else di JavaScript
- If Statement: If statement digunakan untuk mengevaluasi suatu ekspresi logika. Jika ekspresi tersebut bernilai true, maka blok kode di dalam if statement akan dieksekusi. Jika ekspresi tersebut bernilai false, maka blok kode tersebut akan dilewati.
- Else Statement: Else statement merupakan bagian dari struktur if-else yang digunakan untuk mengeksekusi blok kode alternatif jika ekspresi dalam if statement bernilai false.
- Else If Statement: Else if statement digunakan untuk menambahkan lebih dari satu kondisi yang akan dievaluasi setelah if statement. Ini memungkinkan untuk menangani beberapa skenario yang berbeda.
Dengan pemahaman yang baik tentang struktur if-else, kita dapat mengontrol alur eksekusi program dengan lebih efektif dan efisien. Kita dapat menangani berbagai kondisi yang mungkin terjadi selama eksekusi program dan mengambil tindakan yang sesuai.
Langkah-langkah untuk Membuat If Else di JavaScript
1. Siapkan Folder dan File
Buatlah struktur folder untuk proyek If Else di mana nanti didalam folder tersebut terdapat file HTML, CSS, dan JavaScript, untuk contoh struktur foldernya sebagai berikut:
Proyek If Else
- index.html
- style.css
- script.js
2. Coding File HTML
Buatlah file HTML (index.html) dan tambahkan struktur dasar HTML untuk halaman web, berikut kode HTML yang bisa kamu salin dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>https://kelasjava.com/</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Pengecekan Kondisi dengan If Else</h1>
<p id="output">Hasil akan ditampilkan di sini</p>
<script src="script.js"></script>
</body>
</html>3. Coding File CSS
Tambahkan styling CSS untuk mempercantik tampilan halaman web, berikut kode CSS yang bisa kamu salin dibawah ini.
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
h1 {
color: #333;
}
#output {
font-size: 18px;
color: #555;
}4. Coding File JavaScript
Buat skrip JavaScript untuk mengecek kondisi dan menampilkan output sesuai kondisi, berikut adalah kode yang JS yang bisa kamu salin.
// Ambil elemen output
const output = document.getElementById('output');
// Contoh variabel
const nilai = 75;
// Pengecekan kondisi dengan if else
if (nilai >= 70) {
output.innerText = 'Nilai Anda: A';
} else if (nilai >= 60) {
output.innerText = 'Nilai Anda: B';
} else if (nilai >= 50) {
output.innerText = 'Nilai Anda: C';
} else {
output.innerText = 'Nilai Anda: D';
}5. Jalankan Kode
Buka file index.html menggunakan browser web untuk melihat hasilnya atau bisa juga dengan melakukan klik kanan pada kode index.html lalu pilih opsi Open in Browser.
6. Menampilkan Hasil
Selamat! Kamu telah berhasil membuat program dengan menggunakan fungsi if-else di JavaScript. untuk tampilan hasil kode program if-else tersebut bisa kamu lihat gambar diatas..
Kesimpulan
If-else adalah salah satu struktur kontrol yang penting dalam pemrograman JavaScript. Dengan memahami konsep dasarnya dan mengikuti langkah-langkah pembuatan, kamu dapat mengembangkan program JavaScript yang lebih dinamis dan responsif.
