Berbeda dengan html dan css yang outputnya berupa tampilan visual halaman website,

JavaScript berfungsi untuk menangani logika program yang dijalankan di halaman

website. Misal ketika suatu tombol diklik dan kemudian memunculkan dialog, disitulah
JavaScript bekerja dengan menerima event bahwa suatu tombol telah diklik dan
JavaScript memerintahkan dialog baru untuk muncul.

Layaknya bahasa pemrograman level tinggi lainnya seperti C, Java, dan Python,
Javascript memiliki beberapa sintaks dasar yang umum digunakan, seperti variable,
operator, pemilihan kondisi, array, perulangan, fungsi, string, dan lainnya. API
(Application Program Interface) dari JavaScript cukuplah lengkap, akan tetapi ia tidak
memiliki akses ke layer I/O, Network, Storage, dan Graphics dari suatu environment.

Tiga komponen yaitu HTML, CSS, dan JavaScript adalah komponen dasar dalam
membuat suatu website. HTML sebagai elemen dasar halaman website, CSS
menangani formatting website, kemudian JavaScript membuat suatu website menjadi
interactive.

Di modul-modul selanjutnya, Anda akan diminta untuk membuka editor online di

platform glot.io. Di sini Anda dituntut untuk menjalankan kode program yang telah
disiapkan, kemudian ikuti perintah-perintah yang ada di bagian Praktek. Di dalam
praktek inilah Anda akan diberikan pertanyaan-pertanyaan yang hanya bisa dijawab jika
Anda mencobanya di editor online.

Baca blog di sini untuk lebih tahu tentang platform

glot.io, https://blog.dicoding.com/code-editor-dan-compiler-online-terbaik/

Belajar kode yang paling efektif adalah dengan melakukan praktek secara langsung,
Anda akan lebih cepat dalam memahami maksud-maksud dari konsep maupun fitur
yang ada di bahasa pemrograman tersebut.
Hello World in Javascript

Latihan

Contoh kode:

1. console.log("Hello World");

Output kode:

Hello World

Variabel / Var

Variabel adalah wadah untuk menyimpan suatu nilai. Pada Javascript, syarat variabel di
antaranya:

 Nama variabel dapat berisi huruf, angka, karakter underscores _, dan karakter
dollar $.
 Nama variabel harus diawali huruf.
 Nama variabel bisa diawali dengan karakter _ dan $.
 Nama variabel bersifat case-sensitive (misal, variabel y dan Y berbeda).
 Kata kunci bawaan milik Javascript tidak bisa dipakai untuk nama variabel.

Beberapa contoh penulisan variabel:

1. var nama = 'Fauziah';

2. var $ttl = 'Bandung, 23 September 1995';
3. var gend3r = 'Perempuan';
4. var _alamat = 'Jl Sirna galih No 32 Bandung';
5. var kd_ps = 40195;
6. var Pddkn_trkhr = 'S1';

Latihan

Contoh kode:

1. var nama = 'Fauziah';

2. console.log(nama);
Link ke editor:

https://glot.io/snippets/fbn3lop4cf/embed/

Praktek

 Pada editor terdapat contoh pembuatan variabel dan cara menampilkan nilainya
ke layar. Jalankan kode dan lihat output apa yang tampil.
 Coba ganti baris ke-1 dan ke-2, kode nama menjadi 1nama dan lihat pesan error
yang muncul. Mengapa muncul error?
 Coba ganti baris ke-1 dan ke-2, kode nama menjadi new dan lihat pesan error
yang muncul. Mengapa muncul error?

Bagaimana menampilkan hasil pemrograman Javascript? Banyak cara yang bisa

digunakan, antara lain:

 Mencetak output ke dalam elemen HTML dengan innerHTML.

 Mencetak output ke HTML dengan document.write().
 Mencetak output dengan alert box window.alert().
 Mencetak output ke konsol browser dengan console.log().

Latihan

Contoh kode

1. console.log('Ini output program via console log');

Link ke editor:

https://glot.io/snippets/fbn3pzhv1q/embed/

Praktek

 Jalankan program pada editor.

 Modifikasi isi string pada baris ke-1 sesuai keinginan Anda, kemudian jalankan
program lagi.
 Tipe Data

