Belajar Java Script I

JavaScript

Saat ini , kita akan membahas dasar-dasar penulisan ES6 - versi baru JavaScript.

JavaScript (disingkat JS) adalah bahasa skrip yang menjadi element penting dalam pengembangan web. Saat ini, hampir semua situs web menggunakan JS. JavaScript ES2015 (ES6),  adalah versi terbaru JS yang menjadi populer karena memungkinkan orang untuk coding dengan lebih efisien.

Pertama, cara menjalankan (mengeksekusi) code ES6 dan mencetak (menampilkan) rangkaian kata di layar yang disebut console. Saat Anda menulis code console.log("Hello World");, rangkaian huruf Hello World akan di cetak di console.

Contoh :

console.log("Selamat datang di ES6 Study I!");

console.log("Ayo belajar bersama Pulan");

Angka dan Kalkulasi

Anda juga dapat menggunakan integer (angka) dalam pemrograman. Berbeda dengan string, Anda tidak perlu menggunakan kutipan untuk integer. Integer digunakan untuk melakukan kalkulasi seperti penambahan dan pengurangan. Gunakan + untuk penambahan dan - untuk pengurangan.

Seperti contoh di bawah, console.log(5 + 2); akan mencetak hasil penambahan, yaitu 7. Disisi lain, saat Anda meletakkan 5 + 2 dalam tanda kutip, ini akan dicetak sebagai string. Harap diingat bahwa string dan integer adalah tipe data yang berbeda!

Contoh :

// Cetak hasil 5 tambah 2

console.log(5+2);

// Cetak hasil 20 kurang 8

console.log(20-8);

// Cetak string "4 + 5"

console.log("4+5");

Pengalian dan Pembagian

Cara kalkulasi selain penambahan dan pengurangan! Seperti yang Anda lihat di bawah, tanda bintang (*) dapat digunakan untuk pengalian dan garis miring kanan (/) dapat digunakan untuk pembagian. Simbol ini berbeda dari simbol yang digunakan dalam matematika standar, 

Anda juga dapat menggunakan simbol persentase (%) untuk mendapatkan modulo, sisa setelah pembagian. Ini berguna karena ada banyak cara untuk menggunakan modulo dalam pemrograman!

Contoh :

// Cetak hasil 8 kali 4 di console.

console.log(8*4);

// Cetak hasil 24 bagi 4 di console.

console.log(24/4);

// Cetak sisa setelah membagi 7 dengan 2 di console.

console.log(7%2);

Menggabungkan String

Simbol + juga dapat digunakan untuk mengkombinasikan (atau "menggabungkan") string. Seperti yang di tampilkan di bawah, "Pulan" + " Bin Pulan" di cetak sebagai string Pulan Bin Pulan

Perbedaan antara String dan Integer.

contoh perbedaan antara string dan integer. "3" + "5" akan menjadi string "35", namun 3 + 5 akan menjadi 8.

Itulah mengapa penting untuk mengingat bahwa string dan integer adalah dua tipe data yang sangat berbeda!

// Cetak kombinasi dari string "Guru " dan "Murid"

console.log("Guru"+"Domba");

// Cetak kombinasi dari "20" dan "15" (dan jadikan sebagai string)

console.log("20"+"15");

Variabel

Anda dapat menganggap variable sebagai "kotak" yang berisi nilai data (string, integer, dsb). Mari kita lihat lebih detail pada slide berikutnya.

Untuk mendeklarasikan variable, cukup tulis let variableName = nilai. Simbol = dalam pemrograman tidak berarti "sama dengan". Ini berarti menetapkan yang ada di sisi kanan ke sisi kiri. let adalah deklarasi bahwa "kita akan menentukan sebuah variable", nama variable ditulis setelah kata kunci ini dan kemudian diberi nilai.

Variable sangatlah mudah untuk digunakan. Seperti yang Anda lihat di bawah, saat variable name diberi nilai, "John", console.log(name) akan mencetak John. Anda dapat menggunakan variable seperti menggunakan nilai di dalamnya.

pada saat mau mencetak variable, Anda tidak perlu meletakkan nama variable dalam tanda kutip. Jika nama variable diletakkan dalam tanda kutip, seperti console.log("name");, name akan ditafsirkan sebagai string dan akan dicetak sebagai name.

Contoh :

