HTML Programming 10 - Looping di Javascript
Assalamu'alaikum
Selamat malam, salam programming!!. Melanjutkan kembali pembahasan mengenai javascript, jika sebelumnya yang di bahas adalah tentang percabangan pada javascript, di pembahasan kali ini kita akan lebih banyak membahas fungsi pengulangan dan juga kita akan mengkombinasikan javascript agar kita bisa meletakkan script html di dalam javascript. Langsung saja berikut pembahasannya.
Loops
Tidak ada henti hentinya saya bosan menjelaskan tentang loops. Loops adalah instruksi yang digunakan untuk melakukan perulangan dengan kondisi perulangan yang kita inginkan di lakukan guna mengulang-ulang instruksi yang berada di dalam fungsi perulangan. Loop merupakan salah satu instruksi yang perlu di kuasai programmer, karena hampir di setiap program menggunakan instruksi loops ini.
Instruksi loops pada bahasa pemrogram umumnya banyak jenisnya, namun yang akan saya bahas di pembahasan javascript ini diantaranya while looping, do while looping, dan for looping.
While Looping
Masuk ke latihan pertama, kita akan mencoba latihan looping atau perulangan menggunakan pernyataan while. Untuk contohnya, perulangan yang ingin saya lakukan adalah perulagan angka 1-10. Berikut script html + javascriptnya.
| <html> <head> <title>Javascript | Perulangan While | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </title> </head> <body> <script language="Javascript"> <!-- var bilangan = 1; while (bilangan < 10) { document.write("Ngulang " + bilangan + "<br>"); bilangan++; } //--> </script> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
Do While Looping
Hampir sama dengan perulangan menggunakan while, namun bedanya menggunakan perulangan do while kondisi diletakkan di akhir ketika program sudah di eksekusi terlebih dahulu. Berikut contoh script perulangan do while.
| <html> <head> <title>Javascript | Perulangan Do While | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </title> </head> <body> <script language="Javascript"> <!-- var bilangan = 1; do { document.write("Ngulang " + bilangan + "<br>"); bilangan++; } while (bilangan < 10); //--> </script> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
For Looping
Next pembahasan for looping. pernyataan for looping merupakan instruksi yang paling sering digunakan. Berbeda dari perulangan while, kondisi yang digunakan oleh pernyataan perulangan FOR menggunakan increment pada ketika kondisi di eksekusi. Berikut contohnya.
| <html> <head> <title>Javascript | Perulangan For | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </title> </head> <body> <script language="Javascript"> <!-- var bilangan; for (bilangan=1; bilangan<=10; bilangan++){ document.write("for" + bilangan + "<br>"); } //--> </script> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
kira-kira hasilnya akan seperti contoh berikut.
Kombinasi Javascript Looping dengan Heading HTML
Dengan menggunakan javascript, tentu kita bisa membuat custom html desain sehingga pembuatan model html bisa lebih mudah dan terbantu dari scripting javascript. Di latihan ini kita akan mengkombinasikan javascript dengan html heading. Sehingga kita bisa melisting heading custom sesuai scripting javascript loopingnya. Berikut contohnya.
| <html> <head> <title>Javascript | Latihan 1 | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </title> </head> <body> <script language="Javascript"> <!-- var bil1=6; var bil2=2; var i; for (i=1; i<=11; i++){ if (i >= 7){ document.write("<h" + bil2 + "> Pemrograman Web </h" + bil2 + ">"); bil2++; } else { document.write("<h" + bil1 + "> Pemrograman Web </h" + bil1 + ">"); bil1--; } } //--> </script> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
kira-kira hasilnya akan seperti contoh berikut.
Program untuk Menampilkan Bilangan Prima
Masuk ke perulangan kembali namun lebih advance karena kita akan melakukan looping di dalam looping dengan menggunakan perulangan For. Contoh yang akan kita buat disini adalah perulangan untuk menampilkan bilangan prima. Berikut scriptingnya.
| <html> <head> <title>Javascript | Latihan 2 | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </title> </head> <body> <script language="Javascript"> <!-- var prima = false; document.write ("Bilangan Prima antara 1 sampai dengan 100 adalah : <br>"); for (index=2; index<=100; index++){ if (index >= 2){ prima = true; for (angka = 2; angka < index; angka++){ if (index%angka == 0){ prima = false; } } } if (prima == true){ document.write(" " + index + " "); } } //--> </script> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
kira-kira hasilnya akan seperti contoh berikut.
Tabel With Javascript
Selain heading, tentu kita bisa mengcustom tag tag html lainnya dengan menggunakan javascript. Disini kita akan mencoba membuat tabel dengan beberapa syarat yaitu menggunakan 2 kolom dengan 100 baris. Dimana setiap baris pada kolom satu yang merupakan kolom bilangan genap di berikan bgcolor berwarna biru. Berikut contoh htmlnya.
| <html> <head> <title>Javascript | Latihan 2 | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </title> </head> <body> <script language="Javascript"> <!-- document.write('<table border=1; align=center; cellpadding=5; cellspacing=0>'); for (i=1; i<=100; i++){ if (i%2==0) { document.write('<tr align=center><td bgcolor=blue>' + i + '</td>' + '<td>' + i + '</td></tr>'); } else { document.write('<tr align=center><td>' + i + '</td>' + '<td>' + i + '</td></tr>'); } } document.write('</table>'); //--> </script> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
kira-kira hasilnya akan seperti contoh berikut.
Demikian penjelasan mengenai looping di javascript. Semoga bermanfaat dan mudah di mengerti. Sekian dari saya, jika ada yang ingin di tanyakan bisa langsung letakkan di komentar. Terima kasih sudah berkunjung. Sampai berjumpa di pembahasan html programming selanjutnya. Salam Programming!!
0 komentar:
Post a Comment