Tipe data adalah jenis dari data yang digunakan pada sebuah variabel. Javascript
mendukung tipe data berikut:

 String adalah susunan dari huruf, angka dan karakter lainnya, seperti "Halo
Coders!". String ditulis dengan diapit oleh tanda kutip " atau tanda petik '.
 Number adalah tipe data angka yang bisa ditulis dengan desimal maupun tidak.
 Boolean adalah tipe data yang hanya memiliki dua nilai: true atau false.
 Array adalah tipe data yang ditulis dengan tanda siku [] dan isi array dipisahkan
dengan koma ,.
 Object adalah tipe data yang ditulis dengan kurung kurawal {} dan properti object
ditulis dengan sepasang nama:nilai yang kemudian dipisahkan dengan tanda
koma ,.
 null adalah nilai yang dapat digunakan untuk menunjukkan sesuatu yang tidak
ada, null memiliki tipe data object.
 undefined adalah nilai bawaan variabel yang ditulis tanpa isi.

Latihan

Contoh kode:

1. var nama = 'Manshour';

2. var umur = 32;
3. var sudah_menikah = true;
4. var nama_anak = ['Ghamidi','Fauziah'];
5. var perabotan = {'mobil':'Ferrari','jam':'rolex'};
6. var hutang = null;
7. var rumah;
8.
9. console.log(typeof nama);

Link ke editor:

https://glot.io/snippets/fbn3r0sfp0/embed/

Praktek

Pada kolom editor, Anda dapat melihat sejumlah variabel dengan tipe data yang
beragam. Gunakan perintah typeof untuk setiap variabel dan lihat bagaimana nilai
variabel tersebut ditampilkan. Misal pada baris ke-9, ganti typeof nama
menjadi typeof umur.
 Konstanta

Konstanta adalah sebuah nama (seperti variabel) untuk menyimpan suatu nilai.
Berbeda dengan variabel, nilai dari konstanta tidak dapat diubah setelah dia
didefinisikan.

Membuat sebuah konstanta bisa menggunakan operator assignment (=) seperti pada
saat membuat variabel, namun di awal variabel tambahkan const.

Latihan

Contoh kode:

1. const PI = 3.14159265;
2. console.log(PI);

Link ke editor:

https://glot.io/snippets/fbn3s1hnke/embed

Praktek

Jalankan program yang ada di editor dan lihat output apa yang muncul.

Apakah muncul pesan error apabila pada baris ke-3, ditambahkan kode ini:

1. PI = 1;
2. console.log(PI);

Mengapa demikian?

Operator Aritmatika

Operator digunakan untuk melakukan operasi terhadap suatu nilai dan variabel.

Operator Aritmatika digunakan untuk melakukan operasi aritmatik terhadap nilai

numerik, seperti penjumlahan, pengurangan, perkalian, pembagian, dan sebagainya.
 Op Nama Contoh Keterangan
+ Penjumlahan x+y Penjumlahan nilai x dan y
- Pengurangan x-y Pengurangan nilai x oleh y
* Perkalian x*y Perkalian nilai x dan y
/ Pembagian x/y Pembagian nilai x oleh y
% Modulus x%y Sisa dari pembagian x oleh y

Latihan

Contoh kode:

1. var x = 29;
2. var y = 19;
3. var z = x + y;
4. console.log(z);

Link ke editor:

https://glot.io/snippets/fbn3t2e13w/embed/

Praktek

 Gantilah operator yang digunakan pada kode baris ke-3 dengan operator lainnya,
dan lihatlah hasilnya!

Operator Penugasan

Operator penugasan (assignment) digunakan untuk menuliskan nilai pada suatu

variabel. Operator penugasan yang paling umum digunakan adalah operator = (sama
dengan). Operator ini digunakan untuk mengisi variabel yang ada di sebelah kiri dengan
nilai yang ada di sebelah kanan. Misalnya x = 3 berarti kita mengisi variabel x dengan
nilai 3. Atau x = y yang berarti kita mengisi variabel x dengan nilai yang ada di dalam
variabel y.

Selain itu, kita dapat menyisipkan operator aritmatika sebelum tanda =, yang berarti
mengisi variabel di sebelah kiri operator dengan hasil operasi dari variabel sebelah kiri
sebelum diisi dengan nilai di sebelah kanan. Agar lebih paham, perhatikan tabel berikut:
 Contoh Serupa Keterangan
