Pengulangan dan Fungsi dalam JavaScript - Praktikum 15

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan tutorial dari postingan sebelumnya yaitu mengenai JavaScript. Nah, untuk sekarang kita bakal bahas Pengulangan dan Fungsi dalam JavaScript. Pengulangan ini sama seperti pengulangan yang ada dalam bahasa pemrograman lainnya ada 3 yaitu for, while, do-while. Untuk lebih jelasnya, Langsung saja berikut Codingan dan contohnya :

Perulangan For

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - For In</title>
</head>
<body>
 <script language="JavaScript">
  var person = {fname : "Darren", lname : "Shadiq", age : 15};
  var text = "Darren";
  var x;
  for(x in person){
   text += person[x];
  }
  while (x < 5)
 </script>
</body>
</html>

Nah, ini merupakan contoh pengulangan for. Pengulangan For ini dapat digabungkan dengan while. Struktur Umum Pengulangan For yaitu :
for ( inisialisasi; kondisi; peubah ) {
baris program 1;
baris program 2;
…
}

Codingan pengulangan for ini memang sengaja tidak dipanggil, untuk pemanggilannya ada di codingan berikutnya.

Perulangan For 2

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Pengulangan For</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <script language="JavaScript">
  for(var x=1; x<=5; x++){
   document.writeln("Inilah perulangan For<br>")
  }
 </script>
</body>
</html>

Nah, dalam Codingan diatas inisialisasi x=1, kondisi x<=5, dan x++ maksudnya Kode Program akan diulang apabila x<= 5 (nilai x awalnya 1) dan setiap terjadi perulangan maka x akan bertambah 1. Kode program yang diulang yaitu untuk menampilkan kalimat dengan perintah document.writeln.

Perulangan While

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Perulangan While</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <script language="JavaScript">
  var x = 0;
  while(x < 5){
   document.writeln("Ini adalah Perualangan While <br>");
    x++;
  }
 </script>
</body>
</html>

Nah, ini merupakan contoh codingan perulangan while. Struktur Umum While ini yaitu :

while ( kondisi ) {

kode program yang ingin dijalankan berkali-kali;

}

Jadi dalam while ini kita inisialisasi dahulu variabel untuk perulangan, lalu kondisinya dalam while(kondisi), dan perubahan variabelnya ada di akhir (sebelum while ditutup). Kode program yang diulang yaitu untuk menampilkan kalimat juga.

Perulangan Do-While

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Perulangan Do While</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <script language="JavaScript">
  var x = 0;
  do{
   document.writeln("Ini perulangan Do While <br>");
   x++;
  }while(x < 4);
 </script>
</body>
</html>

Nah, ini merupakan contoh codingan perulangan do-while. Struktur Umum Do-While ini yaitu :

do {

kode program yang ingin dijalankan berkali-kali;

} while( kondisi );

Jadi dalam do-while ini kita inisialisasi dahulu variabel untuk perulangan, lalu kondisinya dalam while(kondisi) hanya saja setelah struktur do selesai, dan perubahan variabelnya ada di akhir (sebelum do ditutup). Kode program yang diulang yaitu untuk menampilkan kalimat juga. Bedanya do-while ini akan mengeksekusi setidaknya 1 kali walaupun kondisi salah.

Gabungan Perulangan

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Buat Pengulangan</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <p id="coba">
<script language="JavaScript" type="text/javascript">
   for(var i = 0; i < 3; i++){
    document.write("Hallo JavaScript 1<br>");
   }

   var j = 0;
   while(j < 3){
    document.write("Hallo JavaScript 2<br>");
    j = j+1;
   }

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

Nah, Codingan diatas merupakan contoh penggunaan semua tipe perulangan yang masih dengan kode program untuk menampilkan kalimat.

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 tertentuagar 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.

Fungsi juga dibagi menjadi 2 Ada yang memiliki nilai balik ada juga yang tidak memiliki nilai balik. 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 return.

Fungsi untuk Perhitungan

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Buat Fungsi</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <p id="coba">
<script language="JavaScript" type="text/javascript">
   function hitungLuasAlas (panjang, lebar){
    var luasAlas = panjang * lebar;
    return luasAlas;
   }
   function hitungVolume (la, t){
    var volume = luasAlas * tinggi / 2;
    return volume;
   }
   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>
 </p>
</body>
</html>

Nah, ini merupakan contoh penggunaan fungsi dalam JavaScript. Dimana Function ini akan dapat dijalankan apabila dipanggil. Dalam hal ini yaitu untuk menghitung Luas Alas dan Volume dari sebuah Bangun Ruang. Cara deklarasinya yaitu dengan function. Fungsi yang digunakan ini menggunakan return karena program perhitungan yang harus terdapat hasil.

Fungsi Tanpa Return

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Buat Fungsi</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <p id="coba">
<script language="JavaScript" type="text/javascript">
   function sapa(nama){
    alert("Hallo, Namaku " + nama);
   }
   sapa("Bintang");

   function sayHalo(){
    alert("Hallo, Saya Bulan");
   }
   sayHalo();
  </script>
 </p>
</body>
</html>

Jika ini, merupakan penggunaan fungsi yang tanpa memerlukan return karena kode program tidak membutuhkan hasil untuk dikembalikan yaitu hanya untuk menampilkan text.

Fungsi CharAt

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Buat Fungsi</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <p id="coba">
<script language="JavaScript" type="text/javascript">
   var nama = "Amelia";
   var posisiKarakter = 2;
   var k = nama.charAt(posisiKarakter);
   document.write("karakter pada urutan ke-2, dari kata Amelia Adalah " + k  +" (dimulai dari 0)");
  </script>
 </p>
</body>
</html>

Nah, Codingan ini yaitu untuk menentukan posisi karakter dalam sebuah kalimat. Perhitungan Posisinya sama dengan index array yaitu dimulai dengan 0.

Fungsi Index

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Buat Fungsi</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <p id="coba">
<script language="JavaScript" type="text/javascript">
      var nama = "SMK Negeri 4 Bandung";
      var dimanaKata = nama.indexOf("Bandung"); //dimanaKata akan bernilai 13
      document.write("Dari fungsi ini, Bandung ada diurutan ke-" + dimanaKata + " dari kalimat SMK Negeri 4 Bandung");
  </script>
 </p>
</body>
</html>

Nah, ini merupakan contoh penggunaan indexOf(kata) yang gunanya sama seperti codingan sebelumnya yaitu untuk menentukan index hanya saja disini kita menggunakan kata sebagai keywordnya.
Dari semua codingan saya memakai 1 file css untuk styling sederhana yaitu :

body{
 background-color: cyan;
 font: verdana;
 font-size: 20px;
 color: purple;
 text-align: center;
}
p{
 color: salmon;
 font : Serif;
 text-align: center;
 font-size: 20px;
}

Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.