JavaScript Dasar

Eko Kurniawan Khannedy

Eko Kurniawan Khannedy

- Technical architect at one of the biggest

ecommerce company in Indonesia
- 10+ years experiences
- www.programmerzamannow.com
- youtube.com/c/ProgrammerZamanNow
Eko Kurniawan Khannedy
● Telegram : @khannedy
● Facebook : fb.com/ProgrammerZamanNow
● Instagram : instagram.com/programmerzamannow
● Youtube : youtube.com/c/ProgrammerZamanNow
● Telegram Channel : t.me/ProgrammerZamanNow
● Email : [email protected]
Sebelum Belajar
● HTML
● CSS
Agenda
● Pengenalan JavaScript
● Tipe Data
● Variable
● Percabangan
● Perulangan
● Function
● Dan lain-lain
Pengenalan JavaScript
Sejarah JavaScript
● JavaScript atau sering disingkat JS, pertama kali dibuat tahun 1995. Programmer di Netscape
bernama Brandan Eich membuat sebuah bahasa pemrograman scripting untuk berjalan di
Netscape Navigator Browser.
● Awalnya namanya adalah Mocha, lalu berubah menjadi LiveScript, dan akhirnya menjadi
JavaScript.
● JavaScript dibuat agar halaman website yang sudah kita buat menggunakan HTML dan CSS bisa
lebih interaktif
● JavaScript sekarang sudah mengalahkan Java Applet dan Flash sebagai bahasa pemrograman
untuk membuat halaman web menjadi lebih interaktif, hal ini dikarenakan kemudahan bahasa nya
dan juga secara default sekarang semua browser sudah bisa menjalankan JavaScript tanpa harus
menginstall aplikasi tambahan seperti Java Applet dan Adobe Flash Player
JavaScript di Server
● Awalnya JavaScript memang kebanyakan di gunakan untuk berjalan di client side (Browser)
● Namun akhir-akhir ini, semenjak keluar teknologi NodeJS yang bisa digunakan untuk menjalankan
JavaScript tanpa browser, sekarang akhirnya JavaScript juga banyak digunakan untuk membuat
aplikasi di Server
● Karena ini, akhirnya sekarang JavaScript dikenal dengan bahasa pemrograman FullStack (Backend
dan Frontend) karena bisa digunakan untuk membuat aplikasi Backend dan aplikasi Frontend
JavaScript dan ECMAScript
● Karena JavaScript sekarang hampir di adopsi oleh sebua aplikasi browser, akhirnya dibuatlah
sebuah standarisasi yang bernama ECMAScript
● Organisasi yang melakukan standarisasi ECMAScript adalah ECMA International
● Sekarang dengan adanya standarisasi, kita bisa pastikan bahwa kode program JavaScript kita bisa
jalan di semua browser, karena browser yang ingin mendukung JavaScript, harus mengikuti
standarisasi ECMAScript
● Sekarang karena ECMAScript dan JavaScript sama, sekarang bisa dibilang ECMAScript dan
JavaScript adalah dua nama untuk satu bahasa pemrograman yang sama
● https://www.ecma-international.org/
JavaScript vs Java
● Pemula programmer sering salah tentang JavaScript dan Java. Ada yang mengira bahwa Java dan
JavaScript adalah bahasa pemrograman yang sama, padahal itu berbeda.
● Java adalah bahasa pemrograman lain, tidak ada hubungannya dengan JavaScript
● Walaupun namanya ada kata “Java” nya, tapi dua bahasa pemrograman ini benar-benar berbeda,
tidak ada hubungannya sama sekali
● Jika tertarik untuk belajar bahasa pemrograman Java, silahkan belajar disini :
https://www.programmerzamannow.com/video-tutorial-java/
Peralatan Development
● Saat kita belajar JavaScript, kita perlu menyiapkan beberapa perangkat lunak untuk membantu
development
● Browser, ini sudah pasti, karena kita perlu menjalankan kode program JavaScript menggunakan
Browser
● Text Editor atau Integrated Development Environment, ini digunakan untuk membuat kode
program JavaScript
Browser
● Google Chrome : https://www.google.com/chrome/
● Firefox : https://www.mozilla.org/firefox/
● Microsoft Edge : https://www.microsoft.com/edge
● Safari : https://www.apple.com/safari/
● Opera : https://www.opera.com/
Text Editor atau IDE
● Visual Studio Code : http://code.visualstudiocode.com/
● Atom : https://atom.io/
● Sublime : https://www.sublimetext.com/
● WebStorm : https://www.jetbrains.com/webstorm/
● Nodepad++ : https://notepad-plus-plus.org/
● Textmate : https://macromates.com/
● GNU Emacs : https://www.gnu.org/software/emacs/
● GEdit : https://wiki.gnome.org/Apps/Gedit
Program Hello World
Membuat Kode JavaScript
● Ada beberapa cara untuk membuat kode JavaScript
● Bisa langsung di file HTML
● Atau bisa menggunakan file .js (ekstensi untuk JavaScript), lalu di include di dalam file HTML
● Pada praktek course ini kita akan menggunakan HTML langsung agar mudah membuat kode
program nya
Script JavaScript
Include Script JavaScript
Titik Koma
● JavaScript mirip seperti bahasa pemrograman C/C++, dimana di akhir tiap statement kode
program, kita perlu menambahkan ; (titik koma)
● Namun, di JavaScript tanda ; (titik koma) tidak wajib, jadi kita bisa menambahkan ataupun tidak.
● Sangat disarankan konsisten, jika ingin menggunakan titik koma, gunakan disemua tempat, jika
tidak, jangan gunakan di semua tempat
● Saya sendiri lebih merekomendasikan menggunakan titik koma
Komentar
Komentar
● Komentar adalah kode program yang tidak akan dieksekusi ketika dibaca
● Komentar biasanya digunakan sebagai informasi tambahan atau petunjuk
● Di JavaScript, kita bisa menambahkan kode komentar
Kode : Komentar
Tipe Data Number
Tipe Data Number
● JavaScript hanya mendukung satu tipe data number, dimana tipe data number di JavaScript bisa
berupa bilangan bulat atau bilangan desimal
● Tipe seperti di bahasa pemrograman lain yang biasanya membedakan tipe data number bilangan
bulat dan bilangan desimal, di JavaScript semuanya disatukan
Kode : Tipe Data Number
Number Notation
● JavaScript mendukung number notation, defaultnya ada basis 10, JavaScript juga mendukung
binary, hexadecimal dan octal
● Hexadecimal : 0xFF
● Binary : 0b10101
● Octal : 0o10
Tipe Data Boolean
Tipe Data Boolean
● Tipe data boolean adalah tipe data yang berisikan data kebenaran, artinya hanya ada dua data,
benar dan salah (yes atau no)
● Benar di representasikan dengan kata kunci true, dan salah direpresentasikan dengan kata kunci
false
● Walaupun tipe data boolean merupakan tipe data yang sangat sederhana, tapi tipe data boolean
akan banyak digunakan di berbagai fitur pemrograman
Kode : Tipe Data Boolean
Tipe Data String
Tipe Data String
● Tipe data string atau text adalah tipe data yang berisikan kumpulan kosong atau lebih karakter
● Sebelumnya kita sudah pernah menggunakan string ketika membuat program hello world.
● Di JavaScript, untuk membuat data dengan tipe string, kita perlu menggunakan “ (petik dua) atau ‘
(petik satu) sebelum dan setelah isi text nya
Kode : Tipe Data String
Menambah String
● Data string bisa digabung menggunakan operator + (plus)
Kode : Menambah String
Escape Sequence
● JavaScript mendukung escape sequence di string. Escape sequence merupakan karakter khusus,
seperti ENTER, TAB, " (kutip dua), dan lain-lain. Berikut contoh escape sequence yang didukung
oleh JavaScript di data string

\n ENTER

\t TAB

\‟ „

\” “

\\ \
Kode : Escape Sequence
Variable
Kode : Tanpa Variable
Variable
● Variable adalah tempat untuk menyimpan data
● Dengan menyimpan data di variable, kita bisa menggunakannya lagi dengan menyebutkan nama
variable nya
● Untuk membuat variable di JavaScript, kita bisa menggunakan kata kunci var diikuti dengan nama
variable nya
● JavaScript adalah dynamic language, artinya variable di JavaScript tidak terpaku harus
menggunakan satu tipe data, kita bisa mengubah-ubah tipe data di variable yang sama
Kode : Variable
Mengubah Value di Variable
● Setelah variable di deklarasikan, kita bisa mengubah value atau nilai di dalam variable tersebut
● Untuk mengubahnya, kita bisa menggunakan perintah nama variable diikuti dengan tanda = (sama
dengan) lalu diikuti dengan value atau nilai nya
Kode : Mengubah Value di Variable
Membuat Variable Langsung Dengan Value
● Di JavaScript juga kita bisa mendeklarasikan sebuah variable, langsung dengan isi value nya
● Caranya kita bisa menggunakan kata kunci var, diikuti nama variable, lalu diikuti dengan tanda =
(sama dengan), dan di ikuti dengan value atau nilai nya
Kode : Variable dan Value
Mengakses Variable
● Salah satu keuntungan menggunakan variable adalah variable bisa digunakan kembali
● Hal ini akan mempermudah ketika membutuhkan data yang sama berkali-kali
● Untuk mengakses variable, kita cukup menyebutkan nama variable nya
Kode : Mengakses Variable
Kata Kunci let dan const
● Sebelum tahun 2015, kata kunci untuk membuat variable hanya bisa menggunakan kata kunci var
● Namun tahun 2015 sejak versi ECMAScript 2015, diperkenalkan kata kunci baru untuk membuat
variable, let dan const
● JavaScript sekarang tidak direkomendasikan lagi menggunakan kata kunci var untuk membuat
variable, namun diganti dengan let, hal ini dikarenakan ada masalah dari desain awal var (akan kita
bahas di chapter tersendiri)
Kode : Variable let
Kata Kunci const
● Kata kunci let itu seperti kata kunci var, dimana data di variable tersebut bisa diubah-ubah sesuka
kita
● Sedangkan kata kunci const berbeda, ketika sebuah variable sudah diisi di variable const, maka
variable tersebut tidak bisa diubah lagi value nya
● Variable sejenis ini kadang dibilang juga constant
Kode : Variable const
Operator Matematika
Operator Matematika
● JavaScript mendukung banyak sekali operator Matematika untuk tipe data Number, seperti :
● Operator Aritmatika
● Operator Augmented Assignments
● Operator Unary
● Dan lain-lain
Operator Aritmatika
Operator Keterangan

+ Pertambahan

- Pengurangan

* Perkalian

** Exponensial

/ Pembagian

% Sisa Bagi
Kode : Operator Aritmatika
Operator Augmented Assignments
Operator Matematika Operator Augmented Assigments

result = result + 10 result += 10

result = result - 10 result -= 10

result = result * 10 result *= 10

result = result ** 10 result **= 10

result = result / 10 result /= 10

result = result % 10 result %= 10

Kode : Operator Augmented Assigments
Operator Unary

Operator Keterangan

+ Menandakan nilai positif

- Menandakan nilai negatif

++ Increment, menaikkan 1 angka

-- Decrement, menurunkan 1 angka

Kode : Operator Unary
Operator Perbandingan
Operasi Perbandingan
● Operasi perbandingan adalah operasi untuk membandingkan dua buah data
● Operasi perbandingan adalah operasi yang menghasilkan nilai boolean (benar atau salah)
● Jika hasil operasinya adalah benar, maka nilainya adalah true
● Jika hasil operasinya adalah salah, maka nilainya adalah false
Operator Perbandingan
Operator Keterangan

> Lebih Dari

< Kurang Dari

>= Lebih Dari Sama Dengan

<= Kurang Dari Sama Dengan

== Sama Dengan

=== Sama Dengan dan Sama Tipe

!= Tidak Sama Dengan

!== Tidak Sama Dengan atau Tidak Sama Tipe

Kode : Operasi Perbandingan
Operator Logika
Operator Logika
● Operator logika adalah operator untuk dua buah data boolean
● Hasil dari operator logika adalah boolean lagi
Operator Logika
Operator Keterangan

&& Dan

|| Atau

! Kebalikan
Operator &&
Nilai 1 Operator Nilai 2 Hasil

true && true true

true && false false

false && true false

false && false false

Operator ||
Nilai 1 Operator Nilai 2 Hasil

true || true true

true || false true

false || true true

false || false false

Operator Unary !
Operator Nilai 2 Hasil

! true false

! false true
Kode : Operator Logika
Console
Console
● JavaScript memiliki fitur untuk melakukan logging bernama Console
● Logging adalah mekanisme yang biasa dilakukan oleh programmer untuk menampilkan informasi
dari aplikasi yang sedang berjalan, tanpa harus mengganggu alur kerja aplikasi dan juga interaksi
user
● Untuk melakukan ini, kita bisa menggunakan fitur Console di JavaScript
● Untuk menggunakan Console, kita cukup gunakan perintah console di kode JavaScript
Console Method

Console Method Keterangan

console.info(...) Memberitahu informasi

console.warn(...) Memberitahu informasi peringatan

console.error(...) Memberitahu informasi error

console.table(...) Memberitahu informasi dalam bentuk table

