Kali ini kita akan mengerjakan soal latihan lagi, dan topik yang dibahas kali ini adalah perulangan bersarang. Jadi kita akan menuliskan kode yang menggunakan perulangan sebanyak dua kali, untuk menuliskan hasil seperti ini di layar. Kita menyusun angka dengan bentuk segitiga, yang semakin ke bawah semakin besar. Perhatikan urutan angkanya ya. Angkanya bersusun ke arah samping, dan apabila sudah mencapai sisi paling kanan, maka angkanya melanjutkan ke bawah dimulai dari kiri ke kanan lagi. Begitulah seterusnya.

Kalau hanya membahas satu soal saja rasanya kurang banyak ya. Jadi di video ini saya sediakan 3 soal. Di soal kedua, bentuk segitiganya dibalik. Sisi paling besarnya di atas, dan semakin kebawah semakin kecil. Perhatikan juga urutan angkanya disusun secara diagonal. Lihat ya posisi angka 5, berbentuk diagonal. Begitu juga dengan 4, 3, dan 2.

Sekarang soal ketiga. Kita kembali ke segitiga seperti soal pertama. Namun disini susunan angkanya diubah. Kalau tadinya berurut ke samping, sekarang menjadi berurut ke bawah. Apabila angka sudah mencapai sisi paling bawah, maka angka dilanjutkan lagi disebelah kanannya, dimulai dari paling atas ke arah bawah, dan begitulah seterusnya.

Seperti biasa, kerjakan dahulu soal latihan ini di komputer masing-masing. Pause terlebih dahulu video ini. Dan nantinya kita akan kembali lagi untuk membahas solusinya.

Oke. Kita coba kerjakan latihan kita. Disini saya sudah menyediakan 4 buah file. Yang pertama adalah index.html, yang isinya hanya boilerplate dan tag script yang mengarah ke perulangan1.js. Setelah itu saya menyediakan 3 buah file js untuk masing-masing soal. Kita mulai dari soal pertama di file perulangan1.js.

Pertama kita buah dahulu sebuah konstanta untuk menentukan ukuran dari segitiga kita. Kita beri nama size dengan nilai 5.

const SIZE = 5;

Setelah itu kita mulai melakukan perulangan, dengan menggunakan for. Kita menggunakan variable i sebagai iterator, dengan nilai awal i = 0. Kondisi i < SIZE. Dan increment i++.

for(let i = 0; i < SIZE; i++)

Di dalamnya, kita coba dahulu ya. Misalkan kita tulis karakter bintang dan spasi. Kita simpan dan lihat hasilnya di browser. Kita pilih Inspect, lalu console. Browser menampilkan bintang sebanyak 5 kali. Sebenarnya bintang ini terpisah di baris yang berbeda-beda. Namun berhubung konten dan nomor baris kode yang menampilkan bintang ini sama, maka digabung menjadi satu baris dan didepannya diberikan angka 5.

Selanjutnya di dalam looping, kita akan membuat satu loop lagi. Nah, disini ada hal penting yang perlu diingat ya. Berhubung nama variable i sudah kita gunakan di looping pertama, maka pada looping kedua kita harus menggunakan nama variable lain. Biasanya untuk looping kedua kita menggunakan j, dan kalau ada looping ketiga, maka kita menggunakan k. Namun looping ketiga sangat jarang terjadi ya. Apalagi looping keempat dan seterusnya. Mengapa? Karena semakin banyak looping bersarang, maka script yang kita tulis menjadi semakin lambat.

Sekarang kita buat dahulu looping kedua. Kita gunakan nama variable j. Kita beri nilai awal 0, dengan kondisi j < SIZE, dan increment j++.

for(let j = 0; j < SIZE; j++)

Kita pindahkan kode console log ke dalam looping kedua. Kita simpan dan jalankan di browser. Maka kita mendapatkan bintang sebanyak 25 kali. Mengapa ada 25? Karena pada looping pertama kita melakukan perulangan sebanyak 5 kali, sedangkan pada looping kedua kita ulangi lagi sebanyak 5 kali. Maka jumlah perulangan totalnya adalah 5 dikalikan dengan 5, yaitu 25.

