Showing posts with label JAVASCRIPT. Show all posts
Showing posts with label JAVASCRIPT. Show all posts

Monday, March 18, 2019

Looping Atau Perulangan Pada Program Javascript

Looping Atau Perulangan Pada Program Javascript

Apa yang akan kamu lakukan saat disuruh mencetak kalimat yang berulang-ulang?

Misalnya:

“Tolong tampilkan kalimat "Belajar Javascript di FajarYusuf.Com!" di website saya sebanyak 10 kali”

Mungkin kamu bisa menuliskannya dengan fungsi document.write() sebanyak 10 kali seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
     document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
document.write("<p>Belajar Javascript di FajarYusuf.Com!</p>");
    </script>
</body>
</html>
Hasilnya:
Looping Atau Perulangan Pada Program Javascript
klik gambar untuk memperbesar

Menampilkan teks tanpa looping
Apakah boleh seperti ini?

Ya, boleh-boleh saja.

Tetapi ...

Bagaimana kalau nanti dia mau menampilkan sebanyak 1000 kali.

Pasti capek banget ngetik 1000 kali .

Karena itu, kita harus menggunakan looping atau perulangan.

Perulangan akan membantu kita mengeksekusi kode yang berulang-ulang, tidak peduli berapa banyak yang kita mau.

Ada lima macam bentuk perulangan di Javascript. Secara umum, perulangan ini dibagi dua.

Yaitu: counted loop dan uncounted loop.

Perbedaanya :

Counted Loop merupakan perulangan yang jelas dan sudah tentu banyak perulangannya.
Sedangkan Uncounted Loop, merupakan perulangan yang tidak jelas berapa kali ia harus mengulang.
Perulangan yang termasuk dalam Counted Loop:

  • Perulangan For
  • Perulangan Foreach
  • Perulangan Repeat

Perulangan yang termasuk dalam Uncounted Loop:

  • Perulangan While
  • Perulangan Do/While

Mari kita bahas satu per satu…

Perulangan For di Javascript

Perulangan for merupakan perulangan yang termasuk dalam counted loop, karena sudah jelas berapa kali ia akan mengulang.

Bentuknya seperti ini:
for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

contoh coding lengkap :
<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
   for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}
    </script>
</body>
</html>
Yang perlu diperhatikan adalah kondisi yang ada di dalam kurung setelah kata for.

Kondisi ini akan menentukan:

  1. Hitungan akan dimulai dari 0 (i = 0);
  2. Hitungannya sampai berapa? Sampai i < 10;
  3. Lalu di setiap perulangan i akan bertambah +1 (i++).
  4. Variabel i pada perulangan for berfungsi untuk menyimpan nilai hitungan.


Jadi setiap perulangan dilakukan nilai i akan selalu bertambah satu. Karena kita menentukannya di bagian i++.

Ini hasil outputnya:
Looping Atau Perulangan Pada Program Javascript
klik gambar untuk memperbesar


Apakah nama variabelnya harus selalu i?

Tidak.

Kita juga bisa menggunakan nama lain.

Misalnya:

for(counter = 0; counter < 50; counter+2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}
Pada contoh tersebut, kita melakukan perulangan dimulai dari nol 0. Lalu di setiap perulangan nilai variabel counter akan ditambah 2 (counter+2).

Bagaimana kalau counter perulangannya dimulai dari angka yang lebih besar sampai yang ke paling kecil?

Ini biasanya kita buat saat ingin menghitung mundur…

Caranya gampang.

Kita tinggal isi nilai counter dengan nilai paling besar.

Misalnya kita akan mulai hitungan dari 10 sampai ke 0.

Maka nilai counter, kita isi awalnya dengan 10.

Lalu di kondisi perbandingannya, kita berikan counter > 0. Artinya perulangan akan dilakukan selama nilai counter lebih besar dari 0.

Lalu kita kurangi (-1) nilai counter di setiap perulangan (counter--).

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}
Coding lengkapnya :
<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
   for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}
    </script>
</body>
</html>
Hasil :
Looping Atau Perulangan Pada Program Javascript
klik gambar untuk memperbesar


Mengapa tidak sampai nol (0)?

Karena kondisi yang kita berikan counter > 0. Apabila counter bernilai 0, maka kondisi ini akan menjadi false.

Kecuali kita menggunakan operator lebih besar sama dengan (>=), maka jika counter bernilai 0, kondisi akan menjadi true.

