JAVASCRIPT

1. Pendahuluan
Javascript merupakan bahasa pemrograman yang dikembangkan unutk membuah
sebuah website agar lebih interaktif dan dinamis. Dengan Javascript kita dapat
meningkatkan fungsionalitas website kita, bahkan dapat kita gunakan unutk membuat
aplikasi, tools maupun game. Javascript sendiri merupakan bahasa pemrograman
interpreter sehingga tidak memerlukan proses compiling untuk menjalankan. Bahasa
javascript memiliki fitur seperti object-oriented, client-side, pemrograman level tinggi
dan loosy typed.
Untuk menjalankan javascript terdapat 2 cara yaitu, menjalankan langsung melalui
console browser dan menjalankan lewat file yang di muat pada sebuah halaman web.
a. Menjalankan melalui console browser
Untuk menjalankan Javascript melalui console browser bisa dengan menekan
tombol keyboard F12 pada browser. Kemudian ketikkan script dan tekan enter
untuk menjalankan.

b. Menjalankan melalui sebuah file

Pertama-tama buat dua buah file dengan nama index.html dan script.js

Kemudian buka index.html dan ketikkan code berikut

 Pada baris 12 kita akan menjalankan script javascript yang akan kita tulis.
Selanjutnya buka file script.js dan ketikkan script sederhana berikut

Langkah selanjutnya adalah membuka file index.html pada browser dan buka
console browser untuk melihat hasilnya.

2. Fundamental Javascript
Secara fundamental atau mendasar untuk belajar Javascript bisa melihat bagan berikut
2.1 Code Structure
Secara umum struktur kode javascript atau yang bis akita sebut dengan script
terditri tiga bagian yaitu statement, semi colon (titik koma) “;” dan komentar
(comments). Sebuah statement bisa kita sebut sebagai kalimat tapi dalam kode.
Statement adalah semua syntax dan perintah-perintah yang menjalankan aksi.
Contoh sebuah statement adalah:

Pada javascript titik koma tidak menjadi sebuah kewajiban jika antara statement
satu dengan lainnya dipishakan dengan baris baru. Namun jika setiap statement
ditulis dalam satu baris maka wajib diakhiri dengan titik koma. Contohnya adalah
sebagai berikut:

Penulisan komentar dalam javascript ada dua, komentar satu baris dan komentar
multi baris. Sebuah komnetar satu baris ditandai dengan menambahkan “//” di
awal statement, sedangkan komentar multi baris dibungkus dengan tanda
“/*…..*/”. Semua statement yang dibungkus dengan komentar tidak akan
dijalankan. Contoh penggunaan komentar:
2.2 Use Strict
Sebelum tahun 2009, javascript tidak memiliki masalah kompabitas. Namun sejak
dirilisnya ECMAScript 5 (ES5) terdapat fitur baru dan mengubah fitur yang sudah
ada. Secara default modifikasi baru tersebut tidak ditambahkan kecuali
menggunakan “use strict”. “use strict” harus diletakkan pada awal baris script,
jika tidak “use strict” akan diabaikan. Untuk pemrograman jaavascript selalu
disarankan untuk mengaktifkan “use strict”.