Nah, kalau kita lihat kembali ke soal. Kita tidak mau setiap baris hanya terdiri dari satu bintang ya. Kita maunya dalam satu baris bisa terdiri dari banyak bintang. Jadi kita pindahkan lagi console log keluar dari looping kedua, tapi masih berada di dalam looping pertama. Hasilnya kembali ke semula ya. Satu bintang sebanyak 5 baris.

Kita ingin agar setiap barisnya ada jumlah bintang sebanyak perulangan j. Jadi kita akali ya. Sebelum perulangan, kita buat dahulu sebuah variable untuk menampung string yang hendak kita tulis per baris. Misalkan kita beri nama variable-nya adalah s dengan nilai awal string kosong.

let s = "";

Di dalam looping kedua, kita tambahkan variable s dengan string bintang spasi.

s += "* ";

Setelah looping kedua, yang kita tulis adalah nilai dari variable s. Kita simpan dan jalankan di browser. Maka sekarang kita mendapatkan 5 buah baris yang isinya 5 buah bintang. Bentuk ini adalah bujur sangkar. Kalau kita hendak mengubahnya menjadi segitiga, maka kita bisa mengubah kondisi dari loop kedua menjadi j < i. Dan sekarang kita sudah mendapatkan bentuk segitiga.

Namun kalau diperhatikan kembali, ternyata baris pertamanya kosong ya. Sedangkan baris terakhir hanya ada 4 buah bintang. Target kita adalah baris pertama satu bintang, sedangkan baris terakhir 5 bintang. Jadi kita ubah lagi kondisinya menjadi j <= i.

Nah, sekarang bentuknya sudah sesuai dengan soal latihan kita ya. Kita tinggal mengisikan angka di dalamnya saja. Sekarang kita coba ya. Misalkan nilai variable s di dalam loop kedua, kita tambahkan dengan variable i dan spasi. Apakah yang akan terjadi? Coba teman-teman tebak ya. Hasilnya, setiap bintang akan diganti menjadi nilai dari i. Dan berhubung i ini adalah perulangan di tingkat barisnya, maka setiap baris memiliki nilai yang sama. Dimulai dari 0, dan terakhirnya adalah 4.

Sekarang kalau variable i kita ganti menjadi j. Kira2 apa yang terjadi? Coba teman-teman tebak lagi.

Nah, berhubung j adalah perulangan di bagian kolom, maka sekarang setiap kolom memiliki nilai yang sama. Nilainya tetap dari 0 hingga 4 ya.

Bagaimana caranya agar kita bisa menuliskan nilai yang sesuai dengan soal latihan kita? Nilai dari 1 hingga 15, yang bersusun ke kanan. Nah, untuk itu kita perlu menambahkan variable baru yang berfungsi sebagai nilai yang ditampilkan di dalam segitiga. Sebelum looping pertama, kita initialisasikan dahulu nilainya ya. Misalkan kita beri nama value, dan kita beri nilai awal 1.

let value = 1;

Dan nilai yang kita tambahkan ke s, kita ganti menjadi value. Oke. Sekarang kita mendapatkan segitiga yang nilainya satu semua. Dan untuk mendapatkan nilai yang berurutan dan meningkat, maka kita harus melakukan increment terhadap variable value.

Oke, sekarang latihan pertama kita sudah kelar. Kita sudah mendapatkan hasil yang sesuai dengan soal latihan. Kalau teman-teman perhatikan lagi, kolom pada baris kelima tidak sama dengan baris sebelumnya ya. Hal ini disebabkan karena setiap angka di dalam kolom terdiri dari 2 angka, sehingga kolomnya menjadi besar. Apabila teman-teman dapat menambahkan kode lagi untuk merapikan kolom ini, itu lebih bagus ya. Namun apabila tidak bisa, untuk saat ini masih tidak masalah ya.

Yang perlu diperhatikan disini adalah mengapa kita menggunakan konstanta SIZE di awal kode? Nah, kalau teman-teman perhatikan, kode yang kita tuliskan disini bukan dirancang hanya untuk segitiga berukuran 5 baris aja. Ukuran segitiga bisa saya besarkan. Misalkan mau menjadi 6 baris. Saya tinggal mengubah nilai pada konstanta ini. Hasilnya tetap sesuai dengan aturan yang telah ditetapkan pada soal latihan. Jadi kita bisa mengubah ukuran segitiga menjadi berapa pun yang kita mau, cukup dengan mengubah nilai konstanta ini saja. Nanti teman-teman bisa mencoba sendiri ya.