Perulangan While di Javascript

Perulangan while merupakan perulangan yang termasuk dalam perulangan uncounted loop.

Perulangan while juga dapat menjadi perulangan yang counted loop dengan memberikan counter di dalamnya.

Untuk memahami perulangan ini…

…mari kita coba lihat contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
  var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;
while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}
document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");
    </script>
</body>
</html>
Bisa disederhanakan menjadi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
  var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;
while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}
document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");
    </script>
</body>
</html>
Hasilnya:
Looping Atau Perulangan Pada Program Javascript
klik pada gambar untuk memperbesar

Coba perhatikan blok kode while:

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}
Pada blok kode tersebut… Perulangan akan terjadi selama variabel ulangi brenilai true.

Lalu kita menggunakan fungsi confirm() untuk menampilkan dialog konfirmasi.

Selama kita memilih Ok pada dialog konfirmasi, maka variabel ulangi akan terus bernilai true.

Tapi kalau kita pilih Cancel, maka variabel ulangi akan bernilai false.

Saat variabel ulangi bernilai false, maka perulangan akan dihentikan.

Perulangan Do/While di Javascript

Perulangan do/while sama seperti perulangan while.

Perbedaanya:

Perulangan do/while akan melakukan perulangan sebanyak 1 kali terlebih dahulu, lalu mengecek kondisi yang ada di dalam kurung while.

Bentuknya seperti ini:
do {
    // blok kode yang akan diulang
} while (<kondisi>);
Jadi perbedaanya:

Perulangan do/while akan mengecek kondisi di belakang (sesudah mengulang), sedangkan while akan mencek kondisi di depan atau awal (sebelum mengulang).

Mari kita coba lihat contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
  var ulangi = confirm("Apakah anda mau mengulang?");;
var counter = 0;
do {
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)
document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");
    </script>
</body>
</html>
Contoh tersebut sama seperti contoh pada perulangan while.

Saat perulangan pertama, cobalah untuk membatalkan perulangannya dengan memilih Cancel.

Maka hasilnya:
Looping Atau Perulangan Pada Program Javascript
klik gambar untuk memperbesar

Perulangan Foreach di Javascript

Perulangan foreach biasanya digunakan untuk mencetak item di dalam array.

Perulangan ini termasuk dalam perulangan counted loop, karena jumlah perulangannya akan dituntukan oleh panjang dari array.

Ada dua cara menggunakan perulangan foreach di Javascript:

  1. Menggunakan for dengan operator in;
  2. Mengguunakan method forEach().

Berikut ini bentuk perulangan “foreach” tanpa menggunakan operator in:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
var languages = ["Javascript", "HTML", "CSS", "Typescript"];
for(i = 0; i < languages.length; i++){
    document.write(i+". "+ languages[i] + "<br/>");
}
    </script>
</body>
</html>
Perulangan ini dapat dibuat lebih sederhana lagi dengan menggunakan operator in seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
var languages = ["Javascript", "HTML", "CSS", "Typescript"];
for(i in languages){
    document.write(i+". "+ languages[i] + "<br/>");
}
    </script>
</body>
</html>
Hasilnya:
Looping Atau Perulangan Pada Program Javascript
klik gambar untuk memperbesar


Cara kedua membuat perulangan foreach ialah dengan menggunakan method forEach() dari array.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
// kita punya array seperti berikut
var days = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];
// Kemudian kita tampilkan semua hari
// dengan menggunakan method foreach
days.forEach(function(day){
    document.write("<p>" + day + "</p>");
});
    </script>
</body>
</html>
Method forEach() memiliki parameter berupa fungsi callback. Sebenarnya kita juga bisa menggunakan arrow function seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
// kita punya array seperti berikut
var days = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];
// Kemudian kita tampilkan semua hari
// dengan menggunakan method foreach
days.forEach((day) => {
    document.write("<p>" + day + "</p>");
});
    </script>
</body>
</html>
Hasilnya:
Looping Atau Perulangan Pada Program Javascript
klik pada gambar untuk memperbesar

Perulangan dengan Method repeat()

Perulangan dengan method atau fungsi repeat() termasuk dalam perulangan counted loop.

Fungsi ini khusus digunakan untuk mengulang sebuah teks (string).

Bisa dibilang:

Ini merupakan kode singkat dari perulangan for.