2.3 Variable
Variabel adalah sebuah penyimpanan dengan nama (named storage) untuk
menampung data. Untuk membuat variable pada javascript dapat menggunakan
“var”, “let” atau “const”. Setiap variable memiliki fungsi masing-masing. Variable
“var” merupakan variable yang sifatnya global dan dapat diakses dimanapun.
Berbeda dengan “var”, variabel “let” hanya dapat diakses pada scope tertentu
missal di dalam sebuah function. Unutk variable “const” adalah jenis variabel
yang isinya komstan atau tidak dapat diubah.
Dalam penulisan variabel kita wajib memberikan nama variabel. Sebuah nama
variabel hanya boleh mengandung huruf, angka, $, dan _ di dalamnya. Sebuah
nama variabel juga tidak boleh diawali oleh angka dan tanda “–“. Untuk
menyimpan data dalam sebuah variabel kita perlu melakukan asiigment dengan
tanda “=”. Jika kita tidak mendeklarasikan atau memberikan nilai/ data pada
variabel maka variabel tersebut akan bernilai “undefined”. Nilai “undefined”
berbeda dengan nilai “null”. Adapun contoh penggunaan variabel.
2.4 Data Type
Data type atau tipe data dalam bahasa pemrograman adalah sebuah klasifikasi
yang menentukan suatu tipe dari nilai. Tipe data ini juga menentukan operasi
matematika, relasional maupun operasi logika apa saja yang dapat digunakan
tanpa menyebabkan kesalahan kode. Dalam Javascript terdapat 8 jenis tipe data:
2.4.1 Number
Tipe data number dalam Javascript digunakan untuk mempresentasikan
integer (bilangan bulat) dan float (bilangan pecahan).

Ada beberapa operasi bilangan yang dapat digunakan seperti, perkalian

“*”, pembagian “/”, penjumlahan “+”, penguranagn “-” dan sebaginya.
Disamping bilangan regular (integer dan float) terdapat juga nilai khusus
yang masuk dalam tipe data number. Nilai khusus tersebut adalah infinity,
-infinity dan NaN.
• Infinity dan -Infinity
Mempresentasikan nilai matematika yang bernilai tak berhingga
(∞). Kita dapat memperolah nilai infinity dengan membagi
bilangan apapun dengan angka 0.

• NaN
 Memperesentasikan kesalah perhitungan. NaN merupakan
singkatan Not a Number. NaN merupakan hasil perhitungan yang
salah atau terdapat perhitungan matematika yang tidak terdefinisi.

2.4.2 BigInt
Dalam Javascript tipe data number tidak bisa mempresentasikan bilangan
bulat lebih dari (253-1) dengan kata lain bernilai 9007199254740991 atau
untuk bilangan negatif -(253-1). Sebuah nilai yang bertipe BigInt selalu
diakhiri dengan huruf n pada akhir sebyuah nilai integer.

2.4.3 String
Penulisan tipe data string harus dibungkus dengan tanda petik. Dalam
javascript terdapat tiga jenis tanda petik.
Petik ganda: “Arkatama”
Petik tunggal: ‘Arkatama’
Backtick: `Arktama`
 Tidak ada perbedaan antara penggunaan tanda petik ganda dan petik
tunggal. Namun, untuk tanda backtick dapat digunakan untuk
menggabungkan variable dan ekspresi. Agar variable dan ekspresi dapat
digabungkan harus dibungkus dengan ${….}.

2.4.4 Boolean
BOllean adalah tipe data berjenis logikal. Tipe data ini hanya memiliki dua
nilai, true atau false. True artinya benar dan false artinya salah. Nilai tipe
data Boolean dapat juga dihasilkan dari sebuah hasil perbandingan.

2.4.5 Null
Null merupakan sebuah nilai khusus yang bukan milik tipe data apapun.
Pada javascript null bukan referensi unutk sebuah object yang tidak ada
atau sebuah null-pointer seperti kebanyakan bahasa pemrograman lain.
Null hanya sebuah nilai khusus yang mempresentasikan nilai yang tidak
ada isinya, kosong, atau nilai tidak diketahui.
2.4.6 Undefined
Merupakan nilai khusus yang mempresentasikan bahwa sebuah variable
belum memiliki nilai yang di-assign terhadapnya. Artinya sebuah variabel
sudah di deklasrisakn sebelumnya namun belum memilki sebuah nilai
yang kemudian kita akses atau lakukan operasi.

2.4.7 Symbol
Tipe data symbol digunakan untuk sesuatu yang bernilai unik dan tidak
dapat diubah (immutable).

2.4.8 Object
Berbeda dengan ketujuh tipe data lainnya yang biasa disebut tipe data
primitive karena hanya menyimpan sebuah nilai. Tipe data objek adalah
 tipe data khusus yang dapat menyimpan kumpulan nilai dengan kunci/
