Dalam implementasi logika pada javascript dikenal juga istilah SWITCH. Pengertian switch dalam javascript adalah bentuk yang lebih khusus dari logika IF ELSE. Switch digunakan untuk membuat program becabang dimana saat pemeriksaan 1 kondisi yang membutuhkan banyak opsi. Bentuk umum penulisan Switch dalam javascript adalah.
switch (kondisi) {
case hasil1: // tampilan jika kondisi sesuai hasil1
break;
case hasil2: // tampilan jika kondisi sesuai hasil2
break;
default: //kode program untuk kondisi lainnya
break;
}
Kondisi yang dimaksud adalah variabel yang akan diperiksa. Hasil dari pemeriksaan akan dilakukan oleh case. Pada default, akan ditampilkan apa yang akan ditampilkan jika tidak memenuhi kondisi. Berikut ini salah satu contoh script yang menggunakan Switch.
<!DOCTYPE html>
Switch di awali dan di akhiri dengan kurung kurawal. Pada contoh di atas bisa dilihat bagian switch pada kurung yang berwarna merah. Sementara itu perintah default berperan sama dengan ELSE pada fungsi IF. Jika kondisi tidak ada yang terpenuhi pada Case, maka hasil akan ditampilkan adalah default. Ketika menjalankan kode di atas, coba masukkan input nilai 5. Maka akan ditampilkan default.
Perintah “ break;” ditulis untuk menginstruksikan pada javascript jika telah memenuhi satu kondisi maka proses akan berhenti. Jika tanpa ada perintah break, maka semua hasil dari kondisi terpenuhi hingga kondisi akhir akan ditampilkan. Misalkan, pada script diatas anda hapus kata “break;” ketika input misalkan 2 (untuk golongan B) akan ditampilkan golongan darah AB, O (case 3 dan case 4).
switch (kondisi) {
case hasil1: // tampilan jika kondisi sesuai hasil1
break;
case hasil2: // tampilan jika kondisi sesuai hasil2
break;
default: //kode program untuk kondisi lainnya
break;
}
Kondisi yang dimaksud adalah variabel yang akan diperiksa. Hasil dari pemeriksaan akan dilakukan oleh case. Pada default, akan ditampilkan apa yang akan ditampilkan jika tidak memenuhi kondisi. Berikut ini salah satu contoh script yang menggunakan Switch.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sifat Menurut Golongan Darah</title>
<script>
function hasilku() {
var al = document.getElementById("li").value;
var m=al-0;
switch (m) /* awal perintah switch dimulai dengan kurung >>> */
{
case 1:
document.getElementById("result10").innerHTML = " Kamu Penyabar" ;
break;
case 2:
document.getElementById("result10").innerHTML = " Kamu Orang Setia" ;
break;
case 3:
document.getElementById("result10").innerHTML = " Kamu orang yang Sangat Cerdas" ;
break;
case 4:
document.getElementById("result10").innerHTML = " Kamu Orang yang Kuat Loh" ;
break;
default:
document.getElementById("result10").innerHTML = " Ketikkan Sesuai aturan yang dijelaskan" ;
break; } /* <<< Akhir perintah Switch diakhiri dengan kurung*/
}
</script>
</head><body><h1>Contoh Penggunaan Case Javascript</h1>
<h2>Sifatmu Menurut Golongan Darah </h2>
<p>Ketik </p>1 buat golongan darah A,
2 untuk B,
3 untuk AB, 4 untuk O = <input id="li" size="5" type="text" /><br/>
<input onclick="hasilku()" type="button" value="Periksa" />
<span id="result10"></span>
</div></body></html>
Fokus terhadap script di atas adalah pada bagian yang berwarna biru. Bagaimana tata aturan dalam penulisan case dan harus diikuti break.
Switch di awali dan di akhiri dengan kurung kurawal. Pada contoh di atas bisa dilihat bagian switch pada kurung yang berwarna merah. Sementara itu perintah default berperan sama dengan ELSE pada fungsi IF. Jika kondisi tidak ada yang terpenuhi pada Case, maka hasil akan ditampilkan adalah default. Ketika menjalankan kode di atas, coba masukkan input nilai 5. Maka akan ditampilkan default.
Perintah “ break;” ditulis untuk menginstruksikan pada javascript jika telah memenuhi satu kondisi maka proses akan berhenti. Jika tanpa ada perintah break, maka semua hasil dari kondisi terpenuhi hingga kondisi akhir akan ditampilkan. Misalkan, pada script diatas anda hapus kata “break;” ketika input misalkan 2 (untuk golongan B) akan ditampilkan golongan darah AB, O (case 3 dan case 4).
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment