Pendahuluan
Assalamualaikum Warahmatullahi Wabarakatuh. Halo teman-teman! Bagi Anda yang saat ini sedang menempuh studi jurusan Informatika, pasti pernah mendapatkan tugas mencetak pola asterisk dengan menggunakan looping menggunakan bahasa pemrograman tertentu. Hal ini telah menjadi hal yang pasti bagi kita ketika mempelajari materi looping pada pemrograman. Selain itu, logika kita secara tidak langsung juga akan terlatih ketika memahami kode untuk mencetak pola-pola tersebut.
Pada artikel ini, saya akan membagikan cara membuat pola asterisk berbentuk persegi dan segitiga menggunakan bahasa pemrograman JavaScript. Eits, tenang! Anda dapat menggunakan bahasa pemrograman apapun kok, karena pada dasarnya logika & algoritma yang digunakan sama.
Apa itu JavaScript?
JavaScript adalah bahasa pemrograman populer yang digunakan untuk membuat situs dengan konten website yang dinamis. Faktanya, ada lebih dari 67,7 persen developer yang menggunakan JavaScript, lho! Konten dinamis artinya konten dapat bergerak atau berubah di depan layar tanpa perlu mereload halaman. Misalnya saja, fitur slideshow foto, gambar animasi, pengisian poling, dll.
Disclaimer
JavaScript merupakan bahasa pemrograman yang dapat berjalan di front-end maupun back-end. Di lingkungan front-end, JavaScript berjalan pada runtime yang dimiliki oleh browser. Sedangkan di lingkungan back-end, JavaScript berjalan pada runtime NodeJS. Pada artikel ini, saya menggunakan JavaScript di lingkungan front-end dengan bantuan HTML untuk menampilkannya pada browser.
Oleh karena itu, Anda dapat membuat file HTML dan JavaScript terlebih dahulu. Di dalam file HTML, buat sebuah tag dengan id tertentu dan jangan lupa untuk menghubungkan dengan file JavaScript kalian. Untuk lebih jelasnya, kamu dapat melihat kode di bawah ini:
HTML
<!DOCTYPE html>
<html lang="getElementById">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<script src="script.js"></script>
</body>
</html>
Selamat! Semuanya sudah siap dan Anda dapat lanjut menulis kode JavaScript.
Kode 1: Pola Persegi
Berikut ini adalah kode JavaScript untuk membuat asterisk dengan pola persegi. Anda dapat menuliskan kode ini di dalam file JavaScript yang telah dibuat sebelumnya.
JavaScript
let n = 5;
let string = "";
for (let i = 0; i < n; i++) {
for (let j = 0; j < n; j++) {
string += "* ";
}
string += "<br>";
}
document.getElementById("demo").innerHTML = string;
Untuk membuat pola bintang berbentuk persegi, dibutuhkan loop bersarang. Variabel n yang terdapat pada program di atas merepresentasikan berapa banyak baris dan kolom yang ingin ditampilkan. Loop yang berada di dalam berperan
untuk mencetak simbol bintang sebanyak n kali. Jika jumlah bintang sama dengan nilai n, maka akan dijalankan loop yang berada di luar. Loop tersebut berperan untuk memberi spasi antar baris (<br />).
Untuk melihat hasilnya, Anda dapat membuka file HTML menggunakan web browser yang Anda miliki. Hasilnya akan terlihat seperti gambar di bawah ini:
Kode 2: Pola Segitiga Siku-Siku
Berikut ini adalah kode JavaScript untuk membuat asterisk dengan pola segitiga siku-siku. Anda dapat menuliskan kode ini di dalam file JavaScript yang telah dibuat sebelumnya.
JavaScript
let n = 5;
let string = "";
for (let i = 1; i <= n; i++) {
for (let j = 0; j < i; j++) {
string += "*";
}
string += "<br>";
}
document.getElementById("demo").innerHTML = string;
Untuk membuat pola bintang berbentuk segitiga siku-siku, dibutuhkan sebuah loop bersarang. Variabel m pada program di atas merepresentasikan berapa banyak baris yang ada di segitiga tersebut. Loop yang berada di dalam berperan
untuk mencetak simbol bintang sesuai dengan barisnya. Pada baris ke-1 akan dicetak sebanyak 1 bintang, baris ke-2 akan dicetak sebanyak 2 bintang, dan seterusnya. Setelah jumlah bintang dicetak sama dengan jumlah baris, maka
akan dijalankan loop yang berada di luar untuk memberi spasi antar baris (<br />).
Untuk melihat hasilnya, Anda dapat membuka file HTML menggunakan web browser yang Anda miliki. Hasilnya akan terlihat seperti gambar di bawah ini:
Kode 3: Pola Segitiga Pascal
Berikut ini adalah kode JavaScript untuk membuat asterisk dengan pola segitiga pascal. Anda dapat menuliskan kode ini di dalam file JavaScript yang telah dibuat sebelumnya.
JavaScript
let n = 5;
let string = "";
for (let i = 1; i <= n; i++) {
for (let j = 0; j < i; j++) {
string += "*";
}
string += "<br>";
}
for (let i = 1; i <= n - 1; i++) {
for (let j = 0; j < n - i; j++) {
string += "*";
}
string += "<br>";
}
document.getElementById("demo").innerHTML = string;
Untuk membuat pola bintang berbentuk segitiga pascal, dibutuhkan dua loop bersarang. Loop bersarang ke-1 berperan untuk mencetak simbol bintang hingga baris ke n dan loop bersarang ke-2 berperan untuk mencetak simbol bintang hingga baris ke n * 2 - 1. Di loop bersarang ke-1, jumlah bintang sama dengan jumlah baris. Akan tetapi, di loop bersarang ke-2, jumlah bintang berbanding terbalik dengan jumlah baris.
Untuk melihat hasilnya, Anda dapat membuka file HTML menggunakan web browser yang Anda miliki. Hasilnya akan terlihat seperti gambar di bawah ini:
Penutup
Itulah beberapa cara untuk membuat beberapa pola asterisk menggunakan JavaScript. Cukup Seru bukan? kita dapat mengetahui bagaimana cara JavaScript dan HTML berkomunikasi, cara menulis sintaks JavaScript, dan menampilkan asterisk berpola pada laman website statis. Sekian yang dapat saya berikan, terima kasih! Wassalamualaikum Warahmatullahi Wabarakatuh.