key. Sebuah objek dapat didefiniskan dengan menggunakan kurung
kurawal “{…}” dengan property yang sifatnya opsional di dalamnya.
Sebuah property dalam objek adalah pasangan dari sebuah “key : value”.
Dimana “key” berupa string (key bisa juga disebut sebagai property name)
dan “value” bisa bernilai apapun. Unutk mengakses sebuah nilai dalam
objek kita dapat menggunakan notasi “.” Dan diikuti key/ nama
propertinya.

2.5 Type Conversion

2.5.1 String Conversion
Konversi ke tipe data String biasanya diperlukan saat membututuhkan nilai
yang berbentuk String. Sebagai contoh jika kita konversi nilai false maka
akan berubah menjadi “false”, null menjadi “null” dan sebagianya.

2.5.2 Numeric Conversion

Sebenarnya jika kita melakukan operasi matematika sebuah nilai akan
otomatis berubah menjadi tipe data numeric. Sebagai contoh jika kita
melakukan operasi pembagian kepada bilangan non-numeric maka akan
dihasilkan tipe data numeric.
 Kita juga dapat melakukan konversi ke tipe data numeric secara eksplisit.
Konversi ini kadang kita perlukan jika ingin membaca sebuah nilai dari
sumber yang berupa String tapi menginginkan hasilnya sebuah numeric.

Jika string yang dimasukkan bukaan berupa bilangan yang valid maka
hasil konversinya akan dianggap NaN

Aturan konversi numeric:

Value Becomes…
undefined NaN
null 0
true and false 1 and 0
string Whitespaces (includes spaces, tabs \t, newlines \n etc.)
from the start and end are removed. If the remaining
string is empty, the result is 0. Otherwise, the number is
“read” from the string. An error gives NaN.

2.5.3 Boolean Conversion

 Konversi Boolean memiliki aturan sebagai berikut:
• Nilai 0, String yang kosong, null, undefined, and NaN, menjadi
false.
• Selain itu menjadi true.

2.6 Operator
Operator adalah simbol yang digunakan unutk melakukan operasi pada sebuah
operand. Operand sendiri adalah sebuah nilai atau variabel yang dilakukan operasi
oleh operator.\

2.6.1 Operator Aritmatika

Operator aritmatika adalah operator yang dapat digunakan unutk
melakukan operasi aritmatika seperti penjumlahan, pembagian, perkalian
dan sebagainya. Operator aritmatika terdiri dari:
Nama Operator Simbol
Penjumlahan +
Pengurangan -
Perkalian *
Pemangkatan **
Pembagian /
Sisa Bagi %
2.6.2 Operator Penugasan (Assignment)
Operator penugasan dapat digunakan untuk memberikan tugas kepada
sebuah variabel. Umumnya digunakan unutk mengisi nilai sebuah variabel.
Berikut operator penugasan yang terdapat pada javascript:

Nama Operator Sombol

Pengisian Nilai =
Pengisian dan Penambahan +=
Pengisian dan Pengurangan -=
Pengisian dan Perkalian *=
Pengisian dan Pemangkatan **=
Pengisian dan Pembagian /=
Pengisian dan Sisa bagi %=
2.6.3 Operator Relasi/ Perbandingan
Operator Relasi/ Perbandingan dapat digunakan unutk membandingkan
dua nilai. Operator perbandingan akan menghasilkan salah satu dari nilai
true atau false. Operator ini terdiri dari:
Nama Operator Simbol
Lebih Besar >
Lebih Kecil <
Sama Dengan == atau ===
Tidak Sama dengan != atau !==
Lebih Besar Sama dengan >=
Lebih Kecil Sama dengan <=
2.6.4 Operator Logika
Merupakan operator yang dapat digunakan unutuk operasi terhadap dua
nilai boolean. Operator ini terdiri dari:
Nama Operator Simbol
Logika AND &&
Logika OR ||
Negasi/kebalikan !

2.6.5 Operator Bitwise

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) »>

2.6.6 Operator Ternary

