Friday, January 9, 2015

Tutorial Javascript Part 19: Logika Penyeleksian IF dan SWITCH

Untuk menangani kondisi pada program kita membutuhkan logika yang menyeleksi nilai dari sebuah kondisi pada program tersebut. Kita bisa mengecek satu atau dua kondisi yang terjadi pada sebuah variabel dengan logika IF atau bisa juga mengecek banyak kondisi pada variabel dengan logika SWITCH.

Logika IF

Biasanya digunakan sebagai syarat untuk proses program. Misalnya sebuah program berjalan jika syarat telah terpenuhi atau bahkan sebuah program dihentikan jika sebuah variabel telah mencapai nilai tertentu.

Pada logika IF, suatu perintah tersebut akan dijalankan hanya jika kondisi pada logika IF bernilai benar atau dengan kata lain kondisi telah terpenuhi/tercapai.

Cara penulisan logika IF pada Javascript :

if (kondisi) {
    //sekelompok statemen program yang dijalankan jika kondisi bernilai benar
}
Note: Penulisan if harus menggunakan huruf kecil, jika tidak akan mengakibatkan error pada javascript.

Contoh penggunaan logika IF pada Javascript :

Pada contoh berikut ini kita mengecek status kelulusan siswa dari nilai yang didapat. Jika nilai lebih besar dari 5 maka siswa dinyatakan LULUS.
 <!DOCTYPE html>  
 <html>  
 <body>  
   
 <p>Mengecek kriteria kelulusan siswa (nilai 1-10)</p>  
 <input type="text" id="nilai">  
 <button onclick="cekLulus()">Test</button>  
   
 <p id="view"></p>  
   
 <script>  
 function cekLulus() {  
   var nilai=document.getElementById("nilai").value; 
   if (nilai > 5) {  
     document.getElementById("view").innerHTML = "LULUS";  
   }  
 }  
 </script>  
   
 </body>  
 </html>  

Logika IF ... ELSE

Prinsipnya sama dengan logika IF namun ditambahkan penanganan jika kondisi yang dicek bernilai salah. Jadi dengan logika IF...ELSE kita bisa menangani saat kondisi bernilai benar dan saat kondisi bernilai salah.

Cara penulisan logika IF...ELSE pada Javascript :

if (kondisi) {
    //sekelompok statemen program yang dijalankan jika kondisi bernilai benar
}
else {
    //sekelompok statemen program yang dijalankan jika kondisi bernilai salah
}
Note: Penulisan if dan else harus menggunakan huruf kecil, jika tidak akan mengakibatkan error pada javascript.

Contoh penggunaan logika IF...ELSE pada Javascript :

Pada contoh berikut ini kita menambahkan status TIDAK LULUS jika nilai siswa 5 atau kurang dari 5.
 <!DOCTYPE html>  
 <html>  
 <body>  
   
 <p>Mengecek kriteria kelulusan siswa (nilai 1-10)</p>  
 <input type="text" id="nilai">  
 <button onclick="cekLulus()">Test</button>  
   
 <p id="view"></p>  
   
 <script>  
 function cekLulus() {  
   var nilai=document.getElementById("nilai").value;  
   if (nilai > 5) {  
     document.getElementById("view").innerHTML = "LULUS";  
   }  
   else {  
     document.getElementById("view").innerHTML = "TIDAK LULUS";  
   } 
 }  
 </script>  
   
 </body>  
 </html>  

Logika IF ... ELSE IF

Dengan menambahkan IF dibelakang ELSE kita dapat mengecek kondisi selain kondisi yang pertama. Jadi kita bisa mempunyai dua kondisi yang bisa dicek. Lalu jika ditambahkan ELSE lagi maka kita bisa mengecek kondisi selain kondisi pertama dan kedua.

Cara penulisan logika IF...ELSE IF pada Javascript :

if (kondisi1) {
    //sekelompok statemen program yang dijalankan jika kondisi1 bernilai benar
}
else if(kondisi2){
    //sekelompok statemen program yang dijalankan jika kondisi1 bernilai salah dan kondisi2 bernilai benar
}
else {
    //sekelompok statemen program yang dijalankan jika kondisi1 dan kondisi2 bernilai salah.
}
Note: Penulisan if, else if dan else harus menggunakan huruf kecil, jika tidak akan mengakibatkan error pada javascript.

Contoh penggunaan logika IF...ELSE IF pada Javascript :

Pada contoh berikut ini kita menambahkan status LULUS CUM LAUDE jika nilai siswa diatas 9.
 <!DOCTYPE html>  
 <html>  
 <body>  
   
 <p>Mengecek kriteria kelulusan siswa (nilai 1-10)</p>  
 <input type="text" id="nilai">  
 <button onclick="cekLulus()">Test</button>  
   
 <p id="view"></p>  
   
 <script>  
 function cekLulus() {  
   var nilai=document.getElementById("nilai").value;  
   if (nilai > 9) {  
     document.getElementById("view").innerHTML = "LULUS-CUMLAUDE";  
   }  
   else if (nilai > 5) {  
     document.getElementById("view").innerHTML = "LULUS";  
   }  
   else {  
     document.getElementById("view").innerHTML = "TIDAK LULUS";  
   }  
     
 }  
 </script>  
   
 </body>  
 </html>  

Logika SWITCH

Digunakan untuk menangani banyak kondisi yang jika digunakan IF...ELSE IF akan terlalu banyak dan membingungkan.
Cara penulisan logika SWITCH  pada javascript :
switch(expresion) {
    case a:
        statemen blok kode jika expresion bernilai a
        break;
    case b:
        statemen blok kode jika expresion bernilai b
        break;
    .....//bisa diisi sampai banyak case...
    default:
        default statemen blok kode
}
Contoh penggunaan logika SWITCH pada javascript :
Pada contoh berikut ini kita menampilkan nama hari berdasarkan nilai angka harinya.
 <!DOCTYPE html>  
 <html>  
 <body>  
   
 <p>Klik untuk menampilkan hari apa ini:</p>  
   
 <button onclick="showDay()">Tampilkan</button>  
   
 <p id="demo"></p>  
   
 <script>  
 function showDay() {  
   var hari;  
   switch (new Date().getDay()) {  
     case 0:  
       hari = "Ahad";  
       break;  
     case 1:  
       hari = "Senin";  
       break;  
     case 2:  
       hari = "Selasa";  
       break;  
     case 3:  
       hari = "Rabu";  
       break;  
     case 4:  
       hari = "Kamis";  
       break;  
     case 5:  
       hari = "Jumat";  
       break;  
     case 6:  
       hari = "Sabtu";  
       break;  
   }  
   document.getElementById("demo").innerHTML = "Ini hari " + hari;  
 }  
 </script>  
   
 </body>  
 </html>  

Lihat indeks artikel Tutorial Javascript Dasar >>

Referensi :

0 komentar

Post a Comment