// Deklarasikan nama variable dengan nilai string "Ninja Ken"

let name="John";

// Cetakan nilai nama variable

console.log(name);

Variable dapat digunakan seperti string dan integer yang sudah kita pelajari. Nilai yang diberikan ke variable dapat digabungkan dengan string lain atau digunakan dalam kalkulasi dengan integer lain.

Dalam praktiknya, Anda harus menggunakan banyak nilai yang berbeda saat menulis code. Variable membantu Anda terhindar dari melakukan kesalahan saat menangani dan memperbarui nilai. 

Manfaat Variable adalah :

- Mudah mengetahui apa yang dipresentasikan nilainya

- Datanya dapat digunakan diberbagai tempat

- Dataya dapat dengan mudah diganti

Mari kita lihat contoh "menggunakan data di beberapa tempat" dan "membuat perubahan pada data". Daripada mengulang teks yang sama tiga kali seperti pada contoh di kiri, kita dapat menggunakan variable untuk mengelolanya. Dengan demikian, jika kita ingin mengubah "Selamat Pagi," menjadi "Halo,", kita hanya perlu mengubahnya sekali.

Anda dapat memilih nama apa pun untuk variable, namun sebaiknya buatlah nama yang sederhana dan mudah dipahami. Anda juga dapat mengikuti beberapa aturan untuk pengetikan nama variable dalam JS, seperti format penulisan camel case (oddNumber, goodMorning). Merujuk contoh di bawah, coba gunakan nama yang sesuai.

Contoh :

// Deklarasikan variable length

let length=5;

// Cetak nilai variable length

console.log(length);

// Gunakan variable length untuk mencetak hasil area lingkaran

console.log(length*length*3);

Anda dapat mengupdate nilai variable Anda. Ketika Anda menetapkan nilai baru ke variable yang telah Anda berikan nilainya, nilai baru tersebut akan menggantikan nilai yang lama. Untuk memberikan nilai baru, Anda tidak perlu menggunakan let, cukup dengan menulis variableName=nilai.

Code akan dipanggil secara berurutan dari atas, jadi nilai variable akan di update dengan nilai yang ditetapkan paling akhir.

Contoh :

let name = "Ninja Ken";

console.log(name);

// Update nilai variable ke "Birdie"

name="Birdie";

// Cetak nilai dari variable name

console.log(name);

Bagaimana cara menambahkan 3 ke nilai variable number yang telah dideklarasikan? Seperti gambar dibawah, Anda dapat melakukan ini dengan menetapkan number + 3 ke variable number. Dengan cara ini, hasil kalkulasi akan ditetapkan ke variable di sisi kiri.

Contoh :

let number = 7;

console.log(number);

// Tambahkan 3 ke nilai variable number

number=number+3;

console.log(number);

// Bagi nilai variable number dengan 2

number=number/2;

console.log(number);

Constant mirip dengan variable, tetapi tidak dideklarasikan dengan let. Cara menentukan constant adalah dengan menggunakan kata kunci const. Lihat lebih lanjut perbedaan antara keduanya pada slide berikutnya.

 variable (let) dapat di update. Namun, constant tidak dapat di update. Jika Anda mencoba untuk mengupdate nilai constant, seperti di tunjukkan di sini kanan, Anda akan mendapatkan pesan error.

Manfaat constant adalah untuk mencegah perubahan nilai. Sekilas mungkin terlihat tidak praktis. Namun, ini dapat mencegah perubahan yang tidak diinginkan supaya code Anda lebih aman. Semakin banyak code yang Anda tulis, semakin Anda akan merasakan manfaatnya. Untuk seterusnya, kita akan lebih sering menggunakan constant.

Contoh :

// Deklarasikan constant language

const language="Prancis";

// Cetak nilai constant language

console.log(language);

// Gunakan constant language untuk mencetak "Saya bisa berbicara bahasa ____"

console.log("Saya bisa berbicara bahasa " + language);

Hingga saat ini, kita hanya menggunakan simbol tanda tambah (+) untuk menggabungkan string dan constant. Di ES6, Anda bisa melakukan hal ini dengan menggunakan fitur baru yang disebut template literal. Dengan template literal, Anda dapat memasukkan constant (variable) di dalam string, 

