Pengenalan Javascript

Pertemuan X – Pemrograman Web

Tujuan
• Mahasiswa mampu memahami konsep dasar
penggunaan css pada sebuah halaman website
Pemgrograman javascript
• Dibuat oleh Brendan Eich pada 1995
• Awalnya, hanya dapat dijalankan di Browser
• Pada 2009, Ryan Dahl menciptakan Node.js. Javasript bisa dijalankan di sisi server (komputer)
• JavaScript dibuat dengan tujuan awal agar website menjadi lebih interaktif.
• JavaScript termasuk ke dalam kategori scripting language, sehingga kode tidak perlu dikompilasi
untuk bisa dijalankan. Terdapat interpreter untuk menerjemahkan kode kita agar bisa dimengerti
oleh mesin.
• Terdapat dua lingkungan umum untuk menjalankan JavaScript, yaitu browser dan Node.js
• JavaScript dikembangkan dengan standar ECMAScript. Update besar terakhir tersaji dalam versi ES6
pada tahun 2015. Sejak saat itu, tiap tahun JavaScript melakukan update bersifat minor.
Alasan Penggunaan Javascript
JavaScript
• JavaScript membagi instruksi secara umum menjadi dua jenis, yaitu expression dan statement.
• Expression adalah unit kode yang dapat dievaluasi menjadi suatu nilai. Untuk lebih mudahnya,
perhatikan contoh kode berikut:

5; // Baris kode ini merupakan expression karena interpreter akan membaca kode ini dan menghasilkan nilai 5.
2 + 3; // Baris kode ini juga merupakan expression. Interpreter mengevaluasi kode dan juga akan menghasilkan
nilai 5.

1. var yourName;
2. let yourAge;
3. const numberOfDays; // declaration statement

• Expression merupakan kode yang menghasilkan nilai.

• Statement menunjukkan aksi yang dilakukan.
Variable

• Ketika menulis sebuah program, kita memberi tahu komputer cara memproses informasi seperti mencetak teks ke layar atau
melakukan operasi perhitungan. Untuk lebih mudah dalam penggunaan dan pemanggilan data, kita bisa memanfaatkan
variabel. Variabel umumnya digunakan untuk menyimpan informasi atau nilai yang akan dikelola dalam sebuah program.

• Pada JavaScvar, let, dan constript setidaknya ada tiga cara untuk mendeklarasikan sebuah variabel, yaitu menggunakan
keyword. Pada versi ECMAScript 2015 (ES6) dikenalkan deklarasi variabel dengan let dan const untuk menggantikan var yang
dinilai kontroversial dan rawan menimbulkan bug.
• let lastName;
• let lastName;
• lastName = "Skywalker";

• console.log(lastName);

• /* output
• Skywalker
• */
Variable

1. let fullName = let lastName; // Error karena let

lastName adalah sebuah statement untuk deklarasi
variabel. Statement tidak bisa berada di posisi
expression.
2. let fullName = (lastName = "Skywalker"); // (lastName
= "Skywalker") merupakan expression, sehingga kode
ini tidak error.
3. let fullName = "Luke" + "Skywalker"; // "Luke" +
"Skywalker" juga merupakan expression, sehingga
kode ini tidak error.
Melalui contoh kode di atas, kita bisa bayangkan variabel
sebagai sebuah kotak atau wadah yang menyimpan nilai.
Proses inisialisasi atau assignment berarti kita
memasukkan nilai ke dalam kotak tersebut.
Variable

Sebaiknya hindari penamaan variabel dengan istilah umum seperti

“data”. Gunakanlah penamaan variabel yang dapat mendeskripsikan
nilai dari variabel itu sendiri. Berikut beberapa aturan dalam
penamaan variabel yang perlu Anda ketahui:
• Harus dimulai dengan huruf atau underscore (_).
• Dapat terdiri dari huruf, angka, dan underscore (_) dengan
berbagai kombinasi.
• Tidak boleh mengandung spasi (whitespace). Jika penamaan
variabel lebih dari dua kata, tuliskan secara camelCase. Contoh
firstName, lastName, catName, dll.
• Tidak boleh mengandung karakter spesial (! . , / \ + * = dll.)
Const

