Bahasa pemrograman berbasis web

Chapter 3: Belajar bahasa pemrograman berbasis web – Javascript (Part 3)

Belajar bahasa pemrograman berbasis web – Pada part 2 kita telah mempelajari tentang tipe data Javascript dan operator. Dalam artikel ini kita akan mendalami lebih lanjut tentang alur pemrograman Javascript

Alur pemrograman

Secara default, Javascript menjalankan baris-baris perintah secara linear. Artinya ia menjalankan perintah secara berurutan dimulai dari satu baris kemudian dilanjutkan ke baris berikutnya. Namun dalam banyak situasi, ada kondisi di mana proses normatif tersebut mesti dilanggar sesuai dengan kebutuhan berdasarkan jenis kondisi, peristiwa, dan nilai variabel

Hal itu dapat dilakukan dengan perintah-perintah kontrol alur. Dengan adanya hal tersebut, maka penerjemah program Javascript dapat menjalankan lompatan-lompatan perintah berdasarkan kebutuhan.

Ada dua metode kontrol alur yang populer:

Kontrol Alur Kondisi / Percabangan

Kehidupan nyata sangat erat dengan yang namanya Kondisi. Contohnya, jika hari ini hujan maka saya harus membawa payung. Sehingga aksi yang akan dijalankan didasarkan pada kondisi yang ada.

Tipe-tipe pernyataan kondisi:

  • Pernyataan If
  • Pernyataan else
  • Pernyataan switch

Statemen If

Statemen atau pernyataan If akan mengecek sebuah kondisi yang telah dinyatakan, kemudian akan menjalankan kode-kode apabila kondisi tersebut dipenuhi. Pernyataan If biasanya dipasangkan dengan Else apabila ada lebih dari 1 kondisi.

Bentuk pernyataan If:

if (kondisi) {
  kode yang dijalankan apabila kondisi terpenuhi
}

Contoh:

if (umur > 17) {
  alert("Anda cukup umur. Anda boleh melanjutkan");
}

Baca juga : Belajar bahasa pemrograman berbasis web – Javascript (Part 2)

Statemen Else

Seperti yang telah dijelaskan sekilas di atas, statemen Else biasanya dipasangkan dengan statemen If apabila terdapat lebih dari satu kondisi.

if (kondisi 1) {
  jalankan kode apabila kondisi 1 terpenuhi
} else if (kondisi 2) {
  jalankan kode apabila kondisi 2 terpenuhi
} else {
  jalankan kode apabila kedua kondisi di atas TIDAK terpenuhi
}

Contoh:

if (umur < 10) {
  alert "Anda masih sangat muda";
} else {
  alert "Anda berumur lebih dari 10 tahun";
}

Statemen Swicth

Statemen/pernyatan Switch mempunyai fungsi yang serupa dengan If-Else, namun pernyataan ini merupakan bentuk yang lebih sederhana.

switch (kondisi) {
 case kondisi 1:
 jalankan perintah pertama
 break;
 case kondisi 2:
 jalankan perintah kedua
 break;
 default:
 jalankan perintah default
}

Baca juga : Belajar bahasa pemrograman berbasis web – Javascript (Part 1)

Contoh:

switch (cuaca) {
 case "mendung":
 alert("Bawa payung");
 break;
 case "hujan":
 alert("Batalkan perjalanan");
 break;
 default:
 alert("Silakan berangkat");
}

Latihan

Ketik kode program berikut menggunakan editor anda. Setelah diketik, simpan dengan nama percabangan.html

<!DOCTYPE html>
<html>
<head>
<title>Latihan membuat pernyataan switch</title>
<script>
var umur = prompt("Berapakah usia anda?");
</script>
</head>
<body>
<script>
switch (true) {
 case (umur < 18):
 alert("Maaf, anda masih terlalu muda!");
 break;
 case (umur < 50):
 alert("Selamat datang ke arena!");
 break;
 case (umur >= 50):
 alert("Maaf, anda sudah terlalu tua!");
}
</script>
</body>
</html>

Untuk mencoba dengan nilai berbeda, silakan refresh browser.

Kontrol Perulangan / Looping

Ada situasi tertentu di mana kita membutuhkan sebuah perulangan atau looping. Dengan menggunkan Kontrol Looping, kita bisa menjalankan sebuah statemen perintah yang sama berulang kali tanpa mesti menulis berulang-ulang.

Jenis-jenis statemen Loop :

StatemenDeskripsi Statemen
do..,whileMengeksekusi sekumpulan statemen sampai kondisi akhir terpenuhi
whileMengecek kondisi sebelum mengeksi
forMengecek kondisi, menjalankan blok perintah, lalu merubah variabel yang ditentukan
for…inMenjalankan sebuah blok perintah terhadap setiap elemen array/larik
Loop Javascript

Loop Do..While

Contoh:

