Jika dalam tutorial JavaScript sebelumnya kita telah mempelajari tentang tipe data dasar di dalam JavaScript, yakni Number, String dan Boolean, pada tutorial ini kita akan masuk kedalam pembahasan tentang Cara Penulisan Struktur Logika IF dan IF ELSE dalam JavaScript.
Pengertian Struktur IF
Jika anda pernah mempelajari bahasa pemograman lain, pastinya tidak asing dengan struktur IF. Struktur IF adalah stuktur kode pemograman ‘conditional’ yang akan membuat percabangan di dalam program. Dengan menggunakan struktur IF, kita bisa membuat 2 percabangan program yang akan dieksekusi jika ‘kondisi’ terpenuhi, dan akan menjalankan kode program lain jika ‘kondisi’ tidak terpenuhi.
Berikut adalah penulisan dasar alur logika IF:
if (kondisi) { //kode program jika kondisi true } else { //kode program jika kondisi false }
Kondisi di dalam struktur IF disini bisa berisi variabel dengan tipe data boolean, atau dengan kode program yang akan menghasilkan boolean, misalkan IF (a==b), atau IF (a>=b). Jika kondisi diisi dengan selain boolean (selain true atau false), maka hasilnya akan dikonversi menjadi boolean (tentang aturan konversi ini telah kita bahas pada tutorial tentang tipe data boolean).
Cara Penulisan Struktur Logika IF dalam JavaScript
Penulisan stuktur IF di dalam JavaScript, mirip dengan bahasa pemograman C++ atau PHP. Berikut adalah contoh penulisan struktur IF di dalam JavaScript:
<script> var nama="ilkom"; //buat variabel String nama dan isi dengan ”ilkom” if (nama=="ilkom") // cek apakah variabel nama berisi ”ilkom” console.log("Berhasil!"); </script>
Kode program diatas tidak akan menjalankan perintah console.log(“Berhasil!”) jika variabel nama tidak berisi string “ilkom”.
Jika baris yang akan dijalankan terdiri dari 2 baris atau lebih, maka kita harus menggunakan tanda kurung kurawal (tanda { dan })pada awal dan akhir blok kondisi IF, seperti contoh berikut:
<script> var nama="ilkom"; if (nama=="ilkom") { console.log("Berhasil!"); console.log("Belajar"); console.log("JavaScript"); } </script>
Cara Penulisan Struktur Logika IF ELSE dalam JavaScript
Struktur IF memiliki percabangan lain yang akan dijalankan jika kondisi IF tidak terpenuhi, yakni dengan menambahkan perintah ELSE. Berikut contoh penulisannya:
<script> //buat variabel Number angka dan isi dengan nilai 17 var angka=17; // jika sisa hasil bagi (mod) variabel angka dengan 2 adalah 0, // maka jalankan perintah console.log() if (angka%2==0) console.log("Angka adalah bilangan genap"); else console.log("Angka adalah bilangan ganjil"); </script>
Kondisi angka%2==0 hanya akan bernilai TRUE jika nilai dari variabel angka bisa habis dibagi 2, yang menandakan angka adalah bilangan genap, selain itu dapat dipastikan bahwa angka adalah bilangan ganjil.
Sama seperti struktur IF, jika bagian ELSE memiliki baris lebih dari 1, maka kita harus menambahkan tanda kurung kurawal untuk menandai blok tersebut. seperti contoh berikut:
<script> var angka=12; if (angka%2==0) { console.log("Angka = "+angka); console.log("Angka adalah bilangan genap"); } else { console.log("Angka = "+angka); console.log("Angka adalah bilangan ganjil"); } </script>
Cara Penulisan Nested IF dalam JavaScript
Struktur Nested IF atau IF bersarang adalah cara penggunaan struktur IF secara berulang, yakni stuktur IF yang berada didalam IF. Alur program seperti ini biasa di gunakan untuk logika yang lebih detail. Berikut adalah contoh penggunaannya:
<script> var angka=-12; if (angka%2==0) { console.log("Angka = "+angka); console.log("Angka adalah bilangan genap"); if (angka > 0) { console.log("Angka besar dari 0"); } else { console.log("Angka kecil dari 0"); } } else { console.log("Angka = "+angka); console.log("Angka adalah bilangan ganjil"); if (angka > 0) { console.log("Angka besar dari 0"); } else { console.log("Angka kecil dari 0"); } } </script>
Dalam contoh diatas, saya membuat program yang akan menyeleksi apakah variabel angka berisi 4 kemungkinan, yakni apakah angka merupakan bilangan genap dan positif, bilangan genap dan negatif, bilangan ganjil dan positif, atau bilangan ganjil dan negatif. Karena ada 4 kondisi akhir yang mungkin terjadi, maka saya menggunakan nested IF.
Dalam pembuatan kode program yang menggunakan konsep nested IF ini, kita harus selalu memperhatikan tanda kurung kurawal yang menandakan awal dan akhir blok program. Lupa dalam menutup suatu blok IF akan menyebabkan program tersebut tidak akan berjalan (akan menghasilkan error), atau yang lebih sukar di deteksi adalah program akan menghasilkan kesalahan logika. Editor pemograman yang khusus seperti Notepad++ akan memudahkan kita untuk memastikan bahwa suatu blok program telah ditutup secara benar.
Cara Penulisan Struktur Logika ELSE IF dalam JavaScript
Struktur ELSE IF adalah bentuk lain dari penulisan struktur IF ELSE. Struktur ELSE IF terbentuk ketika kita menggunakan struktur IF ELSE secara berulang. Berikut contoh sederhananya:
<script> var angka=2; if (angka==1) { console.log("Angka Satu"); } else if (angka==2) { console.log("Angka Dua"); } else if (angka==3) { console.log("Angka Tiga"); } else if (angka==4) { console.log("Angka Empat"); } </script>
Di dalam contoh diatas, saya menyeleksi secara satu persatu nilai dari variabel angka dan menampilkan hasilnya dalam bentuk huruf.
Dalam tutorial kali ini kita telah mempelajari tentang cara penulisan dan penggunaan struktur IF ELSE di dalam JavaScript. Namun JavaScript masih memiliki struktur logika lainnya yakni struktur SWITCH. Kita akan membahasnya pada tutorial selanjutnya: Cara Penulisan Struktur Logika SWITCH dalam JavaScript.
Cara menggunakan fungsi sebagai kondisi pada if else bagaimana ya ?
if (onPause()==true) {
my_media.pause();
}
jika fungsi onPause dijalankan, maka kondisi benar
Saya mencoba script di atas tapi tidak berfungsi
Trimakasih sebelumnya
mantap master, bermanfaat banget
Mas, struktur IF ELSE di Javascript tidak memakai keyword THEN ya?
Setahu saya di beberapa bahasa pemrograman lain struktur nya adalah IF THEN ELSE.
Di bahasa "turunan" C++ seperti PHP dan JavaScript g perlu pakai "THEN" mas. Tp ada juga yang pakai, seperti PASCAL. Beda2 memang tergantung pembuatnya, hehe..
Bang mau tanya dong, kalo rumus if dan rumus for digabungkan, gimana ya penulisannya, ane undifined terus hasilnya, ada 2 kolom, kolom nilai dan keterangan, kalo nilai 2 ketnya buruk dan seterusnya
Sebenarnya pertanyaan ini lebih ke algoritma gan, bukan khusus di JavaScript. Kalau agan sudah pernah belajar algoritma, pakai bahasa pemrograman apapun g ada masalah.
Contoh gabungan if dan perulangan for ada saya buat di PHP gan. Untuk ke JavaScript tinggal disesuaikan saja: https://www.duniailkom.com/tutorial-belajar-php-fungsi-dan-cara-penulisan-perintah-break-dalam-perulangan-php/
Sangat membantu mas, bahasanya mudah dipahami. saya pun mempunyai Blog yang membahas javascript seperti ini. terimakasih artikelnya.
Yup, jangan lupa cantumkan sumbernya y gan.. soalnya saya lihat mirip2 seperti tutorial yang saya buat di duniailkom ini..
mas, untuk kondisi yang memuat logika OR dan AND klw di javascript bagaimana ya,.?trimakasih
Tergantung seperti apa program yang ingin dibuat. Kadang kalau di JavaScript, yang susah itu di cara menampilkan hasilnya, bukan di konsep dasar programming seperti OR atau AND.
Misalnya untuk menampilkan hasil sebuah kondisi logika, harus paham konsep DOM dan Event JavaScript juga..
mas, mau tanya.
Misal kondisinya itu menyebutkan id sebuah input text.
Kan ada bbrp input text, misal kondsi 1 id=A maka hasil 1, id=B maka hasil 2.
Di input text sy buat onclik, jk diklik muncul nilainya. Mksh
Bisa coba kesini karena kasusnya mirip: https://www.duniailkom.com/cara-menampilkan-hasil-form-html-dengan-javascript/
Kan di bhs C ada tuh kayak int, float, printr, scanf, %d, %i, %s. Kalo di javascript gimana mas ?
JavaScript menganut konsep "typeless programming language", yakni variabelnya tidak bertipe. Jadi kita tidak perlu menuliskan tipe data di setiap variabel (seperti int, float, char, dst). JavaScript bisa memprosesnya langsung.
var kota="Jakarta";
if (kota=="Jakarta")
console.log("Itu benar,Kota Jakarta");
else
console.log("Itu Bukan Kota Jakarta Sob");
else if (kota=="Aceh")
console.log("Kota Tersebut berada di luar pulau Jawa")
Mas,kok kode diatas baru bisa dijalankan kalo salah satu dari syntax else atau elif nya hilang,kenapa yah ?
#ask
coba begini dulu.
if (kota==”jakarta”)
{
console.log(“itu kota jakarta”);
}
else
{
console.log(“itu bukan kota jakata sob”);
}
if (kota==”aceh”)
{
console.log(“kotanya di diluar jawa”)
}
//ini masalahnya sederhana saja,pengunaan else dan else if itu salah.jika setelah else harus mengunakan if bukan else if” ” jika ingin mengunakan else if harus digunakan sejak awal//
example
if
else if
else if
//atau//
if
if
else
else
if
else if
else if
//saya harap ini membantu//cmiiw
Terima kasih gan. Saya sangat terbantu.
penempatan scriptnya dimana ?, model/view/controller
Bahasan artikel ini adalah untuk JavaScript dasar yang dijalankan langsung dari sebuah file HTML, bukan penggunaan di framework MVC.
mas izin tanya, kalau tutorial membuat jendela dialog confirm box dan prompt itu bagaimana ya, mas? soalnya saya dengar-dengar juga berhubungan dengan struktur IF ELSE ini, terima kasih.
Secara umum keduanya tidak berhubungan langsung dengan struktur IF ELSE, tapi sekedar cara untuk meminta input dari user. Contoh kodenya seperti ini:
var sudahPaham = confirm("Anda sudah paham JavaScript?");
var judulBaru = prompt("Input judul baru halaman");
Hasilnya, variabel sudahPaham dan judulBaru akan berisi data dari user. Kita bebas ingin mengolah data itu seperti apa, termasuk diproses menggunakan IF ELSE.
var angka=17;
if(angka%2==0);
console.log(“angka adalah bilangan genap”);
else
console.log(“angka adalah bilangan ganjil”);
mas mau tanya punya saya kok malah muncul
” Uncaught SyntaxError: expected expression, got keyword ‘else’ ”
ini kenapa ya, pdhl harusnya bilangannya ganjil kan ya
Kemungkinan besar ada perintah yang kurang / salah ketik…
maaf bang mau tanya.
saya buat program php kaya gini
$type = $this->input->post(‘type’);
$loan = $this->input->post(‘loan’);
if ($type == ‘1’) {
$bunga = array(0.15, 0.50, 0.99, 0.99);
$bulan = array(3, 6, 12, 24);
for ($i = 0; $i < sizeof($bunga); $i++) {
// $tenor = $bulan[] * 1;
$cicilan_pokok = $loan / $bulan[$i];
$cicilan_bunga = $loan * ($bunga[$i] / 100);
$jml_angsuran = round($cicilan_pokok + $cicilan_bunga);
echo '’;
echo ”;
echo ” . ‘FlexiPay’ . ”;
echo ” . ‘:’ . ”;
echo ” . $bulan[$i] . ”;
echo ” . ‘Bulan’ . ”;
echo ” . $bunga[$i] . ‘%’ . ”;
echo ” . ‘Rp. ‘ . round($jml_angsuran) . ”;
echo ”;
echo ”;
}
} elseif ($type == ‘2’) {
$bunga = array(0.89, 0.89, 0.89, 0.79, 0.75, 0.69, 0.89, 0.99);
$bulan = array(3, 6, 12, 24, 36, 12, 24, 36);
for ($i = 0; $i < sizeof($bunga); $i++) {
// $tenor = $bulan[] * 1;
$cicilan_pokok = $loan / $bulan[$i];
$cicilan_bunga = $loan * ($bunga[$i] / 100);
$jml_angsuran = round($cicilan_pokok + $cicilan_bunga);
echo '’;
echo ”;
echo ” . ‘FlexiPay TYPE 19’ . ”;
echo ” . ‘:’ . ”;
echo ” . $bulan[$i] . ”;
echo ” . ‘Bulan’ . ”;
echo ” . $bunga[$i] . ‘%’ . ”;
echo ” . ‘Rp. ‘ . round($jml_angsuran) . ”;
echo ”;
echo ”;
// echo ‘FlexiPay TYPE 19 : ‘ . $bulan[$i] . ‘ Bulan ‘ . $bunga[$i] . ‘%’ . ‘ ’ . ‘ ’ . ‘ ‘ . ‘ ‘;
// echo round($jml_angsuran) . ”;
}
nah script ini mau di ubah ke javascriptg gimana ya bang? dan cara pemanggilan di view nya?
maaf mas, mau tanya. untuk tipe if saya ini apakah sudah benar ya, soalnya ketika saya input formnya udah benar dan masuk ke database dan pop upnya berhasil muncul. tapi kog muncul juga yang pesan error ya kak
$(document).ready(function(){
// load_table();
});
$(“#master-supplier-form”).on(“submit”,function(e){
e.preventDefault();
var doit = confirm(“Lanjutkan Menyimpan Data?”);
if(doit){
$.ajax({
type:’post’,
url:”,
data:$(this).serialize(),
dataType:’json’,
success:function(resp){
if(resp.stat){
alert(‘Data Berhasil Disimpan.’);
window.location = “”;
}
},
error:function(){
alert(“Maaf! Terjadi kesalahan ketika menyimpan data.”);
}
});
}
});