Lalu, bagaimana dengan const?

Const merupakan kependekan
dari constant. Artinya, kita akan
mendeklarasikan sebuah variabel
dengan const ketika ingin variabel
bernilai konstan dan tidak bisa
diubah setelah diinisialisasi nilainya.
Bayangkan variabel bernilai const
sebagai sebuah kotak yang ditutup
dan disegel setelah diisi, sehingga
nilainya tidak bisa diubah lagi.
Contoh

const z = 100;
console.log(z);
z = 200;
console.log(z)

/* TypeError: Assignment to
constant variable. */
 Tipe Data
Pada materi sebelumnya kita telah belajar tentang variabel untuk menyimpan nilai. Nilai yang kita tetapkan pada
variabel pasti memiliki tipe data. Tipe data merupakan pengklasifikasian data berdasarkan jenisnya. Pada JavaScript
terdapat beberapa tipe data sebagai berikut:
1. Undefined
Tipe data ini terbentuk ketika sebuah variabel tidak memiliki nilai. Artinya, ketika kita mendeklarasikan variabel tanpa
menginisialisasikan nilainya, variabel tersebut menjadi undefined.
Contoh :
let x;
console.log(typeof(x));

/* output: undefined */

Pada contoh kode di atas, kita mendeklarasikan variabel x, tetapi kita tidak menginisialisasikan dengan nilai apa pun.
Ketika kita memastikan tipe data dengan menggunakan fungsi typeof(), ia akan menghasilkan output undefined.
 Tipe Data
2. Numbers
Nilai dari tipe data number adalah angka. Variabel bertipe data number dituliskan
seperti angka pada umumnya:
Contoh : let x = 10;
let x = 10;
console.log(typeof(x))
/* output: number */
let y = 17.25;
console.log(typeof(y))
/* output: number */
Tipe Data (Numbers)
• let a = 12;
• let b = 9;

• console.log(a + b)
• console.log(a - b)
• console.log(a * b)
• console.log(a / b)
• console.log(a % b)

• /* output:
• 21
• 3
• 108
• 1.3333333333333333
• 3
• */
Operator
• Pada materi ini kita akan mempelajari tentang operator yang terdapat pada JavaScript. Operator dalam
bahasa pemrograman sendiri adalah simbol yang memberi tahu interpreter untuk melakukan operasi
seperti matematika, relasional, atau logika untuk memberikan hasil tertentu.
Assignment Operator
• Dari contoh kode yang kita gunakan sebelumnya, sebenarnya kita sudah menggunakan
assignment operator. Operator ini digunakan untuk memberikan nilai pada variabel.
• Pada dasarnya operator ini adalah tanda sama dengan (=), di mana tanda ini digunakan untuk
menginisialisasi nilai pada variabel. Tempatkan variabel yang ingin diberi nilai di sebelah kiri,
sementara nilainya di sebelah kanan. Di antara keduanya terdapat operator assignment.
x = y;
• Expression di atas berarti kita menginisialisasikan nilai y pada variabel x, sehingga nilai x
sekarang memiliki nilai yang sama dengan y.
• Ada beberapa assignment operator tambahan lain dalam menginisialisasikan nilai pada
variabel. Kita bisa menyebutnya sebagai shortcut dalam menentukan nilai.
Operator
let x = 10; let x = 10;
let y = 5
let y = 5;
x += y;

console.log(x); x += y; // artinya -> x = x + y;

/* output
x -= y; // artinya -> x = x - y;
15 x *= y; // artinya -> x = x * y;
*/
Pada contoh kode di atas, terdapat expression x
x /= y; // artinya -> x = x / y;
+= y; Apa artinya? Assignment operator tersebut x %= y; // artinya -> x = x % y;
digunakan sebagai shortcut dari x = x + y. Cara ini
juga dapat digunakan pada operator aritmatika
lain seperti, perkalian, pengurangan, pembagian,
dan lainnya.
Operator
Sekarang kita sudah mengetahui
bagaimana cara menyimpan nilai pada
sebuah variabel. Nah, selanjutnya kita
akan belajar mengenai operator
komparasi sebagai logika dasar dalam
membandingkan nilai pada JavaScript.

