Diktat Javascript 26

Modul 2 Javascript

KONDISI PERCABANGAN
Pada saat membuat program, acapkali kita menginginkan kode program melakukan operasi yang
berbeda berdasarkan keputusan yang berbeda. Disini kita dapat menggunakan kondisi percabangan
untuk melakukannya.

Javascript menyediakan beberapa jenis kondisi percabangan:

PERCABANGAN IF,

Percabangan if biasanya digunakan ketika kita hanya memiliki satu kondisi dan satu aksi
(pilihan) atau statement.

Sintaks

Kondisi : biasanya berupa ekspresi yang mengembalikan nilai boolean seperti perbandingan dan
logika. Jika kondisi tidak mengembalikan nilai boolean, dikonversi otomatis ke boolean ( true atau
false ). Kondisi harus bernilai true agar statement di eksekusi.

Statement : Kode atau aksi yang akan di eksekusi jika kondisi bernilai true

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek

 Diktat Javascript 27

Studi Kasus 1 penerapan kondisi If pada program

Perhatikan kondisi perbandingan inputKataSandi === ‘rahasia123’, ini menghasilkan nilai true,
karena nilai variable inputKataSandi sama dengan rahasia123.
Oleh karena itu, statement dieksekusi

Studi Kasus 2 penerapan kondisi If pada program

Apa yang terjadi pada studi kasus 2? Terangkat penjelasannya pada LKPD.

PERCABANGAN IF...ELSE,

Dipakai jika terdapat dua kode yang akan dijalankan untuk kondisi true terpenuhi dan tidak

terpenuhi.

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek

 Diktat Javascript 28

Percabangan if .. else biasanya digunakan ketika kita memiliki dua pilihan atau statement (aksi).
Statement yang dieksekusi ketika kondisi bernilai true dan false

Sintaks.

Studi Kasus 1 penerapan kondisi If…else pada program

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek

 Diktat Javascript 29

Apa yang terjadi pada studi kasus diatas? Penjelansannya tuangkan pada LKPD..

PERCABANGAN IF...ELSE IF..ELSE

Dipakai jika terdapat banyak pilihan blok kode yang akan dijalankan

Percabangan else if digunakan ketika kita memiliki lebih dari satu kondisi dan lebih dari dua
pilihan atau statement (aksi).
Sintaks:

Perilakunya mirip seperti sebelumnya, JavaScript akan memindai setiap kondisi dari atas ke
bawah. Jika ditemukan kondisi yang bernilai true maka statement yang ada di dalam kondisi
tersebut akan dieksekusi lalu keluar dari percabangan.
Artinya kondisi dan statement berikutnya tidak dieksekusi.
Kita dapat menambahkan lebih dari satu else if () { ... }.
Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek
 Diktat Javascript 30

Contoh 1.

Perhatikan kode di atas, statement berapa yang akan ditampilkan ke console? Analisis silahkan
tuangkan pada LKPD.

Contoh 2.

Perhatikan kode di atas, statement berapa yang akan ditampilkan ke console? Analisis silahkan
tuangkan pada LKPD.

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek

 Diktat Javascript 31

Studi Kasus
Katakanlah kita ingin membuat aplikasi untuk mengkonversi nilai angka dari 0 sampai 100
menjadi nilai huruf (grade) yang diklasifikasikan sebagai berikut:

 Nilai 100 - 80: Grade A

 Nilai 79 - 60: Grade B
 Nilai 59 - 40: Grade C
 Nilai 39 - 20: Grade D
 Nilai 19 - 0: Grade E

Jika nilai berada di luar rentang 0 - 100, tampilkan pesan Nilai tidak valid. Tuangkan pada
script javascript.

PERCABANGAN BERSARANG

Pada percabangan berserang ada kondisi di dalam kondisi. Perilakunya sama dengan
percabangan normal.

Contoh.

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek

 Diktat Javascript 32

PERCABANGAN SWITCH CASE

Percabangan Switch Case fungsinya hampir sama seperti IF, namun switch case digunakan
berdasarkan number case yang terurut. Dimana switch case ini adalah membandingkan value
atau nilai suatu variabel.
Contoh 1.

Pada fungsi getMonth kenapa harus ditambahkan 1 ( +1 ) ? Silahkan dituiis di LKPD

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek

 Diktat Javascript 33

Tugas Akhir..
1. Silahkan membuat program untuk menampilkan ibu kota di Indonesia. Minimal ada 6 ibu kota.
Gunakan prompt untuk menulisan hasil inputan.
Tampilan 1

Pada tampilan 1 ada kotak prompt untuk memasukan nama kota. Ketika nama kota sudah di ketik
kemudian di klik OK maka akan membuka tampilan 2.
Tampilan 2

Apabila nama kota yang di input tidak ada pada list kota pada program kalian, maka akan
menampilkan seperti tampilan 3.
Tampilan 3

SELAMAT BELAJAR

Wahyu Tri Wulansari, S.Pd | RPL | SMKN 2 Trenggalek