Apabila kita menggunakan perulangan for:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
for( let i = 0; i < 100; i++){
    document.write("Ulangi kalimat ini!");
}
    </script>
</body>
</html>
Apabila kita menggunakan fungsi repeat():
<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
document.write("Ulangi kalimat ini! ".repeat(100));
    </script>
</body>
</html>
Hasilnya:
Looping Atau Perulangan Pada Program Javascript
klik pada gambar untuk memperbesar



Perulangan Bersarang (Nested)

Di dalam blok perulangan, kita juga dapat membuat perulangan.

Ini disebut dengan nested loop atau perulangan bersarang atau perulangan di dalam perualangan.

Mari kita coba lihat contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
for(let i = 0; i < 10; i++){
    for(let j = 0; j < 10; j++){
        document.write("<p>Perulangan ke " + i + "," + j + "</p>");
    }
}
    </script>
</body>
</html>
Hasilnya:
Looping Atau Perulangan Pada Program Javascript
klik gambar untuk memperbesar


Pada perulangan tersebut, kita menggunakan dua perulangan for.

Perulangan pertama menggunakan variabel i sebagai counter, sedangkan perulangan kedua menggunakan variabel j sebagai counter.

Contoh lain:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>looping</title>
</head>
<body>
    <script>
var ulangi = confirm("apakah anda ingin mengulang?");
var counter = 0;
while (ulangi) {
    counter++;
    var bintang = "*".repeat(counter) + "<br>";
    document.write(counter + ": " + bintang);
    ulangi = confirm("apakah anda ingin mengulang?");
}
    </script>
</body>
</html>
Hasilnya:
Looping Atau Perulangan Pada Program Javascript
klik gambar untuk memperbesar

Nanti, kita akan banyak menggunakan perulangan bersarang saat bekerja dengan array dua dimensi.

Kita dapat membuat perluangan sebanyak mungkin di dalam perulangan yang lainnya.

Namun, Kita perlu memperhatikan hal berikut :
Semakin banyak perulangannya, maka komputer akan semakin lama memprosesnya.
Tentu ini akan membuat website atau aplikasi kita berjalan lambat.
Karena itu, gunakan perulangan dengan bijak

Reviewer: FajarYusuf.Com
ItemReviewed: Looping Atau Perulangan Pada Program Javascript

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 :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan if</title>
</head>
<body>
    <script>
        var totalBelanja = prompt("Total belanja?", 0);
        if(totalBelanja > 100000){
            document.write("<h2>Selamat Anda dapat hadiah</h2>");
        }
        document.write("<p>Terimakasih sudah berbelanja di toko kami</p>");
    </script>
</body>
</html>
Hasilnya:
Mengetahui Percabangan Yang Ada Pada Javascript
klik gambar untuk memperbesar


Perhatikan bagian ini:
if(totalBelanja > 100000){
    document.write("<h2>Selamat Anda dapat hadiah</h2>");
}
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("<h2>Selamat Anda dapat hadiah</h2>");

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 :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan if/else</title>
</head>
<body>
    <script>
        var password = prompt("Password:");
        if(password == "kopi"){
            document.write("<h2>Selamat datang bos!</h2>");
        } else {
            document.write("<p>Password salah, coba lagi!</p>");
        }
        document.write("<p>Terima kasih sudah menggunakan aplikasi ini!</p>");
    </script>
</body>
</html>
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:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan if/else/if</title>
</head>
<body>
    <script>
        var nilai = prompt("Inputkan nilai akhir:");
        var grade = "";
        if(nilai >= 90) grade = "A"
        else if(nilai >= 80) grade = "B+"
        else if(nilai >= 70) grade = "B"
        else if(nilai >= 60) grade = "C+"
        else if(nilai >= 50) grade = "C"
        else if(nilai >= 40) grade = "D"
        else if(nilai >= 30) grade = "E"
        else grade = "F";
        document.write(`<p>Grade anda: ${grade}</p>`);
    </script>
</body>
</html>

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan if/else/if</title>
</head>
<body>
   <script>
    var nilai = prompt("Inputkan nilai akhir:");
    var grade = "";
    if (nilai >= 90){
        grade = "A"
    } else if(nilai >= 80) {
        grade = "B+"
    } else if(nilai >= 70) {
        grade = "B"
    } else if(nilai >= 60) {
        grade = "C+"
    } else if(nilai >= 50) {
        grade = "C"
    } else if(nilai >= 40) {
        grade = "D"
    } else if(nilai >= 30) {
         grade = "E"
    } else { 
        grade = "F";
    }
    document.write(`<p>Grade anda: ${grade}</p>`);