Terdapat serangkaian karakter khusus

yang disebut dengan operator
pembanding/komparasi yang dapat
mengevaluasi dan membandingkan dua
nilai. Berikut daftar operator dan
fungsinya:
Comparison Operator
Sekarang kita sudah mengetahui
bagaimana cara menyimpan nilai pada
sebuah variabel. Nah, selanjutnya kita
akan belajar mengenai operator
komparasi sebagai logika dasar dalam
membandingkan nilai pada JavaScript.

Terdapat serangkaian karakter khusus

yang disebut dengan operator
pembanding/komparasi yang dapat
mengevaluasi dan membandingkan dua
nilai. Berikut daftar operator dan
fungsinya:
Comparison Operator

Ketika kita melakukan let a = 10;

perbandingan antara dua nilai, let b = 12;
JavaScript akan mengevaluasi
kedua nilai tersebut dan
console.log(a < b);
mengembalikan boolean dengan
nilai hasil perbandingan tersebut, console.log(a > b);
baik false atau true. Berikut
contohnya: /* output
true
false
*/
Perbedaan antara “Sama” dan “Identik”

• Dalam operator komparasi di JavaScript, hal const aString = '10';

yang menjadi sedikit “tricky” adalah
membedakan antara “sama” (==) dan “identik” const aNumber = 10
(===).
• Kita sudah mengetahui bahwa setiap nilai
pasti memiliki tipe data baik itu number,
console.log(aString == aNumber) //
string atau boolean. Contohnya sebuah string true, karena nilainya sama-sama 10
“10” dan number 10 merupakan hal yang console.log(aString === aNumber) //
serupa, tetapi keduanya tidak benar-benar false, karena walaupun nilainya sama,
sama.
tetapi tipe datanya berbeda
• Hal inilah yang membedakan antara sama
dan identik pada JavaScript. Jika kita ingin
membandingkan hanya dari kesamaan /* output
nilainya kita bisa gunakan == tapi jika kita
ingin membandingkan dengan true
memperhatikan tipe datanya kita false
gunakan ===.
• Contohnya seperti berikut: */
Logical Operator
• Terdapat beberapa operator lain yang dapat kita gunakan untuk let a = 10;

let b = 12;
menetapkan logika yang lebih kompleks, yakni dengan logical
operators. Dengan logical operator, kita dapat menggunakan /* AND operator */

kombinasi dari dua nilai boolean atau bahkan lebih dalam console.log(a < 15 && b > 10); // (true && true) -> true

menetapkan logika. console.log(a > 15 && b > 10); // (false && true) -> false

• Pada JavaScript terdapat tiga buah karakter khusus yang /* OR operator */

berfungsi sebagai logical operator. Berikut macam-macam console.log(a < 15 || b > 10); // (true || true) -> true

logical operator dan fungsinya: console.log(a > 15 || b > 10); // (false || true) -> true

/* NOT operator */

console.log(!(a < 15)); // !(true) -> false

console.log(!(a < 15 && b > 10)); // !(true && true) -> !

(true) -> false

/* output

true

false

true

true

false

false

*/
If/Else Statement
• const isRaining = true;
• Setiap hari kita melakukan perhitungan
dan perbandingan guna membuat
keputusan, apa pun itu. Contohnya,
apakah perlu mencuci kendaraan ketika • console.log("Persiapan sebelum
cuaca sedang cerah? Apa saja berangkat kegiatan.");
transportasi online yang bisa dipesan • if (isRaining) {
ketika hujan untuk sampai di tempat
tujuan? • console.log("Hari ini hujan. Bawa
payung.");
• Ketika mengembangkan sebuah
program, kita akan bertemu dengan • }
alur bercabang tergantung pada kondisi
yang terjadi. Untuk mengakomodasi • console.log("Berangkat kegiatan.");
dan mengecek sebuah kondisi dalam
JavaScript, kita menggunakan kata
kunci if.
• /* output:
• Statement if akan menguji suatu
kondisi. Jika kondisi bernilai true, maka • Persiapan sebelum berangkat
blok kode di dalamnya akan dijalankan. kegiatan.
Sebaliknya, jika bernilai false, maka • Hari ini hujan. Bawa payung.
proses yang ditentukan akan
dilewatkan. • Berangkat kegiatan.
• */
If/Else Statement
• Terdapat variabel x dengan nilai 50, • let x = 50; • let language = "French";
kemudian kita bertanya, “Hai JavaScript!
Apakah x lebih dari 70?” Jika kondisi • let greeting = "Selamat Pagi"
tersebut benar, maka kita dapat
memerintahkan JavaScript untuk
• if(x > 70) {
menampilkan nilainya. Jika salah, kita • console.log(x); • if(language === "English") {
perintahkan JavaScript untuk
menampilkan teks “Nilai kurang dari • } else { • greeting = "Good Morning!";
70”.
• console.log("Nilai kurang dari 70"); • } else if(language === "French") {

• } • greeting = "Bonjour!"
• Pengecekan kondisi akan dilakukan dari
statement if paling awal. Sehingga, • } else if(language === "Japanese") {
ketika nilai language adalah “French”, • greeting = "Ohayou Gozaimasu!"
maka pengecekan untuk language === • /* output
“Japanese” tidak akan dilakukan. • Nilai kurang dari 70 • }

• */
• Selain if statement di atas, JavaScript • console.log(greeting);
juga mendukung ternary operator atau
conditional expressions. Dengan ini, kita
bisa menuliskan if-else statement hanya • /* output
dalam satu baris.
• Bonjour!
• */
If/Else Statement
• Selain if statement di atas, JavaScript • // condition ? true expression : false
juga mendukung ternary operator atau expression
conditional expressions. Dengan ini, kita
bisa menuliskan if-else statement hanya
dalam satu baris.
• const isMember = false;
• Ternary operator membutuhkan tiga
operand. Sebelum tanda tanya (?) berisi
• const discount = isMember ? 0.1 : 0;
kondisi yang ingin kita evaluasi. • console.log(`Anda mendapatkan
Kemudian diikuti dengan expression diskon sebesar ${discount * 100}%`)
apabila nilai kondisinya benar sebelum
tanda titik dua. Terakhir adalah
expression yang dieksekusi ketika
kondisinya salah. Karena merupakan • /* output
conditional expression, maka operand
kedua dan ketiga harus mengembalikan • Anda mendapatkan diskon sebesar 0%
nilai. • */
If/Else Statement (Truthy & Falsy)
• Di dalam if statement kita perlu memasukkan expression yang akan • let name = "";
dievaluasi. Umumnya, expression tersebut mengembalikan nilai
boolean untuk menentukan kondisi true atau false. Lalu bagaimana
jika kita menuliskan expression yang tidak mengembalikan nilai
boolean? Jawabannya bisa.
• if (name) {

• Setiap nilai pada JavaScript pada dasarnya juga mewarisi sifat

• console.log(`Halo, ${name}`);
boolean. Nilai ini dikenal dengan truthy atau falsy. Nilai truthy berarti • } else {
nilai yang ketika dievaluasi akan menghasilkan nilai true, begitu pula
falsy bernilai false. Jadi manakah yang termasuk truthy dan falsy? • console.log("Nama masih kosong");
Selain nilai boolean false, tipe data atau nilai yang dianggap falsy,
antara lain: • }

• Number 0
• BigInt 0n • /* output:

• String kosong seperti “” atau ‘’ • Nama masih kosong

• null • */

• undefined
• NaN, atau Not a Number
• Selain contoh di atas maka nilainya adalah truthy dan ketika
dievaluasi ke dalam if statement akan bernilai true. Berikut ini
contohnya dalam kode:
Switch Case Statement
• Selain if, JavaScript juga mendukung switch statement untuk 1. switch (expression) {
melakukan pengecekan banyak kondisi dengan lebih mudah dan
ringkas.
2. case value1:
• Tanda kurung setelah keyword switch berisi variabel atau expression
yang akan dievaluasi. Kemudian untuk setiap kondisi yang mungkin 3. // do something
terjadi, kita masukkan keyword case diikuti dengan nilai yang valid.
Jika kondisi pada case sama dengan variabel pada switch, maka blok 4. break;
kode setelah titik dua (:) akan dijalankan. Keyword break digunakan
untuk keluar dari proses switch. Terdapat satu case bernama default
yang memiliki fungsi yang sama dengan keyword else pada control 5. case value2:
flow if-else. Jika tidak ada nilai yang sama dengan variabel pada
switch, maka blok kode ini akan dijalankan. 6. // do something
7. break;
8. ...
9. ...
10. default:
11. // do something else
12.}
Switch Case Statement

• Selain if, JavaScript juga mendukung switch 1. let language = "French";

statement untuk melakukan pengecekan 2. let greeting = null;

banyak kondisi dengan lebih mudah dan

ringkas. 3. switch (language) {
4. case "English":
• Tanda kurung setelah keyword switch berisi 5. greeting = "Good Morning!";
variabel atau expression yang akan dievaluasi. 6. break;
Kemudian untuk setiap kondisi yang mungkin 7. case "French":
terjadi, kita masukkan keyword case diikuti 8. greeting = "Bonjour!";
dengan nilai yang valid. Jika kondisi pada case 9. break;
sama dengan variabel pada switch, maka blok 10. case "Japanese":
kode setelah titik dua (:) akan dijalankan. 11. greeting = "Ohayou Gozaimasu!";
Keyword break digunakan untuk keluar dari 12. break;
proses switch. Terdapat satu case bernama 13. default:

default yang memiliki fungsi yang sama dengan 14. greeting = "Selamat Pagi!";

keyword else pada control flow if-else. Jika tidak 15. }

ada nilai yang sama dengan variabel pada

switch, maka blok kode ini akan dijalankan. 16. console.log(greeting);

17. /* output
18. Bonjour!
19. */
Loop

• Ketika menulis program komputer, akan ada 1. console.log(1);

situasi di mana kita perlu melakukan hal yang
sama berkali-kali. Misalnya kita ingin 2. console.log(2);
menampilkan semua nama pengguna yang 3. console.log(3);
terdaftar di aplikasi atau sesederhana
menampilkan angka 1 sampai 10. Tentunya 4. console.log(4);
tidak praktis jika kita menulis kode seperti 5. console.log(5);
berikut:
6. console.log(6);
7. console.log(7);
• Bagaimana jika kita perlu menampilkan angka
1 sampai 100? Sudah terbayang repotnya, 8. console.log(8);
bukan? Maka dari itu kita perlu mempelajari 9. console.log(9);
teknik yang dapat mengatasi permasalahan
tersebut, teknik ini disebut dengan looping. 10.console.log(10);
JavaScript memiliki banyak opsi untuk
melakukan looping atau perulangan kode,
antara lain:
For Loop
• Dari beberapa cara melakukan proses loop pada JavaScript, “for” 1. for(inisialisasi variabel; test kondisi; perubahan nilai
merupakan salah satu cara yang banyak digunakan. Struktur dasar variabel) {
dari for tampak seperti berikut:
2. // do something
3. }
Lebih ringkas, bukan? Mungkin kode tersebut sulit dipahami, jadi
mari kita bahas sedikit demi sedikit. Terdapat tiga bagian utama
dalam sintaks for di atas: 1. for(let i = 0; i < 5; i++) {
2. console.log(i);
• Pertama, variabel i sebagai index iterasi. Pada variabel ini kita 3. }
menginisialisasi nilai awal dari perulangan.
• Kedua, operasi perbandingan. Pada bagian ini, JavaScript akan
melakukan pengecekan kondisi apakah perulangan masih perlu 4. /* output
dilakukan. Jika bernilai true, maka kode di dalam blok for akan
dijalankan. 5. 0
• Ketiga, increment/decrement. Di sini kita melakukan penambahan 6. 1
atau pengurangan variabel iterasi. Jadi, pada contoh di atas
variabel i akan ditambah dengan 1 di setiap akhir perulangan. 7. 2
Perubahan nilai ini penting karena jika kita mengubah nilainya,
proses perulangan dapat terus berjalan selama kondisinya 8. 3
terpenuhi. 9. 4
• JIka diartikan, maka kode di atas bisa dimaknai dengan “Jika i
10. */
kurang dari 5, maka tampilkan nilai i.”
For of loop
• Cara lain dalam melakukan looping adalah 1. for(arrayItem of myArray) {
menggunakan for..of. For of mulai hadir pada 2. // do something
ECMAScript 2015 (ES6). Cara ini jauh lebih
3. }
sederhana dan modern dibanding for loop biasa.
Sintaks dasar dari for of loop adalah seperti ini:
• for of tidak membutuhkan banyak statement untuk 1. let myArray = ["Luke", "Han", "Chewbacca", "Leia"];
melakukan looping pada array. kita bisa
menganggap array sebagai kumpulan nilai yang 2. for(const arrayItem of myArray) {
disimpan dalam satu variabel.
3. console.log(arrayItem)
• Dengan for..of nilai tiap array akan diinisialisasi
4. }
pada variabel baru yang kita tentukan pada tiap
proses looping-nya. Jumlah proses looping-nya pun
akan menyesuaikan dengan ukuran dari array. 5. /* output
Sederhananya seperti kita melakukan perintah “Hei
6. Luke
JavaScript! Lakukan perulangan pada myArray,
akses tiap nilainya, dan simpan pada variabel 7. Han
arrayItem”. Pada proses looping kita gunakan 8. Chewbacca
variabel arrayItem untuk mengakses tiap nilai dari
9. Leia
item myArray.
10. */
While and do-while
• Metode lain untuk melakukan looping adalah dengan 1. let i = 1;
statement while. Sama seperti for, instruksi while
mengevaluasi ekspresi boolean dan menjalankan kode
di dalam blok while ketika bernilai true. 2. while (i <= 100) {
3. console.log(i);
4. i++;
• Untuk menampilkan angka 1 sampai 100 dengan while
kita bisa menulis kode seperti berikut: 5. }

• Bisa dilihat pada kode di atas bahwa looping dengan

while tidak memiliki ketergantungan dengan variabel
iterasi seperti pada for loop. Karena itu, meskipun 1. let i = 1;
while dapat melakukan perulangan yang sama dengan
for, while lebih cocok digunakan pada kasus di mana
kita tidak tahu pasti berapa banyak perulangan yang 2. do {
diperlukan.
3. console.log(i);
• Kondisi pada while akan dievaluasi sebelum blok kode
4. i++;
di dalamnya dijalankan, sedangkan do-while akan
mengevaluasi boolean expression setelah blok 5. } while (i <= 100);
kodenya berjalan. Ini artinya kode di dalam do-while
akan dijalankan setidaknya satu kali.
Infinite loops

• Ketika menerapkan perulangan pada

program, ada satu kondisi yang perlu kita
1.let i = 1;
hindari yaitu infinite loop. Infinite loop atau
endless loop adalah kondisi di mana program
2.
kita stucked di dalam perulangan. Ia akan
berjalan terus hingga menyebabkan crash 3.while (i <= 5) {
pada aplikasi dan komputer kecuali ada
intervensi secara eksternal, seperti 4. console.log(i);
mematikan aplikasi.
5.}
• Kode berikut ini adalah contoh di mana
kondisi infinite loop dapat terjadi:
1.for(let i = 1; i <= 5; i=1) {
2. console.log(i);
3.}
TERIMA KASIH