Haikal PG - XI RPL 1 - PWPB Sesi 15

Assalamualaikum Warahmatullahi Wabarokatuh
Pada sesi kali ini kita akan membahas tentang perulangan dan function pada Javascript. Perulangan merupakan struktur yang memungkinkan untuk menjalankan kode program yang sama beberapa kali dengan suatu kondisi tertentu. Perulangan dalam javascript memiliki tiga bentuk, yaitu diantaranya :

• for
• while
• do-while

Lantas apa perbedaan dari perulangan diatas?. Kita akan coba pahami perbedaan kinerjanya dan struktur perulangannya.

• FOR

Stuktur perulangan for sebagai berikut :

• WHILE

Struktur perulangan while sebagai berikut :

• DO-WHILE

Stuktur perulangan do-while ini akan dijalankan setidaknya 1 kali walaupun kondisi tidak terpenuhi :

Kesimpulanya:

• Dari ketiga bentuk perulangan diatas hany for yang memerlukan pernyataan inisialisasi dan peubah. Inisialisasi disini digunakan sebagai penentuan variabel yang akan digunakan untuk mengendalikan jumlah perulangan yang akan dilakukan
• Peubah adalah operasi aritmatika yang dapat dilakukan untuk mengubah nilai variabel penentu tersebut. Sedangkan kondisi disini digunakan untuk menentukan kapan suatu blok perulangan dijalankan berdasarkan nilai dari variabel penentu tersebut.
• Cara kerja dari perulangan for tersebut dapat digambarkan dengan menggunakan diagram alur agar lebih mudah dipahami

Fungsi

• Fungsi dalam pemrograman merupakan suatu mekanisme yang digunakan untuk mengelompokkan program dalam menyelsaikan suatu kasus, proses atau rumus aritmatika tertentu.
• Fungsi dalam proses pemanggilannya (eksekusi) ada yang membutuhkan data tertentu agar dapat berjalan.
• Data tertentu yang perlu diberikan saat pemanggilan fungsi ini dikenal dengan nama parameter. Setuap fungsi dapar tidak memiliki atau memiliki lebih dari satu parameter.
• Aturan penamaan fungsi mengikuti aturan penamaan variabel. Bentuk dari blok fungsi adalah sebagai berikut.

Return ini berfungsi untuk mengembalikan nilai.

Pemanggilan fungsi : 

Kesimpulan : 

• Silihat dari hasil akhirnya fungsi dalam javascript dibedakan jadi 2.
• yaitu fungsi yang memiliki nilai balik dan fungsi yang tidak memiliki nilai balik

Apa itu nilai Balik?

• Nilai balik adalah nilai operasi yang dijalankan didalam fungsi diberikan ke bagian program lainnya untuk diproses lebih lanjut.
• Nilai balik dalam javascript dinyatakan dengan menggunakan kata kunci return.
• Contoh kasusnya dalam program penghitung luas dan volume kubus. Dimana dalam perhitungan volume juga terdapat menyertakan perhitungan luas didalamnya.
• Dengan kata lain untuk menghitung volume kubus kita harus mengkalikan sisi sisi kubus tersebut.

Ok kali ini kita akan coba perulangan dan function pada javascript.

For1.html

Kita akan coba mencetak isi array dengan perulangan for. Masih ingat array? kalo lupa cari saja di blog ini pembahasan tentang array. Tampilan dan codenya : 

Pada kondisi, kalian lihat text.length? .length ini berfungsi untuk menghitung menghitung jarak string dari variabel text. "Darren" ini memiliki hasil 6 maka perulangan tersebut diulang sebanyak 6 kali.

For2.html
Kita coba lagi perulangan for, ini dia code dan tampilanya :

While1.html
Mirip dengan for, perbedaanya hanya inisialisasi, kondisi dan peubah nya di pisahkan. Contoh code dan tampilannya :


DO-WHILE.html
Meskipun kodisinya bernilai false, perulangan ini tetap akan dijalankan maksimal 1 kali. Gak percaya? liat nih!. Code dan tampilanya :


BuatPerulangan.html
Kita coba masukkan semua jenis perulangan seperti for, while, do-while. Dan hasilnya kita akan mencetaknya ke layar/page html. Tampilan dan codenya :

Mudah bukan? daripada ribet-ribet nulis satu persatu mending suruh javascript aja yang nulisin hehe....

BuatFungsi.html
Kita akan coba buat fungsi/function yang menampilkan luas alas dan volume yang akan ditampilkan lewat alert. Karena kalo pake codepen alertnya bakal langsung muncul, maka saya coba dengan memasukkannya lewat button. Jadi teman-teman tinggal klik saja buttonnya maka akan tampil sebuah alert. Tampilan dan codenya :



BuatFungsi2TanptaReturn.html
Kita akan coba membuat 2 fungsi tanpa return. Tampilan dan codenya :
HTML dan Embedded Javascript:
<!DOCTYPE html> <html> <head> <title>Haikal Putra Gustiansyah XI RPL 1 Buat Fungsi</title> </head> <body> <p id="coba"> <script type="text/javascript"> function sapa (nama){ alert("Halo, namaku " + nama); } sapa("bintang"); function sayHalo(){ alert("Halo, saya Bulan"); } sayHalo(); </script> </p> </body> </html>
CSS:
body{ background-color: orange; } button{ border:1px solid black; background-color: transparent; height: 50px; width: 100px; } button:hover{ color: white; background-color: black; } script{ font-family: cursive; color: red; }
Jika code diatas dijalankan maka akan tampil seperti ini :

BuatFungsiCharAt.html

Kita coba buat fungsi yang akan menampilkan char ke berapa dalam suatu string. Ini dia tampilan dan juga source codenya : 

BuatFungsiIndexOf.html
Kita coba buat lagi fungsi yang terakhir. Ini dia tampilanya dan juga source codenya :



Sip, saya rasa cukup saja pada pertemuan kali ini. Oh iya , pertemuan kali ini gada quiz jadi santuy saja ya hehe......
Sekian, Wassalamualaikum Warahmatullahi Wabarokatuh.