Membuat Pattern Dengan Javascript!

Apakah bisa sebuah program komputer diajak untuk menggambar?, tentu saja bisa! dengan logika manusia kita dapat membuat sebuah program komputer dengan bahasa tertentu untuk mecetak pola sehingga membentuk pattern, disinilah yang disebut menggambar pattern!

Kali ini saya menggunakan bahasa javascript sebagai bahasa pemrogramannya!, sebelum itu mari kenalan dengan javascript

Javascript

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning Area.
src : https://developer.mozilla.org/

Intinya, javascript adalah bahasa pemrograman yang digunakan sebagai pelengkap dari HTML, sehingga dapat merubah bentukan dari HTML+CSS

LOOPING

Sebelum masuk ke cara pembuatan pattern kita harus mengerti terlebih dulu apa itu looping pada program Looping > Mengulangi, Perulangan. yang mana bisa diartikan suatu yang berulang terus menerus dalam bahasa pemrograman LOOPING digunakan untuk mengulangi syntax dari iterasi pertama hingga akhir(diminta)

Jenis Looping :

1. For Loop
2. While Loop

Contoh:

atau

MEMBUAT PATTERN

Gunakan f12 > console untuk melihat tampilan atau tekan tombol untuk melihat pop

1. Pattern Segitiga

            let n = 5;
            let string = "";
            for (let i = 1; i <= n; i++) {
            for (let j = 0; j < i; j++) {
                string += "*";
            }
            string += "\n";
            }
            console.log(string);
            

Untuk membuat pola segitiga kiri di javascript lagi, jalankan 2 nested for loop external loop akan menangani kolom pola dan loop internal akan mencetak baris pola.

Anda dapat mengamati dari pola yang ditunjukkan di atas bahwa kita perlu menjalankan loop eksternal untuk waktu 'n' sementara loop internal berjalan 1 kali pada eksekusi pertama, 2 kali pada eksekusi kedua, dan seterusnya hingga 'n' kali .

2. Pattern Segitiga Sisi Kiri Terbalik

            let n = 5;
            let string = "";
            for (let i = 0; i < n; i++) {
                // printing star
                for (let k = 0; k < n - i; k++) {
                string += "*";
                }
                  string += "\n";
                }
                console.log(string);
            

Untuk membuat pola bintang segitiga ke bawah gunakan loop bersarang, ini juga dikenal sebagai pola bintang terbalik. Dari pola yang ditampilkan di atas, Anda dapat melihat jumlah bintang berkurang dari 'n' menjadi 1.

3. Pattern Segitiga Pyramid

            let n = 5;
            let string = "";
            // External loop
            for (let i = 1; i <= n; i++) {
              // printing spaces
              for (let j = 1; j <= n - i; j++) {
                string += " ";
               }
               // printing star
               for (let k = 0; k < 2 * i - 1; k++) {
                 string += "*";
                }
                string += "\n";
                }
                console.log(string);            let n = 5;
            let string = "";
            for (let i = 0; i < n; i++) {
                // printing star
                for (let k = 0; k < n - i; k++) {
                string += "*";
                }
                  string += "\n";
                }
                console.log(string);
            

Pola bintang Piramida adalah pola bintang yang terkenal, Anda bisa melihat bentuk pola di atas. Ini menggunakan 2 loop di dalam loop eksternal satu untuk mencetak ruang dan yang lainnya untuk mencetak bintang. Jumlah spasi dalam satu baris adalah n - i di setiap baris dan jumlah bintang dalam satu baris adalah 2 * i - 1.

4. Pattern Kotak

                let n = 5; // row or column count
                // defining an empty string
                let string = "";
                
                for(let i = 0; i < n; i++) { // external loop
                  for(let j = 0; j < n; j++) { // internal loop
                    string += "*";
                  }
                  // newline after each row
                  string += "\n";
                }
                // printing the string
                console.log(string);
            

Untuk membuat pola bintang persegi, jalankan 2 nested for loop. Jalankan setiap loop untuk 'n' beberapa kali, di mana 'n' adalah jumlah baris/kolom dalam kotak, yaitu for(let i = 0; i < n; i++). Perulangan internal akan berjalan selama 'n' beberapa kali yang akan dicetak mulai dalam satu baris dan baris baru di akhir perulangan (\n) sedangkan perulangan luar akan menjalankan perulangan internal selama 'n' beberapa kali yang akan cetak dimulai dalam kolom

Gimana?, seru bukan? menggambar tapi pakai logika dan progra ahahahaa semoga artikel ini bermanfaat ^_^