Materi 4 (Percabangan Dalam Javascript)

Pertemuan - 4
PERCABANGAN
DALAM JAVASCRIPT
Khairul Ummi, M.Kom

Percabangan
• Untuk membuat suatu halaman yang dinamis dan interaktif,
perancang halaman Web membutuhkan perintah-perintah yang
dapat mengatur aliran dari informasi. Berdasarkan hasil
komputasi yang telah dilakukan, JavaScript akan membuat
keputusan jalur mana yang akan dieksekusi. Pada dasarnya
dalam JavaScript terdapat dua macam pernyataan percabangan
yaitu if..else dan switch. Walaupun semua kode harus ditulis
dalam penanganan event, tetapi hal ini adalah praktek
pemrograman yang kurang baik. Sebagai pengantinya, gunakan
fungsi, kode akan menjadi lebih modular dan dapat digunakan
kembali (reusable).
Perintah kondisi
Sebagai tambahan terhadap ekspresi kondisi yang telah

dijelaskan bagian sebelumnya. JavaScript memiliki suatu
perintah kondisi if. Tata cara penulisan dari perintah kondisi
tersebut adalah sebagai berikut:
• if (kondisi1) { pernyataan1 } [else { pernyataan2}]
• kondisi adalah ekspresi JavaScript yang mana hasil
evaluasinya memiliki nilai Boolean true atau false. contoh
pemakaian statement if:
• if (n>3) { status = true if (j != n) j = 0 } else j = n
• Kondisi adalah ekspresi JavaScript yang mana hasil evaluasinya memiliki nilai
Boolean true atau false
• Untuk kasus yang melibatkan lebih banyak kondisi, maka kita dapat meletakkan
pernyataan if lain setelah else
if (kondisi1)
{
//pernyataan1 dieksekusi
//bila kondisi1 terpenuhi
}
else if (kondisi2)
{
//bila kodisi1 tidak terpenuhi
}
Else
{
//bila kodisi2 tidak terpenuhi}
If..Else
• Pernyataan ini digunakan untuk menguji sebuah kondisi dan
kemudian mengeksekusi pernyataan tertentu bila kondisi tersebut
terpenuhi, dan mengeksekusi pernyataan lain bila kondisi
tersebut tidak terpenuhi.
• if (kondisi) {
//bila kondisi terpenuhi
}else
{
//bila kodisi tidak terpenuhi
}
Percabangan Majemuk
• Percabangan majemuk adalah suatu percabangan yang dapat
melibatkan lebih dari 1 kondisi di dalam percabangannya.
Biasanya percabangan seperti ini menggunakan operator
tambahan seperti AND, OR dan sebagainya.
• Switch
Selain menggunakan if..else, percabangan juga dapat ditangani
dengan perintah switch. Dengan kata lain pernyataan switch
digunakan untuk menyederhanakan pernyataan if..else yang
terlalu banyak.
Penjelasan Percabangan if
• Percabangan if merupakan percabangan yang hanya memiliki satu
blok pilihan saat kondisi bernilai benar.
• Coba perhatikan flowchart berikut ini:
Flowchart tersebut dapat kita
baca seperti ini:
“Jika total belanja lebih besar
dari Rp 100.000, Maka
tampilkan pesan Selamat, Anda
dapat hadiah”
Kalau dibawah Rp 100.000
bagaimana?
Ya pesannya tidak ditampilkan.
Script
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if</title>
</head>
<body>
<script> var total
Belanja = prompt("Total belanja?", 0);
if(totalBelanja > 100000) {
document.write("<h2>Selamat Anda dapat hadiah</h2>"); }
document.write("<p>Terimakasih sudah berbelanja di toko
kami</p>"); </script>
</body>
</html>
Perhatikan bagian ini:
if(totalBelanja > 100000){
document.write("<h2>Selamat Anda dapat
hadiah</h2>"); }
• Ini yang disebut blok.
• Blok program pada Javascript, diawali dengan tanda buka
kurung kurawal { dan diakhiri dengan tutup kurung
kurawal }.
• Apabila di dalam blok hanya terdapat satu baris ekspresi
atau statement, maka boleh tidak ditulis tanda kurungnya.
if(totalBelanja > 100000)
document.write("<h2>Selamat Anda dapat
hadiah</h2>");
Percabangan if/else
• Percabangan if/else merupakan percabangan yang memiliki dua blok pilihan.
• Pilihan pertama untuk kondisi benar, dan pilihan kedua untuk
kondisi salah (else).
• Coba perhatikan flowchart ini:
• Ini adalah flowchart untuk mengecek password.
• Apabila password benar, pesan yang ada pada blok hijau
akan ditampilkan: “Selamat datang bos!"
• Tapi kalau salah, maka pesan yang ada di blok merah
yang akan ditampilkan: “Password salah, coba lagi!"
• Kemudian, pesan yang berada di blok abu-abu akan tetap
ditampilkan, karena dia bukan bagian dari blok
percabangan if/else.
• Perhatikan arah panahnya, setiap blok if/else mengarah
ke sana…
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if/else</title>
</head>
<body>
<script>
var password = prompt("Password:");
if(password == "kopi"){
document.write("<h2>Selamat datang bos!</h2>");
} else {
document.write("<p>Password salah, coba lagi!</p>");
}
document.write("<p>Terima kasih sudah menggunakan aplikasi ini!</p>");
</script>
</body>
</html>
Percabangan if/else/if
• Percabangan if/else/if merupakan percabangan yang memiliki lebih dari dua blok pilihan.
• Coba perhatikan flowchart berikut:
• Perhatikan blok yang saya beri warna…
• Ini adalah blok untuk percabangan if/else/if. Kita bisa menambahkan berapapun blok yang kita
inginkan. <!DOCTYPE html>
• Contoh Program: <html lang="en">
<head>
<title>Percabangan if/else/if</title>
</head>
<body>
<script>
var nilai = prompt("Inputkan nilai akhir:");
var grade = "";
if(nilai >= 90) grade = "A"
else if(nilai >= 80) grade = "B+"
else if(nilai >= 70) grade = "B"
else if(nilai >= 60) grade = "C+"
else if(nilai >= 50) grade = "C"
else if(nilai >= 40) grade = "D"
else if(nilai >= 30) grade = "E"
else grade = "F";
document.write(`<p>Grade anda: ${grade}</p>`);
</script>
</body>
</html>
Pada program di atas, kita tidak menggunaka kurung kurawal untuk membuat blok kode untuk if/else/if.
karena hanya terdapat satu baris perintah saja. Yaitu: grade = ....
Bila kita menggunakan kurung kurawal, maka program di atas akan menjadi seperti ini:
<script>
var nilai = prompt("Inputkan nilai akhir:");
var grade = "";
if (nilai >= 90){

grade = "A"
} else if(nilai >= 80) {
grade = "B+"
grade = "B"
grade = "C+"
grade = "C"
grade = "D"
grade = "E"
} else {
grade = "F";
}
document.write(`<p>Grade anda: ${grade}</p>`);
</script>
Percabangan switch/case
• Percabangan switch/case adalah bentuk lain dari percabangan if/else/if.

• Strukturnya seperti ini:
switch (variabel){
case <value>:
// blok kode
break;
case <value>:
// blok kode
break;
default:
// blok kode
}
• Kita dapat mermbuat blok kode (case) sebanyak yang diinginkan di dalam blok switch.
• Pada <value>, kita bisa isi dengan nilai yang nanti akan dibandingkan dengan varabel.
• Setiap case harus diakhiri dengan break. Khusus untuk default, tidak perlu diakhiri
dengan break karena dia terletak di bagian akhir.
• Pemberian break bertujuan agar program berhenti mengecek case berikutnya saat
sebuah case terpenuhi.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan switch/case</title>
</head>
<body>
<script>
var jawab = prompt("Kamu beruntung! Silahakn pilih hadiahmu dengan
memasukan angka 1 sampai 5");
var hadiah = "";
switch(jawab){
case "1":
hadiah = "Tisu";
break;
case "2": CONTOH
hadiah = "1 Kotak Kopi";
break;
case "3":
hadiah = "Sticker";
break;
case "4":
hadiah = "Minyak Goreng"; LANJUTAN
break;
case "5":
hadiah = "Uang Rp 50.000";
break;
default:
document.write("<p>Opps! anda salah pilih</p>");
}
if(hadiah === ""){

document.write("<p>Kamu gagal mendapat hadiah</p>");
} else {
document.write("<h2>Selamat kamu mendapatkan " + hadiah +
"</h2>");
}
</script>
</body>
</html>
Percabangan switch/case juga dapat case nilai < 50:
dibuat seperti ini: grade = "C";
break;
var nilai = prompt("input nilai"); case nilai < 40:
var grade = ""; grade = "D";
break;
switch(true){ case nilai < 30:
case nilai < 90: grade = "E";
grade = "A"; break;
break; default:
case nilai < 80: grade = "F";
grade = "B+"; }
break; Pertam-tama, kita berikan nilai true pada
case nilai < 70: switch, ini agar kita bisa masuk ke dalam
grade = "B"; blok switch.
break;
case nilai < 60: Lalu di dalam blok switch, kita buat
grade = "C+"; kondisi dengan menggunakan case.
break;
Hasilnya akan sama seperti pada contoh
percabangan if/else/if
Percabangan dengan Operator Ternary
• Percabangan menggunakan opreator ternary merupakan bentuk lain dari
percabangan if/else.
• Bisa dibilang:
• Bentuk singkatnya dari if/else.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan Ternary</title>
</head>
<body>
<script>
var jwb = prompt("Apakah Jakarta ibu kota indonesia?");
var jawaban = (jwb.toUpperCase() == "IYA") ? "Benar": "Salah";
document.write(`Jawaban anda: <b>${jawaban}</b>`);
</script>
</body>
</html>
Fungsi dari method toUpperCase() untuk mengubah teks yang diinputkan menjadi huruf
kapital semua.
• Opertor ternary berperan sebagai percabangan if/else:
• var jawaban = (jwb.toUpperCase() == "IYA") ? "Benar":
"Salah";
• Apabila kondisi yang ada di dalam kurung—
(jwb.toUpperCase() == "IYA")—bernilai true, maka nanti
isi dari variabel jawaban akan sama dengan "Benar".
• Tapi kalau bernilai false, maka variabel jawaban akan
berisi "Salah".
Percabangan Bersarang (Nested)
• Kita juga dapat membuat blok percabangan di dalam percabangan. Ini disebut
percabangan bersarng atau nested if.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan Ternary</title>
</head>
<body>
<script>
var username = prompt("Username:"); CONTOH
if(username == "petanikode"){
document.write("<h2>Selamat datang pak bos!</h2>");
} else {
}
} else {
document.write("<p>Anda tidak terdaftar!</p>");
}
</script>
</body> </html>
Operator Logika pada Percabangan
• Percabangan bersarang, sebanarnya bisa kita buat lebih

sederhana lagi dengan menggunakan operator logika.
var username = prompt("Username:");

var password = prompt("Password:"); CONTOH
if(username == "petanikode"){
} else {
}
} else {
document.write("<p>Anda tidak terdaftar!</p>");
}
Ini dapat kita buat lebih sederhana lagi dengan operator logika AND (&&).
var username = prompt("Username:");

if(username == "petanikode" && password == "kopi"){

} else {
}
Namun, ini bukanlah solusi terbaik.
Karena kita tidak bisa mengecek, apakah user teradaftar atau tidak.
TERIMA KASIH

Materi 4 (Percabangan Dalam Javascript)

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Materi 4 (Percabangan Dalam Javascript)

Diunggah oleh

Hak Cipta:

Format Tersedia

Pertemuan - 4

Khairul Ummi, M.Kom

Sebagai tambahan terhadap ekspresi kondisi yang telah

document.write("<p>Terima kasih sudah menggunakan aplikasi ini!</p>");

if (nilai >= 90){

• Percabangan switch/case adalah bentuk lain dari percabangan if/else/if.

if(hadiah === ""){

• Percabangan bersarang, sebanarnya bisa kita buat lebih

var username = prompt("Username:");

var username = prompt("Username:");

if(username == "petanikode" && password == "kopi"){

Namun, ini bukanlah solusi terbaik.

Anda mungkin juga menyukai