</script>
</body>
</html>

Percabangan yang keempat : switch/case

Percabangan switch/case adalah bentuk lain dari percabangan if/else/if.

Strukturnya seperti ini:

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

Kita dapat membuat blok kode (case) sebanyak yang diinginkan di dalam blok switch.

Pada <value>, 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:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan switch/case</title>
</head>
<body>
    <script>
        var jawab = prompt("Anda beruntung! Silakan pilih hadiahmu dengan memasukkan angka 1 sampai 5");
        var hadiah = "";
        switch(jawab){
            case "1":
                hadiah = "Tisu";
                break;
            case "2":
                hadiah = "1 Kotak Kopi";
                break;
            case "3":
                hadiah = "Sticker";
                break;
            case "4":
                hadiah = "Minyak Goreng";
                break;
            case "5":
                hadiah = "Uang Rp 50.000";
                break;
            default:
                document.write("<p>Upps! anda salah pilih</p>");
        }
        if(hadiah === ""){
            document.write("<p>Anda gagal mendapat hadiah</p>");
        } else {
            document.write("<h2>Selamat anda mendapatkan " + hadiah + "</h2>");
        }
    </script>
</body>
</html>

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan Ternary</title>
</head>
<body>
    <script>
        var jwb = prompt("Apakah Jakarta ibu kota indonesia?");
        var jawaban = (jwb.toUpperCase() == "IYA") ? "Benar": "Salah";
        document.write(`Jawaban anda: <b>${jawaban}</b>`);
    </script>
</body>
</html>

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan Ternary</title>
</head>
<body>
    <script>
        var username = prompt("Username:");
        var password = prompt("Password:");
        if(username == "FajarYusuf"){
            if(password == "kopi"){
                document.write("<h2>Selamat datang pak bos!</h2>");
            } else {
                document.write("<p>Password salah, coba lagi!</p>");
            }
        } else {
            document.write("<p>Anda tidak terdaftar!</p>");
        }
    </script>
</body>
</html>
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("<h2>Selamat datang pak bos!</h2>");
    } else {
        document.write("<p>Password salah, coba lagi!</p>");
    }
} else {
    document.write("<p>Anda tidak terdaftar!</p>");
}
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("<h2>Selamat datang pak bos!</h2>");
} else {
    document.write("<p>Password salah, coba lagi!</p>");
}

Namun, ini bukanlah solusi terbaik.

Karena kita tidak bisa mengecek, apakah user terdaftar atau tidak.

Reviewer: FajarYusuf.Com
ItemReviewed: Mengetahui Percabangan Yang Ada Pada Javascript

Sunday, February 17, 2019

Mengenal Operator Yang Ada Pada Pemrograman Javascript

Mengenal Operator Yang Ada Pada Pemrograman Javascript
Setelah kita belajar tentang Variabel dan Tipe data pada Javascript di materi sebelumnya, materi selanjutnya yang harus dipelajari adalah operator yang ada di Javascript.

Operator merupakan hal dasar yang harus dipahami dalam setiap bahasa pemrograman.

Karena kita akan banyak menggunakannya untuk melakukan berbagai macam operasi di dalam program.

Apa itu operator dan juga fungsinya?
Misalkan kita punya dua variabel seperti ini:
var a = 2;
var b = 3;
Bagaimana cara menjumblahkan variabel a dan b?

Jawabannya yaitu dengan menggunakan tanda plus (+).
var c = a + b;
Hasil penjumlahan dari variabel a dan b akan disimpan di dalam variabel c.

Tanda plus (+) adalah sebuah operator.

Kesimpulannya, jadi operator pada pemrograman itu :
Operator adalah simbol yang digunakan untuk melakukan operasi pada suatu nilai dan variabel.

Operator dalam pemrograman terbagi dalam 6 jenis:
  • Operator aritmatika;
  • Operator Penugasan (Assignment);
  • Opeartor relasi atau perbandingan;
  • Operator Logika;
  • Operator Bitwise;
  • Operator Ternary;

Operator wajib ada di setiap bahasa pemrograman. Ke 6 jenis operator di atas harus kamu pahami.


