Percabangan dalam Javascript

5:28 PM
Dalam kehidupan kita sering dihadapkan pada pilihan. Kadang ada satu pilihan yang hanya menuntut kita untuk melakukan atau tidak melakukan sesuatu. Kadang bisa ada dua pilihan atau bahkan lebih yang tidak hanya terkait melakukan dan tidak melakukan. Selain dalam interaksi di dunia nyata, saat pengguna "berinteraksi" dengan komputer, pengguna juga kadang perlu diberikan pilihan atau kesempatan untuk memasukkan suatu nilai. Setelah nilai dimasukkan, komputer bisa menentukan tindakan yang akan dilakukan berdasarkan masukkan atau pilihan dari pengguna.

Dalam pemrograman, tindakan yang dilakukan oleh komputer berdasarkan nilai suatu variabel (atau pilihan) ditentukan dengan percabangan. Dalam javascript, ada dua macam percabangan. Yang pertama adalah percabangan dengan if-else dan yang kedua adalah percabangan dengan switch-case.

Di bawah ini kalian akan melihat contoh javascript dalam kode HTML yang berisi percabangan dengan menggunakan if.
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
   <Script>
        var syarat;
        syarat=2<3;
        if(syarat)document.writeln("2<3 bernilai ", syarat, "<BR/>");
   </Script>
</BODY>
</HTML>


Pada contoh script di atas, kita menggunakan satu variabel boolean dengan nama syarat sebagai syarat untuk percabangan menggunakan If. If akan mencetak suatu nilai jika syarat atau kondisinya sesuai atau bernilai true. Jika kode HTML tersebut dibuka di browser, hasilnya akan menampilkan "2<3 bernilai benar" karena syarat bernilai true. Jika syarat diubah dan bernilai false, maka "bagian dari percabangan" tidak akan ditampilkan. Untuk membuktikannya, ubah script-nya supaya jadi seperti di bawah ini.
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
   <Script>
        var syarat;
        syarat=2>3;
        if(syarat)document.writeln("2<3 bernilai ", syarat, "<BR/>");
   </Script>
</BODY>
</HTML>
Coba ketik, simpan dan buka! Seharusnya, tidak ada apapun yang ditampilkan karena "2>3" yang disimpan dalam variabel syarat bernilai false.

Yang perlu diingat adalah, jika nilai variabel true atau syarat terpenuhi, maka statement yang jadi bagian dari percabangan akan dijalankan. Hasil dari syarat yang akan digunakan dalam percabangan tidak harus disimpan dalam variabel dengan tipe data boolean, tapi kalian bisa menggunakan tipe boolean jika diperlukan.

Selanjutnya , kita akan mencoba menambahkan else pada script kita. Else digunakan sebagai alternatif dari if saat suatu syarat tidak terpenuhi. Else tidak bisa berdiri sendiri dan harus diletakkan setelah if. Dengan if yang berpasangan bersama else, kita bisa membuat program yang menampilkan hasil sesuai pilihan atau masukan dari pengguna yang kita simpan dalam variabel tertentu.
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
   <Script>
        var syarat;
        syarat=2>3;
        if(syarat)document.writeln("2<3 bernilai ", syarat, "<BR/>");

        else document.writeln("2<3 bernilai ", syarat, "<BR/>");

    </Script>
</BODY>
</HTML>
If-else bisa digantikan dengan ternary operator jika tugas yang diinginkan adalah pemberian nilai pada variabel. Ternary operator meletakkan syarat sebelum tanda tanya(?), dan memisahkan tindakan untuk kondisi benar dan salah dengan titik dua (:); misalnya :

variabel= a<b?"benar":"salah";

sama dengan

if(a<b)variabel="benar";
else variabel="salah";

Jika syarat terpenuhi, maka nilai di sebelah kiri titik dua yang akan digunakan. Jika tidak, maka nilai di sebelah kanan tanda titik dua yang akan digunakan. Nilai di kanan tanda titik dua bisa dibilang sama dengan else. Pada contoh di atas, nilainya adalah "benar" dan "salah".

Contoh kode HTML dengan scriptnya :
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <Script>
        var hasil=2>1?"benar":"salah";
        document.writeln("2>1 adalah ", hasil, "<BR>");
        hasil=2<1?"benar":"salah";
        document.writeln("2<1 adalah ", hasil);
    </Script>