Kode : Console
Inspect Element di Google Chrome
String Template
String Template
● Kita sudah tahu bahwa untuk menambahkan string dengan data lain, kita bisa menggunakan
operator + (plus)
● Namun pada kasus tertentu, penggunaan operator + (plus) sangat menyulitkan, apalagi jika dalam
jumlah banyak
● JavaScript memiliki fitur yang bernama String Template, dimana kita bisa mensubtitusi data dari
luar String ke dalam String, seperti mengambil data variable, atau bahkan melakukan operasi
matematika
● Untuk menggunakan String Template, cara pembuatan String nya harus menggunakan ` (backtick),
bukan ‘ (petik satu) atau “ (petik dua)
Kode : String Template
Kode : Mengambil Variable
Kode : Expression di String Template
Multiline String
● String template juga bisa digunakan untuk membuat string multi line
● Kita cukup tambahkan enter di text nya
Kode : Multiline String
Konversi String dan Number
Konversi String dan Number
● Saat membuat aplikasi, kadang kita input dari pengguna selalu dalam bentuk String
● Sedangkan kita ingin mengelola datanya dalam bentuk Number
● Maka sangat disarankan untuk melakukan konversi tipe data
Kode : Masalah Tanpa Konversi
Melakukan Konversi String dan Number
Function Keterangan

parseInt(string) Mengkonversi dari string ke number

(bilangan bulat)

parseFloat(string) Mengkonversi dari string ke number

(bilangan pecahan)

Number(string) Mengkonversi dari string ke number

(bilangan bulat atau pecahan)

number.toString() Mengkonversi dari number ke String

Kode : Konversi String ke Number
NaN
● Bagaimana jika ternyata data string yang kita coba konversi ke number bukanlah data yang valid?
● Jika data string yang kita coba lakukan konversi bukan lah data valid, maka hasil dari konversi
tersebut adalah NaN (Not a Number)
● NaN adalah number spesial yang menyebutkan bahwa ini bukanlah number
● Jika NaN dioperasikan dengan data number lainnya, maka hasilnya akan menjadi NaN lagi
Kode : NaN
Kode : Operasi Pada NaN
isNaN() Function
● Kadang kita ingin mengecek apakah sebuah number itu NaN atau bukan
● Untuk melakukan pengecekan tersebut, kita bisa menggunakan function isNaN(number)
● Hasil nya adalah berupa data boolean, true jika NaN, false jika bukan
Tipe Data Array
Tipe Data Array
● Array adalah tipe data yang berisikan kumpulan data
● Array di JavaScript memiliki sifat dinamis, artinya datanya bisa bertambah dengan sendirinya saat
kita memasukkan data ke dalam Array
Diagram Array
Kode : Membuat Array
Cara Kerja Array
● Setiap data di Array akan disimpan dalam posisi berurutan, dimana urutan pertama dimulai dari
nomor 0
● Setiap kita menambah data ke Array, otomatis data akan disimpan di urutan terakhir
● Urutan di Array, kita sebut dengan index
Cara Kerja Array
Kode : Menambah Array
Operasi di Array

Operasi Keterangan

array.push(value) Menambah data ke Array

array.length Untuk mendapatkan panjang Array

array[index] Mendapat data di posisi index

array[index] = value Mengubah data di posisi index

delete array[index] Menghapus data di posisi index, namun

index tidak bergeser
Kode : Operasi di Array
Perlu Diingat
● Data di dalam Array tidak ada batasannya harus data apa
● Jadi kita bisa memasukkan data apapun ke dalam Array
● Bahkan kita juga bisa memasukkan Array ke dalam Array jika kita mau
Tipe Data Object
Associative Array
● Di bahasa pemrograman lain seperti PHP, kita bisa menggunakan index beruba tipe data lain selain
number, misal string
● Fitur ini biasanya disebut associative array atau hash
● Di JavaScript associative array tidak didukung.
● Jika kita memaksa memasukkan data bukan number di index Array, maka JavaScript akan
merubah tipe data Array tersebut menjadi object, dan ini bisa berbahaya, karena beberapa operasi
di array mungkin bisa berubah hasilnya
Tipe Data Object
● Tipe data object adalah tipe data yang mirip dengan tipe data Array
● Yang membedakan adalah index pada tipe data object bisa menggunakan string
● Index di object biasanya disebut attributes atau properties, bukan index
Kode : Membuat Object Kosong
Kode : Mengubah Property di Object
Kode : Membuat Object dengan Properties
Kode : Mengakses Property Object
If Expression
If Expression
● Dalam JavaScript, if adalah salah satu kata kunci yang digunakan untuk percabangan
● Percabangan artinya kita bisa mengeksekusi kode program tertentu ketika suatu kondisi
terpenuhi
● Hampir di semua bahasa pemrograman mendukung if expression
Kode : If Expression
Else Expression
● Blok if akan dieksekusi ketika kondisi if bernilai true
● Kadang kita ingin melakukan eksekusi program tertentu jika kondisi if bernilai false
● Hal ini bisa dilakukan menggunakan else expression
Kode : Else Expression
Else If Expression
● Kadang dalam If, kita butuh membuat beberapa kondisi
● Kasus seperti ini, di JavaScript kita bisa menggunakan Else If expression
Kode : Else If Expression
Popup
Alert, Prompt dan Confirm
● JavaScript memiliki fitur yang bernama alert, prompt dan confirm
● Alert digunakan untuk memberi peringatan berupa popup text di browser
● Prompt digunakan untuk meminta input string dari pengguna browser dalam bentuk popup input
text
● Sedangkan confirm digunakan untuk meminta input boolean dari pengguna browser dalam bentuk
popup input pilihan
Kode : Alert
Hasil Alert
Kode : Prompt
Hasil Prompt
Kode : Confirm
Hasil Confirm
Undefined
undefined
● undefined adalah sebuah kata kunci di JavaScript
● undefined adalah sebuah tipe data
● Sebuah variable yang belum ditambahkan nilai, maka artinya variable tersebut merupakan tipe
undefined
● Kadang untuk programmer JavaScript pemula undefined ini memang agak sedikit membingungkan
● undefined itu berbeda dengan null di bahasa pemrograman lain
Kode : Undefined Variable
Kode : Undefined Array Value
Kode : Undefined Object Property
Null
Null
● null merupakan representasi data kosong
● null berbeda dengan undefined, null berarti variable sudah ditambahkan value nya, hanya saja
value nya null
● Sedangkan undefined adalah variable belum ditambahkan value apapun
Kode : Null dan Undefined
Switch Expression
Switch Statement
● Kadang kita hanya butuh menggunakan kondisi sederhana di if statement, seperti hanya
menggunakan perbandingan ==
● Switch adalah statement percabangan yang sama dengan if, namun lebih sederhana cara
pembuatannya
● Kondisi di switch statement hanya untuk perbandingan ==
Kode : Switch Statement
Operator typeof
Operator typeof
● typeof merupakan operator yang bisa kita gunakan untuk melihat tipe data sebuah value atau
variable
● Karena JavaScript merupakan dynamic langauge, jadi kadang kita perlu mengecek tipe data
sebuah value atau variable menggunakan operator typeof
● Hasil dari operator typeof adalah string tipe datanya
Type Hasil Operator typeof

Undefined “undefined”

Null “object”

Boolean “boolean”

Number “number”

BitInt “bigint”

String “string”

Symbol “symbol”

Function “function”

Lainnya “object”
Kode : Operator typeof
In Operator
In Operator
● In operator adalah operator yang bisa dilakukan untuk mengecek apakah sebuah property ada di
dalam object atau tidak
● Jika property tersebut ada di object, maka hasilnya true, sedangkan jika tidak, maka hasilnya false
● Tidak hanya di object, In juga bisa digunakan untuk mengecek index di Array
Kode : In Operator
Peringatan
● In operator hanya akan mengecek apakah sebuah property atau index ada atau tidak
● Jadi walaupun nilai property atau index nya undefined atau null, maka tetap akan dianggap ada
Kode : In Operator Undefined/Null Property
Ternary Operator
Ternary Operator
● Ternary operator adalah operator sederhana dari if statement
● Ternary operator terdiri dari kondisi yang dievaluasi, jika menghasilkan true maka nilai pertama
diambil, jika false, maka nilai kedua diambil
Kode : Tanpa Ternary Operator
Kode : Dengan Ternary Operator
Nullish Coalescing Operator
Nullish Coalescing Operator
● Nullist value adalah null dan undefined
● Nullist coalescing operator (??) adalah operator mirip dengan ternary operator, yang membedakan
adalah pada kondisi, jika bernilai null atau undefined, baru value default nya diambil
Kode : Tanpa Nullish Coalescing Operator
Kode : Nullish Coalescing Operator
Optional Chaining
Optional Chaining
● Optional chaining operator (?) merupakan operator yang digunakan untuk mengamankan ketika
kita ingin mengakses property sebuah object dari data nullish
● Jika kita mencoba mengakses property dari sebuah object dari data nullish tanpa menggunakan
optional chaining operator, maka akan terjadi error
Kode : Error Mengakses Property Nullish
Error Mengakses Property Nullish
Kode : Pengecekan Menggunakan If
Kode : Menggunakan Optional Chaining
Falsy dan Truthy
Falsy
● Falsy atau kadang ditulis falsey, adalah value yang ketika dalam konteks boolean, dia dianggap
false
● Ini adalah salah satu fitur unik dari JavaScript, yang berguna, namun kadang juga sering
membingungkan
● Jadi di JavaScript, kondisi itu tidak hanya bisa boolean, tapi diluar boolean pun bisa, namun kita
harus tahu beberapa data falsy, atau dianggap false
Data Falsy
Data dianggap Falsy Keterangan

false Boolean false

0, -0 Number 0 dan -0 dianggap false

“”, „‟, `` Semua string kosong dianggap false

null null dianggap false

undefined undefined dianggap false

NaN Not a Number dianggap false

Truthy
● Truthy adalah kebalikan dari falsy, dimana data nya dianggap bernilai true
● Sederhana sekali sebenarnya untuk mengetahui sebuah data itu adalah truthy, yaitu data yang
bukan bernilai falsy
Kode : Falsy dan Truthy
Operator Logika di Non Boolean
Operator Logika di Non Boolean
● Sebelumnya kita sudah tahu bahwa operator logika AND (&&) dan OR (||) digunakan untuk dua
data boolean
● Namun berbeda di JavaScript, kita bisa menggunakan operator logika AND dan OR untuk tipe data
non boolean
Operator OR (||) di Non Boolean
● Operator logika OR (||), membaca dari kiri ke kanan.
● Operator ini akan mengambil nilai pertama yang truthy.
● Jika tidak ada satupun yang bernilai truthy, maka yang terakhir yang akan diambil
Kode : Operator OR (||)
Operator AND (&&) di Non Boolean
● Operator logika AND (||), membaca dari kiri ke kanan.
● Operator ini akan mengambil nilai pertama yang falsy.
● Jika tidak ada satupun yang bernilai falsy, maka yang terakhir yang akan diambil
Kode : Operator AND (&&)
For Loop
For Loop
● For adalah salah satu kata kunci yang bisa digunakan untuk melakukan perulangan
● Blok kode yang terdapat di dalam for akan selalu diulangi selama kondisi for terpenuhi
Sintak Perulangan For
for(init statement; kondisi; post statement){
// block perulangan
}

● Init statement akan dieksekusi hanya sekali di awal sebelum perulangan

● Kondisi akan dilakukan pengecekan dalam setiap perulangan, jika true perulangan akan dilakukan,
jika false perulangan akan berhenti
● Post statement akan dieksekusi setiap kali diakhir perulangan
● Init statement, Kondisi dan Post Statement tidak wajib diisi, jika Kondisi tidak diisi, berarti kondisi
selalu bernilai true
Kode : Perulangan Tanpa Henti
Kode : Perulangan Dengan Kondisi
Kode : Perulangan Dengan Init Statement
Kode : Perulangan Dengan Post Statement
While Loop
While Loop
● While loop adalah versi perulangan yang lebih sederhana dibanding for loop
● Di while loop, hanya terdapat kondisi perulangan, tanpa ada init statement dan post statement
Kode : While Loop
Do While Loop
Do While Loop
● Do While loop adalah perulangan yang mirip dengan while
● Perbedaannya hanya pada pengecekan kondisi
● Pengecekan kondisi di while loop dilakukan di awal sebelum perulangan dilakukan, sedangkan di
do while loop dilakukan setelah perulangan dilakukan
● Oleh karena itu dalam do while loop, minimal pasti sekali perulangan dilakukan walaupun kondisi
tidak bernilai true
Kode : Do While Loop
Break dan Continue
Break & Continue
● Pada switch statement, kita sudah mengenal kata kunci break, yaitu untuk menghentikan case
dalam switch
● Sama dengan pada perulangan, break juga digunakan untuk menghentikan seluruh perulangan.
● Namun berbeda dengan continue, continue digunakan untuk menghentikan perulangan saat ini,
lalu melanjutkan ke perulangan selanjutnya
Kode : Break
Kode : Continue
Label
Label
● Label merupakan penanda yang bisa digunakan dengan kata kunci break dan continue
● Secara default saat kita melakukan break atau continue, dia akan melakukan terhadap perulangan
dimana kode break dan continue itu digunakan
● Dengan menggunakan label, kita bisa melakukan break dan continue terhadap perulangan yang
kita inginkan, asalkan pada perulangannya kita gunakan label
● Untuk membuat label, kita bisa gunakan nama label lalu diikuti dengan : (titik dua)
Kode : Label
Kode : Continue atau Break di Label
For In
For In
● For In merupakan perulangan for yang digunakan untuk mengiterasi seluruh data property di
object atau index di array
● Walaupun for in bisa digunakan untuk Array, namun tidak direkomendasikan untuk Array, karena
biasanya kita jarang sekali butuh data index untuk Array, kita bisa menggunakan For Of (yang
dibahas setelah ini)
Kode : For In di Object
Kode : For In di Array
For Of
For Of
● Jika For In digunakan untuk melakukan iterasi property atau index, berbeda dengan For Of, ini
digunakan untuk melakukan iterasi terhadap isi value dari iterable object, seperti Array, String dan
lain-lain
● For of tidak bisa digunakan untuk melakukan iterasi data di object, karena object bukanlah
iterable.
Kode : For Of di Array
Kode : For Of di String
With Statement
With Statement
● With statement merupakan fitur yang digunakan untuk menurunkan sebuah scope data
● Dengan menggunakan with statement, kita bisa mengakses property dalam sebuah data tanpa
harus menyebut datanya
Kode : Tanpa With Statement
Kode : Dengan With Statement
With Statement Tidak Direkomendasikan
● Walaupun fitur with statement ini sangat menarik
● Namun kebanyakan orang tidak merekomendasikan penggunaan with statement
● Hal ini dikarenakan with statement kadang membuat sebuah kode menjadi ambigu
Kode : Ambigu di With Statement
Function
Function
● Function adalah blok kode program yang akan berjalan saat kita panggil
● Sebelumnya kita sudah menggunakan function writeln() untuk menampilkan tulisan di html
● Untuk membuat function, kita bisa menggunakan kata kunci function, lalu diikuti dengan nama
function, kurung () dan diakhiri dengan block kurung {}
● Kita bisa memanggil function dengan menggunakan nama function lalu diikuti dengan kurung ()
● Di bahasa pemrograman lain, function juga disebut dengan method
Kode : Function
Function Parameter
Function Parameter
● Kita bisa mengirim informasi ke function yang ingin kita panggil
● Untuk melakukan hal tersebut, kita perlu menambahkan parameter atau argument di function
yang sudah kita buat
● Parameter ditempatkan di dalam kurung () di deklarasi method
● Parameter bisa lebih dari satu, jika lebih dari satu, harus dipisah menggunakan tanda koma
Kode : Function Parameter
Function Return Value
Function Return Value
● Secara default, function itu tidak menghasilkan value apapun, namun jika kita ingin, kita bisa
membuat sebuah function mengembalikan value
● Agar function bisa menghasilkan value, kita bisa menggunakan kata kunci return di dalam function
nya.
● Dan di dalam block function, untuk menghasilkan nilai tersebut, kita harus menggunakan kata
kunci return, lalu diikuti dengan data yang ingin kita hasilkan.
● Function hanya bisa mengembalikan satu data, jika kita ingin mengembalikan beberapa data
sekaligus, kita bisa menggunakan Array sebagai return value nya
Kode : Function Return Value
Kode : Function Return Value Lebih Dari Satu
Menghentikan Eksekusi dengan Return
● Saat kita menggunakan kata kunci return, maka kode setelah return tersebut tidak akan dieksekusi
● Kita bisa menggunakan return untuk menghentikan eksekusi sebuah function
Kode : Menghentikan Eksekusi dengan Return
Optional Parameter
Optional Parameter
● Secara default, parameter di function itu optional
● Artinya kita tidak wajib mengisi value nya ketika memanggil function
● Jika tidak ada value yang kita kirim ke parameter ketika memanggil function, maka secara otomatis
parameter tersebut bernilai undefined
Kode : Optional Parameter
Default Parameter
Default Parameter
● Sekarang kita tahu bahwa parameter itu optional, artinya kita bisa tidak memberi value terhadap
parameter
● Parameter juga bisa kita beri default value, artinya jika ketika kita tidak mengirim data ke
parameter atau kita mengirim data undefined, maka secara otomatis parameter akan diisi oleh
default value
Kode : Default Parameter
Rest Parameter
Rest Parameter
● Rest Parameter adalah fitur dimana kita bisa mengirim data sebanyak-banyak nya pada satu
parameter, dan secara otomatis akan di konversi menjadi Array
● Untuk membuat rest parameter, ada ketentuannya
● Rest parameter hanya boleh ada satu di function, tidak boleh lebih dari satu
● Rest parameter hanya boleh berada di posisi paling akhir, tidak boleh di depan atau di tengah,
kecuali memang cuma ada 1 parameter
● Di bahasa pemrograman lain, ada juga yang bilang ini adalah variable argument
Kode : Rest Parameter
Spread Syntax
● Kadang kita terlanjur memiliki data berupa Array
● Tapi untungnya kita juga bisa mengirim Array ke Rest Parameter
● Kita bisa gunakan … (titik tiga kali) diikuti dengan array nya ketika memanggil function
● Fitur ini dinamakan Spread Syntax
Kode : Spread Syntax di Rest Parameter
Arguments Object
● Sebelum ada fitur rest parameter, di JavaScript sudah ada fitur yang bernama arguments object
● Ini adalah fitur dimana kita bisa mengambil semua parameter dalam bentuk array dengan
menggunakan object bernama arguments
● arguments secara otomatis bisa digunakan di function
● Namun perlu diingat, bahwa untuk JavaScript saat ini, lebih baik disarankan menggunakan rest
parameter dibanding arguments object
Kode : Arguments Object
Function Sebagai Value
Function Sebagai Value
● Function tidak hanya bisa digunakan sebagai kode program yang dieksekusi, tapi bisa juga sebagai
value
● Artinya, function bisa disimpan di variable, bisa juga dikirim melalui parameter ke function lainnya
Kode : Function di Variable
Kode : Function di Parameter
Anonymous Function
Anonymous Function
● Sebelumnya kita selalu membuat function dengan nama
● Kita juga bisa membuat function tanpa nama function, atau istilahnya adalah anonymous function
● Kita bisa buat anonymous function dalam sebuah variable atau bisa juga kita buat ketika mengisi
parameter
Kode : Anonymous Function di Variable
Kode : Anonymous Function di Parameter
Function dalam Function
Function dalam Function
● Tidak ada batasan dimana kita bisa membuat function
● Termasuk jika kita ingin membuat function di dalam sebuah function, kita bisa melakukannya
● Function yang terdapat di dalam, kita sebut inner function
● Inner function hanya bisa diakses di tempat kita membuat function nya, tidak bisa diakses dari luar
function nya
Kode : Function dalam Function
Scope
Scope
● Scope merupakan area akses sebuah data
● Ada dua jenis scope, global scope dan local scope.
● Setiap kita membuat function, maka kita akan membuat local scope untuk function tersebut
● Data di global scope bisa diakses dari local scope, namun data di local scope hanya bisa di akses di
local scope tersebut atau di scope local dibawahnya (dalam kasus function dalam function)
Kode : Global Scope
Kode : Local Scope
Kode : Nested Function Scope
Recursive Function
Recursive Function
● Recursive function adalah kemampuan function memanggil function dirinya sendiri
● Kadang memang ada banyak problem, yang lebih mudah diselesaikan menggunakan recursive
function, seperti contohnya kasus factorial
Kode : Factorial Loop
Kode : Factorial Recursive
Function Generator
Function Generator
● Function generator adalah function yang digunakan untuk membuat data generator
● Generator adalah data yang bisa di interasi seperti Array
● Untuk membuat function generator, kita perlu menggunakan tanda * (bintang) setelah kata
function
● Dan untuk mengembalikan data di tiap iterasi, kita bisa gunakan kata kunci yield diikuti datanya
Kode : Function Generator Sederhana
Kode : Function Generator Kompleks
Lazy Evaluation
● Generator itu sifatnya lazy
● Jadi artinya jika kita tidak data belum kita ambil dari generator, maka yield selanjutnya tidak akan
di eksekusi
Kode : Lazy Generator
Arrow Function
Arrow Function
● Arrow function adalah alternatif pembuatan function yang lebih sederhana dari function biasanya
● Namun terdapat limitasi dan juga tidak bisa digunakan di semua situasi
● Dinamakan arrow function karena menggunakan tanda => (seperti panah)
● Berikut contoh beberapa kekurangan arrow function :
○ tidak memiliki fitur arguments object
○ tidak bisa menggunakan function generator
○ tidak bisa mengakses this (yang nanti akan dibahas di function di object)
○ tidak bisa mengakses super (yang nanti akan dibahas di JavaScript Object Oriented Programming)
Kode : Membuat Arrow Function
Arrow Function Tanpa Block
● Jika sebuah arrow function isinya sederhana, misal hanya satu baris
● Kita bisa membuat arrow function tanpa harus menggunakan block
Kode : Arrow Function Tanpa Block
Arrow Function Return Value
● Arrow function bisa mengembalikan value, sama seperti function biasanya
● Jika menggunakan block, maka kita perlu menggunakan kata kunci return
● Jika tidak menggunakan block, kita tidak perlu menggunakan kata kunci return
Kode : Arrow Function Return Value
Arrow Function Tanpa Kurung Parameter
● Jika parameter di arrow function hanya satu, kita bisa tidak menggunakan kurung pada parameter
Kode : Arrow Function Tanpa Kurung
Parameter
Kode : Arrow Function Sebagai Parameter
● Karena arrow function sama seperti anonymous function
● Jadi kita juga bisa menggunakan arrow function sebagai parameter di function lain
Kode : Arrow Function Sebagai Parameter
Closure
Closure
● Closure adalah kombinasi function dan bundel referensi ke data disekitarnya.
● Oke agak membingungkan memang, apalagi untuk yang baru pertama belajar
● Kita sudah tahu bahwa local scope tidak bisa diakses di luar scope nya
● Dengan kemampuan closure, kita bisa membuat sebuah function di local scope dan referensi ke
data di sekitar local scope tersebut, keluar scope nya
Kode : Closure
Object Method
Object Method
● Pada tipe data object, kita sudah membahas tentang property di object
● Karena sebenarnya function juga merupakan salah satu tipe data, jadi function pun sebenarnya
bisa ditambahkan sebagai property di object
● Cara pembuatannya pun sama dengan function sebagai value
● Function di object kadang disebut juga sebagai Object Method
Kode : Membuat Object dengan Method
Kode : Menambah Method ke Object
Kata Kunci this
Kata Kunci this
● Kata kunci this adalah referensi ke object milik siapa
● Tiap lokasi kata kunci this, bisa berbeda-beda referensi pemilik nya
● Dalam Object Method, this merupakan referensi ke object pemilik function nya
● Di global scope, this merupakan referensi ke global object (di browser biasanya Window)
● Dalam function, this merupakan referensi ke global object (di browser biasanya Window)
● Di function dengan strict mode (akan dibahas nanti), this adalah undefined
● Dalam event, this merupakan referensi ke element yang menerima event (dibahas di materi
Document Object Model)
Kode : this di Global Scope
Kode : this di Function
Kode : this di Object Method
Arrow Function di Object
Arrow Function di Object
● Sebelumnya kita sudah bahas tentang Arrow Function
● Arrow Function juga bisa kita gunakan di sebagai Object Method
● Namun perlu diketahui, Arrow Function tidak bisa digunakan untuk mengakses arguments object,
function generator, kata kunci this dan kata kunci super (dibahas di materi JavaScript Object
Oriented Programming)
● Jadi pastikan gunakan Arrow Function hanya memang ketika kita tidak butuh fitur-fitur diatas
Kode : Arrow Function di Object Method
Kode : this di Arrow Function Object
Getter dan Setter
Getter dan Setter
● Getter dan Setter adalah kemampuan membuat function yang berbeda untuk mengambil data
(Getter) dan mengubah data (Setter) pada sebuah property di Object
● Dengan menggunakan Getter dan Setter, kita bisa melakukan hal apapun dalam function sebelum
sebuah property di akses atau diubah, misal menambah validasi dan lain-lain
Kode : Getter
Kode : Setter
Masalah Variable var
Masalah Variable var
● Sebelumnya sudah dijelaskan bahwa penggunaan var sudah tidak direkomendasikan lagi, dan
diganti dengan let
● Pertanyaannya kenapa?
● Alasan var tidak direkomendasikan digunakan lagi adalah, karena var tidak memiliki block scope,
artinya dia tidak mengikat ke local scope yang sebelumnya sudah kita bahas
● Karena masalah ini, var bisa tidak terprediksi
● Kita akan buat contoh penggunaan var dan let
Kode : Menggunakan let
Kode : Menggunakan var
Destructuring
Destructuring
● Destructuring adalah fitur yang bisa digunakan untuk membongkar value-value di array atau
object ke dalam variable-variable
● Fitur ini sangat mempermudah kita ketika ingin mengambil data dari array atau object tanpa harus
melakukan pengambilan data satu persatu
Kode : Mengambil Data di Array
Kode : Destructuring Array
Kode : Mengambil Data di Object
Kode : Destructuring Object
Kode : Destructuring Nested Object
Destructuring Function Parameter
● Destructuring tidak hanya bisa dilakukan di variable, tapi juga bisa dilakukan di function
parameter
● Hal ini membuat kita mudah ketika ingin mengambil nested data dalam array atau object dalam
function
Kode : Destructuring di Function Parameter (1)
Kode : Destructuring di Function Parameter (2)
Default Value
● Yang paling menarik di destructuring adalah, kita bisa menambahkan default value
● Jadi misal kita kita melakukan destructuring terhadap array, ternyata tidak ada datanya, maka kita
bisa menambahkan default value
● Begitu juga pada object, jika ternyata property nya tidak ada, maka kita bisa menambahkan default
value
Kode : Default Value Destructuring Array
Kode : Default Value Destructuring Object
Menggunakan Nama Variable Lain
● Saat melakukan destructuring di Array, kita bisa dengan mudah membuat nama variable sesuka
kita
● Namun pada saat melakukan destructuring, kita harus membuat nama variable sama dengan nama
property
● Kita juga bisa menggunakan nama variable lain saat melakukan destructuring object jika kita mau
Kode : Menggunakan Nama Variable Lain
Strict Mode
Strict Mode
● Saat kita menjalankan kode program JavaScript, secara default kode program kita berjalan dalam
mode tidak strict, atau istilahnya sloppy mode
● Pada ECMAScript 5, diperkenalkan mode strict, dimana ketika strict mode dijalankan, maka akan
merubah beberapa cara kerja di JavaScript, seperti :
○ Merubah beberapa JavaScript error dari yang tadinya silent error, menjadi throw error (terlihat)
○ Memperbaiki beberapa kesalahan engine JavaScript untuk optimisasi
○ Menolak beberapa kode perintah yang kedepannya akan digunakan di ECMAScript
● https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode
Cara Menyalakan Strict Mode
● Untuk menyalakan strict mode, kita bisa menambahkan `use strict` pada baris awal file javascript
kita
● Atau bisa juga ditambahkan di awal function kita
Kode : Strict Mode
Debugger
Debugger
● Debugger digunakan untuk melakukan proses debugging
● Debugging adalah proses mencari bug (masalah) yang biasa terjadi di kode program kita
● Dengan debugger kita bisa menghentikan kode program di posisi yang kita inginkan (breakpoint),
lalu melihat semua isi variable yang ada pada saat kode program sedang berhenti
Kode : Debugger
Materi Selanjutnya
Materi Selanjutnya
● JavaScript Object Oriented Programming
● JavaScript Modules
● JavaScript Document Object Model
● JavaScript Async
● JavaScript Web API
JavaScript Object Oriented
Programming
Eko Kurniawan Khannedy
Eko Kurniawan Khannedy

- Technical architect at one of the biggest

ecommerce company in Indonesia
- 12+ years experiences
- www.programmerzamannow.com
- youtube.com/c/ProgrammerZamanNow
Eko Kurniawan Khannedy
● Telegram : @khannedy
● Linkedin : https://www.linkedin.com/company/programmer-zaman-now/
● Facebook : fb.com/ProgrammerZamanNow
● Instagram : instagram.com/programmerzamannow
● Youtube : youtube.com/c/ProgrammerZamanNow
● Telegram Channel : t.me/ProgrammerZamanNow
● Tiktok : https://tiktok.com/@programmerzamannow
● Email : [email protected]
Sebelum Belajar
● HTML
● CSS
● JavaScript Dasar
Agenda
● Pengenalan Object Oriented Programming
● Class
● Object
● Inheritance
● Iterable dan Iterators
● Standard JavaScript Classes
● Dan lain-lain
Pengenalan Object Oriented
Programming
Apa itu Object Oriented Programming?
● Object Oriented Programming adalah sudut pandang bahasa pemrograman yang berkonsep
“objek”
● Ada banyak sudut pandang bahasa pemrograman, namun OOP adalah yang sangat populer saat ini.
● Ada beberapa istilah yang perlu dimengerti dalam OOP, yaitu: Object dan Class
Apa itu Object?
● Object adalah data yang berisi field / properties / attributes dan method / function / behavior
Apa itu Class?
● Class adalah blueprint, prototype atau cetakan untuk membuat Object
● Class berisikan deklarasi semua properties dan functions yang dimiliki oleh Object
● Setiap Object selalu dibuat dari Class
● Dan sebuah Class bisa membuat Object tanpa batas
Class dan Object : Person
Class dan Object : Car
OOP di JavaScript
● JavaScript sendiri sebenarnya sejak awal dibuat sebagai bahasa prosedural, bukan bahasa
pemrograman berorientasi objek
● Oleh karena, implementasi OOP di JavaScript memang tidak sedetail bahasa pemrograman lain
yang memang dari awal merupakan bahasa pemrograman OOP seperti Java atau C++
Membuat Constructor Function
Membuat Object
● Sebenarnya kita sudah belajar tipe data object, dengan cara membuat variable dengan tipe data
object
● Namun pembuatan object menggunakan tipe data object, akan membuat object yang selalu unik,
sedangkan dalam OOP, biasanya kita akan membuat class sebagai cetakan, sehingga bisa membuat
object dengan karakteristik yang sama berkali, kali, tanpa harus mendeklarasikan object berkali-
kali seperti menggunakan tipe data object
Kode : Membuat Object dengan Object
Membuat Constructor Function
● Sebelum EcmaScript versi 6, pembuatan class, biasanya menggunakan function. Hal ini
dikarenakan sebenarnya JavaScript bukanlah bahasa pemrograman yang fokus ke OOP
● Untuk membuat class di JavaScript lama, kita bisa membuat function
● Function ini kita sebut dengan Constructor Function
Kode : Constructor Function
Membuat Object dari Constructor Function
● Setelah kita membuat class, jika kita ingin membuat object dari class tersebut, kita bisa
menggunakan kata kunci new, lalu diikuti dengan nama constructor function nya
Kode : Membuat Object
Property di Constructor Function
Property di Constructor Function
● Sebenarnya setelah kita membuat object, kita bisa dengan mudah menambahkan property ke
dalam object tersebut hanya dengan menggunakan nama variable nya, diikuti tanda titik dan nama
property
● Namun jika seperti itu, alhasil, constructor function yang sudah kita buat tidak terlalu berguna,
karena property nya hanya ada di object yang kita tambahkan property
● Untuk menambahkan property di dalam semua object yang dibuat dari constructor function, kita
bisa menggunakan kata kunci this lalu diikuti dengan nama property nya
Kode : Property di Constructor Function
Method di Constructor Function
Method di Constructor Function
● Sama seperti pada tipe data object biasanya, kita juga bisa menambahkan method di dalam
constructor function
● Jika kita tambahkan method di constructor function, secara otomatis object yang dibuat akan
memiliki method tersebut
Kode : Method di Constructor Function
Parameter di Constructor
Function
Parameter di Constructor Function
● Karena dalam JavaScript, class adalah berbentuk function, jadi secara default, function tersebut
bisa memiliki parameter
● Constructor function sama seperti function biasanya, bisa memiliki parameter, hal ini membuat
ketika kita membuat object, kita bisa mengirim langsung data lewat parameter di constructor
function tersebut
Kode : Parameter di Constructor Function
Constructor Inheritance
Constructor Inheritance
● Dalam constructor kita biasanya membuat property baik itu berisi value ataupun function
● Di dalam constructor, kita bisa memanggil constructor lain, dengan begitu kita bisa mewarisi
semua property yang dibuat di constructor lain tersebut
● Untuk memanggil constructor lain, kita bisa menggunakan NamaConstructor.call(this, parameter)
Kode : Constructor Inheritance
Prototype
Prototype
● JavaScript sebelumnya dikenal dengan pemrograman berbasis prototype
● Memang agak sedikit membingungkan, dan tidak dipungkiri, banyak sekali yang bingung dengan
konsep prototype di JavaScript
● Pada chapter ini, kita akan bahas tentang konsep prototype
Prototype Inheritance
● Saat kita membuat object dari constructor function, object tersebut disebut instance, semua
property (baik itu value atau method), akan berada di dalam instance object nya
● Setiap kita membuat sebuah constructor function, maka secara otomatis akan dibuatkan
prototype nya, misal ketika kita membuat constructor function Person, maka akan ada
Person.prototype
● Saat kita membuat sebuah object instance, secara otomatis object tersebut adalah turunan dari
Constructor.prototype nya
● Untuk mengakses prototype milih sebuah instance, kita bisa menggunakan __proto__
Kode : Object Instance
Console : Object Instance
Diagram
Prototype
Console : Object Instance Inheritance
Menambah Property ke Prototype
● Property mirip object, dimana kita bisa menambah property baik itu value ataupun method
● Saat kita menambah sebuah property ke Prototype, secara otomatis, semua object instance yang
turunan dari prototype tersebut akan memiliki property tersebut
Kode : Menambah Property ke Instance Object
Kode : Menambahkan Property ke Prototype
Cara Kerja Prototype Inheritance
● Bagaimana bisa property di prototype diakses dari object instance?
● Ketika kita mengakses property di object instance, pertama akan di cek apakah di object tersebut
terdapat property tersebut atau tidak, jika tidak, maka akan di cek di __proto__ (prototype) nya, jika
masih tidak ada, akan di cek lagi di __proto__ (prototype) yang lebih tinggi, begitu seterusnya,
sampai berakhir di Object Prototype
Console : Prototype Inheritance
Prototype Inheritance
Prototype Inheritance
● Sekarang kita sudah tahu, bahwa prototype selalu memiliki parent, artinya dia adalah turunan,
parent tertinggi adalah Object prototype
● Pertanyaannya bagaimana jika kita ingin melakukan inheritance ke Prototype lain?
● Hal ini juga bisa dilakukan, namun agak sedikit tricky, karena hal ini, sebenarnya untuk JavaScript
modern, tidak direkomendasikan lagi praktek OOP menggunakan Prototype, karena di ES6 sudah
dikenalkan kata kunci class yang akan nanti dibahas di chapter tersendiri
Kode : Prototype Inheritance Salah (1)
Kode : Prototype Inheritance Salah (2)
Diagram : Prototype Inheritance Salah
Kode : Prototype Inheritance Benar (1)
Kode : Prototype Inheritance Benar (1)
Diagram : Prototype Inheritance Benar
Kata Kunci Class
Membuat Class
● Sejak EcmaScript versi 6, diperkenalkan kata kunci baru, yaitu class, ini merupakan kata kunci yang
digunakan untuk membuat class di JavaScript
● Dengan kata kunci class, kita tidak perlu lagi menggunakan constructor function untuk membuat
class
Kode : Membuat Class
Constructor di Class
Constructor di Class
● Karena bentuk constructor function mirip dengan function, jadi kita bisa menambah parameter
pada constructor function, lantas bagaimana dengan class?
● Di class juga kita bisa menambah constructor, dimana dengan menggunakan constructor, kita juga
bisa menambah parameter saat pertama kali membuat object nya
● Untuk membuat constructor di class, kita bisa menggunakan kata kunci constructor
Kode : Constructor di Class
Property di Class
Property di Class
● Sama seperti pada constructor function, dalam class pun kita bisa menambahkan property
● Karena hasil akhirnya adalah sebuah object, jadi menambahkan property di class bisa juga
dilakukan di instance object nya
Kode : Property di Class
Method di Class
Method di Class
● Membuat method di class sebenarnya bisa dilakukan dengan cara seperti menambahkan method
di constructor function
● Namun, hal tersebut sebenarnya menambahkan method ke dalam instance object
● Khusus untuk method sebaiknya kita menambahkan ke prototype, bukan ke instance object
● Untung nya di class, ada cara mudah menambahkan method dan secara otomatis ditambahkan ke
prototype
Kode : Method di Class
Console : Method di Prototype
Class Inheritance
Class Inheritance
● Sebelumnya kita sudah tahu bahwa prototype mendukung pewarisan, walaupun agak sedikit tricky
cara pembuatannya
● Untungnya itu diperbaiki di ES6 dengan fitur class nya
● Sebuah class bisa melakukan pewarisan dari class lainnya dengan menggunakan kata kunci
extends
● Di JavaScript, class inheritance sama seperti prototype inheritance, hanya bisa memiliki satu
parent class
Kode : Class Inheritance (1)
Kode : Class Inheritance (2)
Console : Class Inheritance
Super Constructor
Super Constructor
● Class Inheritance sifatnya seperti Prototype Inheritance
● Bagaimana dengan Constructor Inheritance? Sebenarnya Constructor Inheritance hanyalah
melakukan eksekusi constructor lain dengan tujuan agar property di constructor lain bisa
ditambahkan ke instance object ini
● Dalam kasus ini, jika kita ingin mencapai hasil yang sama, kita bisa menggunakan kata kunci super
di dalam constructor
● Kata kunci super digunakan untuk memanggil constructor super class
● Jika di child class kita membuat constructor, maka kita wajib memanggil parent constructor,
walaupun di parent tidak ada constructor
Kode : Super Constructor (1)
Kode : Super Constructor (2)
Super Method
Super Method
● Selain digunakan untuk memanggil constructor milih parent class, kata kunci super juga bisa
digunakan untuk mengakses method parent class
● Caranya bisa menggunakan super titik nama function nya
● Dengan kata lain, super sebenarnya adalah reference ke parent prototype, mirip seperti __proto__
Kode : Super Method
Getter dan Setter di Class
Getter dan Setter di Class
● Class juga mendukung pembuatan getter dan setter
● Perlu diingat, getter dan setter ini akan berada di prototype, bukan di instance object
Kode : Getter dan Setter
Public Class Field
Class Field
● Biasanya, saat kita ingin menambahkan field (property yang berisi value), kita biasanya tambahkan
di constructor
● Namun, ada proposal di EcmaScript yang mengajukan pembuatan public class field ditempatkan
diluar constructor, selevel dengan penempatan method
● Proposal ini masih belum final, namun beberapa browser sudah mendukung nya
● https://github.com/tc39/proposal-class-fields
Public Class Field
● Dalam proposal tersebut juga disebutkan bahwa EcmaScript akan mendukung access modifier
public dan private
● Public artinya bisa diakses dari luar class, dan private hanya bisa diakses dari dalam class saja
● Private class field akan kita bahas di chapter selanjutnya
● Untuk membuat public class field, kita bisa langsung buat nama field dengan value nya selevel
dengan method
● Jika kita tidak memasukkan value ke dalam field tersebut, artinya field tersebut memiliki value
undefined
Kode : Public Class Field
Kode : Public Class Field dan Constructor
Private Class Field
Private Class Field
● Secara default, saat kita menambahkan field, maka field tersebut bisa diakses dari manapun
● Jika kita ingin membuat field yang bersifat private (hanya bisa diakses di dalam class), kita bisa
menggunakan tanda # sebelum nama field nya
● Ini dinamakan private class field, dan hanya bisa diakses dari dalam class saja
Kode : Private Class Field
Private Method
Private Method
● Sama seperti field, terdapat proposal juga untuk menambah fitur private method di EcmaScript
● Dengan demikian, access modifier private juga bisa digunakan di method
● Caranya sama, dengan menambahkan tanda # diawal method, maka secara otomatis method
tersebut adalah private
● Ingat fitur ini masih dalam tahapan, belum benar-benar menjadi standard EcmaScript, jadi mungkin
tidak semua browser mendukung fitur ini
● https://github.com/tc39/proposal-private-methods
Kode : Private Method
Operator instanceof
Operator instanceof
● Kadang ada kasus kita ingin mengecek apakah sebuah object merupakan instance dari class
tertentu atau bukan
● Kita tidak bisa menggunakan operator typeof, karena object dari class, jika kita gunakan operator
typeof, hasilnya adalah “object”
● Operator instanceof akan menghasilkan boolean, true jika benar object tersebut adalah instance
object nya, atau false jika bukan
Kode : Operator instanceof
Operator instanceof di Class Inheritance
● Operator instanceof mendukung class inheritance, artinya instanceof juga bisa digunakan untuk
mengecek, apakah sebuah object adalah instance dari class tertentu, atau turunan dari class
tertentu?
Kode : Operator instanceof di Inheritance
Static Class Field
Kata Kunci static
● static adalah kata kunci yang bisa kita tambahkan sebelum field atau method, biasannya ketika kita
membuat field atau method, maka secara otomatis field akan menjadi property di instance object,
dan method akan menjadi function di prototype
● Jika kita tambahkan static, maka hal itu tidak terjadi
Static Class Field
● Jika kita tambahkan static dalam class field, secara otomatis field tersebut bukan lagi milik
instance object, melainkan milik class nya itu sendiri
● Biasanya static digunakan jika kita ingin membuat utility field atau function
● Cara mengakses static class field pun tidak lagi lewat object, melainkan lewat class nya
● Static class field bisa diartikan sifatnya global, tidak peduli diakses dimana atau siapa yang
mengakses, hasilnya akan sama
Kode : Static Class Field
Kode : Mengakses Static Class Field
Static Method
Static Method
● Kata kunci static juga tidak hanya bisa ditambahkan di field, tapi juga di method
● Jika kita tambahkan di method, artinya method tersebut jadi milik class nya, bukan prototype
● Dan untuk mengakses method tersebut, kita juga bisa lakukan seperti mengakses static class field
Kode : Static Method
Error
Error

● Saat membuat aplikasi, sudah tentu kita tidak akan terhindar dari yang namanya error
● Di JavaScript, Error merupakan sesuatu yang sudah standar
● Banyak sekali class error di JavaScript, namun semua class error di JavaScript selalu berujung di
class Error, artinya class Error adalah superclass untuk semua jenis error di JavaScript
● Contoh class error yang terdapat di JavaScript contohnya SyntaxError, TypeError, EvalError, dan
lain-lain
● https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Error#error_types
Throw Error

● Saat kita membuat instance object dari class Error, tidak lantas otomatis terjadi error
● Kita perlu memberitahu program kita, bahwa kita akan mentrigger sebuah error terjadi, atau
istilahnya adalah melempar error (throw error)
● Untuk melempar error, kita bisa gunakan kata kunci throw, diikuti dengan instance object error
nya
● Jika terjadi error, maka otomatis kode program kita akan terhenti, dan kita bisa melihat detail
errornya di console di aplikasi browser kita
Kode : Throw Error
Console : Throw Error
Error Handling
Error Handling

● Saat terjadi error di kode program JavaScript, kadang kita tidak ingin program kita berhenti
● Di JavaScript, kita bisa menangkap jika terjadi error
● Kita bisa menggunakan try catch statement untuk menangkap error
● Pada block try, kita akan mencoba mengakses kode program yang bisa menyebabkan error, dan
jika terjadi error, block try akan berhenti dan otomatis masuk ke block catch
● Jika tidak terjadi error, block catch tidak akan dieksekusi
Kode : Error Handling
Kata Kunci finally

● Kadang kita ingin melakukan sesuatu entah itu terjadi error ataupun tidak
● Dalam try catch, kita bisa menambahkan block finally
● Block finally ini akan selalu dieksekusi setelah try catch selesai, entah terjadi error atau tidak,
block finally akan selalu dieksekusi
Kode : Kata Kunci finally
Try Finally

● Kata kunci finally juga bisa digunakan tanpa perlu menggunakan catch
● Biasanya ini digunakan dalam kasus tertentu
Kode : Try Finally
Membuat Class Error Manual
Membuat Class Error Manual

● Walaupun JavaScript sudah memiliki standard class Error

● Namun alangkah baiknya, kita membedakan tiap jenis error
● Untuk membuat error sendiri secara manual sangatlah mudah, cukup membuat class turunan dari
class Error
● Dan jangan lupa tambahkan parameter message, agar bisa dikirimkan ke parameter di constructor
class Error
Kode : Class ValidationError
Kode : Menggunakan ValidationError
Kode : Try Catch
Iterable dan Iterator
Iterable dan Iterator

● Salah satu fitur terbaru di ES6 adalah iterable

● Iterable adalah spesial object yang memiliki standarisasi
● Dengan mengikuti standarisasi Iterable, secara otomatis kita bisa melakukan iterasi terdapat data
tersebut dengan menggunakan perulangan for...of
● Contoh yang sudah mengikuti standarisasi Iterable adalah string, Array, Object, dan lain-lain
Kode : Kontrak Iterable (dalam TypeScript)
Kode : Kontrak Iterator (dalam TypeScript)
Kontrak : IteratorResult (dalam TypeScript)
Cara Kerja Iterable dan Iterator

● Jika kita mengikuti kontrak Iterable, maka object yang kita buat akan bisa dilakukan iterasi
menggunakan for...of
● Setiap kita melakukan perulangan, object Iterator akan dibuat
● Hal ini menjadi aman jika kita melakukan iterasi berulang-ulang, karena Iterator baru akan dibuat
terus menerus
Kode : Membuat Counter Iterator Result
Kode : Membuat Counter Iterator
Kode : Membuat Counter Iterable
Kode : Menggunakan Counter Iterable
Materi Selanjutnya
JavaScript
Document Object Model
Eko Kurniawan Khannedy
Eko Kurniawan Khannedy

- Technical architect at one of the biggest

ecommerce company in Indonesia
- 10+ years experiences
- www.programmerzamannow.com
- youtube.com/c/ProgrammerZamanNow
Eko Kurniawan Khannedy
● Telegram : @khannedy
● Facebook : fb.com/ProgrammerZamanNow
● Instagram : instagram.com/programmerzamannow
● Youtube : youtube.com/c/ProgrammerZamanNow
● Telegram Channel : t.me/ProgrammerZamanNow
● Email : [email protected]
Sebelum Belajar
● JavaScript Dasar
● JavaScript Object Oriented Programming
● JavaScript Standard Library
● JavaScript Modules
Agenda
● Pengenalan Document Object Model
● Document
● Node
● Element
● Attr
● Event
● Event Handler
● Dan lain-lain
Pengenalan
Document Object Model
Pengenalan DOM
● Ketika sebuah website di load oleh Browser, maka Browser akan membuat Document Object
Model untuk halaman website tersebut
● DOM dibuat dalam bentuk tree / pohon yang tiap cabang nya berisikan object dari jenis elemen
HTML
● JavaScript memiliki kemampuan untuk memanipulasi DOM, artinya dengan JavaScript, kita bisa
mengakses tiap object di DOM bahkan memanipulasi object nya
Diagram DOM
DOM dan JavaScript
● DOM bukanlah fitur atau bahasa pemrograman, DOM sebenarnya hanyalah representasi Object
dari Struktur halaman web
● DOM sendiri sebenarnya bukanlah bagian dari bahasa pemrograman JavaScript, melainkan bagian
dari Web API
● DOM sendiri di desain secara agnostik, artinya sebenarnya bisa digunakan menggunakan bahasa
pemrograman apapun, karena memang untuk membuat Web, kita tidak hanya bisa menggunakan
bahasa pemrograman JavaScript
Membuat Project
Membuat Project
● Buat folder kosong belajar-javascript-dom
Tipe Data
Tipe Data
● DOM memiliki representasi data
● Tidak terlalu banyak tipe data yang terdapat di DOM
● Oleh karena itu, sebenarnya DOM sangat sederhana, namun penggunaannya sangat bermanfaat
Tipe Data Keterangan

Document Merupakan representasi dari halaman web

Node Merupakan base class untuk semua tipe data di DOM, seperti
Document, Element, dan Attr

Element Merupakan representasi object element di halaman web, misal

head, body, form, input, dan lain-lain

NodeList Merupakan array/collection yang berisikan Node

Attr Atau attribute, merupakan representasi object attribute dalam

element

NamedNodeMap Merupakan collection yang berisikan Attr dalam bentuk Map

Document
Document
● Document merupakan representasi object dari halaman web
● Dalam satu halaman web, terdapat satu document, dan kita tidak perlu membuatnya secara
manual, karena otomatis akan ada di browser
● Untuk mengakses Document, kita bisa gunakan object document
● https://developer.mozilla.org/en-US/docs/Web/API/Document
document Object
● Document secara otomatis dibuat dalam browser ketika membuka halaman web, sehingga kita
tidak perlu membuat objek Document secara manual
● Kita bisa langsung menggunakan kata kunci document
Kode : Document
Document Property
● Document memiliki banyak sekali property
● Property dalam Document bisa kita gunakan untuk melihat semua data yang terdapat dalam
document halaman web
● https://developer.mozilla.org/en-US/docs/Web/API/Document#properties
Kode : Document Property
Document Method
● Document memiliki banyak sekali method
● Banyak method yang terdapat di document digunakan untuk memanipulasi data DOM, misal
membuat Node, Element, Attribute atau mengambil dan menyeleksi Node di dalam document
● https://developer.mozilla.org/en-US/docs/Web/API/Document#methods
Kode : Document Method
Node
Node
● Node adalah base class dari Document, Element dan Attr
● Artinya semua fitur yang dimiliki di Node dimiliki diturunannya
● Node dalam DOM itu bentuknya adalah Tree (pohon), artinya dengan Node, kita bisa melihat
Parent (node diatas nya), Children (node dibawahnya), Sibling (node disebelahnya)
● https://developer.mozilla.org/en-US/docs/Web/API/Node
Kode : Node
Node Property
● Node memiliki banyak sekali property
● Property di Node banyak berisi informasi reference ke Node lain nya, seperti ke node parent nya,
node children nya atau node sebelahnya
● https://developer.mozilla.org/en-US/docs/Web/API/Node#properties
Kode : Node
Node Method
● Node memiliki banyak sekali method
● Method di Node bisa digunakan untuk memanipulasi data Node di dalam Node tersebut, misal
menambah/menghapus Node children
● https://developer.mozilla.org/en-US/docs/Web/API/Node#properties
Kode : Node Method
Element
Element
● Element merupakan Node yang berbentuk element, biasanya adalah element HTML, misal <html>,
<head>, <body>, <div>, <table>, dan lain-lain
● https://developer.mozilla.org/en-US/docs/Web/API/Element
Kode : Element
Element Property
● Element memiliki banyak sekali property
● Dan karena Element adalah turunan dari Node, semua property Node pun bisa digunakan di
Element
● https://developer.mozilla.org/en-US/docs/Web/API/Element#properties
Kode : Element Property
Element Method
● Element memiliki banyak sekali method
● Dan karena Element adalah turunan dari Node, semua method Node pun bisa digunakan di
Element
● https://developer.mozilla.org/en-US/docs/Web/API/Element#methods
Kode : Element Method
Membuat Element
● Sebelumnya kita hanya mengambil element menggunakan id, artinya kita perlu buat dulu element
nya di HTML
● Kita juga bisa membuat object element baru, dan menambahkannya ke halaman web
● Kita bisa menggunakan method createElement(tag) pada Document
● https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
Kode : Membuat Element
NodeList
NodeList
● NodeList adalah kumpulan dari Node
● Biasanya NodeList digunakan ketika kita menyeleksi banyak Node sekaligus, misal ketika kita ingin
mengambil semua children di Node misalnya
● https://developer.mozilla.org/en-US/docs/Web/API/NodeList
Kode : NodeList
Live vs Static NodeList
● NodeList memiliki 2 tipe, yaitu Live dan Static
● Live artinya perubahan yang terjadi pada NodeList nya, akan merubah semua NodeList yang sama
● Static artinya perubahan yang terjadi pada NodeList nya, tidak akan merubah semua NodeList
yang sama
● Saat kita menggunakan element.childNodes, NodeList tersebut bersifat Live
● Saat kita menggunakan document.querySelectorAll(), NodeList tersebut bersifat Static
Kode : NodeList Live
Kode : NodeList Static
Attr
Attr
● Attr atau attribute merupakan representasi dari attribute sebuah element, atau singkatnya key-
value, key nya adalah nama attribute, dan value nya adalah value attribute
● https://developer.mozilla.org/en-US/docs/Web/API/Attr
Kode: Attr
Attr Value
● Kadang kebanyakan programmer ingin langsung mendapatkan value Attr
● Jarang sekali menggunakan object Attr nya
● Untuk mendapatkan value secara langsung, kita bisa menggunakan method getAttribute(name) di
Element
Kode : Attr Value
Membuat Attr
● Untuk membuat Attr, kita bisa menggunakan document.createAttribute(name)
● Lalu untuk menambahkannya ke Element, kita bisa gunakan element.setAttributeNode(attr)
● Atau kita juga bisa langsung membuat Attr langsung dengan name dan value nya menggunakan
element.setAttribute(name, value)
Kode: Membuat Attr
NamedNodeMap
NamedNodeMap
● NamedNodeMap merupakan kumpulan dari Attr
● Mirip seperti NodeList, namun isinya adalah Attr
● https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap
Kode: NamedNodeMap
Text Node
Text Node
● Saat kita membuat HTML, kadang kita membuat teks tanpa tag
● Saat halaman web tersebut direpresentasikan dalam DOM, text tanpa tag bukanlah merupakan
Element, melainkan Node
● Lebih tepatnya adalah Text Node
● https://developer.mozilla.org/en-US/docs/Web/API/Text
Kode: Text Node
Membuat Text Node
● Kita juga bisa membuat Text Node menggunakan method document.createTextNode(string)
● Hasilnya berupa Text yang bisa kita tambahkan ke Node lain
Kode: Membuat Text Node
Event Handler
Event Handler
● Node memiliki kemampuan bereaksi terhadap suatu kejadian, misal kejadian di klik, mouse di atas
node tersebut, dan lain-lain
● Ada banyak sekali jenis kejadian yang bisa kita buatkan aksinya ketika kejadian tersebut terjadi,
atau dikenal dengan nama Event Handler
● Ada dua cara kita menambahkan Event Handler ke Node, menggunakan Event Target atau Global
Event Handler
● https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
● https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers
Event Target
● Event Target merupakan parent class dari Node, artinya semua Node memiliki kemampuan dari
Event Target
● Pada Event Target, kita bisa menggunakan method addEventListener(type, callback) untuk
menambahkan Event Handler
● https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
Kode : Event Listener
Global Event Handler
● Selain menggunakan Event Target, untuk menambahkan Event Handler, kita juga bisa
menggunakan Global Event Handler
● Global Event Handler bukanlah sebuah super class, hanya kontrak yang bisa kita gunakan untuk
menambah event handler sesuai dengan type event nya
● https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers
Kode : Global Event Handler
Event
Jenis Event
● DOM sendiri memiliki banyak sekali jenis event, tidak hanya click
● Jenis event yang bisa kita gunakan biasanya disesuaikan dengan target event nya, misal pada
element video, ada event play, pause, sedangkan pada element button, tidak ada event play atau
pause
● Untuk lebih detailnya, ada apa saja jenis event nya, kita bisa lihat pada halaman berikut :
● https://developer.mozilla.org/en-US/docs/Web/Events
Event
● Saat kita membuat callback function untuk Event Handler, kita juga bisa menerima data event
yang memicu event itu terjadi
● Data Event tersebut bisa berbeda-beda, tergantung jenis Event nya, contohnya untuk Click, data
event nya berupa Mouse Event (yang berisi lokasi mouse dan lain-lain)
● Kita bisa lihat detail dari data tiap event di halaman documentation nya :
● https://developer.mozilla.org/en-US/docs/Web/API/Event
Kode : Event
Style
Style
● DOM juga bisa digunakan untuk memanipulasi attribute style pada element dengan lebih mudah
● Kita tidak perlu menggunakan setAttribute(“style”, “value”) setiap ingin mengubah style sebuah
element
● Kita bisa langsung gunakan element.style.name = value
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
Nama Style
● Saat kita mengubah sebuah style, penamaan style menjadi berubah
● Pada style css, rata-rata menggunakan format lowercase dan -, misal background-color
● Sedangkan pada DOM Style, menggunakan format pascalCase, misal backgroundColor
Kode : Style
InnerText dan InnerHTML
Text Content dan Inner Text
● Selain textContent, terdapat property lain bernama innerText untuk mendapatkan isi text sebuah
element
● Tujuan nya sama, untuk mengambil atau mengubah isi text konten sebuah element, namun ada
perbedaannya
● textContent akan mengembalikan semua isi dari konten text sebuah element
● innerText bisa tahu, bagian text mana yang ditampilkan, dan dia hanya akan mengambil text yang
ditampilkan saja
Kode : Text Content dan Inner Text
Inner HTML
● Jika Text Content dan Inner Text hanya mengambil text saja, Inner HTML akan mengambil seluruh
element HTML nya sebagai text
● Ini juga cocok jika kita ingin mengubah isi dari element menggunakan text yang berisi tag HTML
Kode : Inner HTML
Mengubah Element dengan Inner HTML
● Salah satu kemampuan dari innerHTML adalah, kita bisa mengubah isi dari children sebuah
element hanya dengan string
● Tag yang terdapat di dalam String secara otomatis akan menjadi child element
Kode : Mengubah Element dengan Inner HTML
Window
Window
● Window merupakan representasi window yang berisikan DOM Document
● Beberapa JavaScript function sebenarnya berasal dari object Window, seperti alert(), confirm()
dan prompt()
● Ada banyak sekali property, method dan event yang bisa kita gunakan pada window
● Untuk menggunakan Window, kita tidak perlu membuat objectnya, cukup gunakan kata kunci
window
● https://developer.mozilla.org/en-US/docs/Web/API/Window
Kode: Window
Query Selector
Query Selector
● Sebelumnya kita sudah menggunakan method querySelectorAll() pada Document, sekarang kita
akan bahas lebih lengkap tentang Query Selector
● Query Selector merupakan method untuk menseleksi node sesuai dengan pola yang kita ingin cari
● Terdapat dua method untuk Query Selector :
○ Document.querySelector(pola) digunakan menyeleksi node pertama yang sesuai dengan pola
○ Document.querySelectorAll(pola) digunakan untuk menyeleksi semua node yang sesuai dengan pola
Pola Query Selector
● Pola untuk Query Selector adalah menggunakan CSS Selector
● Penggunakan Pola nya mirip ketika kita membuat Selector di CSS
● Jika belum tahu tentang CSS Selector, disarankan untuk dipelajari ulang tentang materi CSS
● https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Universal Selector
● Universal Selector merupakan selector untuk menyeleksi semua element
● Kita bisa menggunakan karakter *
● https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
Kode : Universal Selector
Type Selector
● Type Selector adalah selector yang digunakan untuk menyeleksi tag type HTML yang kita pilih
● Untuk menggunakannya, kita bisa langsung sebutkan nama tag nya
● https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors
Kode : Type Selector
Class Selector
● Class Selector merupakan selector untuk menyeleksi semua element yang memiliki class yang
sesuai selector
● Untuk menggunakannya, kita bisa sebutkan nama class nya diawali dengan titik
● https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
Kode : Class Selector
ID Selector
● ID Selector merupakan selector yang digunakan untuk menyeleksi id yang sesuai selector
● Untuk menggunakannya, kita bisa gunakan nama id diawali dengan karakter #
● https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors
Kode : ID Selector
Attribute Selector
● Attribute Selector merupakan selector yang bisa digunakan untuk menyeleksi element
berdasarkan attribute nya
● Kita bisa menggunakan selector [attribute]
● Atau bisa juga untuk tag tertentu, misal menggunakan selector div[attribute]
● https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Kode: Attribute Selector
Operator di Attribute Selector
● Kita juga bisa menggunakan operator pada attribut selector
● Misal [attribute=value], [attribute^=value] dan lain-lain
● https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#syntax
Kode : Operator Attribute Selector
Dan Selector Lainnya
● https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Node Type
Node Type
● Saat kita menyeleksi Node menjadi NodeList, kadang kita ingin tahu tipe Node tersebut
● Apakah Element, TextElement atau yang lainnya
● Node sendiri memiliki property bernama nodeType, dimana kita bisa melihat tipe dari node
tersebut
● https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
Kode : Node Type
HTML Element
HTML Element
● Element merupakan representasi dalam DOM
● Namun, saat menggunakan HTML, implementasi detail nya sebenarnya adalah HTML Element,
yaitu turunan dari Element
● HTML Element memiliki banyak sekali property dan method tambahan selain dari Element DOM
● Kebanyakan HTML Element memiliki property yang sesuai dengan attribute yang ada pada tag
html tersebut, oleh karena itu, kadang kita tidak butuh lagi menggunakan method setAttribute dan
getAttribute
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
Kode : HTML Element
HTML Form Element
HTML Form Element
● Form adalah salah satu element yang memiliki banyak sekali fitur diluar dari Element DOM
● Hal ini karena penggunaan Form memang lebih kompleks dibandingkan element HTML lainnya
● Ada banyak sekali property, method dan juga event yang terdapat pada HTML form element atau
input element
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
Kode : HTML Form Element
Kode : HTML Form Element JavaScript
Akses Form Via Name
● Salah satu kelebihan Form adalah, kita bisa mengakses form hanya dengan menggunakan form
name
● Kita bisa gunakan document.forms[name]
● Atau jika kita ingin mengakses input nya, kita juga bisa menggunakan name nya
document.forms[name][inputName]
Kode : HTML Form Element JavaScript
HTML Table Element
HTML Table Element
● Salah satu HTML Element yang kompleks selain Form adalah Table
● HTML Table Element juga memiliki banyak sekali property, method dan event yang khusus
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement
Kode : HTML Table Element
Kode : HTML Table Element JavaScript
HTML Element Lainnya
HTML Element Lainnya
● Sebenarnya masih banyak element-element HTML lainnya yang terdapat dalam Standard Web API
● Namun akan terlalu banyak jika dibahas satu per-satu
● Oleh karena itu saya sarankan teman-teman eksplore HTML element yang memang ingin dipelajari
di halaman documentation resminya
● https://developer.mozilla.org/en-US/docs/Web/API#interfaces
Materi Selanjutnya
Materi Selanjutnya
● JavaScript Async
● JavaScript Decorator
● JavaScript Web API
Materi Selanjutnya

● JavaScript Standard Library

● JavaScript Modules
● JavaScript Document Object Model
● JavaScript Async
● JavaScript Web API
JavaScript Standard Library

Eko Kurniawan Khannedy

Sebelum Belajar
● HTML
● CSS
● JavaScript Dasar
● JavaScript Object Oriented Programming
Agenda
● Number
● String
● Array
● Object
● JSON
● Dan lain-lain
Number
Number

● Number merupakan function yang digunakan untuk melakukan konversi ke tipe data number
● Jika data tidak bisa dikonversi ke number, secara otomatis hasilnya adalah NaN
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
Kode : Number
Number Static Properties

● Number memiliki banyak static properties, seperti :

● Number.MIN_VALUE untuk mendapat number minimal
● Number.MAX_VALUE untuk mendapat number maksimal
● https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Number#static_properties
Kode : Number Static Properties
Number Static Method

● Number memiliki banyak static method, seperti :

● Number.isNaN(value) untuk mengecek apakah value NaN atau bukan
● Number.isInteger(value) untuk mengecek apakah value berupa integer atau bukan
● https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Number#static_methods
Kode : Number Static Method
Number Instance Method

● Number memiliki banyak instance method, seperti :

● Number.toLocalString(locale) untuk mengubah number menjadi string sesuai locale :
https://www.lansweeper.com/knowledgebase/list-of-currency-culture-codes/
● Number.toString(radix) untuk mengubah number menjadi string sesuai radix
● https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Number#instance_methods
Kode : Number Instance Method
String
String

● Tipe data String sudah kita bahas pada materi JavaScript Dasar
● Namun kita belum membahas instance method atau juga instance properties yang terdapat di
String
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
String Instance Method dan Properties

● String sendiri memiliki banyak sekali instance method dan properties

● Hal ini menjadikan untuk memanipulasi data String sangat mudah di JavaScript, seperti mengubah
menjadi lowercase, UPPERCASE, memotong string menjadi array dan lain-lain
● https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/String#instance_methods
Kode : String Instance Method dan Properties
Array
Array

● Tipe data Array sudah kita bahas di materi JavaScript Dasar

● Namun kita hanya membahas beberapa instance method yang ada di Array
● Sebenarnya, terdapat banyak sekali Instance Method yang ada di Array, dan kita akan coba bahas
beberapa di sini
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Array Loop

● Sebelumnya kita biasa menggunakan for in dan for of untuk melakukan iterasi Array, namun Array
juga memiliki method yang bernama forEach()
● Method forEach bisa digunakan juga untuk melakukan iterasi data array
Kode : Array Loop
Array Queue

● Dalam struktur data, terdapat tipe struktur data bernama Queue (Antrian)
● Dimana data masuk akan diposisikan di urutan paling belakang
● Sedangkan data keluar akan diposisikan dari urutan paling depan
● Mirip sekali dengan antrian, atau istilahnya FIFO (first in first out)
● Kita bisa menggunakan Array dengan bantuan function push() untuk menambah data di belakang,
dan shift() untuk mengambil dan menghapus data paling depan
Kode : Array Queue
Array Stack

● Struktur data Stack (Tumpukan) kebalikan dari Queue, dimana aturannya mirip dengan tumpukan
kartu
● Saat kita memasukkan data, kita akan memasukkan di urutan paling belakang (atau atas)
● Sedangkan saat kita mengambil data, kita akan mengambil data dari paling belakang (atau atas)
terlebih dahulu
● Stack ini sifatnya LIFO (last in first out)
● Untuk menambah diurutan belakang, kita bisa menggunakan function push()
● Dan untuk mengambil dan menghapus paling belakang, kita bisa menggunakan function pop()
Kode : Array Stack
Array Search

Array memiliki banyak function untuk melakukan pencarian :

Function Keterangan

find(value => boolean) : value Mencari data sesuai dengan kondisi

findIndex(value => boolean) : number Mencari data index sesuai dengan kondisi

includes(value) : boolean Mengecek apakah terdapat data

indexOf(value) : number Mengecek posisi index data

lastIndexOf(value) : number Mengecek posisi index data terakhir

Kode : Array Search
Array Filter

Array memiliki function untuk melakukan filter data

Function Keterangan

filter(value => boolean) : Array Melakukan filter data yang kondisinya

bernilai true
Kode : Array Filter
Array Transform

Array juga memiliki function yang digunakan untuk melakukan transformasi

Function Keterangan

map(value => result) : Array<result> Melakukan transform tiap value dan

menghasilkan array result

reduce(resultBefore, value => result) : Melakukan transform dengan

result menggunakan value array dan value
selanjutnya, lalu hasilnya dilanjutkan ke
iterasi selanjutnya

reduceRight(resultBefore, value => result) Sama seperti reduce(), namun dilakukan

dari belakang
Kode : Array Transform
Dan Function lain-lain

● https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array#instance_methods
Object
Object

● Tipe data object sudah sering sekali kita bahas di JavaScript Dasar dan JavaScript OOP
● Pada materi ini, kita akan bahas banyak static method yang terdapat pada Object
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
Object Freeze & Seal

● Secara default, object bisa diubah atau dihapus properties nya

● Jika kita ingin mengubah sebuah object menjadi object yang tidak bisa diubah atau dihapus, kita
bisa menggunakan beberapa static method
● Object.freeze() digunakan untuk mengubah object menjadi object yang tidak bisa diubah atau
dihapus attribute nya
● Object.seal() digunakan untuk mengubah object menjadi object yang tidak bisa dihapus attribute
nya
Kode : Object Freeze
Object Assign

● Kadang kita ada kasus menggabungkan semua attribute dari sebuah object ke object lain
● Hal ini bisa kita lakukan dengan menggunakan Object.assign(target, source)
Kode : Object Assign
Object Property Name & Value

● Object juga memiliki static method untuk digunakan mengambil semua properties names dan
values
● Object.values() digunakan untuk mengambil semua property value
● Object.getPropertyNames() digunakan untuk mengambil semua properti name
Kode : Object Property Name & Value
Dan Function Lain-Lain

● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
JSON
Pengenalan JSON

● JSON singkatan dari JavaScript Object Notation

● JSON merupakan data String yang bentuknya mirip dengan JavaScript Object
● Saat ini JSON banyak sekali digunakan untuk komunikasi antara Server dan Client
● https://www.json.org/json-en.html
JSON

● JavaScript mendukung konversi data dari String json ke Object ataupun sebaliknya
● JSON.stringify() digunakan untuk melakukan konversi dari Object ke String
● JSON.parse() digunakan untuk melakukan konversi dari String ke Object
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON
Kode : JSON
BigInt
BigInt

● BigInt merupakan tipe data Number yang bisa mencakup data angka lebih dari
Number.MAX_SAFE_INTEGER
● Untuk kasus number yang lebih dari itu, sangat disarankan menggunakan tipe data BigInt
● Cara penggunaan BigInt sama saja dengan penggunaan Number dan juga operator nya
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt
Kode : BigInt
Date
Date

● JavaScript memiliki tipe data untuk representasi waktu dan tanggal, yaitu Date
● Date merupakan representasi milisecond sejak tanggal 1 Januari 1970, atau dikenal dengan Epoch
& Unix Timestamp
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
Membuat Object Date

Untuk membuat object Date, kita bisa menggunakan new Date(), dimana terdapat constructor parameter

new Date() Membuat date saat ini

new Date(year, month, date) Membuat date dengan tanggal

new Date(year, month, date?, hour?, Membuat date dengan parameter sampai
minute?, second?, milis?) milis

new Date(timestamp) Membuat date dari epoch atau unix

timestamp
Kode : Membuat Object Date
Epoch & Unix Timestamp

● Dalam menggunakan tipe data waktu, biasanya disemua bahasa pemrograman akan mendukung
yang namanya epoch & unix timestamp
● Epoch & Unix timestamp merupakan hitungan miliseconds setelah tanggal 1 Januari 1970
● JavaScript pun mendukung pembuatan waktu dalam bentuk epoch dan unix timestamp
● Untuk mendapatkan waktu saat ini dalam epoch & unix timestamp, kita bisa menggunakan
Date.now()
● Untuk mengubah dari object date ke epoch & unix timestamp, kita bisa menggunakan function
getTime()
Kode : Unix Timestamp
Parsing Date

● Kita juga bisa melakukan parsing membuat date dari string menggunakan method
Date.parse(value)
● Format string harus YYYY-MM-DDTHH:mm:ss.sssZ
● Dimana jika kita hanya membuat date berisi tanggal saya, kita cukup gunakan YYYY-MM-DD
● Jika date dengan tanggal dan waktu, gunakan YYYY-MM-DDTHH:mm:ss.sss
● Jika date dengan tanggal, waktu dan timezone, gunakan YYYY-MM-DDTHH:mm:ss.sssZ
● Hasil parsing adalah unix timestamp, bukan object date
Format Date

YYYY Tahun

MM Bulan

DD Tanggal

T Pemisah tanggal dan waktu

HH Jam

mm Menit

ss Detik

sss Milidetik

Z Timezone
Kode : Parsing Date
Date Getter dan Setter

● Date juga memiliki banyak sekali method untuk mendapatkan informasi date dan juga mengubah
informasi date, atau istilahnya adalah getter dan setter
● https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Date#instance_methods
Kode : Date Getter dan Setter
Math
Math

● Math merupakan class di JavaScript yang berisikan static property dan method untuk operasi
matematika
● Ada banyak sekali static property dan method di Math
● Math hanya bisa digunakan untuk tipe data Number, tidak bisa digunakan untuk tipe data BigInt
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
Kode : Math
Boolean
Boolean

● Boolean merupakan wrapper class untuk tipe primitif boolean

● Boolean memiliki method toString() untuk mengkonversi ke String
● Dan memiliki method valueOf() untuk mengkonversi ke tipe boolean primitif
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
Kode Boolean
Map
Map

● Map merupakan representasi dari struktur data key-value

● Map mirip dengan tipe data object, hanya saja pada Map, semua method untuk manipulasi data
sudah disediakan
● Map mengikuti kontrak iterable, sehingga bisa di iterasi secara default
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
Perbedaan Map dan Object
Map Object

Pertama dibuat, tidak memiliki key Karena memiliki prototype, jadi bisa jadi
memiliki default key ketika pertama dibuat

Key bisa tipe data apapun Key hanya bisa string atau symbol

Jumlah key bisa diketahui dengan mudah Tidak bisa diketahui, harus manual
dengan attribute size menggunakan iterasi

Secara default tidak bisa dikonversi ke Bisa dikonversi ke JSON secara otomatis
JSON
Map Instance Method & Property
Method & Property Keterangan

size Panjang Map

clear() Menghapus semua isi Map

delete(key) Menghapus data Map berdasarkan key

get(key) : value Mendapatkan data Map berdasarkan key

has(key) : boolean Mengecek apakah Map berisi data key

set(key, value) Mengubah data Map dengan key = value

forEach((key, value) => ) Melakukan iterasi Map

Kode : Map
Set
Set

● Set merupakan implementasi dari struktur data yang berisikan data-data unique
● Set mirip seperti Array, hanya saja isi datanya selalu unique
● Jika kita menambahkan data yang sama, maka data hanya akan diterima satu saja
● Set mengimplementasikan kontrak iterable, sehingga bisa diiterasi secara default
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
Set Instance Method & Property
Method & Property Keterangan

size Panjang Set

add(value) Menambah data ke Set

has(value) Mengecek apakah Set memiliki value

delete(value) Menghapus value dari Set

forEach(value => ) Melakukan iterasi Set

Kode : Set
Symbol
Symbol

● Symbol merupakan tipe data yang digaransi akan selalu unique setiap kali kita membuat data
symbol
● Symbol kadang banyak digunakan untuk membuat key pada object
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol
Kode : Symbol
Symbol For

● Kadang agak sulit membuat symbol harus selalu menggunakan variable

● Pembuatan symbol juga bisa menggunakan static method Symbol.for(key)
● Jika kita menggunakan key yang sama, Symbol yang sama akan sekalu dikembalikan
Kode : Symbol For
RegExp
RegExp

● RegExp merupakan implementasi dari regular expression di JavaScript

● Regular expression merupakan fitur untuk mencari text dengan pola
● Membuat regular expression di JavaScript bisa dilakukan dengan dua cara, yaitu menggunakan
literal notation atau membuat object RegExp
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
Membuat RegExp
RegExp Instance Method
Instance Method Keterangan

exec(value) : result Eksekusi regex, jika menemukan data

sesuai pola, maka kembalikan result nya,
jika tidak maka null

test(value) : boolean Eksekusi regex, jika menemukan data

sesuai pola, maka return true, jika tidak
maka false
Kode : RegExp Instance Method
RegExp Modifier

RegExp memiliki modifier untuk mengubah sifat cara pencarian

Modifier Keterangan

i Regex menjadi incase sensitive

g Pencarian dilakukan secara global, secara

default setelah menemukan data,
pencarian akan berhenti

m Multiline, pencarian dilakukan di tiap baris

(enter)
Kode : RegExp Modifier
Fitur RegExp Lainnya

● Assersions : indikasi awal dan akhir teks https://developer.mozilla.org/en-

US/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions
● Character Classes : membedakan antara huruf dan angka https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes
● Group dan Range : melakukan grouping atau range huruf atau angka
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges
● Quantifiers : menentukan jumlah huruf atau angka https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers
Kode : Contoh Fitur RegExp
Regular Expression di String
Di JavaScript, tipe data String memiliki instance method yang dapat memanfaatkan RegExp untuk
melakukan pencarian

String Method Keterangan

match(regex) : Array Mencari semua data yang sesuai dengan regex

search(regex) : index Mencari index data yang sesuai dengan regex

replace(regex, value) Mengubah data dengan value yang sesuai regex

replaceAll(regex, value) Mengubah semua data dengan value yang sesuai regex

split(regex) : Array Memotong string dengan regex

Kode : Regular Expression di String
Proxy
Proxy

● Proxy merupakan fitur yang bisa digunakan sebagai wakil sebuah data
● Dengan menggunakan proxy, semua interaksi ke data akan selalu melalui Proxy terlebih dahulu
● Dengan ini, kita bisa melakukan apapun sebelum interaksi dilakukan ke data yang dituju
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Proxy Handler

● Pembuatan Proxy perlu menggunakan handler, dimana dalam handler, kita bisa membuat function
yang dinamakan interceptor yang digunakan ketika mengambil data atau mengubah data ke target
● Untuk membuat Proxy, kita bisa menggunakan new Proxy(target, handler)
Kode : Membuat Handler
Kode : Membuat Proxy
Proxy dan Handler

● Saat kita mengubah data proxy, secara otomatis data akan dikirim ke target melalui handler
dengan memanggil function set(target, property, value)
● Saat kita mengambil data proxy, secara otomatis data akan diambil dari target melalui handler
dengan memanggil function get(target, property)
● Artinya, jika kita ingin melakukan sesuatu sebelum dan setelah nya, bisa kita lakukan di handler
Kode : Log Handler
Reflect
Reflect

● Reflect merupakan class yang digunakan untuk mengeksekusi JavaScript function

● Reflect tidak memiliki constructor, dan cara penggunaan Reflect tidak dengan membuat object
dengan new Reflect
● Penggunaan Reflect adalah menggunakan banyak sekali static methodnya
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect
Kode : Reflect
Encode
Encode

● Saat kita menulis URL, kadang kita ingin menambahkan informasi tambahan seperti query
parameter misalnya
● URL sendiri sudah memiliki standard encoding penulisan URL
● Standard encoding ini dilakukan agar penulisan URL aman ketika diterima oleh server
● Aman disini dalam artian informasi URL tidak berubah
● Contoh paling sederhana, misal, walaupun kita bisa mengirim spasi dalam url, tapi disarankan
untuk di encode agar nilai spasi tidak benar-benar terlihat seperti spasi pada URL nya
Contoh Masalah Jika Tidak Menggunakan Encode

● Misal ada query parameter dengan nama data, lalu kita ingin mengirimkan nilai kesana
● Misal nilainya adalah &eko=eko&, alhasil URL nya akan seperti berikut
● http://contoh.com?data=&eko=eko&
● URL diatas terlihat tidak ada masalah, tapi sebenarnya ketika diterima oleh server, parameter data
bernilai kosong, kenapa? karena & dianggap sebagai pemisah antar parameter
● Artinya tanda seperti & dan lain-lain perlu di encode, agar tidak terjadi kesalahan data yang kita
kirim
Encode Function
Function Keterangan

encodeURI(value) Melakukan encode value, namun karakter yang

dipesan di URI tidak akan diubah ;,/?:@&=+$#

encodeURIComponent(value) Melakukan encode value semua karakter

decodeURI(encoded) Melakukan decode value hasil encodeURI()

decodeURIComponent(encoded) Melakukan decode value hasil

encodeURIComponent()
Kode : encodeURI dan decodeURI
Kode : encodeURIComponent dan decodeURICompoentn
Base64
Base64

● Base64 merupakan binary to text encoding, representasi binary data dalam format string
● Base64 merupakan format text data yang aman untuk dikirimkan di web
● Base64 merupakan encoding yang biasanya digunakan ketika perlu mengirim data dari client ke
server
● Karena encoding Base64 merupakan text, oleh karena itu sangat aman digunakan pada query
param URL atau text body dalam form
● https://developer.mozilla.org/en-US/docs/Glossary/Base64
Base64 Function

JavaScript memiliki function bawaan untuk melakukan encode Base64 atau decode base64

Function Keterangan

btoa(value) Encode ke base64 dari value

atob(encoded) Decode dari base64 ke value

Kode : Base64
Eval
Eval

● Eval merupakan function yang digunakan untuk mengeksekusi kode JavaScript dari String
● Fitur ini sangat menarik, namun perlu hati-hati ketika menggunakannya
● Jika sampai salah penggunaan, maka bisa jadi kita malah mengeksekusi kode program yang bisa
menyebabkan masalah keamanan di website kita
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
Kode : Eval
Materi Selanjutnya
Materi Selanjutnya

● JavaScript Modules
● JavaScript Document Object Model
● JavaScript Async
● JavaScript Web API
JavaScript
Document Object Model
Eko Kurniawan Khannedy
Eko Kurniawan Khannedy

- Technical architect at one of the biggest

ecommerce company in Indonesia
- 10+ years experiences
- www.programmerzamannow.com
- youtube.com/c/ProgrammerZamanNow
Eko Kurniawan Khannedy
● Telegram : @khannedy
● Facebook : fb.com/ProgrammerZamanNow
● Instagram : instagram.com/programmerzamannow
● Youtube : youtube.com/c/ProgrammerZamanNow
● Telegram Channel : t.me/ProgrammerZamanNow
● Email : [email protected]
Sebelum Belajar
● JavaScript Dasar
● JavaScript Object Oriented Programming
● JavaScript Standard Library
● JavaScript Modules
Agenda
● Pengenalan Document Object Model
● Document
● Node
● Element
● Attr
● Event
● Event Handler
● Dan lain-lain
Pengenalan
Document Object Model
Pengenalan DOM
● Ketika sebuah website di load oleh Browser, maka Browser akan membuat Document Object
Model untuk halaman website tersebut
● DOM dibuat dalam bentuk tree / pohon yang tiap cabang nya berisikan object dari jenis elemen
HTML
● JavaScript memiliki kemampuan untuk memanipulasi DOM, artinya dengan JavaScript, kita bisa
mengakses tiap object di DOM bahkan memanipulasi object nya
Diagram DOM
DOM dan JavaScript
● DOM bukanlah fitur atau bahasa pemrograman, DOM sebenarnya hanyalah representasi Object
dari Struktur halaman web
● DOM sendiri sebenarnya bukanlah bagian dari bahasa pemrograman JavaScript, melainkan bagian
dari Web API
● DOM sendiri di desain secara agnostik, artinya sebenarnya bisa digunakan menggunakan bahasa
pemrograman apapun, karena memang untuk membuat Web, kita tidak hanya bisa menggunakan
bahasa pemrograman JavaScript
Membuat Project
Membuat Project
● Buat folder kosong belajar-javascript-dom
Tipe Data
Tipe Data
● DOM memiliki representasi data
● Tidak terlalu banyak tipe data yang terdapat di DOM
● Oleh karena itu, sebenarnya DOM sangat sederhana, namun penggunaannya sangat bermanfaat
Tipe Data Keterangan

Document Merupakan representasi dari halaman web

Node Merupakan base class untuk semua tipe data di DOM, seperti
Document, Element, dan Attr

Element Merupakan representasi object element di halaman web, misal

head, body, form, input, dan lain-lain

NodeList Merupakan array/collection yang berisikan Node

Attr Atau attribute, merupakan representasi object attribute dalam

element

NamedNodeMap Merupakan collection yang berisikan Attr dalam bentuk Map

Document
Document
● Document merupakan representasi object dari halaman web
● Dalam satu halaman web, terdapat satu document, dan kita tidak perlu membuatnya secara
manual, karena otomatis akan ada di browser
● Untuk mengakses Document, kita bisa gunakan object document
● https://developer.mozilla.org/en-US/docs/Web/API/Document
document Object
● Document secara otomatis dibuat dalam browser ketika membuka halaman web, sehingga kita
tidak perlu membuat objek Document secara manual
● Kita bisa langsung menggunakan kata kunci document
Kode : Document
Document Property
● Document memiliki banyak sekali property
● Property dalam Document bisa kita gunakan untuk melihat semua data yang terdapat dalam
document halaman web
● https://developer.mozilla.org/en-US/docs/Web/API/Document#properties
Kode : Document Property
Document Method
● Document memiliki banyak sekali method
● Banyak method yang terdapat di document digunakan untuk memanipulasi data DOM, misal
membuat Node, Element, Attribute atau mengambil dan menyeleksi Node di dalam document
● https://developer.mozilla.org/en-US/docs/Web/API/Document#methods
Kode : Document Method
Node
Node
● Node adalah base class dari Document, Element dan Attr
● Artinya semua fitur yang dimiliki di Node dimiliki diturunannya
● Node dalam DOM itu bentuknya adalah Tree (pohon), artinya dengan Node, kita bisa melihat
Parent (node diatas nya), Children (node dibawahnya), Sibling (node disebelahnya)
● https://developer.mozilla.org/en-US/docs/Web/API/Node
Kode : Node
Node Property
● Node memiliki banyak sekali property
● Property di Node banyak berisi informasi reference ke Node lain nya, seperti ke node parent nya,
node children nya atau node sebelahnya
● https://developer.mozilla.org/en-US/docs/Web/API/Node#properties
Kode : Node
Node Method
● Node memiliki banyak sekali method
● Method di Node bisa digunakan untuk memanipulasi data Node di dalam Node tersebut, misal
menambah/menghapus Node children
● https://developer.mozilla.org/en-US/docs/Web/API/Node#properties
Kode : Node Method
Element
Element
● Element merupakan Node yang berbentuk element, biasanya adalah element HTML, misal <html>,
<head>, <body>, <div>, <table>, dan lain-lain
● https://developer.mozilla.org/en-US/docs/Web/API/Element
Kode : Element
Element Property
● Element memiliki banyak sekali property
● Dan karena Element adalah turunan dari Node, semua property Node pun bisa digunakan di
Element
● https://developer.mozilla.org/en-US/docs/Web/API/Element#properties
Kode : Element Property
Element Method
● Element memiliki banyak sekali method
● Dan karena Element adalah turunan dari Node, semua method Node pun bisa digunakan di
Element
● https://developer.mozilla.org/en-US/docs/Web/API/Element#methods
Kode : Element Method
Membuat Element
● Sebelumnya kita hanya mengambil element menggunakan id, artinya kita perlu buat dulu element
nya di HTML
● Kita juga bisa membuat object element baru, dan menambahkannya ke halaman web
● Kita bisa menggunakan method createElement(tag) pada Document
● https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
Kode : Membuat Element
NodeList
NodeList
● NodeList adalah kumpulan dari Node
● Biasanya NodeList digunakan ketika kita menyeleksi banyak Node sekaligus, misal ketika kita ingin
mengambil semua children di Node misalnya
● https://developer.mozilla.org/en-US/docs/Web/API/NodeList
Kode : NodeList
Live vs Static NodeList
● NodeList memiliki 2 tipe, yaitu Live dan Static
● Live artinya perubahan yang terjadi pada NodeList nya, akan merubah semua NodeList yang sama
● Static artinya perubahan yang terjadi pada NodeList nya, tidak akan merubah semua NodeList
yang sama
● Saat kita menggunakan element.childNodes, NodeList tersebut bersifat Live
● Saat kita menggunakan document.querySelectorAll(), NodeList tersebut bersifat Static
Kode : NodeList Live
Kode : NodeList Static
Attr
Attr
● Attr atau attribute merupakan representasi dari attribute sebuah element, atau singkatnya key-
value, key nya adalah nama attribute, dan value nya adalah value attribute
● https://developer.mozilla.org/en-US/docs/Web/API/Attr
Kode: Attr
Attr Value
● Kadang kebanyakan programmer ingin langsung mendapatkan value Attr
● Jarang sekali menggunakan object Attr nya
● Untuk mendapatkan value secara langsung, kita bisa menggunakan method getAttribute(name) di
Element
Kode : Attr Value
Membuat Attr
● Untuk membuat Attr, kita bisa menggunakan document.createAttribute(name)
● Lalu untuk menambahkannya ke Element, kita bisa gunakan element.setAttributeNode(attr)
● Atau kita juga bisa langsung membuat Attr langsung dengan name dan value nya menggunakan
element.setAttribute(name, value)
Kode: Membuat Attr
NamedNodeMap
NamedNodeMap
● NamedNodeMap merupakan kumpulan dari Attr
● Mirip seperti NodeList, namun isinya adalah Attr
● https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap
Kode: NamedNodeMap
Text Node
Text Node
● Saat kita membuat HTML, kadang kita membuat teks tanpa tag
● Saat halaman web tersebut direpresentasikan dalam DOM, text tanpa tag bukanlah merupakan
Element, melainkan Node
● Lebih tepatnya adalah Text Node
● https://developer.mozilla.org/en-US/docs/Web/API/Text
Kode: Text Node
Membuat Text Node
● Kita juga bisa membuat Text Node menggunakan method document.createTextNode(string)
● Hasilnya berupa Text yang bisa kita tambahkan ke Node lain
Kode: Membuat Text Node
Event Handler
Event Handler
● Node memiliki kemampuan bereaksi terhadap suatu kejadian, misal kejadian di klik, mouse di atas
node tersebut, dan lain-lain
● Ada banyak sekali jenis kejadian yang bisa kita buatkan aksinya ketika kejadian tersebut terjadi,
atau dikenal dengan nama Event Handler
● Ada dua cara kita menambahkan Event Handler ke Node, menggunakan Event Target atau Global
Event Handler
● https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
● https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers
Event Target
● Event Target merupakan parent class dari Node, artinya semua Node memiliki kemampuan dari
Event Target
● Pada Event Target, kita bisa menggunakan method addEventListener(type, callback) untuk
menambahkan Event Handler
● https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
Kode : Event Listener
Global Event Handler
● Selain menggunakan Event Target, untuk menambahkan Event Handler, kita juga bisa
menggunakan Global Event Handler
● Global Event Handler bukanlah sebuah super class, hanya kontrak yang bisa kita gunakan untuk
menambah event handler sesuai dengan type event nya
● https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers
Kode : Global Event Handler
Event
Jenis Event
● DOM sendiri memiliki banyak sekali jenis event, tidak hanya click
● Jenis event yang bisa kita gunakan biasanya disesuaikan dengan target event nya, misal pada
element video, ada event play, pause, sedangkan pada element button, tidak ada event play atau
pause
● Untuk lebih detailnya, ada apa saja jenis event nya, kita bisa lihat pada halaman berikut :
● https://developer.mozilla.org/en-US/docs/Web/Events
Event
● Saat kita membuat callback function untuk Event Handler, kita juga bisa menerima data event
yang memicu event itu terjadi
● Data Event tersebut bisa berbeda-beda, tergantung jenis Event nya, contohnya untuk Click, data
event nya berupa Mouse Event (yang berisi lokasi mouse dan lain-lain)
● Kita bisa lihat detail dari data tiap event di halaman documentation nya :
● https://developer.mozilla.org/en-US/docs/Web/API/Event
Kode : Event
Style
Style
● DOM juga bisa digunakan untuk memanipulasi attribute style pada element dengan lebih mudah
● Kita tidak perlu menggunakan setAttribute(“style”, “value”) setiap ingin mengubah style sebuah
element
● Kita bisa langsung gunakan element.style.name = value
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
Nama Style
● Saat kita mengubah sebuah style, penamaan style menjadi berubah
● Pada style css, rata-rata menggunakan format lowercase dan -, misal background-color
● Sedangkan pada DOM Style, menggunakan format pascalCase, misal backgroundColor
Kode : Style
InnerText dan InnerHTML
Text Content dan Inner Text
● Selain textContent, terdapat property lain bernama innerText untuk mendapatkan isi text sebuah
element
● Tujuan nya sama, untuk mengambil atau mengubah isi text konten sebuah element, namun ada
perbedaannya
● textContent akan mengembalikan semua isi dari konten text sebuah element
● innerText bisa tahu, bagian text mana yang ditampilkan, dan dia hanya akan mengambil text yang
ditampilkan saja
Kode : Text Content dan Inner Text
Inner HTML
● Jika Text Content dan Inner Text hanya mengambil text saja, Inner HTML akan mengambil seluruh
element HTML nya sebagai text
● Ini juga cocok jika kita ingin mengubah isi dari element menggunakan text yang berisi tag HTML
Kode : Inner HTML
Mengubah Element dengan Inner HTML
● Salah satu kemampuan dari innerHTML adalah, kita bisa mengubah isi dari children sebuah
element hanya dengan string
● Tag yang terdapat di dalam String secara otomatis akan menjadi child element
Kode : Mengubah Element dengan Inner HTML
Window
Window
● Window merupakan representasi window yang berisikan DOM Document
● Beberapa JavaScript function sebenarnya berasal dari object Window, seperti alert(), confirm()
dan prompt()
● Ada banyak sekali property, method dan event yang bisa kita gunakan pada window
● Untuk menggunakan Window, kita tidak perlu membuat objectnya, cukup gunakan kata kunci
window
● https://developer.mozilla.org/en-US/docs/Web/API/Window
Kode: Window
Query Selector
Query Selector
● Sebelumnya kita sudah menggunakan method querySelectorAll() pada Document, sekarang kita
akan bahas lebih lengkap tentang Query Selector
● Query Selector merupakan method untuk menseleksi node sesuai dengan pola yang kita ingin cari
● Terdapat dua method untuk Query Selector :
○ Document.querySelector(pola) digunakan menyeleksi node pertama yang sesuai dengan pola
○ Document.querySelectorAll(pola) digunakan untuk menyeleksi semua node yang sesuai dengan pola
Pola Query Selector
● Pola untuk Query Selector adalah menggunakan CSS Selector
● Penggunakan Pola nya mirip ketika kita membuat Selector di CSS
● Jika belum tahu tentang CSS Selector, disarankan untuk dipelajari ulang tentang materi CSS
● https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Universal Selector
● Universal Selector merupakan selector untuk menyeleksi semua element
● Kita bisa menggunakan karakter *
● https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
Kode : Universal Selector
Type Selector
● Type Selector adalah selector yang digunakan untuk menyeleksi tag type HTML yang kita pilih
● Untuk menggunakannya, kita bisa langsung sebutkan nama tag nya
● https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors
Kode : Type Selector
Class Selector
● Class Selector merupakan selector untuk menyeleksi semua element yang memiliki class yang
sesuai selector
● Untuk menggunakannya, kita bisa sebutkan nama class nya diawali dengan titik
● https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
Kode : Class Selector
ID Selector
● ID Selector merupakan selector yang digunakan untuk menyeleksi id yang sesuai selector
● Untuk menggunakannya, kita bisa gunakan nama id diawali dengan karakter #
● https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors
Kode : ID Selector
Attribute Selector
● Attribute Selector merupakan selector yang bisa digunakan untuk menyeleksi element
berdasarkan attribute nya
● Kita bisa menggunakan selector [attribute]
● Atau bisa juga untuk tag tertentu, misal menggunakan selector div[attribute]
● https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Kode: Attribute Selector
Operator di Attribute Selector
● Kita juga bisa menggunakan operator pada attribut selector
● Misal [attribute=value], [attribute^=value] dan lain-lain
● https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#syntax
Kode : Operator Attribute Selector
Dan Selector Lainnya
● https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Node Type
Node Type
● Saat kita menyeleksi Node menjadi NodeList, kadang kita ingin tahu tipe Node tersebut
● Apakah Element, TextElement atau yang lainnya
● Node sendiri memiliki property bernama nodeType, dimana kita bisa melihat tipe dari node
tersebut
● https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
Kode : Node Type
HTML Element
HTML Element
● Element merupakan representasi dalam DOM
● Namun, saat menggunakan HTML, implementasi detail nya sebenarnya adalah HTML Element,
yaitu turunan dari Element
● HTML Element memiliki banyak sekali property dan method tambahan selain dari Element DOM
● Kebanyakan HTML Element memiliki property yang sesuai dengan attribute yang ada pada tag
html tersebut, oleh karena itu, kadang kita tidak butuh lagi menggunakan method setAttribute dan
getAttribute
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
Kode : HTML Element
HTML Form Element
HTML Form Element
● Form adalah salah satu element yang memiliki banyak sekali fitur diluar dari Element DOM
● Hal ini karena penggunaan Form memang lebih kompleks dibandingkan element HTML lainnya
● Ada banyak sekali property, method dan juga event yang terdapat pada HTML form element atau
input element
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
Kode : HTML Form Element
Kode : HTML Form Element JavaScript
Akses Form Via Name
● Salah satu kelebihan Form adalah, kita bisa mengakses form hanya dengan menggunakan form
name
● Kita bisa gunakan document.forms[name]
● Atau jika kita ingin mengakses input nya, kita juga bisa menggunakan name nya
document.forms[name][inputName]
Kode : HTML Form Element JavaScript
HTML Table Element
HTML Table Element
● Salah satu HTML Element yang kompleks selain Form adalah Table
● HTML Table Element juga memiliki banyak sekali property, method dan event yang khusus
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement
Kode : HTML Table Element
Kode : HTML Table Element JavaScript
HTML Element Lainnya
HTML Element Lainnya
● Sebenarnya masih banyak element-element HTML lainnya yang terdapat dalam Standard Web API
● Namun akan terlalu banyak jika dibahas satu per-satu
● Oleh karena itu saya sarankan teman-teman eksplore HTML element yang memang ingin dipelajari
di halaman documentation resminya
● https://developer.mozilla.org/en-US/docs/Web/API#interfaces
Materi Selanjutnya
Materi Selanjutnya
● JavaScript Async
● JavaScript Decorator
● JavaScript Web API
JavaScript
Document Object Model
Eko Kurniawan Khannedy
Eko Kurniawan Khannedy

- Technical architect at one of the biggest

ecommerce company in Indonesia
- 10+ years experiences
- www.programmerzamannow.com
- youtube.com/c/ProgrammerZamanNow
Eko Kurniawan Khannedy
● Telegram : @khannedy
● Facebook : fb.com/ProgrammerZamanNow
● Instagram : instagram.com/programmerzamannow
● Youtube : youtube.com/c/ProgrammerZamanNow
● Telegram Channel : t.me/ProgrammerZamanNow
● Email : [email protected]
Sebelum Belajar
● JavaScript Dasar
● JavaScript Object Oriented Programming
● JavaScript Standard Library
● JavaScript Modules
Agenda
● Pengenalan Document Object Model
● Document
● Node
● Element
● Attr
● Event
● Event Handler
● Dan lain-lain
Pengenalan
Document Object Model
Pengenalan DOM
● Ketika sebuah website di load oleh Browser, maka Browser akan membuat Document Object
Model untuk halaman website tersebut
● DOM dibuat dalam bentuk tree / pohon yang tiap cabang nya berisikan object dari jenis elemen
HTML
● JavaScript memiliki kemampuan untuk memanipulasi DOM, artinya dengan JavaScript, kita bisa
mengakses tiap object di DOM bahkan memanipulasi object nya
Diagram DOM
DOM dan JavaScript
● DOM bukanlah fitur atau bahasa pemrograman, DOM sebenarnya hanyalah representasi Object
dari Struktur halaman web
● DOM sendiri sebenarnya bukanlah bagian dari bahasa pemrograman JavaScript, melainkan bagian
dari Web API
● DOM sendiri di desain secara agnostik, artinya sebenarnya bisa digunakan menggunakan bahasa
pemrograman apapun, karena memang untuk membuat Web, kita tidak hanya bisa menggunakan
bahasa pemrograman JavaScript
Membuat Project
Membuat Project
● Buat folder kosong belajar-javascript-dom
Tipe Data
Tipe Data
● DOM memiliki representasi data
● Tidak terlalu banyak tipe data yang terdapat di DOM
● Oleh karena itu, sebenarnya DOM sangat sederhana, namun penggunaannya sangat bermanfaat
Tipe Data Keterangan

Document Merupakan representasi dari halaman web

Node Merupakan base class untuk semua tipe data di DOM, seperti
Document, Element, dan Attr

Element Merupakan representasi object element di halaman web, misal

head, body, form, input, dan lain-lain

NodeList Merupakan array/collection yang berisikan Node

Attr Atau attribute, merupakan representasi object attribute dalam

element

NamedNodeMap Merupakan collection yang berisikan Attr dalam bentuk Map

Document
Document
● Document merupakan representasi object dari halaman web
● Dalam satu halaman web, terdapat satu document, dan kita tidak perlu membuatnya secara
manual, karena otomatis akan ada di browser
● Untuk mengakses Document, kita bisa gunakan object document
● https://developer.mozilla.org/en-US/docs/Web/API/Document
document Object
● Document secara otomatis dibuat dalam browser ketika membuka halaman web, sehingga kita
tidak perlu membuat objek Document secara manual
● Kita bisa langsung menggunakan kata kunci document
Kode : Document
Document Property
● Document memiliki banyak sekali property
● Property dalam Document bisa kita gunakan untuk melihat semua data yang terdapat dalam
document halaman web
● https://developer.mozilla.org/en-US/docs/Web/API/Document#properties
Kode : Document Property
Document Method
● Document memiliki banyak sekali method
● Banyak method yang terdapat di document digunakan untuk memanipulasi data DOM, misal
membuat Node, Element, Attribute atau mengambil dan menyeleksi Node di dalam document
● https://developer.mozilla.org/en-US/docs/Web/API/Document#methods
Kode : Document Method
Node
Node
● Node adalah base class dari Document, Element dan Attr
● Artinya semua fitur yang dimiliki di Node dimiliki diturunannya
● Node dalam DOM itu bentuknya adalah Tree (pohon), artinya dengan Node, kita bisa melihat
Parent (node diatas nya), Children (node dibawahnya), Sibling (node disebelahnya)
● https://developer.mozilla.org/en-US/docs/Web/API/Node
Kode : Node
Node Property
● Node memiliki banyak sekali property
● Property di Node banyak berisi informasi reference ke Node lain nya, seperti ke node parent nya,
node children nya atau node sebelahnya
● https://developer.mozilla.org/en-US/docs/Web/API/Node#properties
Kode : Node
Node Method
● Node memiliki banyak sekali method
● Method di Node bisa digunakan untuk memanipulasi data Node di dalam Node tersebut, misal
menambah/menghapus Node children
● https://developer.mozilla.org/en-US/docs/Web/API/Node#properties
Kode : Node Method
Element
Element
● Element merupakan Node yang berbentuk element, biasanya adalah element HTML, misal <html>,
<head>, <body>, <div>, <table>, dan lain-lain
● https://developer.mozilla.org/en-US/docs/Web/API/Element
Kode : Element
Element Property
● Element memiliki banyak sekali property
● Dan karena Element adalah turunan dari Node, semua property Node pun bisa digunakan di
Element
● https://developer.mozilla.org/en-US/docs/Web/API/Element#properties
Kode : Element Property
Element Method
● Element memiliki banyak sekali method
● Dan karena Element adalah turunan dari Node, semua method Node pun bisa digunakan di
Element
● https://developer.mozilla.org/en-US/docs/Web/API/Element#methods
Kode : Element Method
Membuat Element
● Sebelumnya kita hanya mengambil element menggunakan id, artinya kita perlu buat dulu element
nya di HTML
● Kita juga bisa membuat object element baru, dan menambahkannya ke halaman web
● Kita bisa menggunakan method createElement(tag) pada Document
● https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
Kode : Membuat Element
NodeList
NodeList
● NodeList adalah kumpulan dari Node
● Biasanya NodeList digunakan ketika kita menyeleksi banyak Node sekaligus, misal ketika kita ingin
mengambil semua children di Node misalnya
● https://developer.mozilla.org/en-US/docs/Web/API/NodeList
Kode : NodeList
Live vs Static NodeList
● NodeList memiliki 2 tipe, yaitu Live dan Static
● Live artinya perubahan yang terjadi pada NodeList nya, akan merubah semua NodeList yang sama
● Static artinya perubahan yang terjadi pada NodeList nya, tidak akan merubah semua NodeList
yang sama
● Saat kita menggunakan element.childNodes, NodeList tersebut bersifat Live
● Saat kita menggunakan document.querySelectorAll(), NodeList tersebut bersifat Static
Kode : NodeList Live
Kode : NodeList Static
Attr
Attr
● Attr atau attribute merupakan representasi dari attribute sebuah element, atau singkatnya key-
value, key nya adalah nama attribute, dan value nya adalah value attribute
● https://developer.mozilla.org/en-US/docs/Web/API/Attr
Kode: Attr
Attr Value
● Kadang kebanyakan programmer ingin langsung mendapatkan value Attr
● Jarang sekali menggunakan object Attr nya
● Untuk mendapatkan value secara langsung, kita bisa menggunakan method getAttribute(name) di
Element
Kode : Attr Value
Membuat Attr
● Untuk membuat Attr, kita bisa menggunakan document.createAttribute(name)
● Lalu untuk menambahkannya ke Element, kita bisa gunakan element.setAttributeNode(attr)
● Atau kita juga bisa langsung membuat Attr langsung dengan name dan value nya menggunakan
element.setAttribute(name, value)
Kode: Membuat Attr
NamedNodeMap
NamedNodeMap
● NamedNodeMap merupakan kumpulan dari Attr
● Mirip seperti NodeList, namun isinya adalah Attr
● https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap
Kode: NamedNodeMap
Text Node
Text Node
● Saat kita membuat HTML, kadang kita membuat teks tanpa tag
● Saat halaman web tersebut direpresentasikan dalam DOM, text tanpa tag bukanlah merupakan
Element, melainkan Node
● Lebih tepatnya adalah Text Node
● https://developer.mozilla.org/en-US/docs/Web/API/Text
Kode: Text Node
Membuat Text Node
● Kita juga bisa membuat Text Node menggunakan method document.createTextNode(string)
● Hasilnya berupa Text yang bisa kita tambahkan ke Node lain
Kode: Membuat Text Node
Event Handler
Event Handler
● Node memiliki kemampuan bereaksi terhadap suatu kejadian, misal kejadian di klik, mouse di atas
node tersebut, dan lain-lain
● Ada banyak sekali jenis kejadian yang bisa kita buatkan aksinya ketika kejadian tersebut terjadi,
atau dikenal dengan nama Event Handler
● Ada dua cara kita menambahkan Event Handler ke Node, menggunakan Event Target atau Global
Event Handler
● https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
● https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers
Event Target
● Event Target merupakan parent class dari Node, artinya semua Node memiliki kemampuan dari
Event Target
● Pada Event Target, kita bisa menggunakan method addEventListener(type, callback) untuk
menambahkan Event Handler
● https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
Kode : Event Listener
Global Event Handler
● Selain menggunakan Event Target, untuk menambahkan Event Handler, kita juga bisa
menggunakan Global Event Handler
● Global Event Handler bukanlah sebuah super class, hanya kontrak yang bisa kita gunakan untuk
menambah event handler sesuai dengan type event nya
● https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers
Kode : Global Event Handler
Event
Jenis Event
● DOM sendiri memiliki banyak sekali jenis event, tidak hanya click
● Jenis event yang bisa kita gunakan biasanya disesuaikan dengan target event nya, misal pada
element video, ada event play, pause, sedangkan pada element button, tidak ada event play atau
pause
● Untuk lebih detailnya, ada apa saja jenis event nya, kita bisa lihat pada halaman berikut :
● https://developer.mozilla.org/en-US/docs/Web/Events
Event
● Saat kita membuat callback function untuk Event Handler, kita juga bisa menerima data event
yang memicu event itu terjadi
● Data Event tersebut bisa berbeda-beda, tergantung jenis Event nya, contohnya untuk Click, data
event nya berupa Mouse Event (yang berisi lokasi mouse dan lain-lain)
● Kita bisa lihat detail dari data tiap event di halaman documentation nya :
● https://developer.mozilla.org/en-US/docs/Web/API/Event
Kode : Event
Style
Style
● DOM juga bisa digunakan untuk memanipulasi attribute style pada element dengan lebih mudah
● Kita tidak perlu menggunakan setAttribute(“style”, “value”) setiap ingin mengubah style sebuah
element
● Kita bisa langsung gunakan element.style.name = value
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
Nama Style
● Saat kita mengubah sebuah style, penamaan style menjadi berubah
● Pada style css, rata-rata menggunakan format lowercase dan -, misal background-color
● Sedangkan pada DOM Style, menggunakan format pascalCase, misal backgroundColor
Kode : Style
InnerText dan InnerHTML
Text Content dan Inner Text
● Selain textContent, terdapat property lain bernama innerText untuk mendapatkan isi text sebuah
element
● Tujuan nya sama, untuk mengambil atau mengubah isi text konten sebuah element, namun ada
perbedaannya
● textContent akan mengembalikan semua isi dari konten text sebuah element
● innerText bisa tahu, bagian text mana yang ditampilkan, dan dia hanya akan mengambil text yang
ditampilkan saja
Kode : Text Content dan Inner Text
Inner HTML
● Jika Text Content dan Inner Text hanya mengambil text saja, Inner HTML akan mengambil seluruh
element HTML nya sebagai text
● Ini juga cocok jika kita ingin mengubah isi dari element menggunakan text yang berisi tag HTML
Kode : Inner HTML
Mengubah Element dengan Inner HTML
● Salah satu kemampuan dari innerHTML adalah, kita bisa mengubah isi dari children sebuah
element hanya dengan string
● Tag yang terdapat di dalam String secara otomatis akan menjadi child element
Kode : Mengubah Element dengan Inner HTML
Window
Window
● Window merupakan representasi window yang berisikan DOM Document
● Beberapa JavaScript function sebenarnya berasal dari object Window, seperti alert(), confirm()
dan prompt()
● Ada banyak sekali property, method dan event yang bisa kita gunakan pada window
● Untuk menggunakan Window, kita tidak perlu membuat objectnya, cukup gunakan kata kunci
window
● https://developer.mozilla.org/en-US/docs/Web/API/Window
Kode: Window
Query Selector
Query Selector
● Sebelumnya kita sudah menggunakan method querySelectorAll() pada Document, sekarang kita
akan bahas lebih lengkap tentang Query Selector
● Query Selector merupakan method untuk menseleksi node sesuai dengan pola yang kita ingin cari
● Terdapat dua method untuk Query Selector :
○ Document.querySelector(pola) digunakan menyeleksi node pertama yang sesuai dengan pola
○ Document.querySelectorAll(pola) digunakan untuk menyeleksi semua node yang sesuai dengan pola
Pola Query Selector
● Pola untuk Query Selector adalah menggunakan CSS Selector
● Penggunakan Pola nya mirip ketika kita membuat Selector di CSS
● Jika belum tahu tentang CSS Selector, disarankan untuk dipelajari ulang tentang materi CSS
● https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Universal Selector
● Universal Selector merupakan selector untuk menyeleksi semua element
● Kita bisa menggunakan karakter *
● https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
Kode : Universal Selector
Type Selector
● Type Selector adalah selector yang digunakan untuk menyeleksi tag type HTML yang kita pilih
● Untuk menggunakannya, kita bisa langsung sebutkan nama tag nya
● https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors
Kode : Type Selector
Class Selector
● Class Selector merupakan selector untuk menyeleksi semua element yang memiliki class yang
sesuai selector
● Untuk menggunakannya, kita bisa sebutkan nama class nya diawali dengan titik
● https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
Kode : Class Selector
ID Selector
● ID Selector merupakan selector yang digunakan untuk menyeleksi id yang sesuai selector
● Untuk menggunakannya, kita bisa gunakan nama id diawali dengan karakter #
● https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors
Kode : ID Selector
Attribute Selector
● Attribute Selector merupakan selector yang bisa digunakan untuk menyeleksi element
berdasarkan attribute nya
● Kita bisa menggunakan selector [attribute]
● Atau bisa juga untuk tag tertentu, misal menggunakan selector div[attribute]
● https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Kode: Attribute Selector
Operator di Attribute Selector
● Kita juga bisa menggunakan operator pada attribut selector
● Misal [attribute=value], [attribute^=value] dan lain-lain
● https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#syntax
Kode : Operator Attribute Selector
Dan Selector Lainnya
● https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Node Type
Node Type
● Saat kita menyeleksi Node menjadi NodeList, kadang kita ingin tahu tipe Node tersebut
● Apakah Element, TextElement atau yang lainnya
● Node sendiri memiliki property bernama nodeType, dimana kita bisa melihat tipe dari node
tersebut
● https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
Kode : Node Type
HTML Element
HTML Element
● Element merupakan representasi dalam DOM
● Namun, saat menggunakan HTML, implementasi detail nya sebenarnya adalah HTML Element,
yaitu turunan dari Element
● HTML Element memiliki banyak sekali property dan method tambahan selain dari Element DOM
● Kebanyakan HTML Element memiliki property yang sesuai dengan attribute yang ada pada tag
html tersebut, oleh karena itu, kadang kita tidak butuh lagi menggunakan method setAttribute dan
getAttribute
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
Kode : HTML Element
HTML Form Element
HTML Form Element
● Form adalah salah satu element yang memiliki banyak sekali fitur diluar dari Element DOM
● Hal ini karena penggunaan Form memang lebih kompleks dibandingkan element HTML lainnya
● Ada banyak sekali property, method dan juga event yang terdapat pada HTML form element atau
input element
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
Kode : HTML Form Element
Kode : HTML Form Element JavaScript
Akses Form Via Name
● Salah satu kelebihan Form adalah, kita bisa mengakses form hanya dengan menggunakan form
name
● Kita bisa gunakan document.forms[name]
● Atau jika kita ingin mengakses input nya, kita juga bisa menggunakan name nya
document.forms[name][inputName]
Kode : HTML Form Element JavaScript
HTML Table Element
HTML Table Element
● Salah satu HTML Element yang kompleks selain Form adalah Table
● HTML Table Element juga memiliki banyak sekali property, method dan event yang khusus
● https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement
Kode : HTML Table Element
Kode : HTML Table Element JavaScript
HTML Element Lainnya
HTML Element Lainnya
● Sebenarnya masih banyak element-element HTML lainnya yang terdapat dalam Standard Web API
● Namun akan terlalu banyak jika dibahas satu per-satu
● Oleh karena itu saya sarankan teman-teman eksplore HTML element yang memang ingin dipelajari
di halaman documentation resminya
● https://developer.mozilla.org/en-US/docs/Web/API#interfaces
Materi Selanjutnya
Materi Selanjutnya
● JavaScript Async
● JavaScript Decorator
● JavaScript Web API
HTTP

Eko Kurniawan Khannedy

Eko Kurniawan Khannedy

- Technical architect at one of the biggest

ecommerce company in Indonesia
- 10+ years experiences
- www.programmerzamannow.com
- youtube.com/c/ProgrammerZamanNow
Eko Kurniawan Khannedy
● Telegram : @khannedy
● Facebook : fb.com/ProgrammerZamanNow
● Instagram : instagram.com/programmerzamannow
● Youtube : youtube.com/c/ProgrammerZamanNow
● Telegram Channel : t.me/ProgrammerZamanNow
● Email : [email protected]
Agenda
● Pengenalan HTTP
● URL
● HTTP Method
● HTTP Header
● HTTP Body
● HTTP Response
● HTTP Cookie
● Dan lain-lain
Pengenalan HTTP
Pengenalan HTTP
● HTTP singkatan dari Hypertext Transfer Protocol
● HTTP merupakan protokol untuk melakukan transmisi hypermedia document, seperti HTML,
JavaScript, CSS, Image, Audio, Video dan lain-lain
● HTTP awalnya di desain untuk komunikasi antara Web Browser dan Web Server, namun saat ini
sering juga digunakan untuk kebutuhan lain
Client Server
● HTTP mengikuti arsitektur client dan server
● Client mengirimkan HTTP Request untuk meminta atau mengirim informasi ke server
● Dan server membalasnya dengan HTTP Response dari HTTP Request yang diterima
Diagram Client Server
Plain Language and Human Readable
HTTP didesain menggunakan bahasa yang mudah dimengerti oleh bahasa manusia, seperti :

● GET
● POST
● PUT
● DELETE
● HEAD
● OPTION
Stateless
● HTTP merupakan protokol yang stateless
● Artinya tiap HTTP Request merupakan request yang independen, tidak ada keterkaitan atau
hubungan dengan HTTP Request sebelum atau setelah nya
● Hal ini dilakukan agar HTTP Request tidak harus dilakukan dalam sequence, sehingga client bisa
melakukan HTTP Request secara bebas tanpa ada aturan harus dimulai dari mana
Session
● Jika HTTP merupakan protokol yang stateless, bagaimana dengan session? Misal client harus login
terlebih dahulu sebelum berinteraksi?
● Untuk menangani permasalahan seperti ini, HTTP memiliki fitur yang bernama HTTP Cookie
● HTTP Cookie memaksa client menyimpan informasi yang diberikan oleh server
HTTP Version
HTTP Version
● Spesifikasi HTTP selalu diperbaharui
● Saat ini, kebanyakan web berjalan di HTTP/1.1 atau HTTP2
● HTTP2 mulai hadir sekitar tahun 2015, dan saat ini sudah banyak diadopsi oleh semua Web di
Dunia
HTTP/1.1 vs HTTP/2
● Saat ini HTTP/1.1 merupakan fallback protocol, dimana Web Browser secara default akan
melakukan request menggunakan HTTP/2, jika web server tidak mendukung, maka web browser
akan melakukan fallback ke protocol HTTP/1.1
● Secara garis besar, spesifikasi HTTP/2 sama dengan HTTP/1.1, yang membedakan adalah pada
HTTP/2, HTTP Request yang dikirim dalam bentuk teks, secara otomatis menjadi binary, sehingga
lebih cepat dibandingkan HTTP/1.1
● Selain itu di HTTP/2, menggunakan algoritma kompresi untuk memperkecil request dan
mendukung multiplexing, sehingga bisa mengirim beberapa request dalam satu connection yang
sama
● Dari sisi pembuatan aplikasi, tidak ada perbedaan, semua ini biasanya sudah diurus secara
otomatis oleh Web Server yang kita gunakan
HTTPS
● Secara default, HTTP tidaklah aman
● HTTPS merupakan HTTP dengan enkripsi
● Perbedaan HTTP dan HTTPS adalah, pada HTTPS menggunakan SSL (Secure Sockets Layer) untuk
melakukan enkripsi HTTP Request dan HTTP Response
● Hasilnya HTTPS jauh lebih aman dibanding dengan HTTP biasa
● Web yang menggunakan HTTPS akan menggunakan https:// pada url nya, dan yang hanya
menggunakan HTTP tanpa enkripsi, akan menggunakan http://
HTTP Terminology
HTTP Terminology
● Saat kita belajar HTTP, ada banyak sekali menggunakan terminologi, istilah atau teknologi
● Dan kita perlu mengerti tentang hal tersebut
Web Browser
● Merupakan aplikasi yang digunakan untuk mengakses Web menggunakan protokol HTTP
● Contohnya aplikasi Google Chrome, Firefox, Opera, Safari, dan lain-lain
TCP
● TCP singkatan dari Transmission Control Protocol, adalah salah satu protokol dalam jaringan
komputer yang biasa digunakan oleh web, email, FTP atau lainnya
● Jika kita menggunakan jaringan internet, kemungkinan besar kita akan menggunakan protocol
TCP untuk melakukan koneksi jaringan nya
IP
● IP singkatan dari Internet Protocol
● IP digunakan sebagai identitas komputer di jaringan
● Setiap komputer baik itu client dan server akan memiliki IP
● Untuk mengecek IP jaringan kita di internet, contohnya kita bisa mengakses web
https://whatismyipaddress.com/
URL
● URL singkatan dari Uniform Resource Locator
● URL merupakan alamat dari sebuah resource di Web
DNS
● DNS singkatan dari Domain Name Server
● DNS merupakan tempat yang berisi data katalog pemetaan antara nama domain di URL menuju
lokasi IP komputer
● Saat Web Browser mengakses sebuah domain di web, sebenarnya prosesnya akan bertanya ke
DNS untuk mendapatkan IP, lalu Web Browser akan melakukan request ke IP tersebut
● Untuk mengecek IP sebuah domain, kita bisa gunakan website https://www.whatismyip.com/dns-
lookup/
Web Server
● Web Server merupakan aplikasi yang berjalan di jaringan Internet yang bertugas sebagai server
● Web Server berisi informasi dan data yang biasa diakses oleh client
● Web Server akan menerima request dari client, dan membalas request tersebut berupa informasi
yang diminta oleh client
HTTP Flow
HTTP Flow
● Bagaimana alur kerja HTTP?
● Dalam HTTP, biasanya terdapat dua pihak yang terlibat, yaitu Client dan Server
● Client akan mengirimkan Request
● dan Server akan menerima Request dan membalas dengan Response
Server
● Server merupakan sebuah komputer, dimana semua informasi disimpan pada komputer tersebut
● Komputer server biasanya menjalankan aplikasi Web Server agar bisa menerima protocol HTTP
Diagram HTTP Flow
Client
● Client merupakan komputer yang bertugas mengirim HTTP Request ke komputer Server
● Untuk mengirim request HTTP, biasanya client akan menggunakan aplikasi Web Browser
● Client dan Server harus terkoneksi dalam jaringan yang sama, agar bisa berkomunikasi
● Misal saja, client dan server terhubung dalam jaringan internet
Diagram HTTP Flow
Request
● Client akan mengirim request ke Server dalam bentuk HTTP Request
● HTTP Request berisikan informasi seperti lokasi resource, data yang dikirim jika ada, dan lain-lain
● HTTP Request akan diterima oleh Server
● Selanjutnya Server akan memproses request yang diminta oleh Client tersebut
Diagram HTTP Flow
Response
● Setelah Server memproses HTTP Request yang dikirim oleh Client
● Server akan membahas dengan HTTP Response
● HTTP Response biasanya berisikan data yang diminta oleh Client dalam HTTP Request
Diagram HTTP Flow
Browser Network Tool
Browser Network Tool
● Untuk lebih mempermudah melihat apa yang dilakukan di belakang Web Browser, biasanya Web
Browser memiliki fitur Network Tool
● Contohnya di browser seperti Google Chrome dan Firefox sudah memiliki Network Tool
● Dengan Network Tool, kita bisa melihat semua detail HTTP Request dan HTTP Response yang
dilakukan oleh Client dan Server
Tugas
● Buka website https://www.programmerzamannow.com
● Lalu lihat informasi HTTP Request dan HTTP Response yang terjadi menggunakan Network Tool
yang terdapat di Web Browser yang kita gunakan
HTTP Request dan Response
HTTP Message
● HTTP Request dan HTTP Response, sebenarnya adalah sebuah HTTP Message
● HTTP Message memiliki standarisasi format
● Dengan demikian, jika kita ingin membuat Client dan Server sendiri, sebenarnya bisa kita lakukan,
asal kita mengikuti standarisasi format HTTP Message
HTTP Message untuk Request
HTTP Message untuk Response
HTTP Method
HTTP Method
● Dalam HTTP Request, hal yang pertama kita perlu tentukan adalah HTTP Method
● HTTP Method mirip seperti kategori request
● Ada banyak HTTP Method yang dapat kita gunakan ketika membuat HTTP Request, dan kita bisa
sesuaikan sesuai dengan kebutuhan yang kita inginkan
HTTP Message
Jenis HTTP Method (1)
HTTP Method Keterangan

GET GET method digunakan untuk melakukan request data. Request

menggunakan GET hanya untuk menerima data, bukan untuk
mengirim data

HEAD HEAD method digunakan sama seperti dengan GET, tapi tanpa
membutuhkan response body

POST POST method digunakan untuk mengirim data ke Server, biasa

POST digunakan untuk mengirim data baru sehingga biasanya
memiliki request body
Jenis HTTP Method (2)
HTTP Method Keterangan

PUT PUT method digunakan untuk mengganti semua data yang

terdapat di Server dengan data baru yang dikirim di request

DELETE DELETE method digunakan untuk menghapus data

PATCH PATCH method digunakan untuk mengubah sebagian data

OPTIONS OPTIONS method digunakan untuk mendeskripsikan opsi

komunikasi yang tersedia
Jenis HTTP Method (3)
HTTP Method Keterangan

TRACE TRACE method merupakan request method untuk debugging.

Response TRACE method akan mengembalikan seluruh informasi
yang dikirim oleh Client. Saat membuat web, sangat
direkomendasikan untuk tidak mengaktifkan TRACE method ketika
sudah live di production
URL
URL
● URL singkatan dari Uniform Resource Locator
● URL merupakan alamat dari sebuah resource di Web
● URL wajib kita gunakan untuk menuju informasi resource yang akan kita tuju dalam Web
● Tanpa URL, Client atau Server tidak akan mengerti informasi apa yang ingin kita cari
Anatomi URL
● URL terdiri dari beberapa bagian
● Beberapa bagian wajib ada, beberapa bagian tidak wajib ada
● Berikut adalah contoh URL :
○ https://www.programmerzamannow.com/
○ https://www.programmerzamannow.com/premium-membership/
○ https://www.programmerzamannow.com/?search=java
Schema
● Bagian awal di URL adalah schema yang mengindikasikan protocol yang perlu digunakan oleh
Client
● Biasanya dalam URL website, schema protocol tersebut adalah http dan https
Authority
● Selanjutnya, dipisahkan dengan tanda :// diikuti dengan authority, yang terdiri dari nama domain
dan nomor port yang dipisah menggunakan titik dua
● Nama domain nanti akan ditanyakan ke DNS untuk mendapatkan alamat IP nya
● Namun kita juga bisa langsung menggunakan IP jika memang website tersebut tidak memiliki nama
domain
● Nomor port tidak wajib, tanpa nomor port, secara default bernilai 80 untuk http, dan 443 untuk
https
Path
● Selanjutnya setelah Authority, bagian selanjutnya adalah tidak wajib, yaitu Path
● Path biasanya berisikan informasi menuju ke resource yang kita tuju
● Path terlihat seperti kumpulan folder dan diakhiri dengan file yang ingin kita akses
Parameters
● Selanjutnya, dalam URL juga bisa terdapat informasi parameters, namun ini tidak wajib
● Parameter dipisah oleh karakter ? setelah Authority atau Path
● Parameter merupakan informasi tambahan yang berisi key=value, jika ingin menambahkan lebih
dari satu parameter, kita bisa tambahkan parameter dengan menggunakan karakter &
Anchor
● Anchor merupakan merupakan bagian yang tidak wajib di URL
● Anchor merupakan representasi bookmark dalam sebuah halaman website
● Misal jika dalam website terdapat banyak sekali bagian informasi, kita bisa gunakan anchor
sebagai bookmark ke tiap bagian informasi tersebut agar lebih mudah diakses
HTTP Header
HTTP Header
● HTTP Header merupakan informasi tambahan yang biasa dikirim di Request atau Response
● HTTP Header biasanya digunakan agar informasi tidak harus dikirim melalui Request Body atau
Response Body
● HTTP Header berisi key : value, dan saat ini sudah banyak sekali standarisasi nama key pada HTTP
Header
● https://en.wikipedia.org/wiki/List_of_HTTP_header_fields
HTTP Message
Contoh HTTP Header

HTTP Header Keterangan

Host Authority pada URL (wajib sejak versi HTTP/1.1)

Content-Type Tipe data dari HTTP Body

User-Agent Informasi user agent (seperti browser dan sistem operasi)

Accept Tipe data yang diterima oleh Client

Authorization Credential untuk autentikasi (misal username + password)

HTTP Status
HTTP Status
● HTTP Status merupakan kode HTTP Response yang mengindikasikan apakah sebuah request yang
diterima Server sukses, gagal atau ada hal lain yang harus diketahui oleh Client
● HTTP status diklasifikasikan dalam lima grup, yaitu :
● Informational Response (100-199)
● Successful Response (200-299)
● Redirect (300-399)
● Client Error (400-499)
● Server Error (500-599)
● https://en.wikipedia.org/wiki/List_of_HTTP_status_codes
HTTP Response
Informational Response (100-199)
● Informational response mengindikasi bahwa request telah diterima dan dimengerti
● Namun client diminta untuk menunggu tahapan akhir response
● Pada kenyataannya, informational response sangat jarang sekali digunakan
● https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#information_responses
Successful Response (200-299)
● Successful Response merupakan kode yang mengindikasi bahwa request yang dikirim oleh client
telah diterima, dimengerti dan sukses diproses oleh Server
● https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#successful_responses
Redirect (300-399)
● Redirect status code mengindikasi bahwa client harus melakukan aksi selanjutnya untuk
menyelesaikan request
● Biasanya redirect status code digunakan ketika lokasi sebuah resource berubah, sehingga Server
meminta Client untuk berpindah ke URL lain
● https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#redirection_messages
Client Error (400-499)
● Client error status code merupakan indikasi bahwa request yang dikirim oleh Client tidak diterima
oleh Server dikarenakan request yang dikirim dianggap tidak valid
● Contohnya client mengirim body yang salah, client melakukan request ke tanpa autentikasi di
resource yang mewajibkan autentikasi, dan lain-lain
● https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#client_error_responses
Server Error (500-599)
● Server error status code mengindikasi bahwa terjadi kesalahan di Server
● Biasanya ini terjadi ketika ada masalah di Server, seperti misalnya tidak bisa terkoneksi ke basis
data, terdapat jaringan error di server, dan lain-lain
● https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#server_error_responses
HTTP Body
HTTP Body
● HTTP Body merupakan data yang bisa dikirim di HTTP Request, atau data yang diterima dari HTTP
Response
● Artinya client bisa mengirim data ke server menggunakan HTTP Body, begitu juga sebaliknya
● Server bisa memberikan body di response menggunakan HTTP Body
HTTP Response
Content-Type
● HTTP Body erat kaitannya dengan Header key Content-Type
● Biasanya agar client dan server mudah mengerti isi HTTP Body, HTTP Message akan memiliki
Header Content-Type, yang berisi informasi tipe data HTTP Body
● HTTP Body bisa berisikan teks (html, javascript, css, json) atau binary (image, video, audio)
● Data Content-Type sudah memiliki standarisasi, misal nya bisa kita lihat di link berikut :
https://developer.mozilla.org/en-
US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
Redirect
Redirect
● Seperti yang sudah dijelaskan pada materi HTTP Status, untuk memaksa client melakukan redirect
ke halaman lain, kita bisa menggunakan http redirect status code (300-399)
● Lantas pertanyaannya, dari mana client tahu, harus melakukan redirect ke URL mana?
● Oleh karena itu, biasanya response HTTP Status redirect, selalu dibarengi dengan informasi URL
redirectnya, dan itu disimpan pada header Location
Contoh HTTP Response Redirect
HTTP Cookie
Stateless
● HTTP didesain stateless, artinya tiap request yang dilakukan, dia tidak tahu request sebelumnya
atau selanjutnya yang akan dilakukan
● Lantas pertanyaannya, bagaimana Server tahu, kalo Client sudah login sebelum mengakses
halaman tertentu?
● Hal ini, biasanya menggunakan fitur HTTP Cookie
HTTP Cookie
● HTTP Cookie merupakan informasi yang diberikan oleh server, dan client secara otomatis akan
menyimpan data tersebut, contohnya di Web Browser
● Ketika Web Browser melakukan request selanjutnya, maka Web Browser akan menyisipkan
cookie yang sudah diterima di request sebelumnya
● Dari cookie tersebut, Server bisa mengetahui apakah request tersebut merupakan request client
yang sudah login atau belum
Contoh Penggunaan HTTP Cookie
Cookie di HTTP Response
● Informasi cookie yang diberikan dari Server, ditempatkan pada Header dengan value Set-Cookie
● Cookie bisa lebih dari satu, jika kita Server memberikan lebih dari satu cookie, bisa menggunakan
beberapa key Set-Cookie di Header
Contoh Cookie di HTTP Response
Cookie di HTTP Request
● Setelah cookie dari HTTP Response diterima oleh Web Browser, maka akan disimpan di Web
Browser
● Selanjutnya HTTP Request selanjutnya akan mengirim cookie di tiap request, dimana cookie yang
dikirim bisa menggunakan Header dengan nama Cookie
● Berbeda dengan HTTP Response, untuk HTTP Request, Cookie harus digabung di satu header jika
lebih dari satu Cookie
Contoh Cookie di HTTP Request
Cookie Attributes
● Cookie memiliki atribut yang bisa ditambahkan ketika membuat cookie di HTTP Response
● Seperti masa berlaku cookie, apakah harus https, apakah tidak boleh diakses via script, dan lain-
lain
● https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie
HTTP Caching
HTTP Caching
● HTTP memiliki fitur yang bernama caching
● Caching adalah menyimpan data di client sampai batas waktu yang sudah ditentukan, sehingga jika
client ingin melakukan request resource yang sama, cukup ambil resource nya di client, tanpa
harus meminta ulang ke server
● HTTP Caching sangat cocok dilakukan untuk resource file static yang jarang berubah, seperti file
gambar, audio, video dan lain-lain
Diagram HTTP Caching
Header Cache Control
● Server ketika meminta agar client melakukan caching, maka HTTP Response perlu menambahkan
informasi Cache-Control di Header
● Cache-Control berisi informasi seperti berapa lama client bisa menyimpan data response tersebut,
sehingga tidak perlu meminta ulang ke server
● https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
Teknologi Lainnya
Teknologi Lainnya
● Server-Sent Event
● WebSocket
● Cross-Origin Resource Sharing
● RESTful API
● OAuth
JavaScript Async

Eko Kurniawan Khannedy

Eko Kurniawan Khannedy

- Technical architect at one of the biggest

ecommerce company in Indonesia
- 10+ years experiences
- www.programmerzamannow.com
- youtube.com/c/ProgrammerZamanNow
Eko Kurniawan Khannedy
● Telegram : @khannedy
● Facebook : fb.com/ProgrammerZamanNow
● Instagram : instagram.com/programmerzamannow
● Youtube : youtube.com/c/ProgrammerZamanNow
● Telegram Channel : t.me/ProgrammerZamanNow
● Email : [email protected]
Sebelum Belajar
● JavaScript Dasar
● JavaScript Object Oriented Programming
● JavaScript Modules
● JavaScript Document Object Model
● Belajar HTTP
Agenda
● Pengenalan Asynchronous
● Callback
● AJAX
● Promise
● Fetch API
● Async Await
● Web Worker
Pengenalan Asynchronous
Apa itu Synchronous?
● Program dalam JavaScript secara default akan dieksekusi baris per baris
● Secara default, proses di JavaScript akan dieksekusi secara Synchronous, artinya baris selanjutnya
akan dieksekusi setelah baris sebelumnya selesai dikerjakan
● Proses Synchronous juga biasa disebut Blocking, karena harus menunggu tiap proses selesai, baru
proses selanjutnya bisa dilakukan
Contoh Synchronous
Apa itu Asynchronous?
● Walaupun secara default proses di JavaScript dieksekusi secara Synchronous, namun kita bisa
membuatnya menjadi Asynchronous.
● Berbeda dengan proses Synchronous, pada proses Asynchronous, JavaScript tidak akan menunggu
proses tersebut selesai, melainkan JavaScript akan melanjutkan baris selanjutnya, tanpa harus
menunggu proses Asynchronous selesai.
● Proses Asynchronous juga biasa disebut Non-Blocking.
Contoh Asynchronous
Callback
Apa itu Callback?
● Callback, merupakan mekanisme untuk memanggil kembali kode yang ada di program dari proses
Async
● Callback biasanya dibuat dalam bentuk function as parameter, dan parameter function tersebut
akan dieksekusi saat proses Async selesai
● Dengan menggunakan Callback, program bisa menerima informasi yang dibutuhkan dari proses
yang berjalan secara Async
Async Method
Ada banyak method Async yang terdapat di JavaScript, yang akan kita bahas kali ini adalah :

● setTimeout(callback, timeInMilis), digunakan untuk menjalankan proses Async sekali dalam waktu
tertentu.
● setInterval(callback, timeInMilis), digunakan untuk menjalankan proses Async secara periodik
dalam waktu tertentu.
Kode : setTimeout
Kode : setInterval
AJAX
Apa itu AJAX?
● AJAX singkatan dari Asynchronous JavaScript and XML
● AJAX biasanya digunakan untuk mengambil atau mengirim data ke URL lain
● Untuk membuat AJAX, kita bisa menggunakan class XMLHttpRequest
● https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
Cara Kerja AJAX
Kode : Membuat AJAX
Menerima Data di AJAX
Menerima Data di AJAX
● AJAX biasanya digunakan untuk mengirim data ke Server atau menerima data dari Server
● Tiap request AJAX yang dilakukan, biasanya kita ingin mendapat informasi response yang
diberikan oleh Server
● Kita tidak bisa langsung mengambil response AJAX, karena proses AJAX adalah Async, sehingga
kita perlu menunggu sampai proses Async nya selesai.
● Untuk mendapatkan informasi AJAX, kita bisa menggunakan AJAX Callback, yang akan dieksekusi
setelah proses AJAX selesai
● Untuk menambahkan AJAX Callback, kita bisa tambahkan pada event load
● https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/load_event
● Dan untuk mengambil datanya dari server, kita bisa menggunakan property responseText
Kode : Menerima Data di AJAX
Response Status di AJAX
Response Status
● AJAX adalah proses komunikasi Client dan Server
● Dalam komunikasi Client dan Server, kita tidak bisa selalu menganggap proses tersebut akan
berjalan lancar.
● Akan ada banyak hal-hal yang bisa mengganggu proses AJAX yang bisa menyebabkan error,
seperti; koneksi internet bermasalah, error dari server, data dari client tidak valid, dan lain-lain.
● Server biasanya akan mengirimkan HTTP Status Code yang sesuai dengan jenis response nya,
seperti yang sudah dibahas di materi HTTP
● Untuk mengetahui status response dari Server, kita bisa menggunakan property status
● https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status
Response Status di AJAX
State di AJAX
State di AJAX
● AJAX memiliki tahapan state, dimana kita bisa mendapatkan banyak sekali state di Ajax
menggunakan property readyState
● Property readyState mengembalikan nilai number, dimana tiap number merupakan representasi
dari statenya
Daftar State
Ready State Change Event
● Jika kita ingin mendengarkan perubahan yang terjadi pada state, kita bisa menggunakan event
readystatechange
● https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange
Kode : Ready State Change Event
Hookbin
Hookbin
● Sebelum kita melanjutkan belajar AJAX, kita perlu bantuan Server sebagai tujuan pengiriman data
di AJAX
● Kita akan menggunakan salah satu website yang gratis dan lumayan populer untuk menerima data
AJAX yang kita kirim, yaitu Hookbin
● Hookbin adalah aplikasi yang bisa digunakan untuk menerima request HTTP dan menyimpan
datanya, dengan ini kita bisa menggunakan Hookbin untuk melihat detail dari data AJAX yang kita
kirim
● https://hookbin.com/
Alternative Lain
Jika teman-teman mendapat masalah ketika mengakses website Hookbin, ada banyak alternatif lain
website seperti Hookbin, misalnya :

● https://requestbin.net/
● https://pipedream.com/requestbin
● https://beeceptor.com/
Mengirim Data dengan AJAX
Mengirim Data dengan AJAX
● Saat kita menggunakan AJAX, biasanya bukan hanya untuk mengambil data dari Server
● Kadang kita juga ingin mengirim data dari Client ke Server, misalnya kita membaca semua data di
Web Form, lalu mengirimkan ke Server menggunakan AJAX
● Untuk melakukan ini, kita bisa menambahkan parameter data yang akan kita kirim pada method
send() milik XMLHttpRequest
● https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send
Kode : Web Form
Kode : Mengirim Data dengan AJAX
URL Search Param
URL Search Param
● Selain format JSON, kadang saat mengirim data menggunakan AJAX, kita hanya mengirim dalam
bentuk Query Parameter
● Pada kasus ini, kita bisa saja mengubah url nya dengan menambahkan Query Parameter, namun
ada cara yang lebih mudah, yaitu menggunakan object URLSearchParam
● Kita bisa memanfaatkan object URLSearchParam sebelum membuat URL
● https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
Kode : URL Search Param
Form Data dengan AJAX
Form Data dengan AJAX
● Selain JSON dan Query Param, kadang kita juga mengirim Form Data dari Client ke Server
menggunakan AJAX
● Untuk kasus ini kita tetap bisa menggunakan URLSearchParam
● Namun object URLSearchParam nya kita kirim di method send()
Kode : Form Data dengan AJAX
Upload File dengan AJAX
Upload File dengan AJAX
● Selain menggunakan JSON, Query Param, Form, kadang kita butuh mengirim file ke Server
● Untuk mengirim file ke Server, kita perlu menggunakan object Form Data, lalu kita perlu
menambahkan object File ke dalam FormData tersebut
● https://developer.mozilla.org/en-US/docs/Web/API/FormData
● https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
● https://developer.mozilla.org/en-US/docs/Web/API/File
● https://developer.mozilla.org/en-US/docs/Web/API/FileList
Kode : Upload File dengan AJAX
Promise
Apa itu Promise?
● Promise merupakan proxy untuk sebuah nilai di masa depan (Future) yang belum diketahui saat
pembuatan Promise tersebut.
● Biasa Promise digunakan sebagai proxy untuk proses Async.
● Penggunaan Promise sangat mudah, dan lebih mirip dengan kode Synchronous.
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
Masalah dengan Callback
Promise State

state pending fulfilled rejected

result undefined value error

Kode : Membuat Promise
Kode : AJAX dengan Promise
Promise Method
Promise Method
● Promise memiliki tiga method yang bisa kita gunakan
● then() untuk mendapatkan atau mengubah data ketika Promise sukses
● catch() untuk mendapatkan data error ketika Promise gagal
● finally() akan dieksekusi ketika terjadi sukses atau gagal pada Promise
● https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Promise#instance_methods
Kode : Promise Method
Promise Static Method
● Promise juga memiliki beberapa static method
● Promise.all() digunakan untuk mengeksekusi beberapa promise sekaligus dan menunggu semua
hasil promise nya
● Promise.any() digunakan untuk mengeksekusi beberapa promise sekaligus dan mengambil hasil
promise paling cepat
● Dan lain-lain
● https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Promise#static_methods
Kode : Get Product Function
Kode : Promise Static Method
Fetch API
Fetch API
● Fetch API merupakan fitur baru sebagai alternatif AJAX
● Saat menggunakan AJAX, kita perlu menggunakan Callback untuk menerima response atau data
dari Server, sedangkan Fetch API sudah menggunakan Promise, sehingga penggunaan Fetch API
lebih mudah dibandingkan AJAX
● Hampir semua browser modern sekarang sudah mendukung menggunakan Fetch API
● Apa yang bisa kita lakukan di AJAX, bisa juga kita lakukan di Fetch API
● https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Request
● Saat kita akan mengirim request menggunakan Fetch API, kita perlu membuat object Request
● Hal ini menjadi lebih rapi dibandingkan menggunakan AJAX
● Kita bisa membuat object Request, lalu dikirim menggunakan Fetch API
● Dan saat membuat Request, kita bisa menentukan data yang ingin kita kirim
● https://developer.mozilla.org/en-US/docs/Web/API/Request/Request
Kode : Membuat Request
Kode : Menggunakan Fetch API
Kode : Fetch API Tanpa Object Request
Response
● Hasil dari Fetch API adalah sebuah Promise
● Promise tersebut berisikan object Response
● Ada banyak property dan method pada object Response, kita bisa menggunakannya sesuai dengan
yang kita butuhkan
● https://developer.mozilla.org/en-US/docs/Web/API/Response
Kode : Menggunakan Response
Async Await
Async Await
● Async Await adalah fitur di JavaScript yang digunakan untuk mempermudah proses pembuatan
kode Promise.
● Dengan menggunakan Async Await, kita bisa membuat kode Asynchronous dengan gaya
Synchronous
Async
● Async digunakan untuk menandakan bahwa Function tersebut adalah Async, dan mengembalikan
Promise
● Dengan menggunakan Async, kita tidak perlu membuat Promise secara manual lagi
Kode : Async
Await
● Await digunakan untuk mendapatkan value hasil dari Promise
● Await hanya bisa digunakan dalam Async Function
Kode : Await
Error Handler di Async Await
● Saat kita menggunakan Promise, kita bisa menggunakan catch() ketika terjadi error
● Bagaimana pada kasus Async Await?
● Pada Async Await, kita bisa menggunakan try catch untuk melakukan penanganan error
Kode : Try Catch
Web Worker
Thread di JavaScript
● JavaScript adalah Single Thread (Single Proses), artinya walaupun proses yang kita buat adalah
Async, tapi tetap akan dijalankan dalam Thread (Proses) yang sama.
● Kemampuan satu Thread dalam mengelola beberapa pekerjaan, dinamakan Concurrent.
● Kemampuan menjalankan beberapa Thread untuk mengelola satu atau lebih pekerjaan, dinamakan
Paralel.
● Dan untuk membuat proses secara Paralel, kita bisa menggunakan Web Worker
Kode : Proses Lambat
Web Worker
● Web Worker adalah kemampuan yang untuk menjalankan proses di Thread yang berbeda
dibanding Main Thread.
● Keuntungan menggunakan Web Worker adalah, jika terdapat proses yang membutuhkan waktu
lama, Web kita tidak akan Freeze, karena proses tersebut bisa kita jalankan di Thread yang
berbeda dari Main Thread (yang biasa digunakan oleh UI)
● https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API
Diagram Web Worker
Worker
● Untuk menggunakan Web Worker API, kita bisa membuat object Worker
● https://developer.mozilla.org/en-US/docs/Web/API/Worker
● Saat kita membuat object Worker, Worker tidak akan secara otomatis berjalan, melainkan kita
perlu memberi perintah dengan cara mengirim pesan
● Untuk mengirim pesan, kita bisa gunakan method postMessage()
● Sedangkan untuk menerima balasan dari worker, kita bisa menggunakan event listener onmessage
● Data yang diterima adalah object MessageEvent
● https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent
Kode : Membuat Worker
Kode : File Worker
Materi Selanjutnya
Materi Selanjutnya
● JavaScript Web API : https://developer.mozilla.org/en-US/docs/Web/API