Javascript Dasar #4: Pengkondisian (If, Else, dan Switch)

Author Erick Irwansyah
25 Dec 2024
Javascript
Javascript Dasar #4: Pengkondisian (If, Else, dan Switch)

Hai, selamat datang lagi! Di tutorial kali ini, kita akan belajar tentang pengkondisian di JavaScript. Pengkondisian memungkinkan kita untuk menjalankan bagian tertentu dari kode hanya jika kondisi tertentu terpenuhi. Ini penting banget agar aplikasi kita bisa beradaptasi dengan berbagai situasi.

1. If dan Else

Struktur if dan else digunakan untuk mengecek suatu kondisi. Kalau kondisinya benar (true), maka kode di dalam blok if akan dijalankan. Kalau kondisinya salah (false), kode di dalam blok else yang akan dijalankan (jika ada).

let angka = 10;

if (angka > 5) {
  console.log("Angka lebih besar dari 5");
} else {
  console.log("Angka lebih kecil atau sama dengan 5");
}

Di sini, karena angka lebih besar dari 5, maka yang akan ditampilkan adalah: Angka lebih besar dari 5.

2. If-Else If-Else

Jika ada lebih dari dua kondisi yang perlu diperiksa, kita bisa menggunakan else if. Ini memungkinkan kita untuk mengecek beberapa kondisi berbeda.

let angka = 10;

if (angka > 10) {
  console.log("Angka lebih besar dari 10");
} else if (angka === 10) {
  console.log("Angka sama dengan 10");
} else {
  console.log("Angka lebih kecil dari 10");
}

Di sini, karena angka sama dengan 10, maka yang akan ditampilkan adalah: Angka sama dengan 10.

3. Switch

Selain if, JavaScript juga punya switch yang bisa digunakan untuk memilih satu dari beberapa kemungkinan. Biasanya, switch digunakan saat kita ingin membandingkan sebuah variabel dengan banyak nilai yang berbeda.

let hari = 3;

switch (hari) {
  case 1:
    console.log("Senin");
    break;
  case 2:
    console.log("Selasa");
    break;
  case 3:
    console.log("Rabu");
    break;
  default:
    console.log("Hari tidak dikenal");
}

Di sini, karena hari bernilai 3, maka yang akan ditampilkan adalah: Rabu.

Studi Kasus: Menentukan Status Seseorang Berdasarkan Umur

Sekarang, kita akan buat program yang menentukan apakah seseorang sudah dewasa atau masih anak-anak berdasarkan umur yang dimasukkan.

HTML-nya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Status Umur</title>
</head>
<body>
  <h1>Masukkan Umur Anda</h1>
  <input type="number" id="umur" placeholder="Umur Anda">
  <button onclick="cekStatus()">Cek Status</button>
  <p id="hasil"></p>

  <script src="script.js"></script>
</body>
</html>

JavaScript-nya (di file script.js):

function cekStatus() {
  let umur = document.getElementById("umur").value;

  if (umur >= 18) {
    document.getElementById("hasil").innerText = "Anda sudah dewasa!";
  } else {
    document.getElementById("hasil").innerText = "Anda masih anak-anak!";
  }
}

Penjelasan:

  • Program ini mengecek apakah umur yang dimasukkan lebih besar atau sama dengan 18. Jika iya, maka menampilkan pesan "Anda sudah dewasa!", jika tidak maka menampilkan "Anda masih anak-anak!".

Sekian dulu tentang pengkondisian di JavaScript. Dengan pengkondisian, kamu bisa membuat aplikasi yang lebih pintar dan bisa beradaptasi dengan berbagai input. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial JavaScript selanjutnya di www.code80vity.com. Semoga kamu lebih mudah menentukan alur aplikasi berdasarkan kondisi yang berbeda!

Tutorial Terkait Lainnya

Javascript Dasar #1: Pengenalan Javascript
Javascript Dasar #1: Pengenalan Javascript

Hai, apa kabar? Semoga baik-baik aja ya! Pada tutorial pertama ini, kita bakal mulai mengenal apa it...

Baca Tutorial
Javascript Dasar #5: Perulangan (Loops)
Javascript Dasar #5: Perulangan (Loops)

Hai, kembali lagi! Di tutorial kali ini, kita akan belajar tentang perulangan atau loops. Perulangan...

Baca Tutorial
Javascript Dasar #6: Array & Manipulasi Data
Javascript Dasar #6: Array & Manipulasi Data

Hai, apa kabar? Kembali lagi di tutorial JavaScript! Di tutorial kali ini, kita akan belajar tentang...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Javascript Dasar #2: Variabel, Tipe Data, dan Operator
Javascript Dasar #3: Fungsi dan Penggunaan dalam Program
Javascript Dasar #11: DOM Manipulation
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya
Tutorial Terbaru
Tutorial PHP Dasar #13: Upload File dengan PHP
25 Dec 2024 Php
Tutorial PHP Dasar #12: php security (sql injection & hashing)
25 Dec 2024 Php
Tutorial PHP Dasar #11: CRUD dengan PHP dan MySQL
25 Dec 2024 Php
Tutorial PHP Dasar #10: Session dan Cookie di PHP
25 Dec 2024 Php
Tutorial PHP Dasar #9: Validasi Form di PHP
25 Dec 2024 Php