</BODY>
</HTML>
Jika ada lebih banyak kemungkinan dan kondisi, kita bisa meletakkan if setelah else sehingga menjadi sekumpulan "else if". Untuk lebih jelasnya, perhatikan contoh di bawah ini.
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
   <Script>
        var syarat;
        angka=7;
        if(angka > 0)document.writeln(angka+" adalah bilangan positif <BR/>");
        else if(angka < 0)document.writeln(angka+" adalah bilangan negatif <BR/>");
   </Script>
</BODY>
</HTML>



Coba simpan dan buka di browser untuk melihat hasilnya! Setelah itu, ganti nilai variabel angka dengan -7. Seharusnya hasilnya akan berubah menjadi "-7 adalah bilangan negatif". Tapi, jika yang diketik angka 0 maka tidak akan ada tulisan yang ditampilkan di halaman karena memang tidak disediakan tindakan berdasarkan syarat tersebut. Pada contoh berikut ini, kita akan menambahkan tindakan yang akan dilakukan jika nilai variabel angka adalah 0.
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
   <Script>
        var syarat;
        angka=0;
        if(angka > 0)document.writeln(angka+" adalah bilangan positif <BR/>");
        else if(angka < 0)document.writeln(angka+" adalah bilangan negatif <BR/>");
        else document.writeln(angka+"= nol <BR/>"); 
   </Script>
</BODY>
</HTML>
Pada contoh di atas, yang akan ditampilkan adalah pernyataan/statement yang jadi bagian dari else karena syarat pertama (angka > 0) dan kedua (angka < 0 ) tidak terpenuhi. Dalam hal ini, hanya 0 yang tidak sesuai syarat pertama dan kedua.

Switch-case

Selain if-else, percabangan lain yang bisa digunakan yaitu switch-case. switch-case bisa digunakan jika syarat yang akan dipakai menggunakan "==", dan tidak bisa digunakan untuk syarat berupa kurang dari, lebih dari, dan tidak sama dengan. Untuk memahami perbedaan dan persamaan dari if dan switch, coba perhatikan script berikut ini!
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
   <Script>
        var syarat;
        angka= 2;
        if(angka == 0)document.writeln("angka nol");
        else if(angka == 1)document.writeln("angka satu");
        else if(angka == 2)document.writeln("angka dua");
        else if(angka == 3)document.writeln("angka tiga");
        else document.writeln("Angka lain <BR/>");
   </Script>
</BODY>
</HTML>
Script di atas menggunakan banyak else if yang semua kondisi atau syaratnya menggunakan "==". Script di atas hasilnya sama dengan script berikut ini :
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
   <Script>
        var syarat;
        angka= 2;
        switch(angka){
            case 0:
                document.writeln(angka+"angka nol");
                break;
            case 1:
                document.writeln("angka satu");
                break;
            case 2:
                document.writeln("angka dua");
                break;
            case 3:
                document.writeln("angka tiga");
                break;
            default:
                document.writeln("Angka lain <BR/>");
        }
   </Script>
</BODY>
</HTML>

Pada contoh pertama, yang digunakan adalah else if. Pada contoh kedua, yang digunakan adalah switch-case. Switch-case bisa digunakan untuk menggantikan if yang menggunakan perbandingan dengan tanda "==". case menunjukkan keadaan atau nilai dari suatu variabel yang berada dalam switch(...). Semua case diapit dengan tanda { dan } yang berguna untuk mengelompokkan sekumpulan statement / pernyataan. Jika pada if ada else, pada switch case ada default yang perannya untuk melakukan tindakan di saat semua syarat yang ada tidak terpenuhi. Lalu, apa kegunaan dari break?
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
   <Script>
        var syarat;
        angka= 1;
        switch(angka){
            case 0:
                document.writeln("0 terlewati <BR />");
            case 1:
                document.writeln("1 terlewati <BR />");
            case 2:
                document.writeln("2 terlewati <BR />");
            case 3:
                document.writeln("Angka antara satu hingga tiga");
                break;
            default:
                document.writeln("Angka lain <BR/>");
        }
   </Script>
</BODY>
</HTML>
Semua bagian di bawah case yang sesuai syarat akan dijalankan. Jika case terpenuhi, semua statement di bawahnya akan dieksekusi hingga ditemukan break. Coba ketik, simpan dan buka untuk melihat hasilnya.

Subscribe to: Post Comments (Atom)