Anda dapat memasukkan constant dan variable ke string dengan menulis ${someConstant}. Saat melakukan ini, Anda harus meletakkan keseluruhan string di antara dua backtick(`) . Anda juga dapat memasukkan beberapa variable dan constant .

Contoh :

const name = "John";

const age = 14;

// Cetak string "Nama saya adalah ____"

console.log(`Nama saya adalah ${name}`);

// Cetak string "Hari ini saya berusia ____ tahun"

console.log(`Hari ini saya berusia ${age} tahun`);

Percabangan Kondisional

Selanjutnya, mari kita pelajari percabangan kondisional, sebuah konsep penting dalam pemrograman. Saat mempelajari pemrograman, akan ada saatnya dimana Anda ingin menentukan kapan code tertentu ingin dijalankan. Perintah ini disebut percabangan kondisional.

Struktur Statement if

Saat statement if digunakan, percabangan kondisional, "jika X lakukan Y", akan diaktifkan. Tulis kondisi tersebut setelah if dan tulis code untuk kapan, kondisi ini akan valid dalam tanda kurung kurawal { }. .

Mari kita lihat cara kerja code statement if.

Pertama, baca statement kondisional . Kondisi number > 10 berarti "nilai angka constant lebih besar daripada 10." Saat 12 ditetapkan ke constant number, kondisi ini berlaku, dan codenya akan dijalankan.

Saat menulis statement if, pastikan untuk membuat indentasi. Code yang terindentasi dengan benar akan lebih mudah di baca. Indentasi pada contoh di bawah memperjelas kapan statement if dimulai. Kami sarankan untuk membuat indentasi dengan tombol tab.

Contoh :

const level = 12;

// Tambahkan pernyataan if dengan kondisi: level > 10

if(level>10) {

console.log("Level Anda lebih tinggi dari 10");

};

Operator Boolean & Perbandingan (1)

Mencetak Conditional Expression

Anda telah mempelajari cara menggunakan conditional statement if. Selanjutnya, mari kita lihat conditional expression. 

Boolean

"true" yang di-print di console disebut boolean. Tipe data boolean memiliki dua nilai; true dan false. Conditional statement dinilai "true" jika kondisi terpenuhi dan "false" jika sebaliknya. Anda dapat melihat cara kerjanya pada contoh di bawah.

 kita mempelajari bahwa conditional statement akan menghasilkan nilai boolean. Berdasarkan pengetahuan ini, Anda tahu bahwa code di statement if akan berjalan jika hasilnya adalah true dan tidak berjalan jika hasilnya adalah false.

Simbol > yang digunakan di conditional statement merupakan operator perbandingan ukuran nilai. Untuk a < b berarti, jika a kurang dari b, statement-nya akan menjadi true, jika a sama dengan atau lebih besar dari b statement akan menjadi false. Sama untuk a <= b, jika a kurang atau sama dengan b, statement akan menjadi true, dan sebaliknya.

Contoh :

const age = 24;

// Cetak hasil dari age >= 18

console.log(age>=18);

// Cetak hasil dari age < 18

console.log(age<18);

/* Ketika nilai dari age lebih besar atau sama dengan 18

dan cetak "Saya berusia lebih dari 18 tahun" */

if(age>=18){

  

}

console.log("Saya berusia lebih dari 18 tahun");

Selain operator perbandingan yang kita pelajari sebelumnya, ada juga operator perbandingan untuk menentukan kesamaan antara dua nilai. a === b akan menjadi true jika a dan b sama, dan false jika tidak sama. a !== b adalah kebalikannya. Simbol ini dapat digunakan untuk membandingkan nilai integer dan string.

Contoh :

const password = "anakganteng";

// Ketika nilai password adalah "anakganteng", cetak "Berhasil log in"

if(password === "anakganteng"){

console.log("Berhasil log in");

}

// Ketika nilai password bukan "ninjaken", cetak "Password salah"

if(password !== "anakganteng"){

console.log("Password salah");

}

Jika Kondisi tidak Terpenuhi

Ada saatnya dimana Anda harus memanggil code yang berbeda jika kondisi statement if adalah false. Seperti yang ditunjukkan dibawah, Anda harus memanggil code yang berbeda untuk mem-print "Nilai kurang dari atau sama dengan 10" jika nilai angka tidak lebih besar dari 10.

Struktur Statement else

Seperti pada contoh di bawah, dengan menggabungkan statement else dan if, Anda akan dapat membuat control flow (pengontrolan alur), seperti "jika X, lakukan Y, jika tidak, lakukan Z". Jika kondisi statement if adalah false, code di statement else akan berjalan.

Menulis Code di Statement else

Mari kita lihat contoh code yang menggunakan else, kita hanya menggunakan statement if untuk menentukan hasil apakah nilai constant number lebih besar dari 10. Sedangkan cara melakukan hal yang sama dengan satu expression kondisi menggunakan statement else.

Contoh :

const age = 17;

// Ketika kondisi tidak terpenuhi, cetak "Saya berusia dibawah 18 tahun"

if (age >= 18) {

  console.log("Saya berusia diatas 18 tahun");

} else{

  console.log("Saya berusia dibawah 18 tahun");

}

Menambahkan Kondisi

Mari kita lihat cara menambahkan kondisi lebih banyak ke statement if dan else. Misalnya, kita akan mempelajari cara menambahkan pengontrolan alur untuk menyertakan kondisi yang tidak "lebih besar dari 10" tetapi "lebih besar dari 5".

Menulis Statement else if

Seperti pada contoh di bawah, dengan menambahkan else if (kondisi) antara if dan else, Anda akan dapat menambahkan alur pengontrolan lebih banyak. 

Code else if

Mari kita lihat cara penggunaan fungsi else if.

Konten fungsi else if akan berjalan karena conditional statement kedua adalah true. Hasil ini dicetak pada console 

Contoh :

const age = 17;

/* Ketika umur diatas 10 tahun tetapi kurang dari 18 tahun, cetak:

"Saya berusia dibawah 18 tahun, namun diatas 9 tahun" */

if (age >= 18) {

  console.log("Saya di atas 18 tahun");

} else if (age>=10){

  console.log("Saya berusia di bawah 18 tahun, namun di atas 9 tahun");

 }else {

  console.log("saya dibawah 10 tahun");

}

Dan

Selanjutnya kita akan pelajari cara menggabungkan beberapa kondisi. Pertama, kita akan mempelajari &&. Kondisi 1 && Kondisi 2 berarti "Kondisi 1 dan Kondisi 2" dimana hanya jika semua kondisi adalah true, maka ekspresi adalah true. Contohnya "Lebih besar dari 10 dan lebih kecil dari 30" tidak dapat ditulis sebagai 10 < x < 30. Pada kasus ini, gunakan &&!

Atau

Selanjutnya, kita akan mempelajari simbol yang berarti "OR" (Atau). Atau diekspresikan dalam bentuk ||. Kondisi 1 || Kondisi 2 berarti "Kondisi 1 atau Kondisi 2". Pada kasus ini, di antara beberapa kondisi, jika salah satunya adalah true, maka keseluruhan ekspresi menjadi true.

Contoh Penggabungan

Mari kita lihat contoh statement if menggunakan "dan".

contoh : 

number >= 10 dan number < 100 adalah true, jadi konten fungsinya dipanggil.

Contoh :

const age = 24;

// Tambahkan pernyataan if dengan kondisi yang telah ditentukan

if(age>=20 && age<30){

console.log("Saya di usia 20-an tahun");

}

Statement switch

Apa itu Statement switch?

Cara lain untuk menggunakan pengontrolan alur, adalah statement switch. . Anda akan dapat menggunakan statement switch ketika percabangan code tergantung pada nilai tertentu. 

Cara Menulis Statement switch 

Mari kita lihat cara menulis statement switch!

Contoh I :

const rank = 2;

switch (rank) {

  case 1:

    console.log("Anda meraih medali emas!");

    break;

  // Tambahkan case ketika rank adalah 2

  case 2:

    console.log("Anda meraih medali perak!");

    break;

  

  // Tambahkan case ketika rank adalah 3

  case 3:

    console.log("Anda meraih medali perunggu!");

    break;

  

}

Contoh II :

const rank = 5;

switch (rank) {

  case 1:

    console.log("Anda meraih medali emas!");

    break;

  case 2:

    console.log("Anda meraih medali perak!");

    break;

  case 3:

    console.log("Anda meraih medali perunggu!");

    break;

  // Tambahkan default

  default:

console.log("Semoga sukses dikesempatan berikutnya");

break;

}

Thank You....................