var lebar = 2;
var panjang = 5;
do {
 luas = panjang * lebar;
 alert(panjang + "x" + lebar + " = " + luas);
 lebar = lebar + 2;
} while (lebar <= 10)

Potongan kode di atas akan menjalankan loop atau siklus eksekusi kode dimulai dengan nilai lebar = 2 dengan penambahan 2 dan akan berhenti sampai nilai lebar = 10.

Loop while

<!DOCTYPE html>
<html>
<head>
  <title>Latihan do..while</title>

</head>
<body>
<script>
  var lebar = 2;
  var panjang = 5;
  while (lebar <= 10) {
    luas = lebar * panjang;
    alert(lebar + "x" + panjang + " = " + luas);
    lebar = lebar + 1;
  }
</script>
</body>
</html>

Loop for

Bentuk dasarnya adalah :

for(pernyataan1; kondisi; pernyataan2) {
 baris perintah
}

Di dalam for, pada mulanya diberikan pernyataan1, kemudian dicek kondisi. Apabila kondisi belum terpenuhi maka dilakukan eksekusi blok baris perintah program. Kemudian menjalankan pernyataan2.

Hal tersebut berulang-ulang(looping) sampai kondisi yang disiapkan di atas terpenuhi.

Contoh program :

<!DOCTYPE html>
<html>
<head>
<title>Menghitung Nilai Faktorial</title>
<script>
 var bilangan = prompt("Masukkan bilangan:");
</script>
</head>
<body>
<script>
 var faktorial = 1;
 for (penghitung = 1; penghitung <= bilangan; penghitung++) {
  faktorial = faktorial * penghitung;
 }
 var hasil = "Nilai faktorial dari " + bilangan + " adalah " + faktorial;
 alert(hasil);
</script>
</body>
</html>

for…in

Jenis perulangan for…in sangat berguna untuk melakukan iterasi elemen-elemen data variabel array/larik. Terkadang karena jumlahnya banyak kita kesulitan untuk mempunyai referensi jumlah elemen di dalam array (sebagaimana berlaku pada for yang mesti punya referensi jumlah) . Sehingga dengan jenis perulangan/loop for…in ini kita dapat langsung mengekstrak data array yang secara otomatis akan berhenti ketika telah mencapai elemen paling akhir.

Baca juga : Covid 19 News dan Revolusi Industri 4 0

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan for...in</title>
</head>
<body>
<script>
var himpunan = [50, 10, 15, 45, 67, 80, 92];
for (index in himpunan) {
  counter = parseInt(index) + 1;
  hasil = "Himpunan ke " + counter + " = " + himpunan[index];
  alert(hasil);
}
</script>
</body>
</html>
Bahasa pemrograman berbasis web
Penggunaan for…in javascript

Fungsi

Ketika file kode program semakin besar dan kompleks, maka tentu saja seorang programmer akan menjadi semakin repot, terutama apabila ada tugas-tugas tertentu yang mesti dijalankan berulang-ulang. Untuk itu dibutuhkan satu atau beberapa sub-bagian program yang ditugaskan hanya khusus menangani tugas-tugas spesifik saja. Misalnya menangani login, menangani tugas perkalian, dan sebagainya. Sub-bagian tersebut dinamakan FUNGSI.

Cara membuat fungsi javascript

function namafungsi(parameter1, parameter2,...)
{
   kode fungsi;
   return nilai;
}

Nama yang diberi untuk fungsi tersebut harus unik di dalam program. Di dalam sebuah fungsi dapat diberi satu atau lebih parameter.

<!DOCTYPE html>
<html>
<head>
  <title>Penggunaan fungsi</title>
  <script type="text/javascript">
  var nilai_input = prompt("Masukan nilai input:");
  function faktorial(input) {
    var hasil = 1;
    for(counter = 1; counter <= input; counter++) {
      hasil = hasil * counter;
    }
    return hasil;
  }
  </script>
</head>
<body>
<script>
    var nilai = faktorial(nilai_input);
    alert(nilai);
</script>
</body>
</html>

Bahasa pemrograman berbasis web apa lagi yang mesti dipelajari?

Javascript adalah program yang dijalankan pada sisi klien. Dengan HTML + Javascript saja sebetulnya sudah bisa membuat aplikasi web. Namun karena sifatnya statis alias hanya dijalankan di sisi server, maka tentu saja sangat merepotkan ketika harus membuat halaman web baru. Setiap membuat halaman baru, kita mesti membuat ulang seluruhnya lalu diupload ke server. Sebuah pekerjaan berulang yang cepat atau lambat akan membosankan.

Agar sebuah aplikasi web dapat berjalan dinamis, maka dibutuhkan program atau bahasa pemrograman lain yang berjalan di sisi server, dengan databasenya. Sehingga untuk melakukan update kita tidak perlu lagi membuat halaman berulang-ulang. Kita hanya berfokus pada datanya.

Nantikan chapter selanjutnya dalam Belajar bahasa pemrograman berbasis web tingkat lanjut.

Leave a Reply