PWPB | Pertemuan 15

by I am Fahru September 05, 2019 0 Comments
Perulangan dan Fungsi pada Javascript


Assalamualaikum, Kali ini saya akan menjelaskan materi Perulangan dan Fungsi pada javascript.
Struktur Kontrol Perulangan. Perulangan merupakan  struktur yang memungkinkan untuk menjalankan kode program yang sama beberapa kali dengan  menggunakan suatu kondisi tertentu. Perulangan dalam javascript memilki tiga bentuk perulangan yaitu :


- for
- while
- do - while

1. Perulangan For

Struktur perulangan for dibagi menjadi yaitu : inisialisasi, kondisi, peubah. Seperti di bawah ini

for ( inisialisasi ; kondisi ; peubah ) {
      baris program 1;
      baris program 2;
}

Contoh Perulangan for 

For1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<script>
var person = {fnama:"Muhammad", mnama:"Fahru", lnama:"Rozi", age :16};
var text = "Fahru";
var x;
for (x in person) {
text += person[x];
} while (x < 5);
document.write(x);
</script>
</body>
</html>

For2.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<script>
for (x=1; x<=5; x++) {
document.write("Inilah Perulangan For<br>");
}
</script>
</body>
</html>

Hasil For2.html


2. Perulangan While

Struktur perulangan while berbeda dengan for, while hanya ada kondisi saja. Penulisannya seperti di bawah :

while ( kondisi ) {
          program ;
}

Contoh Perulangan While

While1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<script>
var x = 0;
while (x < 5) {
document.writeln("Ini Adalah Pengulangan While <br>");
x++;
}
</script>
</body>
</html>

Hasil Kodingan di atas


3. Perulangan Do - While

Struktur perualngan do - while ini cara kerjanya sama dengan while tapi pada do - while ini program akan dijalankan terlebih dahulu baru masuk ke tahap kondisi , jika kondisi memenuhi untuk berulang makan program akan berulang.

do {
      program ;
} while ( kondisi );

Contoh Perulangan do - while

Do_While.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<script>
var x = 0;
do {
document.writeln("Ini Perulangan Do While <br>");
x++;
}
while (x < 4);
</script>
</body>
</html>

Hasil kodingan di atas


Kesimpulan 
•)  Dari ketiga bentuk perulangan diatas hanya for yang memerlukan pernyataan
inisialisasi dan peubah. Inisialisasi disini digunakan sebagai bagian penentuan
variabel yang akan digunakan untuk mengendalikan jumlah perulangan yangakan 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.

Contoh Gabungan Perulangan 


BuatPengulangan.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<p id="coba">
<script>
for (var i = 0; i < 3; i++) {
document.write("Halo Javascript 1 <br><br>");
}
var j = 0;
while ( j < 3 ) {
document.write("Halo Javascript 2 <br><br>");
j += 1;
}

var k = 0;
do {
document.write("Halo Javascript 3 <br><br>");
k++;
} while ( k < 3 );
</script>
</p>
</body>
</html>

Hasil Kodingan di atas



Fungsi


•) Fungsi dalam pemrograman merupakan suatu mekanisme yang digunakan untuk mengelompokkan program dalam menyelesaikan 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. Setiap fungsi dapat tidak memiliki atau memiliki lebih
    dari satu parameter. Aturan penamaan fungsi mengikuti aturan penamaan variabel.

Bentuk Umum Fungsi

function nama_fungsi ( parameter1, parameter2, ........., paramaterN ) {
kode program sesuai definisi fungsi 
return nama_nilai_balik_jika_ada
}

parameter adalah syarat yang diperlukan  oleh fungsi  tersebut  untuk dapat berjalan. Suatu fungsi  juga dapat  tidak memilki parameter
Nilai hasil operasi dari fungsi . Suatu fungsi dapat juga tidak memilki nilai balik. Jika tidak  memiliki nilai balik maka pertanyaan  return dapat ditiadakan.

Pemanggilan Fungsi 
varNama = nama_fungsi ( nilai_parameter1, nilai_parameter2,..................., nilai_parameterN );

keterangan : varNama adalah variable yang dapat digunakan  untuk menampung  nilai balik dari fungsi  yang dipanggil  bila ada.

Kesimpulan
Dilihat dari hasil akhirnya fungsi dalam javascript dibedakan jadi 2, Yaitu fungsi yang memiliki nilai balik dan fungsi yang tidak memiliki nilai balik.

Nilai Balik
Definisi
•)  Nilai balik adalah nilai hasil 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 limas. Dimana dalam 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.

Implementasi Fungsi
1. Buat_Fungsi.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<p id="coba">
<script>
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 atas ==>" +luasAlas);
alert("Ini Adalah Volume ==> " +volume);
</script>
</p>
</body>
</html>

Hasil Kodingan di atas



2. BuatFungsi2tanpaReturn.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<p id="coba">
<script>
function sapa(nama) {
alert("Halo, namaku " + nama);
}
sapa ("Fahru");

function sayHello() {
alert ("Halo, Saya Ozi");
}
sayHello();
</script>
</p>
</body>
</html>

Hasil Kodingan di atas




3. BuatFungsiCharAt.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<p>
<script>
var nama = "Fahru";
var posisiKarakter = 2;
var k = nama.charAt (posisiKarakter);
document.write("Karakter pada urutan ke 2, dari Fahru, adalah " + k + " (dimulai dari 0)" );
</script>
</p>
</body>
</html>

Hasil Kodingan di atas


4. BuatFungsiIndexOf.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<p id="coba">
<script>
var nama = " SMK Negeri 4 Bandung ";
var dimanaKata = nama.indexOf("Bandung"); // variable ini akan bernilai 14
document.write("dari fungsi ini, Bandung ada di urutan ke " + dimanaKata + " dari kalimat SMK Negeri 4 Bandung");
</script>
</p>
</body>
</html>

Hasil Kodingan di atas


Sekian Materi yang Dapat Saya Berikan Semoga Bermanfaat , Wassalamualaikum

0 Comments