BOM

Singkatan dari Browser Object Model. Objek JavaScript yang tersedia di browser yang
dapat digunakan untuk mengontrol browser.

Browser
Aplikasi yang digunakan untuk mengakses sebuah website.

CSS
Style sheet language yang digunakan untuk mendeskripsikan visual yang harus
diterapkan pada markup language, salah satunya HTML.

DOM
Singkatan dari Document Object Model, Objek JavaScript yang tersedia di browser
yang dapat digunakan untuk mengontrol dan memanipulasi konten yang ditampilkan pada
website.

HTML
Markup language yang digunakan untuk menyusun struktur website.

JavaScript
Bahasa pemrograman yang dapat digunakan oleh browser untuk membuat website tampak
interaktif.

Local Storage
Salah satu Browser API yang digunakan untuk menyimpan data tanpa ada batasan waktu.
Data yang disimpan tidak akan hilang bila browser atau tabs browser ditutup kecuali
jika kita menghapusnya.

Server
Komputer yang dapat melayani permintaan dari komputer lainnya.

Session Storage
Salah satu Browser API yang digunakan untuk menyimpan data sementara pada browser.
Data akan hilang ketika browser atau tab browser ditutup.

Setiap browser menyediakan apa yang disebut Browser Object Model atau BOM yang bisa
kita gunakan dalam kode JavaScript kita. Dalam browser, BOM ini diwakilkan oleh
sebuah objek bernama window.

Pada sub-modul ini, kita akan membahas lebih dalam mengenai tiga method dari BOM.
Ketiganya adalah alert(), prompt(), dan diakhiri dengan objek console.
method alert()
Method alert() merupakan salah satu method BOM yang menerima satu parameter
opsional berupa data string yang akan ditampilkan melalui sebuah pop-up browser.
Sama seperti memanggil method pada umumnya pada JavaScript, bukan? Kita juga bisa
memasukkan variabel sebagai parameternya seperit berikut.

let pesan = 'Halo user!';

alert(pesan);

Sebelumnya kita telah mempelajari penggunaan method alert() untuk menampilkan pesan
dalam dialog browser. Nah, selain menampilkan pesan, kita juga akan belajar cara
mengambil data input dari user melalui dialog browser, yaitu prompt(). Method ini
akan menampilkan sebuah dialog browser yang meminta user untuk mengisi kolom
inputnya. Karena bisa menangkap input dari user, method ini memiliki lebih banyak
fungsionalitas ketimbang alert().
Nilai Return dari prompt()
Jika kita lihat, sebenarnya method alert() mengembalikan sebuah value berupa
undefined. Namun, prompt() akan mengembalikan sebuah nilai sesuai dengan inputkan
oleh user.
let pesanInput = prompt('Masukkan pesan sesukamu...');

Kita bisa melihat bahwa nilai yang tersimpan di variabel pesanInput sesuai dengan
input yang diberikan user, yakni "Aku suka belajar koding!". Jika user tidak
mengisi apa pun dan tetap menekan tombol "OK", maka nilai yang diberikan hanya
string kosong.
ada satu hal yang perlu kita ingat selama menggunakan prompt(), yakni nilai apa pun
yang dimasukkan oleh user akan diproses dan dikembalikan menjadi data string.

let pesanInput = prompt('Silakan masukkan angka...');

Ketika kita menampilkan tipe data dari variabel pesanInput, maka sudah pasti tipe
datanya adalah string, walau yang kita masukkan berupa angka.

console.log(typeof pesanInput); // output -> 'string'

Hal ini perlu kita ingat baik-baik. Kode tidak bisa menduga bahwa variabel
pesanInput merupakan string atau number, ia akan tetap mengeluarkan string.
Meskipun demikian, kita bisa cast atau parse hasilnya ke tipe data tertentu. Namun,
harap lebih teliti karena jika kita salah melakukan parse ke tipe data maka akan
menghasilkan NaN. Sebagai contoh, kita ingin mendapatkan value number dari prompt()
maka kita bisa menggunakan cara ini.
let pesanInput = Number(prompt('Masukkan angka sesukamu...'));
Jika kita periksa tipe data dari hasilnya, maka hasilnya berupa number. Selain
Number(), kita juga bisa menggunakan function parseInt() untuk melakukan parsing
data string ke number.

Memberikan Nilai Default pada prompt()

Terdapat satu parameter lagi yang bisa kita masukkan ke prompt(), di mana parameter
ini berguna sebagai nilai alternatif. Mari kita jalankan kode berikut.
Terdapat satu hal penting, yaitu ketika dialog box dari prompt() muncul, maka kita
tidak bisa berinteraksi dengan komponen lain pada halaman web sampai dialog box
tersebut ditutup. Hal ini sama halnya dengan alert().

