Looping Atau Perulangan Pada Program Javascript

Apa yang akan kamu lakukan saat disuruh mencetak kalimat yang berulang-ulang?

Misalnya:

“Tolong tampilkan kalimat "Belajar Javascript di FajarYusuf.Com!" di website saya sebanyak 10 kali”

Mungkin kamu bisa menuliskannya dengan fungsi document.write() sebanyak 10 kali seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
     document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
    </script>
</body>
</html>

Hasilnya:

klik gambar untuk memperbesar

Menampilkan teks tanpa looping
Apakah boleh seperti ini?

Ya, boleh-boleh saja.

Tetapi ...

Bagaimana kalau nanti dia mau menampilkan sebanyak 1000 kali.

Pasti capek banget ngetik 1000 kali .

Karena itu, kita harus menggunakan looping atau perulangan.

Perulangan akan membantu kita mengeksekusi kode yang berulang-ulang, tidak peduli berapa banyak yang kita mau.

Ada lima macam bentuk perulangan di Javascript. Secara umum, perulangan ini dibagi dua.

Yaitu: counted loop dan uncounted loop.

Perbedaanya :

Counted Loop merupakan perulangan yang jelas dan sudah tentu banyak perulangannya.
Sedangkan Uncounted Loop, merupakan perulangan yang tidak jelas berapa kali ia harus mengulang.
Perulangan yang termasuk dalam Counted Loop:

Perulangan For
Perulangan Foreach
Perulangan Repeat

Perulangan yang termasuk dalam Uncounted Loop:

Perulangan While
Perulangan Do/While

Mari kita bahas satu per satu…

Perulangan For di Javascript

Perulangan for merupakan perulangan yang termasuk dalam counted loop, karena sudah jelas berapa kali ia akan mengulang.

Bentuknya seperti ini:

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

contoh coding lengkap :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
   for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}
    </script>
</body>
</html>

Yang perlu diperhatikan adalah kondisi yang ada di dalam kurung setelah kata for.

Kondisi ini akan menentukan:

Hitungan akan dimulai dari 0 (i = 0);
Hitungannya sampai berapa? Sampai i < 10;
Lalu di setiap perulangan i akan bertambah +1 (i++).
Variabel i pada perulangan for berfungsi untuk menyimpan nilai hitungan.

Jadi setiap perulangan dilakukan nilai i akan selalu bertambah satu. Karena kita menentukannya di bagian i++.

Ini hasil outputnya:

klik gambar untuk memperbesar

Apakah nama variabelnya harus selalu i?

Tidak.

Kita juga bisa menggunakan nama lain.

Misalnya:

for(counter = 0; counter < 50; counter+2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

Pada contoh tersebut, kita melakukan perulangan dimulai dari nol 0. Lalu di setiap perulangan nilai variabel counter akan ditambah 2 (counter+2).

Bagaimana kalau counter perulangannya dimulai dari angka yang lebih besar sampai yang ke paling kecil?

Ini biasanya kita buat saat ingin menghitung mundur…

Caranya gampang.

Kita tinggal isi nilai counter dengan nilai paling besar.

Misalnya kita akan mulai hitungan dari 10 sampai ke 0.

Maka nilai counter, kita isi awalnya dengan 10.

Lalu di kondisi perbandingannya, kita berikan counter > 0. Artinya perulangan akan dilakukan selama nilai counter lebih besar dari 0.

Lalu kita kurangi (-1) nilai counter di setiap perulangan (counter--).

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

Coding lengkapnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
   for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}
    </script>
</body>
</html>

Hasil :

klik gambar untuk memperbesar

Mengapa tidak sampai nol (0)?

Karena kondisi yang kita berikan counter > 0. Apabila counter bernilai 0, maka kondisi ini akan menjadi false.

Kecuali kita menggunakan operator lebih besar sama dengan (>=), maka jika counter bernilai 0, kondisi akan menjadi true.

Perulangan While di Javascript

Perulangan while merupakan perulangan yang termasuk dalam perulangan uncounted loop.

Perulangan while juga dapat menjadi perulangan yang counted loop dengan memberikan counter di dalamnya.

Untuk memahami perulangan ini…

…mari kita coba lihat contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
  var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;
while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}
document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");
    </script>
</body>
</html>

Bisa disederhanakan menjadi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
  var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;
while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}
document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");
    </script>
</body>
</html>

Hasilnya:

klik pada gambar untuk memperbesar

Coba perhatikan blok kode while:

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

Pada blok kode tersebut… Perulangan akan terjadi selama variabel ulangi brenilai true.

Lalu kita menggunakan fungsi confirm() untuk menampilkan dialog konfirmasi.

Selama kita memilih Ok pada dialog konfirmasi, maka variabel ulangi akan terus bernilai true.

Tapi kalau kita pilih Cancel, maka variabel ulangi akan bernilai false.

Saat variabel ulangi bernilai false, maka perulangan akan dihentikan.

Perulangan Do/While di Javascript

Perulangan do/while sama seperti perulangan while.

Perbedaanya:

Perulangan do/while akan melakukan perulangan sebanyak 1 kali terlebih dahulu, lalu mengecek kondisi yang ada di dalam kurung while.

Bentuknya seperti ini:

do {
    // blok kode yang akan diulang
} while (<kondisi>);

Jadi perbedaanya:

Perulangan do/while akan mengecek kondisi di belakang (sesudah mengulang), sedangkan while akan mencek kondisi di depan atau awal (sebelum mengulang).