x += y x=x+y x diisi dengan nilai dari x sebelumnya ditambah nilai y
x -= y x=x-y x diisi dengan nilai dari x sebelumnya dikurangi nilai y
x *= y x=x*y x diisi dengan nilai dari x sebelumnya dikali nilai y
x /= y x=x/y x diisi dengan nilai dari x sebelumnya dibagi nilai y
x %= y x=x%y x diisi dengan sisa nilai dari x sebelumnya dibagi nilai y

Latihan

Contoh kode:

1. var x = 29;
2. var y = 19;
3. console.log('Nilai x sebelum assignment: ' + x + '<br/>');
4. x += y;
5. console.log('Nilai x setelah assignment: ' + x + '<br/>');

Link ke editor:

https://glot.io/snippets/fbn423y26f/embed

PRAKTEK

 Gantilah operator yang digunakan pada kode baris ke-4 dengan operator
lainnya, dan lihatlah hasilnya!
 Operator Perbandingan

Operator perbandingan digunakan untuk membandingkan dua buah nilai numerik atau
string. Output dari operasi ini adalah nilai true atau false.

Op Nama Contoh Hasil

== Sama dengan x == y TRUE bila nilai x sama dengan y
=== Identik x === y TRUE bila nilai x sama dengan y, DAN tipe data keduanya
sama
!= Tidak sama dengan x != y TRUE bila nilai x tidak sama dengan y
!== Tidak identik x !== y TRUE bila nilai x tidak sama dengan y, ATAU tipe data
keduanya berbeda
> Lebih dari x >y TRUE bila nilai x lebih dari y
< Kurang dari x < y TRUE bila nilai x kurang dari y
>= Lebih dari atau sama x >= y TRUE bila nilai x lebih dari atau sama dengan y
dengan
<= Kurang dari atau sama x <= y TRUE bila nilai x kurang dari atau sama dengan y
dengan

Latihan

Contoh kode:

1. var x = 29;
2. var y = 19;
3. console.log(x == y);

Link ke editor:

https://glot.io/snippets/fbn432imfv/embed

PRAKTEK

 Gantilah operator == pada kode di baris ke-3 dengan <, >, <=, >= dan !=, lalu
amati output masing-masing operasinya.
 Ganti nilai x dengan string '19' dan ganti operator pada kode di baris ke-3
dengan == dan === lalu amati outputnya. Apakah outputnya berbeda? Mengapa
berbeda?
 Ekplorasi lebih lanjut dengan mengganti nilai variabel x dan y dan juga operator
yang digunakan dan bandingkan masing-masing outputnya.
 Operator increment-decrement

Operator increment-decrement adalah operator yang digunakan untuk menaikkan atau

menurunkan sebanyak satu dari nilai variabel yang dikenai operasi. Operator increment
adalah tanda ++ yang disimpan sebelum atau sesudah variabel, dan operator
decrement adalah tanda -- yang disimpan sebelum atau sesudah operasi.

Agar lebih jelas lihat tabel berikut:

Operator Nama Keterangan

++x pre-increment tambah nilai x sebanyak 1, kemudian kembalikan nilai x
x++ post-increment kembalikan nilai x, lalu tambah nilai x sebanyak 1
--x pre-decrement kurangi nilai x sebanyak 1, kemudian kembalikan nilai x
x-- post-decrement kembalikan nilai x, lalu kurangi nilai x sebanyak 1

Latihan

Contoh kode:

1. var x = 13;
2. ++x;
3. console.log(x);

Link ke editor:

https://glot.io/snippets/fbn43zdpsw/embed

PRAKTEK

 Jalankan contoh kode yang ada pada editor, dan lihat output yang tampil.
 Ganti kode di baris ke-2, x++ menjadi x--; dan jalankan. Bagaimana hasil
outputnya? Mengapa?
 Eksplorasi dengan mengganti operator pada baris ke-2 dengan operator
increment-decrement lainnya dan perhatikan outputnya.
 Operator Logika

Operator logika digunakan untuk mengkondisikan pernyataan kondisi. Kondisi yang