Pertama : Opeartor Aritmatika pada Javascript

Operator aritmatika merupakan operator untuk melakukan operasi aritmatika seperti penjumlahan, pengurangan, pembagian, perkalian, dsb.

Operator aritmatika terdiri dari:
Nama Operator Simbol
Penjumlahan +
Pengurangan -
Perkalian *
Pemangkatan **
Pembagian /
Sisa Bagi %
Untuk melakukan operasi perkalian, kita menggunakan simbol asterik/bintang (*).

Jangan gunakan x, karena simbol x bukan termasuk dalam operator di dalam pemrograman, x adalah karakter.

Lalu untuk pemangkatan kita menggunakan asterik/bintang ganda (**).

Untuk pembagian, kita gunakan simbol garis miring (/).


Contoh codingnya :
<script>
var a = 5;
var b = 3;
// menggunakan operator penjumlahan
var c = a + b;
console.log(c);
</script>
Hasilnya:

Mengenal Operator Yang Ada Pada Pemrograman Javascript
untuk membuka jendela konsole log silakan tekan tombol ctrl+shift+j pada browser, Perhatikan setiap koding di run proses penjumlahan dari var a+b dilakukan dan hasil output dari c ditampilkan di view console


Coba juga untuk operator yang lainnya dengan coding berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Operator Aritmatika</title>
</head>
<body>
    <script>
        var a = 15;
        var b = 4;
        var c = 0;
        // pengurangan 
        c = a - b;
        document.write(`${a} - ${b} = ${c}<br/>`);
        // Perkalian
        c = a * b;
        document.write(`${a} * ${b} = ${c}<br/>`);
        // pemangkatan
        c = a ** b;
        document.write(`${a} ** ${b} = ${c}<br/>`);
        // Pembagian
        c = a / b;
        document.write(`${a} / ${b} = ${c}<br/>`);
        // Modulo
        c = a % b;
        document.write(`${a} % ${b} = ${c}<br/>`);
    </script>
</body>
</html>


Hasilnya:
Mengenal Operator Yang Ada Pada Pemrograman Javascript


Coba pertikan operator modulo (%) dan operator penjumlahan (+).

Operator modulo adalah operator untuk menghitung sisa bagi.

Misal 4 dibagi 2, maka sisanya adalah 2.
4 % 2 = 2

Operator Penggabungan Teks

Pada Javascript, apabila kita akan melakukan operasi terhadap tipe data string atau teks menggunakan penjumlahan (+), maka yang akan terjadi adalah penggabungan kata; Bukan penjumlahan seperti type number.

Contohnya:
var a = "14" + "4";
Maka hasilnya akan:
144
Kenapa tidak 18?

Karena kedua angka tersebut merupakan type data string, perhatikan kedua angka tersebut diapit dengan tanda petik.


Kedua : Opertor Penugasan pada Javascript

Operator penugasan adalah operator yang digunakan untuk memberikan tugas kepada variabel. Biasanya digunakan untuk mengisi variabel.

Contohnya :
var a = 14;
Variabel a kita berikan tugas untuk menyimpan nilai 14.

Operator penugasan terdiri dari:
Nama Operator Simbol
Pengisian Nilai =
Pengisian dan Penambahan +=
Pengisian dan Pengurangan -=
Pengisian dan Perkalian *=
Pengisian dan Pemangkatan **=
Pengisian dan Pembagian /=
Pengisian dan Sisa bagi %=
Operator penugasan sama seperti operator aritmatika. Operator penugasan juga digunakan untuk melakukan operasi aritmatika.

Contoh codingnya :
var jumlahView = 12;
// menggunakan operator penugasan penjumlahan
// untuk menambah nilai
jumlahView += 1;
Hasilnya:

Variabel jumlahView akan bertambah satu.

Maksud dari jumlahView += 1 adalah seperti ini:
jumlahView = jumlahView + 1;
Bisa dibaca:

Isi variabel jumlahView dengan penjumlahan dari nilai jumlahView sebelumnya dengan 1.

Khusus untuk operator penugasan yang dijumlahkan dan dikurangi dengan satu, bisa disingkat dengan ++ dan -- untuk pengurangan.

Contoh sederhanya :
var a = 2;
a++;
Maka nilai dari variabel a akan menjadi 3.

Lalu pertanyaanya:

Apa bedanya dengan operator penugasan dengan operator aritmatika?

Operator aritmatika hanya melakukan operasi aritmatika saja, sedangkan operator penugasan bertugas untuk melakukan operasi aritmatika dan juga pengisian.

Berikut ini contoh coding operator penugasan:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Operator Penugasan</title>
</head>
<body>
    <script>
        document.write("Semula nilai diberi score : <br>");
        // pengisian nilai
        var score = 100;
        document.write("score = "+ score + "<br/>");
        // pengisian dan menjumlahan dengan 5
        score += 5;
        document.write("score ditambah 5 = "+ score + "<br/>");
        // pengisian dan pengurangan dengan 2
        score -= 2;
        document.write("score dikurang 2 = "+ score + "<br/>");
        // pengisian dan perkalian dengan 2
        score *= 2;
        document.write("score dikali 2 = "+ score + "<br/>");
        // pengisian dan pembagian dengan 4
        score /= 4;
        document.write("score dibagi 4 = "+ score + "<br/>");
        // pengisian dan pemangkatan dengan 2
        score **= 2;
        document.write("score dipangkat 2 = "+ score + "<br/>");
        // pengisian dan modulo dengan 3;
        score %= 3;
        document.write("score dimodulo dengan 3 = "+ score + "<br/>");
    </script>
</body>
</html>


Hasilnya:

Mengenal Operator Yang Ada Pada Pemrograman Javascript

Ketiga : Operator Perbandingan pada Javascript

Operator relasi atau perbandingan adalah operator yang digunakan untuk membandingkan dua nilai.

Operator perbandingan akan menghasilkan sebuah nilai boolean true dan false.

Operator perbandingan terdiri dari:
Nama Operator Simbol
Lebih Besar >
Lebih Kecil <
Sama Dengan == atau ===
Tidak Sama dengan != atau !==
Lebih Besar Sama dengan >=
Lebih Kecil Sama dengan <=
Pengisian dan Sisa bagi %=

Contoh Codingnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Operator Perbandingan</title>
</head>
<body>
    <script>
        var me = 20;
        var you = 19;
        // sama dengan
        var result = me == you;
        document.write(`${me} == ${you} = ${result}<br/>`);
        // lebih besar
        var result = me > you;
        document.write(`${me} > ${you} = ${result}<br/>`);
        // lebih besar samadengan
        var result = me >= you;
        document.write(`${me} >= ${you} = ${result}<br/>`);
        // lebih kecil
        var result = me < you;
        document.write(`${me} < ${you} = ${result}<br/>`);
        // lebih kecil samadengan
        var result = me <= you;
        document.write(`${me} <= ${you} = ${result}<br/>`);
        // tidak samadengan
        var result = me != you;
        document.write(`${me} != ${you} = ${result}<br/>`);
    </script>
</body>
</html>


Hasilnya:
Mengenal Operator Yang Ada Pada Pemrograman Javascript

Pertanyaanya:

Apa perbedaan == (dua simbol samadengan) dengan === (tiga simbol samadengan)?

Perbandingan dengan menggunakan simbol == hanya akan membandingkan nilai saja. Sedangkan yang menggunakan === akan membandingkan dengan tipe data juga.

Contohnya :
// ini akan bernilai true
var a = "4" == 4; //-> true
// sedangkan ini akan bernilai false
var b = "4" === 4; //-> false
Mengapa nilai b bernilai false?

Karena "4" (string) dan 4 (integer). Tipe datanya berbeda.

Keempat : Opeartor Logika pada Javascript

Operator logika digunakan untuk melakukan operasi terhadap dua nilai boolean.

Operator ini terdiri dari:
Nama Operator Simbol
Logika AND &&
Logika OR ||
Negasi/kebalikan !

Contoh Codingnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Operator Logika</title>
</head>
<body>
    <script>
        var me = 20;
        var you = 19;
        var right = me > you;
        var wrong = me < you;
        // operator && (and)
        var hasil = right && wrong;
        document.write(`${right} && ${wrong} = ${hasil}<br/>`);
        // operator || (or)
        var hasil = right || wrong;
        document.write(`${right} || ${wrong} = ${hasil}<br/>`);
        // operator ! (not)
        var hasil = !right
        document.write(`!${right} = ${hasil}<br/>`);
    </script>
</body>
</html>


Hasilnya:
Mengenal Operator Yang Ada Pada Pemrograman Javascript

Kelima : Opeartor Bitwise pada Javascript