Operator ternary merupakan operator yang terdiri dari tiga bagian (kiri,
tangah dan kanan). Operator-operator sebelumnya disebut operator binary
karena hanya memiliki 2 bagian saja. Sedangkan unutk operator yang
hanya memiliki 1 bagian disebut operator unary. Operator trinary
digunakan untuk melakukan percabangan (if-else).
2.7 Popup box: Alert, Prompt dan Confirm
Javascript secara default memiliki tiga jenis popup box yaitu alert, prompt dan
confirm. Masing-masing memiliki fungsinya tersendiri. Alert digunakan unutk
menampilkan pesan. Prompt digunakan untuk meminta input dari pengguna.
Sedangkan confirm digunakan unutk meminta konfirmasi pengguna.
2.7.1 Alert
Alert biasa digunakan unutk menampilkan pesan dan untuk mendapatkan
perhatian dari pengguna. Popup box jenis alert akan menampilkan pesan
dengan sebuah tombol “OK”.
2.7.2 Prompt
Prompt sering digunakan jika kita ingin pengguna menginputkan sebuah
nilai terlebih dahulu sebelum memasuki sebuah halaman. Ketika prompt
box tampil, pengguna harus klik “OK” atau “CANCEL” setelah
memasukkan nilai. Jika pengguna klik “OK” maka prompt akan
mengembalikan nilai yang dimasukkan. Jika pengguna klik “CANCEL”
maka prompt akan mengembalikan nilai null.

2.7.3 Confirm
Confirm digunakan untuk menampilkan pesan konfirmasi kepada
pengguna. Confirm box menampilkan pesan dengan dua buah tombol
“OK” dan “CANCEL”. Confirm mengembalikan nilai true jika kita tekan
“OK” dan false jika kita tekan “CANCEL”.
2.8 Conditional branching: if
Seperti bahasa pemrograman pada umumnya, javascript juga mendukung
percabangan menggunakan ”if”. Percabangan dapat kita gunakan unutk menajalan
aksi berdasarkan kodisi tertentu. Selain menggunakan “if” kita juga dapat
menggunakan operator “?”.
2.8.1 If
Sebuah statemen if(…) mengevaluasi kondisi di dalam “(…)”. Jika hasil
evaluasinya adalah true maka akan mengeksusi kode program di dalam
blok if. Jika evaluasinya false maka akan dilewati.
 2.8.2 Else
Kita dapat menggunakan kalusa else untuk menjalankan program jika
kondisi pada evaluasi if adalah false.

2.8.3 Else if
Kita dapat menggunakan else if jika terdapat beberapa kondisi yang perlu
dilakukan evaluasi.

2.9 Switch Statement

Selain menggunakan if kita juga dapat menggunakan switch untuk melakukan
percabangan. Switch dapat digunakan untuk menggantikan if else yang memiliki
banyak percabangan sehingga lebih deskriptif unutk membandingkan banyak
variansi nilai.
2.10 Loop
Loop atau perulangan secara sederhana adalah proses untuk menjalankan perintah
secara berulangan. Pada javascript terdapat beberapa jenis perulangan yaitu for, do
while dan while.
2.10.1 For
Perulangan for mengulangi kondisi tertentu hingga hasilnya false.

2.10.2 Do…. While

Perulangan do while hamper mirip dengen perulangan for. Perulangan ini
akan melakukan perulangan sampai kondisi yang dievaluasi bernilai false.
Berbeda dengan for yang hanya melakukan perulangan jika kondisi benar,
 do while akan menjalankan perulangan satu kali sebelum dilakukan
pengecekan.

2.10.3 While
Perulangan while melakukan perulangan selama kondisi yang dievaluasi
bernilai true. Jika kondisi menjadi false maka perulangan akan dihentikan.

2.10.4 Break
Statement break digunakan untuk mengkontrol sebuah perulangan. Jika
dijalankan statement ini akan menghentikan perulangan.
 2.10.5 Continue
Continue digunakan untuk meloncati iterasi sekarang dan melanjutkan ke
iterasi selanjutnya

2.11 Function
Function atau fungsi merupakan sub-program yang re-usable/ dapat digunakan
kembali baik di dalam maupun di luar program itu sendiri maupun di program
lain. Di dalam javascript fungsi adalah sebuah object karena memiliki property
dan method. Di dalam javascript untuk membuat fungsi terdapat beberapa cara.

2.11.1 Basic Function

Merupakan cara yang paling umum digunakan unutk membuat fungsi.
2.11.2 Function Expression
Cara lainnya adalah dengan membuat sebuah variabel dan mengisinya
dengan fungsi. Fungsi ini merupakan fungsi anonym karena tidak memiliki
nama fungsi.

2.11.3 Arrow Function

Merupakan salah satu cara penulisan fungsi dalam javascript yang modern
dan baru diperkenalkan pada standar ES6. Penulisan dengan menggunakan
panah lebih sederhana.
3. Array
3.1.Pengertian
Array merupakan salah satu jenis struktur data yang sering digunakan dalam
bahasa pemrograman. Array merupakan struktur data yang dapat digunakan untuk
menyimpan sekumpulan data dalam suatu variabel. Array terdefinisi oleh nomor
index dan element. Nomor index merupakan penanda elment pada sebuah array.
Nomor index pada array selali dimulai dari angka 0 dan selalu berurutan. Elemen/
item sebuah array bisa berupa tipe data apapun.

3.2.Deklarasi dan mengakses array

Terdapat dua cara untuk mendeklarasikan sebuah array. Pertama dapat
menggunakan object Array, kedua dapat langsung menggunakan notasi balok/ siku.
Untuk mengakses nilai elemet/ item dalam sebuah array dapat digunakan notasi
balok/ kurung siku. Tidak hanya mnegambil nilai, kita dapat juga menambahkan
item maupun mengubah isi item.
3.3.Array Method
Pada javascript terdapat beberapa method untuk memanipulasi elemen/ item. Kita
dapat dengan mudah menambahkan atau mengurangi elemen/ item dalam sebuah
array.
3.3.1 Pop dan Push
Method pop() merupakan method yang dapat digunakan untuk mengurangi/
menghilangkan item dalam sebuah array dari index paling akhir. Sedangkan
push() merupakan method yang dapat digunakan untuk menambahkan item
ke dalam array dari index yang paling akhir.
3.3.2 Shift dan Unshift
Dalam Javascript kita juga dapat menambahkan atau menguramgi item pada
sebuah array dari index yang paling awal. Untuk menghilangkan item paling
awal pada sebuah array dapat mengguanakan method shift(). Sedangkan
untuk menyisipkan item ke depan sebuah array digunakan method unshift().
 3.3.3 Length
Method length() merupakan method yang dapat digunakan untuk menghitung
panjang sebuah array. Panjang sebuah array merupkan banyaknya item dalam
sebuah array. Penting diingat bahwa panjang sebuah array berbeda dengan
nomor index.

3.4.Array Iteration
Array merupakan strucktur data yang dapat dilakukan operasi iterasi di dalamnya.
Operasi iterasi sendiri merupakan operasi yang dapat dilakukan menggunakan
perulangan/ looping untuk memanipulasi elemennya. Ada beberapa metjod iterasi
yang dapat digunakan.
3.4.1 Foreach
Merupakan method yang dapat digunakan untuk melakukan perulanagan
sebanyak item di dalam sebuah Array. Method ini memerlukan fungsi
callback dengan tiga parameter. Adapun parameter yang diperlukan adalah:
Parameter Keterangan
value Merupakan elemen iterasi/ elemen sekarang

index Merupakan nomor index dari iterasi

array Array itu sendiri

 Kita dapat mengganti nama parameter tersebut sesuai dengan kebutuhan kita,
selain itu jika parameter tersebut tidak digunakan sangat disarankan untuk
dihapus agar menghemat memori.

3.4.2 Map
Method ini berfungsi untuk mengembalikan array ke dalam format/ bentuk
baru berdasarkan callback function yang diberikan. Method ini juga
memerlukan callback functiond engan tiga parameter: value, index dan array.
3.4.3 Filter
Merupakan method yang berfungsi untuk melakukan filter/ mencari elemen
dengan kriteria tertentu sesuai dengan callback function yang diberikan.
Method ini akan mengembalikan array dari elemen yang cocok dengan
kriteria. Method ini juga memerlukan callback functiond engan tiga
parameter: value, index dan array.
3.4.4 Find
Method ini digunakan untuk menemukan elemen pertama yang sesuai
dengan kriteria pencarian yang diberikan pada function callback. Method ini
akan selalu mengembalikan elemen tunggal berbeda dengan filter yang akan
mengembalikan array dari elemen-elemen yang sesuai kriteria. Jika kriteria
pencarian tidak ditemukan makan akan mengembalikannilai null.
3.4.5 Findindex
Jika find() digunakan untuk mencari elemen pertama yang sesuai dengan
kriteria, maka findIndex() digunakan untuk menemukan nomor index dari
elemen yang pertama ditemukan.
3.4.6 Every dan Some
Method every() digunakan untuk mengecek apakah setiap elemen dalam
array sesuai dengan kriteria yang ditentukan pada callback function. Jika
semua elemen sesuai maka akan mengembalikan true dan jika salah satu saja
elemen dalam array tidak sesuai maka akan mengembalikan nilai false.
Berkebalikan dengan every(), method some() akan mengembalikan nilai true
jika salah satu elemen sesuai kriteria dan mengembalikan nilai false jika
tidak ada satupun elemen yang sesuai dengan kriteria.
3.4.7 Reduce and ReduceRight
Merupakan method yang dapat digunakan untuk mengembalikan nilai
tunggal. Kita dapat melakuakn berbagai macam operasi dengan method ini
untuk mendapatkan suatu hasil. Method reduce membaca elemennya dari kiri
ke kanan sedangkan method reduceRight membaca elemennya dari kanan ke
kiri. Method ini memerlukan callback function dengan empat parameter.
Parameter Keterangan
Total Merupakan hasil akhir dari iterasi sebelumnya
value Merupakan elemen iterasi/ elemen sekarang

index Merupakan nomor index dari iterasi

 array Array itu sendiri

4. Synchronous & Asynchronous

Synchronous merupakan suatu program yang berjalan secara berurutan dari atas ke
bawah (sequential) berdasarkan antrian program dieksekusi. Pada dasarnya semua
bahasa pemrograman secara default berjalan secara synchronous. Namun ada
beberapa bahasa pemrograman yang uga mendukun proses eksekusi program secara
asynchronous. Asynchronous sendiri merupakan proses ekseskusi program yang tidak
perlu menunggu antrian program lain untuk selesai. Jadi proses asynchronous
merupakan proses yang dapat berjalan bersamaan dengan program yang lain.
5. Promise
Promise merupakan fitur pada javascript ES6. Promise merupakan salah satu
penyelesain dari berbagai kesalahan yang terjadi pada operasi asynchronous. Fitur ini
 dinamakan promise/ janji karena Ketika fungsi promise dijalankan kita tidak langsung
mendapatkan output namun terdapat tiga state/ keadaan.
- Pending: Promise sedang dalam proses dijalankan
- Fulfiled/ Resolved: Promise sudah berhasil diselesaikan/ sukses
- Rejected: Promise gagal diselesaikan

6. Fetch API
Fetch meruapakan salah satu fitur javascritp ES6. Fetch merupakan fitur yang dapat
digunakan untuk melakukan request ke API. Pada dasarnay Fetch API memiliki
bebrapa perintah.
- GET: Mengambil data dari API
- POST: mengirimkan data ke API (menambahkan data)
- PUT: mengirimkan data ke API (mengubah data)
- DELETE: menghapus data dari API

Contoh Fetch API untuk method GET:

Contoh Fetch API untuk method POST: