Tutorial / Belajar Dasar Pemrograman Javascript


# Kenapa Javascript?
  • Multi-platform : Back End (Express), Front End (React, Vue, Angular), Mobile (React Native).
  • Komunitas / penggunanya sangat banyak.
  • (http://pypl.github.io/PYPL.html)
  • Banyak perusahaan yang mencari programmer Javascript :D
# Input - Output


Contoh Kode Output / Menampilkan data :
<html>
   <body>
        <script>
            document.writeln("Hello Javascript");
        </script>
   </body>
</html>

# Tipe Data & Variabel

Beberapa (Sebagian) contoh tipe data :
  • boolean = tipe data hanya memiliki nilai true atau false
  • char = tipe data untuk karakter / huruf
  • int = tipe data numerik (tidak bisa desimal)
  • double = tipe data numerik desimal
  • String = tipe data untuk text
Cara penulisan tipe data, variable & value
Merah = tipe data / data type
Hijau = variable / variabel / property
Biru = nilai / isi / value

/* Maaf kalo banyak garis miring "/", karena istilah komputer / programming memang memiliki banyak sinonim / istilah lain / istilah sejenis */

var tembak = true; // otomatis menjadi boolean
var karakter = 'A'; // otomatis menjadi char
var nonDecimalNumber = 100; // otomatis menjadi integer / int
var decimalNumber = 3.14; // otomatis menjadi double
var kalimat = "ini adalah kalimat"; // otomatis menjadi string

Contoh Kode Tipe Data & Variable :
<html>
   <body>
       <pre>
          <script>
                var tembak = true;
                var karakter = 'A';
                var nonDecimalNumber = 100;
                var decimalNumber = 3.14;
                var kalimat = "ini adalah kalimat";
                
                document.writeln(tembak);
                document.writeln(karakter);
                document.writeln(nonDecimalNumber);
                document.writeln(decimalNumber);
                document.writeln(kalimat);
          </script>
      </pre>
   </body>
</html>

# Operator Aritmatika
  • simbol atau tanda + artinya penjumlahan
  • simbol atau tanda - artinya pengurangan
  • simbol atau tanda * artinya perkalian
  • simbol atau tanda / artinya pembagian
  • simbol atau tanda % artinya sisa bagi
Contoh Kode Penjumlahan :
<html>
   <body>
        <script>
            var jariKanan = 5;
            var jariKiri = 5;
            var jumlahJari = jariKanan + jariKiri;
            document.writeln("Jari saya ada " + jumlahJari);
        </script>
   </body>
</html>

Contoh Kode Pengurangan :
<html>
   <body>
        <script>
            var gajiKotor = 5000000;
            var pajak = 1000000;
            var gajiBersih = gajiKotor - pajak;
            document.writeln("Gaji bersih saya Rp. " + gajiBersih);
        </script>
   </body>
</html>

# Operator Pembanding
  • simbol atau tanda == artinya sama dengan
  • simbol atau tanda != artinya tidak sama dengan
  • simbol atau tanda > artinya lebih dari
  • simbol atau tanda < artinya kurang dari
  • simbol atau tanda >= artinya lebih dari sama dengan
  • simbol atau tanda <= artinya kurang dari sama dengan
/* Conto penggunaan-nya di bagian Percabangan / Pemilihan ya */

# Percabangan / Pemilihan
  • IF - ELSE
  • SWITCH - CASE
Contoh Kode menggunakan IF - ELSE
<html>
   <body>
        <script>
            var gaji = 5000000; // Coba ganti jadi 10000000
            if (gaji >= 10000000){
                document.writeln("Sangat Bersyukur");
            } else {
                document.writeln("Harus Bersyukur");
            }
        </script>
   </body>
</html>

Contoh lain menggunakan IF - ELSE
<html>
   <body>
        <script>
            var gaji = 5000000; // Coba ganti jadi 10000000
            if (gaji == 10000000){
                document.writeln("Bersyukur");
            } else if (gaji > 10000000) {
                document.writeln("Lebih Bersyukur");
            } else if (gaji < 10000000) {
                document.writeln("Tetap Bersyukur");
            }
        </script>
   </body>
</html>

Contoh Kode menggunakan SWITCH - CASE
<html>
   <body>
        <script>
            var angka = 1; // Coba ganti jadi 2 - 3 - 4 - 5
            switch (angka) {
                case 1:
                  document.writeln("Aku sayang ibu");
                  break;
                case 2:
                  document.writeln("Aku sayang Ayah");
                  break;
                case 3:
                  document.writeln("Sayang Adik Kaka");
                  break;
                default:
                  document.writeln("Sayang semuanya");
                  break;
            }
        </script>
   </body>
</html>

# Operator Logika
  • simbol atau tanda && artinya DAN / AND
  • simbol atau tanda || artinya ATAU / OR
Contoh Kode && / AND / DAN
<html>
   <body>
        <script>
            var citaCita = "Tinggi"; // Coba ganti ke Rendah
            var sikap = "Rajin"; // Coba ganti ke Malas
            if (citaCita == "Tinggi" && sikap == "Rajin") {
                document.writeln("Kamu akan sukses");
            } else {
                document.writeln("Kamu akan gagal");
            }
        </script>
   </body>
</html>

Contoh Kode || / OR / ATAU
<html>
   <body>
        <script>
            var cuaca = "Mendung"; // Coba ganti ke Hujan - Cerah
            if (cuaca == "Mendung" || cuaca == "Hujan") {
                document.writeln("Diam aja di rumah");
            } else {
                document.writeln("Pergi ke mall");
            }
        </script>
   </body>
</html>

# Loop / Perulangan
Salah satu manfaat dari perulangan adalah untuk meringkas kode yang kita buat.
Studi kasus : buatlah program untuk menampilkan angka 1 sampai dengan 3.
Maka kita akan menulis kode seperti ini :
<html>
   <body>
       <pre>
            <script>
                document.writeln();
                document.writeln("Angka 1");
                document.writeln("Angka 2");
                document.writeln("Angka 3");
            </script>
        </pre>
   </body>
</html>
Kode di atas terdiri dari 13 baris. Bayangkan jika angka yang akan di tampilkan sebanyak 100, apakah kita akan mengetik sebanyak 100 baris kode yang sama? Males banget kan..
Maka dari itu kita perlu menggunakan loop atau pengulangan.
  1. WHILE (cek dulu baru lakukan)
  2. DO - WHILE (lakukan dulu baru cek)
  3. FOR
Contoh Kode Pengulangan WHILE
<html>
   <body>
       <pre>
            <script>
                document.writeln();
                var angka = 1;
                while(angka <= 100){
                    document.writeln("Angka " + angka);
                    angka++; // artinya angka = angka + 1
                }
            </script>
        </pre>
   </body>
</html>

Contoh Kode Pengulangan DO-WHILE
<html>
   <body>
       <pre>
            <script>
                document.writeln();
                var angka = 1;
                do {
                    document.writeln("Angka " + angka);
                    angka++; // artinya angka = angka + 1
                } while(angka <= 100);
            </script>
        </pre>
   </body>
</html>

Contoh Kode Pengulangan FOR
<html>
   <body>
       <pre>
            <script>
                document.writeln();
                for (var i=1; i<=100; i++){
                    document.writeln("Angka " + i);
                }
            </script>
        </pre>
   </body>
</html>

# Array & List
  • Array di javascript sudah memiliki size / daya tampung yang dinamis
Contoh Array
<html>
   <body>
       <pre>
            <script>
                document.writeln();
                var array = new Array();
                
                array[0] = "Halo";
                array[1] = "Apa";
                array[2] = "Kabs";
                
                document.writeln(array[0]);
                document.writeln(array[1]);
                document.writeln(array[2]);
            </script>
        </pre>
   </body>
</html>

Kontak Penulis :



0 comments:

Posting Komentar