Operator bitwise merupkan operator yang digunakan untuk operasi berdasarkan bit (biner).

Operator ini terdiri dari:
Nama Simbol di Java
AND &
OR |
XOR ^
Negasi/kebalikan ~
Left Shift <<
Right Shift >>
Left Shift (unsigned) <<<
Right Shift (unsigned) >>>
Operator ini berlaku untuk tipe data int, long, short, char, dan byte.

Operator ini akan menghitung dari bit-ke-bit.

Misalnya, kita punya variabel a = 60 dan b = 13.

Bila dibuat dalam bentuk biner, akan menjadi seperti ini:

a = 00111100
b = 00001101
(perhatikan bilangan binernya, angka 0 dan 1)

Kemudian, dilakukan operasi bitwise

Operasi AND
a     = 00111100
b     = 00001101
a & b = 00001100

Operasi OR
a     = 00111100
b     = 00001101
a | b = 00111101

Operasi XOR
a     = 00111100
b     = 00001101
a ^ b = 00110001

Opearsi NOT (Negasi/kebalikan)
a   = 00111100
~a  = 11000011
Konsepnya memang hampir sama dengan opeartor Logika. Bedanya, Bitwise digunakan untuk biner.

Untuk lebih jelasnya, silakan dicoba coding berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Operator Bitwise</title>
</head>
<body>
    <script>
        var x = 4;
        var y = 3;
        // operator bitwise and
        var hasil = x & y;
        document.write(`${x} & ${y} = ${hasil}<br/>`);
        // operator bitwise or
        var hasil = x | y;
        document.write(`${x} | ${y} = ${hasil}<br/>`);
        // operator bitwise xor
        var hasil = x ^ y;
        document.write(`${x} ^ ${y} = ${hasil}<br/>`);
        // operator negasi
        var hasil = ~x;
        document.write(`~${x} = ${hasil}<br/>`);
        // operator bitwise right shift >>
        var hasil = x >> y;
        document.write(`${x} >> ${y} = ${hasil}<br/>`);
        // operator bitwise right shift <<
        var hasil = x << y;
        document.write(`${x} << ${y} = ${hasil}<br/>`);
        // operator bitwise right shift (unsigned) >>>
        var hasil = x >>> y;
        document.write(`${x} >>> ${y} = ${hasil}<br/>`);
    </script>
</body>
</html>


Hasilnya:
Mengenal Operator Yang Ada Pada Pemrograman Javascript

Keenam : Opeartor Ternary pada Javascript

Terakhir ada operator Ternary.

Operator ternary merupakan operator yang teridiri dari tiga bagian.

Operator-operator sebelumnya hanya dua bagian saja, yaitu: bagian kiri dan kanan. Ini disebut operator binary.

Sementara operator trinary ada bagian kiri, tengah, dan kanan.

bagian kiri <operator> bagian tengah <operator> bagian kanan
Opertor ternary pada Javascript, biasanya digunakan untuk membuat sebuah percabangan if/else.

Simbol opertor ternary terdiri dari tanda tanya dan titik dua (?:).

Bentuknya seperti ini:
<kodisi> ? "benar" : "salah"
Perhatikan! <kondisi> dapat kita isi dengan ekspresi yang menghasilkan nilai true dan false.

Apabila kondisi bernilai true, maka "benar" yang akan dipilih dan sebaliknya, apabila false maka "salah" yang akan dipilih.

Opertor ini unik, seperti membuat pertanyaan.

Mengenal Operator Yang Ada Pada Pemrograman Javascript
Pada contoh di atas, “Kamu suka aku” adalah pertanyaan atau kondisi yang akan diperiksa.

Kalau jawabannya benar, maka iya. Sebaliknya akan tidak.

Lebih jelasnya, mari kita coba contoh coding ini :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Operator Ternary</title>
</head>
<body>
    <script>
        var pertanyaan = confirm("Apakah kamu menerima perasaanku?")
        var hasil = pertanyaan ? "Kita Jadian!!" : "Kamu Jahat!!!";
        document.write(hasil);
    </script>
</body>
</html>

Hasilnya:
Mengenal Operator Yang Ada Pada Pemrograman Javascript

Reviewer: FajarYusuf.Com
ItemReviewed: Mengenal Operator Yang Ada Pada Pemrograman Javascript

TENTANG SITUS

SITUS INI ADALAH SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.