Browser Object Model (BOM):

Objek JavaScript yang tersedia di browser yang dapat digunakan untuk mengontrol
browser.
Member dari BOM yang sering digunakan:
alert: Menampilkan pop-up pesan pada browser.
prompt: Menampilkan pop-up pesan yang dapat menerima input dari pengguna.
console: Menampilkan pesan atau nilai pada console browser.
Document Object Model (DOM):
Objek JavaScript yang tersedia di browser yang dapat digunakan untuk mengontrol dan
memanipulasi konten yang ditampilkan pada website.
DOM Tree:
Struktur Website dalam bentuk JavaScript objek yang terbentuk seperti bagan pohon.
DOM Tree terbentuk berdasarkan dari struktur berkas HTML.
Teknik manipulasi DOM:
Mendapatkan Elemen: document.querySelector, document.querySelectorAll,
document.getElementById, dan sebagainya.
Membuat Elemen: document.createElement.
Mengubah Konten: element.innerHTML, element.innerText, element.setAttribute(), dan
sebagainya.
Menambahkan Element: element.appendChild.

apa keuntungan lebih yang ditawarkan method addEventListener()? Kelebihannya adalah

kita bisa menambahkan satu atau lebih fungsi sebagai event handler. Fitur itulah
yang tidak dapat dilakukan oleh event handler inline. window.addEventListener
Kenapa kita harus mempelajari custom event?" Jawabannya adalah tidak seperti event
yang biasanya “dikenali” oleh method addEventListener, custom event memungkinkan
kita untuk menjalankan sebuah event handler setelah sebuah event handler lain
selesai dipanggil. Pada awal isi dari tag <script>, buatlah variabel baru dan
inisialisasikan dengan custom event yang bernama “changeCaption”.
BUBBLING
bubbling adalah ketika sebuah event terjadi pada sebuah elemen, maka event handler
milik elemen tersebut akan dijalankan terlebih dahulu yang diikuti event handler
elemen parent-nya, dan seterusnya sampai elemen paling atas.
CAPTURING
Capturing merupakan kebalikan dari bubbling yang akan men-trigger event handler
dari parent ke child.

event.preventDefault(). Apa fungsi kode tersebut? Ketika kita melakukan proses

submit pada form, halaman web akan melakukan proses refresh. Nah,
event.preventDefault() akan mencegah proses refresh tersebut.

Event onInput
Event onInput akan dijalankan setiap kali kita menulis atau menghapus apa pun pada
sebuah field input yang memiliki event listener tersebut. Berkas HTML yang telah
ditunjukkan di materi sebelumnya, field untuk mengisi nama panggilan (tag input
dengan id inputNama) memiliki batas 15 karakter. Kita ingin membuat sebuah event
handler, yang mana ketika menulis nama, akan ditampilkan sisa karakter yang dapat
dituliskan oleh user.

Event onFocus
Event onFocus akan dijalankan ketika melakukan klik di sebuah elemen input. Kita
akan mencoba untuk menampilkan tulisan berupa notifikasi jumlah karakter yang masih
diperbolehkan. Untuk dapat melakukan hal tersebut, kita harus menambahkan sebuah
event handler pada elemen input yang menerima penulisan nama panggilan untuk event
onFocus.

Event onBlur
Event onBlur akan dijalankan ketika pada kondisi yang terbalik dengan event
onFocus, yakni jika kita “pergi” dari elemen yang memiliki event handler untuk
event onFocus. Apa maksud dari “pergi”? Maksudnya adalah kita tidak lagi
berinteraksi secara langsung dengan elemen tersebut, seperti kita telah melakukan
klik pada elemen lain.

Event onChange
Event onChange memiliki perilaku yang mirip dengan onInput, yaitu event yang
terjadi jika terdapat perubahan nilai. Namun, terdapat perbedaan yang dimiliki oleh
onChange.

Event onInput akan terjadi jika elemen input mengalami perubahan nilai secara
langsung, sedangkan event onChange akan terjadi jika elemen input mengalami
perubahan nilai dan menjadi blur (user tidak focus pada elemen tersebut).
Sederhananya, event onChange seakan-akan merupakan gabungan dari event onInput dan
onBlur.

Event onCopy
Event onCopy tergolong dalam kelompok clipboard events. Event ini terjadi jika kita
melakukan operasi pada clipboard seperti copy, cut, dan paste. Kita hanya akan
membahas dua saja, yaitu event onCopy sebagai operasi copy dan event onPaste
sebagai operasi paste.

Event onPaste
Event onPaste tergolong dalam kelompok clipboard events seperti yang kita bahas
sebelumnya. Event ini akan terjadi ketika melakukan operasi paste pada elemen yang
sudah kita beri event listener untuk event onPaste.