Mari kita coba lihat contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
  var ulangi = confirm("Apakah anda mau mengulang?");;
var counter = 0;
do {
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)
document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");
    </script>
</body>
</html>

Contoh tersebut sama seperti contoh pada perulangan while.

Saat perulangan pertama, cobalah untuk membatalkan perulangannya dengan memilih Cancel.

Maka hasilnya:

klik gambar untuk memperbesar

Perulangan Foreach di Javascript

Perulangan foreach biasanya digunakan untuk mencetak item di dalam array.

Perulangan ini termasuk dalam perulangan counted loop, karena jumlah perulangannya akan dituntukan oleh panjang dari array.

Ada dua cara menggunakan perulangan foreach di Javascript:

Menggunakan for dengan operator in;
Mengguunakan method forEach().

Berikut ini bentuk perulangan “foreach” tanpa menggunakan operator in:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
var languages = ["Javascript", "HTML", "CSS", "Typescript"];
for(i = 0; i < languages.length; i++){
    document.write(i+". "+ languages[i] + "<br/>");
}
    </script>
</body>
</html>

Perulangan ini dapat dibuat lebih sederhana lagi dengan menggunakan operator in seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
var languages = ["Javascript", "HTML", "CSS", "Typescript"];
for(i in languages){
    document.write(i+". "+ languages[i] + "<br/>");
}
    </script>
</body>
</html>

Hasilnya:

klik gambar untuk memperbesar

Cara kedua membuat perulangan foreach ialah dengan menggunakan method forEach() dari array.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
// kita punya array seperti berikut
var days = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];
// Kemudian kita tampilkan semua hari
// dengan menggunakan method foreach
days.forEach(function(day){
    document.write("<p>" + day + "</p>");
});
    </script>
</body>
</html>

Method forEach() memiliki parameter berupa fungsi callback. Sebenarnya kita juga bisa menggunakan arrow function seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
// kita punya array seperti berikut
var days = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];
// Kemudian kita tampilkan semua hari
// dengan menggunakan method foreach
days.forEach((day) => {
    document.write("<p>" + day + "</p>");
});
    </script>
</body>
</html>

Hasilnya:

klik pada gambar untuk memperbesar

Perulangan dengan Method repeat()

Perulangan dengan method atau fungsi repeat() termasuk dalam perulangan counted loop.

Fungsi ini khusus digunakan untuk mengulang sebuah teks (string).

Bisa dibilang:

Ini merupakan kode singkat dari perulangan for.

Apabila kita menggunakan perulangan for:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
for( let i = 0; i < 100; i++){
    document.write("Ulangi kalimat ini!");
}
    </script>
</body>
</html>

Apabila kita menggunakan fungsi repeat():

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
document.write("Ulangi kalimat ini! ".repeat(100));
    </script>
</body>
</html>

Hasilnya:

klik pada gambar untuk memperbesar

Perulangan Bersarang (Nested)

Di dalam blok perulangan, kita juga dapat membuat perulangan.

Ini disebut dengan nested loop atau perulangan bersarang atau perulangan di dalam perualangan.

Mari kita coba lihat contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
for(let i = 0; i < 10; i++){
    for(let j = 0; j < 10; j++){
        document.write("<p>Perulangan ke " + i + "," + j + "</p>");
    }
}
    </script>
</body>
</html>

Hasilnya:

klik gambar untuk memperbesar

Pada perulangan tersebut, kita menggunakan dua perulangan for.

Perulangan pertama menggunakan variabel i sebagai counter, sedangkan perulangan kedua menggunakan variabel j sebagai counter.

Contoh lain:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
var ulangi = confirm("apakah anda ingin mengulang?");
var counter = 0;
while (ulangi) {
    counter++;
    var bintang = "*".repeat(counter) + "<br>";
    document.write(counter + ": " + bintang);
    ulangi = confirm("apakah anda ingin mengulang?");
}
    </script>
</body>
</html>

Hasilnya:

klik gambar untuk memperbesar

Nanti, kita akan banyak menggunakan perulangan bersarang saat bekerja dengan array dua dimensi.

Kita dapat membuat perluangan sebanyak mungkin di dalam perulangan yang lainnya.

Namun, Kita perlu memperhatikan hal berikut :

Semakin banyak perulangannya, maka komputer akan semakin lama memprosesnya.
Tentu ini akan membuat website atau aplikasi kita berjalan lambat.
Karena itu, gunakan perulangan dengan bijak

Traha Infinity a lancé une campagne événementielle de pré-inscription

Moai Games a officiellement annoncé la sortie d’ un nouveau MMORPG intitulé Traha Infinity , dans la première moitié de 2022. Ce jeu mobile devrait se dérouler 200 ans avant les événements des précédents jeux Traha , il a des graphismes Full 3D et optimisés performances haut de gamme pour smartphones. Traha a été un énorme succès en Corée avec 4,2 millions de précommandes avant sa sortie officielle en 2019, le jeu mobile n’a jamais eu de sortie mondiale. Ce jeu a été développé par Moai Games et publié par Nexon , et est devenu l’un des jeux les plus vendus de l’époque. Et maintenant, Traha Infinity continuera le même monde comme une suite, plutôt une préquelle. Le nouveau jeu présentera la même vision du monde et la même topographie que le jeu précédent, mais présentera un nouveau scénario. Ils se vantent d’ une qualité graphique Full 3D haut de gamme ainsi que d’un système optimisé pour les smartphones. Les joueurs pourront explorer l...

Baca Lebih »

FajarYusuf

Search This Blog