Cara Membuat If Else di JavaScript

Posted on

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.
Baca Juga:   Cara Membuat Game Tetris dengan JavaScript

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..

Baca Juga:   Cara Membuat Game Tic Tac Toe dengan JavaScript

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.