Pada blog kali ini, kita akan belajar bagaimana cara membuat bentuk-bentuk sederhana di HTML menggunakan bantuan JavaScript nih. Kita bisa mulai dengan membuat elemen sebagai wadah untuk bentuk yang akan gambar, disini saya akan menggunakan elemen div. lalu untuk javascript kita tulis di dalam sebuah elemen script.
Disini kita akan membuat bentuk persegi, segitiga, dan juga gambar rubah. Untuk penjelasannya sendiri bisa di baca lebih lanjut di bawah, sudah saya bagi menjadi 3 bagian agar lebih mudah.
Pada bagian javascript kita deklarasikan sebuah variabel konstanta dengan nama panjang untuk menyimpan panjang dari sisi persegi yang akan kita gambar agar lebih mudah jika kita mau mengubah panjangnya.
Lalu buat juga sebuah variabel untuk menyimpan gambar berupa string yang akan kita buat dengan menggunakan looping for nantinya disini saya beri nama str.
Setelah itu baru kita melakukan looping menggunakan for, dengan variabel i bernilai 1, dan dengan kondisi jika i kurang dari sama dengan panjang, dan menambahkan 1 ke nilai i Ketika pernyataan di dalamnya telah dilaksanakan.
Di dalam for loop tersebut kita akan menambahkan karakter dengan panjang panjang dan ‘<br />’ untuk pindah ke baris baru ke dalam variabel str, disini saya menggunakan .repeat untuk mengulang karakter agar lebih mudah, anda juga bisa menggunakan for loop lagi jika mau.
Setelah for loop selesai kita akan menampilkan output dengan mengubah html didalam div yang tadi dengan nilai dari variabel str. Disini kita menggunakan document.querySelector untuk mendapat elemen div tadi dengan selector “div”, lalu assign variabel str ke innerHTML dari div, sehingga nilai dari variable str berada di dalam div.
Secara keseluruhan hampir sama dengan menggambar persegi di nomer 1. Hanya saja kita mengulang sebanyak i kali. Dan juga panjang menjadi tinggi.
See the Pen Segitiga1 by Nunu27 (@nunu27) on CodePen.
Untuk menggambar segitiga lagi dibawahnya tetapi terbalik, kita tinggal copas for loop yang telah ada ke bawahnya, lalu mengganti nilai awal i menjadi tinggi - 1, kondisi menjadi jika i lebih besar dari 0, dan mengurangi i dengan 1 setiap kali selesai melakukan pernyataan di dalam for loop. Berikut hasilnya
Atau kita bisa menghitung langsung panjang dari setiap baris menggunakan rumus sederhana dan mengubah kondisi for loop menjadi i kurang dari tinggi x 2. Dan kita akan mendapatkan hasil yang sama.
Disini saya menggambar rubah, karena pada string akhir terdapat spasi yang banyak, kita harus menggunakan element pre (preformatted) agar di tampilkan apa adanya, saya juga menambahkan style text-align center pada elemen pre agar pada bagian dagu otomatis di tengah, lalu line-height 5px agar terlihat rapat.
Pertama saya mendeklarasikan beberapa konstanta agar mudah di modifikasi nantinya. Konstanta karakter disini saya pakai untuk menyimpan karakter yang akan digunakan untuk menggambar, lalu panjangTelinga mendefinisikan panjang telinga dari rubah, konstanta ini juga digunakan sebagai skala, dan konstanta yang lain sudah jelas sesuai namanya.
Lalu beberapa variabel selanjutnya hanyalah penyimpanan sementara, variabel panjangDagu akan digunakan sebagai kondisi untuk loop while dengan default value lebar, jadi selama panjangDagu tidak 0 maka loop akan terus berjalan, str untuk menyimpan hasil akhir, dan i untuk penanda baris.
Di dalam loop kita mengecek apakah i kurang dari sama dengan panjangTelinga jika iya maka kita akan menambahkan karakter sebanyak i lalu spasi sebanyak lebar - 2i karena telinganya ada dua, dan tambahkan lagi karakter sebanyak i. Jika tidak maka kita mengecek apakah i kurang dari sama dengan tinggiAtas jika iya maka tambahkan karakter sebanyak lebar. Jika tidak maka kita menambahkan karakter sebanyak panjangDagu lalu mengurangi panjangDagu dengan 1.
Setelah diatas sudah selesai kita menambahkan linebreak dengan menggunakan ‘\n’ atau ‘<br />’, dan menambahkan i dengan 1, dan begitu seterusnya hingga panjangDagu = 0.
Lalu di bagian akhir kita memasukkan nilai str kedalam elemen pre dengan cara seperti sebelumnya.
