#15 Intermediate Web | Web Programming Tutorial

Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang materi dengan level intermediate, Pada postingan kali ini kita sudah memasuki materi Pengulangan alias Looping pada javascript. Tidak berbeda dengan looping pada bahasa pemrograman lain, mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Pokoknya pantengin terus, Check This Out...

DIbawah ini ada 4 bab yang akan kita pelajari, yaitu:

1. Pengertian & Varian Pengulangan
2. Pengertian Fungsi
3. Contoh Fungsi
4. Penggunaan Percabangan

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Pengertian & Varian Pengulangan
Penjelasannya...

Perulangan merupakan struktur program yang memungkinkan untuk menjalankan kode program yang sama beberapa kali dengan menggunakan suatu kondisi tertentu. Perulangan dalam javascript memiliki beberapa bentuk :

1. Perulangan For
2. Perulangan While
3. Perulangan Do-While

Struktur Dasar Perulangan For

for (inisialisasi ; kondisi ; peubah){ // Kode program yang akan dijalankan }

Struktur Dasar Perulangan While

while(kondisi){ //kode program yang ingin dijalankan berkali - kali }

Struktur Dasar Perulangan Do While

do{ //Kode program yang inginn dijalankan berkali - kali }while(kondisi);

Kesimpulan

• Dari ketiga bentu perulangan diatas hanya for yang memerlukan pernyataan inisialisasi dan peubah. Inisialisasi disini digunakan sebagai bagian penentuan variabel yang akan digunakan untu mengendalikan jumlah perulangan yang akan digunakan.
• Peubah adalah operasi aritmatika yang dapat dilakukan untuk mengubah nilaii variabel penentu tersebut. Sedangkan kondisi disini digunakan untu menentukan kapan suatu blok perulangan dijalankan berdasarkan nilai dari varibale penentu tersebut.
• Cara kerja dari perulangan for tersebut dapat digambarkan dengan menggunakan diagram alur di bawah :

Untuk setiap kasus perulangan dapaat diterapkan dengan menggunakan ketiga bentuk ini. Kita dapat membuat perulangan untuk menampilan pesan "Halo World" hingga 3 kali dengan menggunakan ketiga perulangan tersebut.

---

Pengetian Fungsi
Penjelasannya...

• Fungsi dalam pemrograman merpakan suatu mekanisme yang digunakan untukmengelompokkan program dalm menyelesaukan suatu kasu, 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 dikenal dengan nama Parameter. Setiap fungsi dapat tidak memiliki atau memiliki lebih dari satu parameter
• Aturan penamaan fungsi mengikuti aturan penamaan variabel. Bentuk dari blok fungsi adalah sebagai berikut :

Fungsi sendiri mempunyai struktur dasar seperti berikut :

if function nama_fungsi (parameter 1, parameter 2, ...){ //Kode program sebagai definis fungsi return //Nama nilai balik jika ada }

Keterangan

Parameter Merupakan syarat yang diperlukan oleh fungsi tersebut untuk dapat berjalan. Suatu fungsi juga dapat tidak memiliki Parameter, artuinya dapat dijalankan tanpa syarat.

Nilai hasil atau nilai balik operasi dari fungsi. Suatu fungsi dapat juga tidak memiliki nilai balik , maka jika tidak memiliki pernyataan return dapat ditiadakan

Pemanggilan Fungsi di javascript

varHasil = nama_fungsi (nilai_parameter1, nilai_parameter2, nilai_parameter3, nilai_parameter4, nilai_parameter n, ...);

Keterangan

varHasil adalah variabel yag dapat digunakan untu kmenampung nilai balik dari fungsi yang dipanggil bila ada

Pengertian Nilai Balik

• Nilai balik adalah nilai hasil operasi yang dijalankan didalam dungsi dibagikan 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 limas. Didama didalam perhitungan volume juga terdapat menyertakan perhitungan luas didalamnya.
• Dengan kata lain untuk menghitung volume limas kita harus menghitung luas alasnya terlebih dahulu. Dalam program, proses ini diterjemahkan sebagai berikut.

---

Contoh Fungsi
Penjelasannya...

Struktur switch adalah sebuah stuktur percabangan yang akan memeriksa suatu variabel, lalu menjalankan perintah-perintah yang sesuai dengan kondisi yang mungkin terjadi untuk variabel tersebut. Contoh programnya:

var panjang = 5; var lebar = 3; var tinggi = 4; var luasAlas; var Volume; luasAlas = panjang * lebar; volume = luasAlas * tinggi /2;

---

Penggunaan Perulangan
Penjelasannya...

Pada bab terakhir ini, saya akan menampilkan beberapa penggunaan dari perulangan yang dapat pakai. Seperti yang sudah dijelaskan tadi. Bahwa perulangan pada javascript ni dibagi menjadi tiga jenis yaitu for, while, dan do while. Mari kita mulai...

Namun sebelum ini, inilah file CSS yang saya pakai :

CSS

body{ background: salmon; font-family: arial; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 0 2px 3px #000; letter-spacing: 5px; font-size: 35pt; text-align: center; }

Penggunaan For in

<!DOCTYPE html> <html> <head> <title>Angga Gemilang</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <p id="nama"> <script type="text/javascript"> var txt; var person = {Dpn: "Angga", Blkg : "Gemilang", umur: "16"}; var x; for(x in person){ txt += person[x] + " "; } document.getElementById("nama").innerHTML = txt; </script> </body> </html>

Hasil Dari Pengerjaan For in :

Penggunaan Perulangan For

<!DOCTYPE html> <html> <head> <title>Angga Gemilang</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <script type="text/javascript"> for(x = 1; x<=5; x++) { document.writeln("Inilah perulangan for<br>"); } </script> </body> </html>

Hasil Dari Pengerjaan Perulangan for :

Penggunaan Perulangan While

<!DOCTYPE html> <html> <head> <title>Angga Gemilang</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <script type="text/javascript"> var x = 0; while(x < 5) { document.writeln("ini adalah perulangan while <br>"); x++; } </script> </body> </html>

Hasil Dari Pengerjaan Perulantgan While

Penggunaan Perulangan Do While

<!DOCTYPE html> <html> <head> <title>Angga Gemilang</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <script type="text/javascript"> var x = 0; do{ document.writeln("ini adalah perulangan do while<br>"); x++; } while (x < 4); </script> </body> </html>

Hasil Dari Pengerjaan Perulangan Do While

Buat Perulangan.html

<!DOCTYPE html> <html> <head> <title>Angga Gemilang</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <script type="text/javascript"> for(var i = 0; i < 3; i++) { document.writeln("Halo javascript 1<br>"); var j = 0; while (j < 3) { document.writeln("Halo javascript 2<br>"); j += 1; } var k = 0; do{ document.writeln("Halo javascript 3"); k++; } while ( k < 3); } </script> </body> </html>

Hasil Dari Pengerjaan Buat Perulangan:

Buat Fungsi

<!DOCTYPE html> <html> <head> <title>Angga Gemilang</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <p id="coba"> <script type="text/javascript"> function hitungLuasAlas (p, l){ var luas = p * l; return luas; } function hitungVolume (la, t){ var vol = la * t / 2; return vol; } var panjang = 5; var lebar = 3; var tinggi = 4; var luasAlas; var volume; luasAlas = hitungLuasAlas(panjang, lebar); volume = hitungVolume(luasAlas, tinggi); alert("Ini adalah luas alas ==>"+luasAlas); alert("ini adalah volume ==>"+volume); </script> </body> </html>

Hasil Dari Pengerjaan Buat Fungsi:

Buat Fungsi Tanpa Return

<!DOCTYPE html> <html> <head> <title>Angga Gemilang</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <p id="coba"> <script type="text/javascript"> function sapa(nama){ alert("Halo, Namaku " + nama); } sapa("Angga"); function sayHalo(){ alert("Halo Juga, Nama Saya Ade"); } sayHalo(); </script> </body> </html>

Hasil Dari Pengerjaan Buat Fungsi Tanpa Return:

Buat Fungsi charAt

<!DOCTYPE html> <html> <head> <title>Angga Gemilang</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <p id="coba"> <script type="text/javascript"> var nama = "Angga Gemilang"; var posisiKarakter = 6; var k = nama.charAt(posisiKarakter); document.writeln("Karakter pada ututan kedua, dari kata Angga Gemilang adalah " +k+ " (dimulai dari 0)"); </script> </body> </html>

Hasil Dari Pengerjaan Buat Fungsi charAt:

Buat Fungsi indexOf

<!DOCTYPE html> <html> <head> <title>Angga Gemilang</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <script type="text/javascript"> var nama = "SMKN 4 Bandung"; var dimanaKata = nama.indexOf("Bandung"); // dimanaKata akan bernilai 13 document.write("dari fungsi ini, Bandung ada di urutan ke " + dimanaKata + " dari kalimat SMKN 4 Bandung"); </script> </body> </html>

Hasil Dari Pengerjaan indexOf:

---

Mungkin sekian saja yang dapat kami sampaikan pada kesempatan kali ini dalam post yang berjudul #15 Basic Web | Web Programming Tutorial karena postingan juga sudah sangat panjang, pinggang kami juga kayaknya sudah encok, mata udah sangat lelah melihat codingan yang begitu panjang dan acak-acakan. saya cukupkan saja.

Wassalamualaikum wr, wb