Sekarang kita lanjutkan ke soal latihan kedua. Kita ke file index.html terlebih dahulu. Kita ubah tag img menjadi capture2.png. Lalu untuk tag script kita ubah menjadi perulangan2.js. Kita simpan.

Lalu kita kembali ke file perulangan1.js. Kita copy semuanya. Lalu kita paste ke perulangan2.js.

Nah, untuk mengubah segitiga menjadi besar di awal dan kecil di akhir, kita tinggal mengubah kondisi dari perulangan j menjadi j < SIZE – i. Dan sekarang baris pertama menjadi memiliki 5 buah nilai. Baris berikutnya ada 4 nilai. Dan semakin kebawah semakin sedikit.

Namun disini kita masih menggunakan nilai secara increment ya. Sedangkan pada soal, kita ingin menuliskan nilai secara diagonal. Nilai diagonal seperti ini adalah i + j. Jadi di dalam looping kedua, nilai value++ ini kita ganti menjadi (i + j). Kita lihat hasilnya. Dimulai dari 0 ya. Kalau kita ingin dimulai dari satu, maka kita ubah lagi menjadi (i + j + 1).

Hasilnya sudah sesuai dengan soal ya. Kita kembali ke kode dan kita hapus deklarasi variable value.

Kita lanjutkan ke soal latihan ketiga. Kita kembali lagi ke index.html. Kita ubah gambarnya menjadi capture3.png dan kita ubah script menjadi perulangan3.js. Kita simpan.

Kita copy lagi script dari perulangan1.js dan kita paste ke perulangan3.js. Kita lihat hasilnya.

Bentuk segitiganya sudah benar ya. Hanya saja nilainya bersusun ke samping. Sedangkan soal latihan kita, nilainya bersusun ke bawah. Bagaimana cara mengubah agar nilai bersusun ke bawah? Pertama kita ubah nilai kolom pertama dahulu ya, agar menjadi 1 2 3 4 5 bersusun ke bawah.

Caranya? Pertama kita pindahkan dahulu deklarasi dari variable value. Awalnya diluar loop. Kita pindahkan menjadi di dalam loop pertama. Hasilnya? Pada setiap baris, nilai awalnya diulang lagi menjadi 1.

Untuk mengubahnya menjadi 1 2 3 4 5, maka inisialisasi variable value harus kita ubah menjadi i + 1.

Dan sekarang kolom pertama sudah sesuai dengan yang kita mau. Nah sekarang kita perhatikan lagi soal pada kolom kedua. Kolom kedua ini adalah pada saat j bernilai 1. Yang ditulis disini adalah nilai dari kolom pertama ditambah 4. Perhatikan bahwa nilai 6 adalah 2 ditambah 4. Lalu 7 adalah 3 ditambah 4. Dan seterusnya.

Perhatikan lagi nilai di kolom ketiga adalah nilai kolom kedua ditambah 3. Sedangkan kolom keempat adalah kolom ketiga ditambah dua. Dan terakhir adalah ditambah 1.

Kita kembali ke kode kita. Jadi value disini harus menjadi nilai awal ya. Lalu pada inisialisasi variable s ini, kita mesti ubah bukan lagi string kosong, melainkan value ditambah spasi.

Lalu pada perulangan j, harus kita ubah bukan lagi dimulai dari 0. Nilai j dimulai dari 1. Isi dari looping kedua, kita tambahkan kode

value += SIZE – j;

Dan yang kita hilangkan increment pada saat menambahkan value ke variable s.

Kita simpan dan lihat hasilnya. Dan kita sudah berhasil mengerjakan soal latihan ketiga ya. Untuk soal ketiga ini, memang logikanya jauh lebih sulit dibandingkan dengan soal pertama ya. Karena pada kode kita, komputer bekerja dengan arah ke samping, sedangkan kita perlu menghitung nilai dengan ke bawah. Jadi kita perlu memikirkan bagaimana logika untuk menghitung nilai ke samping.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.