dimaksud adalah nilai variabel atau hasil perbandingan variabel dalam tipe data
boolean (TRUE dan FALSE). Operator logika yang tersedia di antaranya and, or, xor
dan not.

Op Nama Contoh Output

and And x and y TRUE hanya bila x and y keduanya bernilai TRUE

&& x && y
or Or x or y TRUE bila salah satu atau keduanya dari x atau y bernilai TRUE

|| x || y
xor Xor x xor y TRUE bila hanya salah satu saja (tidak keduanya) dari x atau y
bernilai TRUE
! Not !x TRUE bila x bernilai FALSE

Latihan

Contoh kode:

1. var x = true;
2. var y = true;
3.
4. console.log('x : ' + x + '<br/>');
5. console.log('y : ' + y + '<br/>');
6. console.log('!x : ' + !x + '<br/>');
7. console.log('!y : ' + !y + '<br/>');
8. console.log('x and y : ' + (x && y) + '<br/>');
9. console.log('x or y : ' + (x || y) + '<br/>');
10. console.log('x xor y : ' + Boolean(x ^ y) + '<br/>');

Link ke editor:

https://glot.io/snippets/fbn457np8j/embed

PRAKTEK

Ganti nilai variabel x dan y pada editor menjadi true atau false, lalu jalankan program.
Amati dan pelajari tiap outputnya.
 Operator String

Operator string sangat membantu dan akan sering digunakan pada operasi yang
berkaitan dengan data string. Operasi yang dimaksud adalah konkatenasi
(perangkaian) atau penggabungan dua buah string, dan operator yang digunakan
adalah tanda titik +. Selain itu, operator konkatenasi juga dapat digunakan pada operasi
assignment, seperti halnya operator aritmatika.

1. z = x + y;

Contoh kode di atas artinya kita mengisi variabel z dengan nilai string hasil
penggabungan antara nilai variabel x dengan nilai variabel y.

Latihan

Contoh kode:

1. var x = 'Halo';
2. var y = 'Coders';
3. var z = x + ' ' + y;
4.
5. console.log('x: ' + x + '<br/>')
6. console.log('y: ' + y + '<br/>')
7. console.log('z: ' + z + '<br/>')

Link ke editor:

https://glot.io/snippets/fbn46n3tp0/embed

PRAKTEK

 Jalankan kode di editor dan lihat bagaimana outputnya. Anda juga dapat
mencoba mengeksplorasi dengan string lainnya dan lihat bagaimana hasilnya?
 If

Seringkali kita harus melakukan suatu operasi hanya pada kondisi tertentu saja. Artinya
kita mengecek terlebih dahulu sebuah kondisi, yang apabila kondisi tersebut terpenuhi
(atau bernilai true), maka kita lakukan serangkaian operasi.

Statemen if digunakan untuk mengecek kondisi dan bila kondisi bernilai true, maka
program tertentu akan dijalankan. Penulisan sintaksnya adalah:

1. if(kondisi) {
2. // kode untuk dieksekusi bila kondisi bernilai true
3. }

Pada bagian kondisi, kita isi dengan suatu variabel yang nantinya akan dicek nilainya.
Variabel bernilai false, null, string kosong atau 0 akan menghasilkan output false, dan
selain nilai tersebut akan memberikan output true. Selain itu kita juga dapat
membandingkan variabel menggunakan operator perbandingan dan operator logika,
atau hasil keluaran dari sebuah fungsi.

Latihan

Contoh kode:

1. var nama = 'Mansur';

2. var pesan = 'Selamat datang, ' + nama + '.';
3. if(nama == 'Mishary')
4. {
5. pesan = 'Hi, suatu kehormatan bisa bertemu dengan Anda, ' + nama;
6. }
7. console.log(pesan);

Link ke editor:

https://glot.io/snippets/fbn4gr79qe/embed

PRAKTEK

 Jalankan kode yang ada di editor. Apa output yang muncul?

 Apa output yang ditampilkan bila Anda mengisi variabel nama dengan nama
Anda? Apa pula output yang ditampilkan bila variabel tersebut diisi dengan string
Mishary?
 If else

Adakalanya kita harus mengeksekusi satu blok kode program saat suatu kondisi
terpenuhi, dan mengeksekusi blok kode program lain yang berbeda bila kondisi tidak
terpenuhi. Untuk itu kita gunakan statemen if..else.

