Mengetahui Percabangan Yang Ada Pada Javascript

Mengetahui Percabangan Yang Ada Pada Javascript
Apa arti dari percabangan di javascript dan kenapa dinamakan percabangan?
Untuk anda yang belum pernah mendapatkan pelajaran ini di waktu sekolah, kuliah atau belajar tentang algoritme dan flowchart, mungkin ini istilah yang baru pertama anda dengar.
Istilah percabangan ini sebenarnya untuk menggambarkan alur proses dari sebuah program yang bercabang.
Pada flow chart, logika “IF ... THEN” digambarkan dalam bentuk cabang.
Mengetahui Percabangan Yang Ada Pada Javascript
Karena hal itulah, ini disebut percabangan.
Selain percabangan, struktur ini juga disebut: control flow, decision, struktur kondisi, Struktur if, dsb.
Percabangan akan menjadikan program menjadi dapat berpikir dan menentukan tindakan sesuai dengan logika/kondisi yang kita berikan.
Pada pemrograman Javascript, terdapat sejumlah bentuk percabangan yang harus kita ketahui.
Berikut Pembahasannya ...

Percabangan yang pertama : IF

Percabangan if merupakan percabangan yang hanya memiliki satu blok pilihan saat kondisi bernilai benar.
Coba perhatikan flowchart berikut ini:
Mengetahui Percabangan Yang Ada Pada Javascript
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.
Mari kita coba dalam program Javascript, Kamu bisa mencobanya disini :




Percabangan if








Hasilnya:
Mengetahui Percabangan Yang Ada Pada Javascript
klik gambar untuk memperbesar
Perhatikan bagian ini:
if(totalBelanja > 100000){
document.write("

Selamat Anda dapat hadiah

");
}
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 kurung kurawalnya.
seperti ini :

if(totalBelanja > 100000)
document.write("

Selamat Anda dapat hadiah

");




Percabangan yang kedua : 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:
Mengetahui Percabangan Yang Ada Pada Javascript
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.
Mengetahui Percabangan Yang Ada Pada Javascript
Untuk lebih jelasnya, mari kita coba dalam program berikut :




Percabangan if/else


");
}
document.write("

Terima kasih sudah menggunakan aplikasi ini!

");





Hasilnya:
Mengetahui Percabangan Yang Ada Pada Javascript
klik gambar untuk memperbesar

Percabangan ketiga : if/else/if

Percabangan if/else/if merupakan percabangan yang memiliki lebih dari dua blok pilihan.
Coba perhatikan flowchart berikut:
Mengetahui Percabangan Yang Ada Pada Javascript

Perhatikan blok yang saya beri warna…
Ini adalah blok untuk percabangan if/else/if. Kita bisa menambahkan banyak blok sesuai dengan yang kita inginkan.
Contoh Program:




Percabangan if/else/if








Hasilnya:
Mengetahui Percabangan Yang Ada Pada Javascript
klik gambar untuk memperbesar

Pada program di atas, kita tidak menggunakan kurung kurawal untuk membuat blok kode untuk if/else/if.
karena hanya terdapat satu baris perintah saja. Yaitu: grade = (nilai grade)
Bila kita menggunakan kurung kurawal, maka program di atas akan menjadi seperti ini:




Percabangan if/else/if








Percabangan yang keempat : switch/case

Percabangan switch/case adalah bentuk lain dari percabangan if/else/if.
Strukturnya seperti ini:

switch(variabel){
case :
// blok kode
break;
case :
// blok kode
break;
default:
// blok kode
}




Kita dapat membuat blok kode (case) sebanyak yang diinginkan di dalam blok switch.
Pada , kita bisa isi dengan nilai yang nanti akan dibandingkan dengan variabel.
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.
Contoh:



Percabangan switch/case








Hasilnya:
Mengetahui Percabangan Yang Ada Pada Javascript
klik gambar untuk memperbesar

Percabangan switch/case juga dapat dibuat seperti ini:

var nilai = prompt("input nilai");
var grade = "";
switch(true){
case nilai < 90:
grade = "A";
break;
case nilai < 80:
grade = "B+";
break;
case nilai < 70:
grade = "B";
break;
case nilai < 60:
grade = "C+";
break;
case nilai < 50:
grade = "C";
break;
case nilai < 40:
grade = "D";
break;
case nilai < 30:
grade = "E";
break;
default:
grade = "F";
}




Pertama-tama, kita berikan nilai true pada switch, ini agar kita bisa masuk ke dalam blok switch.
Lalu di dalam blok switch, kita buat kondisi dengan menggunakan case.
Hasilnya akan sama seperti pada contoh percabangan if/else/if.

Percabangan Kelima : Operator Ternary

Percabangan menggunakan operator ternary merupakan bentuk lain dari percabangan if/else.
Bisa dibilang Operator Ternary adalah :
Bentuk singkatnya dari if/else.
Contoh:




Percabangan Ternary







Fungsi dari method toUpperCase() untuk mengubah teks yang di input menjadi huruf kapital semua.
Hasilnya:
Mengetahui Percabangan Yang Ada Pada Javascript
klik gambar untuk memperbesar

Operator 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 Keenam : Bersarang (Nested)

Kita juga dapat membuat blok percabangan di dalam percabangan. Ini disebut percabangan bersarang atau nested if.
Contoh:




Percabangan Ternary


");
}





Hasilnya:
Mengetahui Percabangan Yang Ada Pada Javascript
klik gambar untuk memperbesar

Bonus: Menggunakan Operator Logika pada Percabangan
Percabangan bersarang, sebenarnya bisa kita buat lebih sederhana lagi dengan menggunakan operator logika.
Contohnya:

var username = prompt("Username:");
var password = prompt("Password:");
if(username == "FajarYusuf"){
if(password == "kopi"){
document.write("

Selamat datang pak bos!

");
} else {
document.write("

Password salah, coba lagi!

");
}
} else {
document.write("

Anda tidak terdaftar!

");
}
Ini dapat kita buat lebih sederhana lagi dengan operator logika AND (&&).
var username = prompt("Username:");
var password = prompt("Password:");
if(username == "FajarYusuf" && password == "kopi"){
document.write("

Selamat datang pak bos!

");
} else {
document.write("

Password salah, coba lagi!

");
}




Namun, ini bukanlah solusi terbaik.
Karena kita tidak bisa mengecek, apakah user terdaftar atau tidak.

Spread the love

Fajar (Ucup)

Pemilik dan Author dari FajarYusuf.com dan juga seseorang yang gemar membagikan info menarik kepada orang lain.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *