Jun 20, 2020

Cara Membuat Segitiga dari Tanda Bintang (*) JavaScript

Tintangan June 20, 2020 4 Comments

Assalaamu'alaikum.

Welcome back, Guys.
Today, I learning JavaScript about For looping. O Yeah
Btw about JavaScript, This material's always makes me think logically. It's rather hard by the way, but I interested to learning further about it. Ok, so Let's go :)

Btw, ini artikel berbahasa Indo ya, sekali-kali pakai bahasa Inggris lah wkwk.

Don't be Infinite Looping to remember your Doi, but
Be Infinite Looping to remember your God, Allah Ta'ala
Aamiin Ya Rabbal Alamin hehe
Eaa gimana? Kerenkan? Aowkwk :v
Maaf kalau salah yaa, masih belajar wkwkwk

 Ok, gini. Mau buat segitiga dari tanda bintang kan?
Seperti ini? Eh seperti gambar di atas kan?

 Nah, ikuti langkah-langkahnya ya, sambil buka tu Text Editornya. For the ringan-ringan, silahkan pakai Notepad++ aja, gausah pakai Visual Studio Code apalagi Notepad biasa. Karena kalau dgn Visual Studio Code, maka laptopmu akan abot (berat :). Kalau pakai Notepad biasa ialah saya larang meskipun ringan sekalipun karena kalau sudah dihapus akan susah untuk Undo, hanya bisa Undo sekali lalu tidak bisa lagi :) ok Sayank? Eh maap just kidding :)

 Yang baperan berarti hatinya kesepian wkwkwk

 Langkah 1 / Pertama, kita buat format struktur HTML dulu nih, tahu kan? Seperti ini ni.

 <!DOCTYPE HTML>
<html>
<head>

 </head>
<body>

 </body>
</html>

 Lalu, langkah 2 ialah kalian bisa menggunakan 2 cara, yaitu
  • Kode JavaScriptnya bisa diketik di dalam file HTML tsb dengan menambahkan tag <script></script> di bawah tag </body> , atau
  • Kode JavaScriptnya diketik di luar file HTML tsb dengan membuat file baru yg berjenis .js (JavaScript) lalu nanti file .js bisa dibaca file .html dgn menambah linknya seperti <script src="file.js"></script> misal.
Kalau mimin eh saya eh mimin aja deh biar lucu whahaha, taruh kodenya di dalam file .html karena kan codenya nanti hanya sedikit, sebagai latihan saja + gamau ribet :)

Langkah yang ke 3, kita buat variabelnya dulu. Kita akan buat 2 var, yaitu
  • var bernama s yg bernilai tidak ada (jadi cuma dikasih tanda petik aja) => var s = ''; , dan
  • var bernama b yg bernilai 9 => var b = 9;

Langkah 4, kita buat perulangan for untuk membuat baris nanti. Untuk nilai awalnya adalah 1 dgn membuat var di sana bernama h, lalu untuk syarat kondisinya ialah h kurang dari atau sama dengan b, lalu var h increment ya dengan lambang ++.

 for(var h = 1; h <= b; h++){
                            
}                           

 Langkah 5, kita akan mengisi aksi di perulangan for ini dengan 2 perulangan 4 eh for maksudnya hehe. Dimana

Perulangan For pertama, berfungsi untuk membuat spasi. Kita buat var i yg bernilai awal 1, dengan syarat kondisi yaitu i kurang dari atau sama dengan b dikurangi h, dengan var i increment yaitu lambang ++. untuk aksinya, kita tambahkan s += ' '; seperti ini kodenya.

for(var i = 1; i <= b - h; i++){
s += ' ';
}

Perulangan For kedua, berfungsi untuk membuat tanda bintang. Kita buat var j yg bernilai awal 1, dengan syarat kondisi yaitu j kurang dari 2 dikali h, dengan var j yaitu increment ya. Untuk aksinya, ketik aja s += '*'; seperti ini kodenya.

for(var j = 1; j < 2 * h; j++){
s += '*';
}

 Langkah ke 6, tambahkan s += '\n' untuk membuat baris baru.

 langkah ke 7 ni terakhir, supaya bisa tampil maka tambahkan console.log(s); di luar perulangan for bervariabel h ya sehingga semua kodenya terlihat seperti ini ya! (hanya bagian scriptnya saja :)

 var s = '';
var b = 9;
for(var h = 1; h <= b; h++){
for(var i = 1; i <= b - h; i++){
s += ' ';
}
for(var j = 1; j < 2 * h; j++){
s += '*';
}
s += '\n';
}

 console.log(s);

 Oya, untuk menampilkan, bisa melalui console web atau webnya langsung. Tapi karena ini sedang latihan maka mending melalui console web aja wkwk

 Mohon maaf ni, mimin belum bisa menjelaskan tentang += ataupun yg increment karena belum begitu paham, ini artikel hanya sebagai catatan buat saya supaya kalau lupa tinggal dibaca lagi wkwkwk... Nambah-nambah artikel juga di blog ini wkwk oiya kalau artikel ini bermanfaat bagi kamu sekalian-sekalian, tidak salahnya membantu artikel ini dengan mengeklik iklan yang ada di blog ini untuk membantu mimin dalam memajukan blog ini serta membantu mimin dalam ekonomi, Ok? Terima kasihh ^v^
Oya, untuk penjelasan detailnya, tiada salahnya membuka artikel saya sebelumnya yg di list atas yg ketiga, di sana telah dijelaskan lebih detail secara logika dan mudah-mudahan pada paham semuanya Aaamiin. Maafkan saya untuk artikel ini tidak dibuat penelusuran table. Intinya sama, walau struktur JavaScriptnya berbeda. Berbeda-beda tapi tetap satu jua eaa :v

 Ok sekian dari saya, terima kasih telah mampir dan baca yaa
Maaf bila ada kesalahan
Saya pamit dulu,
Wassalaamu'alaikum...
Tags:
Previous Post
Next Post
Tintangan

4 comments:

  1. BhipaksOctober 23, 2021 at 2:07 AM

    This comment has been removed by the author.

    ReplyDelete
  2. BhipaksOctober 23, 2021 at 2:09 AM

    mau tanya dong kak itu angka 2nya dapat dari mana yyaa?

    ReplyDelete
  3. AnonymousMay 3, 2022 at 6:02 AM

    Sebenernya ini workgasi? Gabisa di run😭

    ReplyDelete