1. if (kondisi) {
2. // kode untuk dieksekusi bila kondisi bernilai TRUE
3. } else {
4. // kode untuk dieksekusi bila kondisi bernilai FALSE
5. }

Latihan

Contoh kode:

1. var panjang = 7; // atau diameter lingkaran

2. var lebar = 3;
3. var tinggi = 2; // tinggi bangun ruang
4.
5. // tinggi = 0;
6. if(tinggi > 0)
7. {
8. console.log('Luas selimut balok: ' + panjang * lebar * tinggi + '<br/>');
9. console.log('Luas selimut tabung: ' + 2 * 3.14 * (panjang/2) * (panjang/2 +
tinggi) + '<br/>');
10. }
11. else
12. {
13. console.log('Luas persegi: ' + panjang * lebar + '<br/>');
14. console.log('Luas lingkaran: ' + 0.25 * 3.14 * (panjang*panjang) + '<br/>');
15. }

Link ke editor:

https://glot.io/snippets/fbn4hp6yvw/embed

PRAKTEK

 Pada editor, kita melihat kode untuk menghitung luas permukaan selimut balok
dan tabung menggunakan variabel panjang, lebar dan tinggi. Coba hapus
variabel tinggi atau isi variabel dengan nilai 0, dan lihat output apa yang muncul.
 If, else if, else

Adakalanya kita harus mengecek beberapa kondisi dan hanya menjalankan kode dari
salah satu kondisi yang terpenuhi saja. Untuk itu kita dapat menggunakan statemen
if..else if..else dst.

1. if(kondisi a){
2. // kode bila kondisi a terpenuhi
3. } else if(kondisi b){
4. // kode bila kondisi b terpenuhi
5. ..
6. ..
7. } else if(kondisi n) {
8. // kode bila kondisi n terpenuhi
9. } else {
10. // kode bila semua kondisi tidak terpenuhi
11. }

Latihan

Contoh kode:

1. console.log('Nilai: ');
2.
3. var skor = 83;
4. if(skor < 25)
5. {
6. console.log('D');
7. }
8. else if(skor < 50)
9. {
10. console.log('C');
11. }
12. else if(skor < 80)
13. {
14. console.log('B');
15. }
16. else
17. {
18. console.log('A');
19. }

Link ke editor:

https://glot.io/snippets/fbn4isl8o8/embed

PRAKTEK

 Pada editor, jalankan kode dan lihat output apa yang muncul.
 Ganti nilai variabel skor dengan nilai lain dan amati output yang tampil.
 If Bersarang

Kita dapat mendeklarasikan statemen if didalam statemen if lainnya untuk pengecekan

bersarang. Statemen if pada dasarnya sama seperti kode lainnya, maka kita dapat
menyimpan statemen if bersarang dimanapun di dalam blok kode if induknya.

1. if(kondisi a) {
2. if(kondisi b) {
3. // jalankan kode
4. }
5. }

Latihan

Contoh kode:

1. var matematika = 63;

2. var wawancara = 'A';
3.
4. if(matematika > 60)
5. {
6. var keterangan = 'Lolos tes, dengan predikat ';
7. if(wawancara == 'A')
8. {
9. keterangan += 'Memuaskan';
10. console.log(keterangan);
11. }
12. else if(wawancara == 'B')
13. {
14. keterangan += 'Cukup';
15. console.log(keterangan);
16. }
17. else
18. {
19. keterangan += 'Tidak lolos tes';
20. console.log(keterangan);
21. }
22. }

Link ke editor:

https://glot.io/snippets/fbn4k4w8yf/embed/

PRAKTEK

 Jalankan kode yang ada di editor dan amati output yang tampil.
 Mainkan nilai variabel matematika dan psikotes dan amati output yang tampil.
 Switch

Statemen switch digunakan untuk menjalankan satu di antara banyak blok kode
berdasarkan kecocokan nilai yang dievaluasi.

1. switch(variabel){
2. case a:
3. // blok kode A
4. break;
5. case b:
6. // blok kode B
7. break;
8. ...
9. default:
10. // blok kode default
11. }

Pada statemen switch, nilai variabel akan dievaluasi kecocokannya untuk setiap case.
Bila ditemukan kecocokan pada salah satu case, maka blok kode pada case tersebut
akan dijalankan. Umumnya blok kode pada setiap case diakhiri dengan perintah break;
agar program langsung keluar dari blok statemen switch dan tidak perlu lagi mengecek
sisa case di bawahnya.

Apabila tidak ada case yang cocok dengan nilai variabel, maka blok kode pada bagian
default yang akan dijalankan.

Latihan

Contoh kode:

1. console.log('<img src="');
2.
3. var les_animaux = 'chats';
4. switch(les_animaux)
5. {
6. case 'chats':
7. console.log('http://i.imgur.com/4AiXzf8.jpg');
8. break;
9. case 'chiens':
10. console.log('http://i.imgur.com/A8eQsll.jpg');
11. break;
12. case 'singes':
13. console.log('http://i.imgur.com/CXwaR8c.jpg');
14. break;
15. case 'les humains':
16. console.log('http://i.imgur.com/u0mFu.jpg');
17. break;
18. }
 19.
20. console.log('"/>');

Link ke editor:

https://glot.io/snippets/fbn4l53lft/embed/

PRAKTEK

 Perhatikan kode switch pada kolom editor. Kira-kira output apa yang akan
muncul bila kode tersebut dijalankan? Cek perkiraan Anda dengan menjalankan
kode tersebut.
 Nilai apa yang harus Anda isikan ke dalam variabel les_animaux di baris ke-3
agar program menampilkan gambar manusia?

Kita sudah paham bahwa switch akan menjalankan blok kode yang case-nya cocok
dengan nilai variabel yang dievaluasi. Lalu bagaimana bila kita ingin menjalankan blok
kode yang sama untuk beberapa case berbeda? Ada dua solusi. Pertama dengan
memasang blok kode yang sama untuk case-case berbeda yang ingin outputnya sama.

1. var binatang = 'kambing';

2. switch(binatang)
3. {
4. case 'ayam':
5. console.log(binatang + " jumlah kaki 2");
6. break;
7. case 'sapi':
8. console.log(binatang + " jumlah kaki 4");
9. break;
10. case 'kambing':
11. console.log(binatang + " jumlah kaki 4");
12. break;
13. ...
14. }

Akan tetapi switch memperbolehkan cara yang lebih sederhana agar kita tidak perlu
mengulang baris kode yang sama.

1. var binatang = 'kambing';

2. switch(binatang)
3. {
4. case 'ayam':
5. console.log(binatang + " jumlah kaki 2");
6. break;
 7. case 'sapi':
8. case 'kambing':
9. console.log(binatang + " jumlah kaki 4");
10. break;
11. ...

Pada kode di atas kita melihat ada case yang tidak memiliki blok kode. case tanpa blok
kode berarti dia mengikuti blok kode yang dimiliki case setelahnya. Contohnya, bila
variabel binatang bernilai "sapi" maka dia akan menampilkan output jumlah kaki 4
karena case "sapi" tidak memiliki blok kode, sehingga blok kodenya mengikuti blok
kode yang dimiliki case setelahnya yaitu case "kambing".

Latihan

Contoh kode:

1. var binatang = 'kambing';

2. switch(binatang)
3. {
4. case 'ayam':
5. console.log(binatang + " termasuk hewan omnivora");
6. break;
7. case 'sapi':
8. console.log(binatang + " termasuk hewan herbivora");
9. break;
10. case 'kambing':
11. console.log(binatang + " termasuk hewan herbivora");
12. break;
13. case 'serigala':
14. console.log(binatang + " termasuk hewan karnivora");
15. break;
16. case 'harimau':
17. console.log(binatang + " termasuk hewan karnivora");
18. break;
19. case 'tikus':
20. console.log(binatang + " termasuk hewan omnivora");
21. break;
22. default:
23. console.log(binatang + " tidak terdaftar di program");
24. break;
25. }

Link ke editor:

https://glot.io/snippets/fbn4rxebv3/embed
PRAKTEK

 Pada kode di samping ada kode switch yang memiliki beberapa case dengan
blok kode yang sama persis. Buatlah agar kode switch menjadi lebih ramping
tanpa ada blok kode yang sama yang diulang.
 Ganti nilai variabel binatang di baris ke-1 untuk mengecek kode program yang
sudah Anda modifikasi.