Javascript 8-3: Memahami Iterasi Array pada JavaScript dan Mini Proyek Penghitungan Min, Max, dan Rata-rata

- Juni 06, 2024

Hallo Sobat Programming! Selamat Datang dan Salam Koding!

Pada artikel kali ini, kita akan membahas mengenai iterasi array pada JavaScript, yang merupakan salah satu konsep dasar namun sangat penting dalam pemrograman web. Kita juga akan mengerjakan sebuah mini proyek untuk menghitung nilai minimum, maksimum, dan rata-rata dari sekumpulan angka yang dimasukkan oleh pengguna. Proyek ini akan membantu kita memahami konsep iterasi array secara praktis.

Apa Itu Iterasi Array?

Iterasi array adalah proses mengakses setiap elemen dalam array satu per satu untuk melakukan operasi tertentu, seperti menghitung, memodifikasi, atau memvalidasi data. Dalam JavaScript, terdapat beberapa metode yang sering digunakan untuk iterasi array, antara lain:

for loop: Struktur dasar perulangan yang bisa digunakan untuk mengiterasi array.
forEach(): Metode bawaan JavaScript yang memanggil fungsi untuk setiap elemen dalam array.
map(): Metode yang membuat array baru dengan hasil dari memanggil fungsi tertentu pada setiap elemen array.
filter(): Metode yang membuat array baru dengan semua elemen yang lulus tes yang disediakan oleh fungsi tertentu.
reduce(): Metode yang mengeksekusi fungsi reducer pada setiap elemen array, menghasilkan satu nilai output.

Contoh Penggunaan forEach()

forEach()

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
    console.log(number);
});

Pada contoh di atas, fungsi anonim di dalam forEach() akan dipanggil untuk setiap elemen dalam array numbers.

Mini Proyek: Menghitung Min, Max, dan Rata-rata

Sekarang, mari kita implementasikan pemahaman kita tentang iterasi array dalam sebuah proyek mini. Berikut ini adalah kode HTML dan JavaScript untuk aplikasi sederhana yang menghitung nilai minimum, maksimum, dan rata-rata dari sekumpulan angka yang dimasukkan oleh pengguna.

Struktur HTML

Generator Bilangan Prima

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min, Max, dan Average</title>
    <style>
        table {
            width: 25%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Find Min, Max, dan Average</h1>
    <form id="numberForm">
        <label for="numbersInput">Masukkan Angka:</label>
        <input type="text" id="numbersInput" name="numbersInput" required><br><br>
        <button type="button" onclick="calculateStats()">Find</button>
    </form>
<br>
    <div id="result">
        <table id="statsTable">
            <thead>
                <tr>
                    <th>Min</th>
                    <th>Max</th>
                    <th>Average</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    </div>

    <script>
        function calculateStats() {
            const numbersInput = document.getElementById('numbersInput').value;
            const numberArray = numbersInput.split(',').map(num => parseFloat(num.trim()));

            if (numberArray.length === 0 || numberArray.includes(NaN)) {
                alert('Silakan masukkan angka yang valid.');
                return;
            }

            const min = Math.min(...numberArray);
            const max = Math.max(...numberArray);
            const average = numberArray.reduce((sum, num) => sum + num, 0) / numberArray.length;

            const tableBody = document.querySelector("#statsTable tbody");
            tableBody.innerHTML = ""; 

            const row = document.createElement('tr');
            const minCell = document.createElement('td');
            const maxCell = document.createElement('td');
            const averageCell = document.createElement('td');

            minCell.textContent = min;
            maxCell.textContent = max;
            averageCell.textContent = average.toFixed(2); 

            row.appendChild(minCell);
            row.appendChild(maxCell);
            row.appendChild(averageCell);
            tableBody.appendChild(row);
        }
    </script>
</body>
</html>

Hasil:
Min, Max, dan Average

Find Min, Max, dan Average

Min	Max	Average

Penjelasan Kode

HTML dan CSS:
- Struktur HTML terdiri dari form untuk memasukkan angka dan sebuah tabel untuk menampilkan hasil.
- CSS digunakan untuk membuat tabel lebih rapi dengan memberikan border dan padding.
JavaScript:
- calculateStats() adalah fungsi yang dipanggil ketika tombol "Find" ditekan.
- numbersInput mengambil nilai input dari pengguna dan mengonversinya menjadi array menggunakan split() dan map().
- Validasi dilakukan untuk memastikan semua nilai yang dimasukkan adalah angka.
- Math.min() dan Math.max() digunakan untuk menghitung nilai minimum dan maksimum dari array.
- reduce() digunakan untuk menghitung total semua elemen array, yang kemudian dibagi dengan panjang array untuk mendapatkan rata-rata.
- Hasil (min, max, dan average) ditampilkan dalam tabel di halaman web.

Dengan memahami iterasi array dan mengimplementasikannya dalam proyek mini ini, kita dapat melihat betapa pentingnya dan bermanfaatnya konsep dasar ini dalam pengembangan web. Teruslah berlatih dan eksplorasi untuk menjadi lebih mahir dalam pemrograman JavaScript. Selamat mencoba, Sobat Programming!

Cari Blog Ini

Alpinn's HTML Tutorial

Javascript 8-3: Memahami Iterasi Array pada JavaScript dan Mini Proyek Penghitungan Min, Max, dan Rata-rata

Hallo Sobat Programming! Selamat Datang dan Salam Koding!

Apa Itu Iterasi Array?

Contoh Penggunaan forEach()

forEach()

Mini Proyek: Menghitung Min, Max, dan Rata-rata

Struktur HTML

Generator Bilangan Prima

Hasil:
Min, Max, dan Average

Find Min, Max, dan Average

Penjelasan Kode

Komentar

Posting Komentar

Postingan populer dari blog ini

Analisis Program To-Do list Sederhana

Ringkasan Capaian Pembelajaran SMK Jurusan Pengembangan Perangkat Lunak dan Gim (Fase E)

Javascript 8-5: Memodifikiasi Inventory Buah Menggunakan Paging

Data Analytic dan Machine Learning

Simple Sunset Links Page Design - HTML & CSS Only

Javascript 8-2: Array Iteration dan Membuat Sorting Angka

Penjelasan Lengkap Tentang PHP Native dan PHP Framework

Javascript 7-3: Membuat Quiz Exam Generator

Javascript 7-2: String, Mengupgrade Mini Project Trayek.

Javascript 8-3: Memahami Iterasi Array pada JavaScript dan Mini Proyek Penghitungan Min, Max, dan Rata-rata

Hallo Sobat Programming! Selamat Datang dan Salam Koding!

Apa Itu Iterasi Array?

Contoh Penggunaan forEach()

forEach()

Mini Proyek: Menghitung Min, Max, dan Rata-rata

Struktur HTML

Generator Bilangan Prima

Hasil: Min, Max, dan Average table { width: 25%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: center; }

Find Min, Max, dan Average

Penjelasan Kode

Komentar

Posting Komentar

Postingan populer dari blog ini

Hasil:
Min, Max, dan Average