Javascript 4-2: Condition Dan Membuat Pendeteksi Bilangan Genap

Masih Bingung?

 Javascript Bag. 4-2

Condition Dan Membuat Program Yang Bisa Mendeteksi Bilangan Genap

Setelah kita membahas serunya dunia JavaScript dengan membicarakan Function dan membuat Converter Suhu Sederhana, sekarang saatnya untuk memasuki bab baru yang tak kalah menarik: JavaScript Condition!

Apa Itu JavaScript Condition?

JavaScript Condition adalah mekanisme yang memungkinkan program untuk membuat keputusan berdasarkan kondisi tertentu. Ini sangat bermanfaat ketika kita ingin mengeksekusi blok kode tertentu hanya jika suatu kondisi terpenuhi.

Mendeteksi Bilangan Genap dengan JavaScript

Sekarang, mari kita masuk ke dalam aksi dengan membuat program sederhana yang dapat mendeteksi apakah suatu bilangan adalah bilangan genap atau tidak. Kami akan menggunakan JavaScript Condition untuk membuat hal ini terjadi.

Contoh Sederhana
// Mendefinisikan fungsi deteksi bilangan genap
    function deteksiBilanganGenap(angka) {
        if (angka % 2 === 0) {
            return "Bilangan Genap!";
        } else {
            return "Bilangan Ganjil!";
        }
    }
    // Menggunakan fungsi untuk mendeteksi bilangan genap
    let contohAngka = 10;
    let hasilDeteksi = deteksiBilanganGenap(contohAngka);
    console.log(`Angka ${contohAngka} adalah ${hasilDeteksi}`);

Dalam contoh di atas, kita menggunakan operator modulo (%) untuk mengecek sisa bagi dari suatu angka. Jika sisa bagi adalah 0, itu berarti angka tersebut genap.

Setelah kita menjelajahi dasar-dasar JavaScript dengan Function, Condition Dan Membuat Project Sederhana, sekarang saatnya melangkah lebih jauh ke dalam dunia JavaScript dengan mengeksplorasi konsep Condition. Tidak hanya itu, kita juga akan menambahkan elemen visual ke dalam program kita untuk membuatnya lebih menarik.

Melangkah ke Program yang Lebih Rumit

Sebagai langkah awal, kita akan menambahkan beberapa gaya (style) ke elemen HTML kita menggunakan CSS. Perhatikan kode berikut:

CSS
<style>
    .bold {
        font-weight: bold;
    }
</style>

Di sini, kita mendefinisikan gaya CSS yang memberikan efek cetak tebal (bold) pada elemen HTML yang memiliki kelas CSS "bold".

Program Deteksi Bilangan Genap

Selanjutnya, mari kita fokus pada JavaScript yang akan membuat program yang dapat mendeteksi bilangan genap dan memberikan tampilan yang berbeda untuk setiap elemennya.

HTML & Javascript
<ul id="angka"></ul>
<button onclick="gantiStyle()">Buat Angka Genap Tebal</button>
<script>
    // Mendapatkan elemen <ul> dengan ID 'angka'
    var angka = document.getElementById('angka');
    // Membuat array acak dengan 4 angka
    var acak = [];
    for (var i = 0; i < 4; i++) {
        acak.push(Math.floor(Math.random() * 1000) + 1);
    }
    // Menambahkan elemen <li> ke dalam <ul> dengan angka-angka acak
    acak.forEach(function (angka2) {
        var list = document.createElement('li');
        list.textContent = angka2;
        angka.appendChild(list);
    });
    // Fungsi untuk mengubah gaya elemen <li> menjadi tebal jika angka genap
    function gantiStyle() {
        // Mendapatkan semua elemen <li> di dalam <ul>
        var listItems = document.querySelectorAll('#angka li');
        // Iterasi melalui setiap elemen dan memberikan gaya jika angka genap
        listItems.forEach(function (list) {
            var angka2 = parseInt(list.textContent);
            if (angka2 % 2 === 0) {
                list.classList.add('bold');
            }
        });
    }
</script>

Dalam program ini, kita menggunakan JavaScript untuk membuat daftar angka acak dan menambahkannya ke dalam elemen HTML <ul>. Setelah itu, ketika tombol "Buat Angka Genap Tebal" ditekan, program akan memberikan gaya tebal pada elemen yang berisi angka genap.

Penjelasan Kode

Mari kita jabarkan beberapa bagian kritis dari kode di atas:

• CSS Style: Mendefinisikan gaya tebal (bold) untuk elemen dengan kelas CSS "bold".
• JavaScript Random Number: Menghasilkan array acak berisi 4 angka.
• Loop forEach: Membuat elemen <li> untuk setiap angka acak dan menambahkannya ke dalam elemen <ul>.
• Button Click Event: Ketika tombol ditekan, memanggil fungsi gantiStyle().
• Fungsi gantiStyle(): Mengubah gaya elemen menjadi tebal (bold) jika angka genap