BAB II

JAVASCRIPT

A. Tujuan
a. Peserta didik dapat menggunakan JavaScript

B. Perlengkapan
a. Modul 3. Javascript
b. Software Text Editor atau IDE pemrograman WEB (Notepad++, Virtual Studio
Code, Sublim, dsb)
c. Komputer dengan sistem operasi Windows

C. Materi

1) Apa itu Javascript?

JavaScript awalnya dibuat untuk “membuat halaman web hidup”. Program pada
bahasa ini disebut skrip. Mereka dapat ditulis langsung di HTML halaman web dan
dijalankan secara otomatis saat halaman dimuat. Skrip disediakan dan dieksekusi
sebagai teks biasa. Mereka tidak memerlukan persiapan atau kompilasi khusus
untuk menjalankannya.

Saat ini JavaScript dapat dijalankan tidak hanya di browser, tetapi juga di server,
atau sebenarnya di perangkat apa pun yang memiliki program khusus yang disebut
JavaScript Engine. JavaScript awalnya bernama Mocha, lalu berubah menjadi
LiveScript saat browser Netscape Navigator 2.0 rilis versi beta (September 1995).
Namun, setelah itu dinamai ulang menjadi JavaScript.

Ada beberapa hal yang membuat JavaScript unik, diantaranya:

- Integrasi penuh dengan HTML/CSS.
- Hal-hal sederhana dilakukan dengan sederhana.
- Didukung oleh semua browser utama dan diaktifkan secara default.
 JavaScript menjadi satu-satunya teknologi browser yang menggabungkan
ketiga hal tersebut. Itulah yang membuat JavaScript unik dan ini adalah alat paling
luas untuk membuat antarmuka peramban. Peralatan yang harus disiapkan untuk
belajar JavaScript adalah Web Browser (Google Chrome, Firefox, Opera, dll) dan
Teks Editor (Visual Studio Code).

2) Console JavaScript
Kode rentan terhadap kesalahan atau error. Namun di browser, pengguna tidak
melihat error secara default. Jadi, jika ada yang salah dalam skrip, tidak akan
melihat apa yang rusak dan tidak dapat memperbaikinya.

Untuk melihat error dan mendapatkan banyak informasi berguna lainnya

tentang skrip, “alat pengembang” telah disematkan di browser. Alat pengembang
memiliki banyak fitur. Salah satunya untuk melihat pesan error, kita bisa melihat
melalui console. Console JavaScript dapat kita buka melalui Inspect Element >
Console.

Tampilan yang tepat dari alat pengembang bergantung pada versi peramban
Anda. Di dalam console, terdapat simbol > di bawah pesan error. Ini menandai
“baris perintah” di mana kita bisa menulis perintah atau kode-kode JavaScript dan
jalankan Enter untuk menjalankannya.

3) Dasar - Dasar JavaScript

a) Hello World
Program JavaScript dapat dimasukkan hampir dimana saja ke dalam dokumen
HTML menggunakan tag <script>. Tag <script> berisi kode JavaScript yang
dijalankan secara otomatis saat browser memproses tag. Seperti contoh di bawah
ini.

Jika kita memiliki banyak kode JavaScript, kita dapat memasukkannya ke dalam
file terpisah. File skrip dilampirkan ke HTML dengan atribut src.

Di sini, /path/to/script.js adalah jalur absolut ke skrip dari root situs.

Kita juga dapat memberikan jalur relatif dalam halaman saat ini. Misalnya,
src=”./script.js” berarti file “script.js” berada di folder saat ini. Selain
itu, kita juga dapat memberikan URL lengkap. Contohnya:
 Untuk melampirkan beberapa skrip, gunakan beberapa tag:

b) Struktur Kode
Hal pertama yang akan dipelajari adalah blok pembangun kode.

- Pernyataan (Statements)
Pernyataan adalah konstruksi sintaks dan perintah yang melakukan tindakan.
Kita sudah melihat pernyataan alert(‘Hello World’) yang menunjukkan
pesan “Hello World”. Biasanya, pernyataan ditulis pada baris terpisah untuk
membuat kode lebih mudah dibaca.

- Titik Koma
Titik koma dapat dihilangkan dalam banyak kasus ketika ada jeda baris.
Namun, sebaiknya letakkan titik koma di antara pernyataan meskipun
dipisahkan oleh baris baru.

- Komentar
Seiring berjalannya waktu, program menjadi lebih kompleks. Menjadi perlu
untuk menambahkan komentar yang menjelaskan apa yang dilakukan kode.
Komentar dapat diletakkan di sembarang tempat skrip. Mereka tidak
mempengaruhi eksekusinya, karena mesin mengabaikannya begitu saja.
Komentar satu baris dimulai dengan dua karakter garis miring //.
 Komentar multiline dimulai dengan garis miring dan tanda bintang /* dan
diakhiri dengan tanda bintang dan garis miring */. Biasanya juga berguna
untuk menonaktifkan sementara bagian dari kode.

c) Variabel
Variabel adalah penyimpanan bernama untuk data. Kita dapat menggunakan
variabel untuk menyimpan data yang dibutuhkan pada program. Untuk membuat
variabel dalam JavaScript, gunakan kata kunci let.
Pernyataan di bawah ini mendeklarasikan sebuah variabel dengan nama
“message”.
 Sekarang, kita dapat memasukkan beberapa data ke dalamnya dengan
menggunakan operator penugasan =.

String sekarang disimpan ke dalam area memori yang terkait dengan variabel.
Kita dapat mengaksesnya menggunakan nama variabel.

Agar ringkas, kita dapat menggabungkan deklarasi variabel dan penugasan

menjadi satu baris.

Untuk penamaan variabel, terdapat dua batasan pada nama variabel dalam
JavaScript:
1. Nama hanya boleh berisi huruf, angka, atau simbol $ dan _.
2. Karakter pertama tidak boleh berupa angka.

Ketika nama mengandung banyak kata, camelCase biasanya digunakan.

Dimana setiap kata kecuali yang pertama dimulai dengan huruf kapital, seperti
myVeryLongName.Selain itu, ada kata-kata yang tidak dapat digunakan sebagai
nama variabel karena digunakan oleh bahasa itu sendiri. Misalnya: let, class,
return, dan function.

Untuk mendeklarasikan variabel konstan (tidak berubah), gunakan const

alih-alih let. Variabel yang dideklarasikan menggunakan const disebut “konstanta”.
Mereka tidak dapat ditugaskan kembali. Apabila dilakukan, akan menyebabkan
kesalahan.

Ada praktik luas untuk menggunakan konstanta sebagai alias untuk nilai yang
sulit diingat yang diketahui sebelum dieksekusi. Konstanta tersebut diberi nama
menggunakan huruf kapital dan garis bawah. Misalnya, membuat variabel konstanta
untuk warna dalam format yang disebut heksadesimal. Hal tersebut bermanfaat
untuk menghindari kesalahan saat pengetikan seperti #FF7F00 daripada
COLOR_ORANGE.
 Kapan kita harus menggunakan huruf kapital untuk konstanta dan kapan kita
harus menamainya secara normal? Mari kita perjelas.
Menjadi “konstanta” hanya berarti bahwa nilai variabel tidak pernah berubah. Tetapi
ada konstanta yang diketahui sebelum eksekusi (seperti nilai heksadesimal pada
warna biru) dan ada konstanta yang dihitung saat run-time, selama eksekusi, tetapi
tidak berubah setelah penetapan awal. Seperti,

Nilai dari pageLoadTime tidak diketahui sebelum halaman dimuat, jadi diberi
nama secara normal, Tetapi itu masih konstan karena tidak berubah setelah
penugasan. Dengan kata lain, konstanta bernama kapital hanya digunakan sebagai
alis untuk nilai “hard-coded”.

Ada beberapa aturan yang baik untuk penulisan dan penamaan variabel,
diantaranya:
- Gunakan nama yang bisa dibaca manusia.
- Jauhi singkatan atau nama pendek seperti a, b, c, kecuali Anda benar-benar
tahu apa yang Anda lakukan.
- Buatlah nama secara deskriptif dan ringkas.
 d) Tipe Data
Dalam JavaScript terdapat beberapa tipe data yang dapat digunakan. Kita bisa
menggunakan tipe data apa saja di dalam sebuah variabel. Terdapat tujuh jenis tipe
data dalam JavaScript. Lima di antaranya adalah String, Number, Boolean, Null, dan
Undefined.

Pertama, tipe data String. Tipe data String pada dasarnya adalah sekelompok
karakter. Pada tipe data String, Anda bisa menggunakan tanda kutip ganda maupun
tanda kutip tunggal. Jika Anda memasukkan karakter apapun, misalnya 50 dalam
tanda kutip, maka angka tersebut akan diidentifikasi sebagai String.

Kedua, tipe data Number. Tipe data Number dapat berupa bilangan bulat
maupun bilangan pecahan. Tipe data Number untuk bilangan bulat disebut Integer
(Int), sedangkan tipe data Number untuk bilangan pecahan disebut Float.

Ketiga adalah tipe data Boolean. Tipe data ini cukup khusus, dikarenakan hanya
dapat menampung dua nilai, yaitu nilai True dan False.

Keempat adalah tipe data Null. Tipe data ini hanya memiliki satu nilai dalam
JavaScript, yaitu 0. Biasanya digunakan untuk menghapus isi variabel tanpa
menghapus variabel itu sendiri.

Tipe data terakhir adalah tipe data Undefined. Tipe data ini biasanya terjadi
ketika mengakses objek yang tidak ada atau mengakses variabel yang belum diberi
nilai.

Typeof adalah operator untuk mengembalikan jenis tipe data dari sebuah
operand. Bisa dikatakan juga, typeof adalah operator bawaan yang mengembalikan
string yang menunjukkan jenis operan yang tidak dievaluasi.

e) Array
Array adalah daftar nilai dan Anda dapat mendeklarasikan hanya menggunakan
var. Sintaks Array pada JavaScript mirip dengan variabel biasa. Untuk
mendeklarasikan sebuah array, Anda bisa menggunakan kurung siku, dan
memisahkan antar item menggunakan tanda koma. Selain itu, Anda juga dapat
mendeklarasikan array kosong dengan hanya menggunakan tanda kurung siku tanpa
ada item. Item yang terdapat dalam array bisa berupa String, Number, bahkan
Boolean.

Untuk mengakses elemen tertentu dari sebuah array, Anda bisa membuka tanda
kurung siku, kemudian tentukan angka dari nol hingga berapapun. Angka tersebut
disebut juga indeks. Array merupakan indeks berbasis nol, yang berarti item pertama
berada di posisi 0, item kedua berada di posisi satu, dan seterusnya. Jika Anda
menentukan indeks yang lebih besar dari panjang array, maka akan menghasilkan
Undefined. Untuk melihat panjang array atau jumlah item dalam array, Anda bisa
menggunakan sintaks namaArray.length.

Dalam array, terdapat beberapa metode yang bisa digunakan, diantaranya yaitu
push, pop, shift, dan unshift. Metode push akan menambahkan item ke akhir array.
Untuk menambahkan item, Anda bisa menggunakan sintaks
namaArray.push[item]. Sedangkan metode pop akan menghapus item dari akhir
array. Penulisan sintaks metode ini sama dengan metode push, hanya diganti dengan
pop. Metode ketiga adalah shift. Metode ini untuk menghapus item dari depan atau
awal array. Sedangkan unshift adalah metode untuk menambahkan item ke depan
array.

f) Object
Object merupakan kumpulan dari properti. Properti itu sendiri merupakan
asosiasi antara variabel dan nilai. Misalnya warna = “merah” , dimana “warna”
tersebut merupakan variabel dan “merah” merupakan nilai. Properti juga dapat
memiliki fungsi sebagai nilai, dalam hal ini properti tersebut disebut method. Untuk
membuat object baru, Anda mulai dengan sebuah variabel, diikuti new object()
seperti pada gambar di bawah ini.
 Selanjutkan, kita akan menambahkan beberapa properti dari object tersebut.
Untuk menambahkan properti, kita harus memanggil variabel object diikuti tanda
titik atau dot(.) diikuti properti.

Untuk pemanggilan object, silahkan buka console, lalu ketikkan nama variabel
object.

Maka, akan menghasilkan object yang berisi properti yang telah dibuat.
 Kita juga dapat mengubah nilai dari properti, seperti misalnya kita akan
mengubah nilai nama menjadi “Jessica”. Sintaks yang perlu kita gunakan adalah
variabel properti diikuti tanda kurung siku, di dalam tanda kurung siku([]), ketikkan
variabel properti yang akan diubah, kemudian diikuti tanda sama dengan(=), diikuti
nilai perubahan dari variabel properti tersebut. Bisa dilihat pada gambar di bawah
ini.

Silahkan akses object seperti langkah sebelumnya, dan lihat nilai dari variabel
properti nama telah berubah.
 Sekarang, kita juga bisa menggunakan object di dalam object, dengan cara object
adalah nilai untuk properti yang ditandai dengan tanda kurung kurawal({}). Seperti
pada contoh di bawah ini.

Ketika object tersebut diakses dengan pemanggilan pada console menggunakan

“person.job.music” maka akan menghasilkan nilai dari properti object.

Ketika object tersebut diakses dengan pemanggilan pada console menggunakan

“person.job” maka akan menghasilkan object yang berisi properti.

Ketika object tersebut diakses dengan pemanggilan pada console menggunakan

“person” maka akan menghasilkan object seperti di bawah ini.

Jadi, ini menunjukkan bagaimana Anda dapat mengakses properti object

tersebut, bahkan jika object tersebut disematkan satu sama lain.
 Namun, Anda juga dapat menentukan properti saat pertama kali
menginisialisasi object. Perhatikan contoh di bawah ini.

Silahkan akses object seperti langkah sebelumnya, maka akan menghasilkan

object yang berisi properti yang telah dibuat.

g) Operator
Operator merupakan simbol yang digunakan untuk melakukan operasi terhadap
suatu nilai. Operator terdiri dari beberapa jenis, diantaranya operator penugasan,
penjumlahan, pengurangan, pengurangan, pembagian, modulus, pembanding, dan
operator logika.

- Operator Penugasan
Operator Penugasan di tandai dengan simbol tanda sama dengan (=). Operator
ini digunakan untuk memberikan nilai ke operan kiri berdasarkan nilai operan
kanannya. Misalnya a = 3, yang bermakna variabel a mempunyai nilai 3.

- Operator Penugasan Majemuk

Operator Penugasan Majemuk merupakan operator penugasan dengan
penambahan tugas. Seperti misalnya, x = x + y, operasi tersebut bisa dituliskan
dengan menggunakan operator penugasan majemuk, menjadi x =+ y. Keduanya
memiliki makna yang sama. Operator ini berlaku juga untuk pengurangan, perkalian
pembagian dan lainnya. Fungsi operator penugasan majemuk adalah untuk
mempersingkat penulisan kode program.

- Operator Perbandingan dan Logika

Operator perbandingan pada dasarnya adalah membandingkan operandnya dan
mengembalikan nilai berdasarkan hasil perbandingan tersebut. Operator
perbandingan ini seperti lebih besar dari (>), lebih kurang dari (<), lebih besar dari
sama dengan (>=), dan lainnya.

Operator logika terdiri dari AND, OR, dan NOT. Operator AND bersimbol (&&),
operator OR bersimbol (||), dan operator NOT bersimbol (!). Untuk nilai yang
dihasilkan dari operator logika, bisa Anda pelajari pada tabel gerbang logika.

- Operator Aritmatika
Mungkin sudah tidak asing lagi dengan operator aritmatika. Operator aritmatika
terdiri dari operator penjumlahan, pengurangan, pembagian, perkalian. Namun,
terdapat hal istimewa pada operator ini. Salah satunya adalah operator increment,
operator ini adalah operator unary yang hanya memiliki satu operan. Jadi, operator
increment pada dasarnya akan menambahkan satu ke operandnya. Misalnya x++.
Sama halnya dengan pengurangan pada operator unary, alih-alih menambahkan
satu ke operan, itu mengurangi satu. Misalnya x--.

h) If / Else Statements
If / else statements merupakan sesuatu yang penting untuk seorang
programmer. If / else statement memungkinkan Anda untuk mengeksekusi kode
program jika kondisi tertentu terpenuhi. Jadi, yang pertama adalah if statement.
Sintaks if statement sangat sederhana, yaitu dengan kita membuka dengan tanda
kurung dan di sini kita memberikan kondisi. Seperti gambar di bawah ini.
 Kode program tersebut, apabila dijalankan akan menghasilkan nilai “true”,
karena kondisi terpenuhi.

Bagaimana jika kondisi tersebut tidak terpenuhi? Apabila kode program berhenti
sampai kondisi tersebut, ketika kita mengganti nilai variabel menjadi 3 misalnya,
maka kode program tersebut tidak akan menghasilkan apa-apa.

Namun, jika kode program ingin menghasilkan nilai tertentu ketika kondisi
tersebut tidak terpenuhi, Anda bisa menambahkan else statement.
 Sehingga, kode program tersebut ketika dijalankan akan menghasilkan nilai
“false”.

If / else statement bisa memiliki lebih dari satu kondisi. Hal ini menggunakan
else if statement, yang berfungsi ketika kondisi pertama tidak terpenuhi, maka kode
program akan menjalankan kondisi berikutnya, sampai suatu kondisi terpenuhi.
Seperti contoh di bawah ini.
 Kode program tersebut ketika dijalankan akan menghasilkan nilai “Remaja”,
karena nilai yang dideklarasikan pada variabel memenuhi kondisi tersebut.

Jadi, seperti itulah cara kerja dari if / else statement. Sekarang, kita akan
mengenal operator ternary atau operator kondisional. Operator ini merupakan
operator khusus karena itu satu-satunya operator JavaScript yang membutuhkan
tiga operasi. Perhatikan kode program di bawah ini.
 Kode program merupakan kode program sederhana, yang bisa diubah
menggunakan operator ternary, seperti di bawah ini.

Operator ternary tersebut cara kerjanya sama dengan if / else statement. Yang
berada di sebelah kiri tanda tanya merupakan kondisi yang akan akan dijalankan.
Jika kondisi tersebut terpenuhi, maka program akan mengeksekusi kode setelah
tanda tanya. Namun, jika kondisi tersebut tidak terpenuhi, maka program akan
mengeksekusi kode setelah tanda titik dua.

Jadi, lebih sederhananya seperti ini, condition ? val1 : val2. Jika

kondisi terpenuhi, program akan menjalankan val1, jika tidak terpenuhi, program
akan menjalankan val2.

i) Perulangan (Loop)
Loop atau perulangan merupakan bagian dari kode yang dieksekusi berulang
kali, baik beberapa kali atau sampai kondisi tertentu terpenuhi. JavaScript memiliki
tiga jenis perulangan, diantaranya for, do-while, dan while.
Pertama, perulangan for. Perulangan for akan berulang sampai kondisi yang
ditentukan bernilai false. Untuk membuat perulangan for, diawali dengan
menuliskan for, kemudian membuka dengan tanda kurung untuk menuliskan
ekspresi awal. Ekspresi tersebut dapat digunakan untuk menginisialisasi variabel
atau penghitung serta kondisi yang akan dievaluasi. Jika nilai kondisi tersebut benar,
maka perulangan akan dieksekusi. Namun jika nilai kondisi salah, maka perulangan
akan berhenti. Perhatikan gambar di bawah ini.
 Untuk menampilkan perulangan tersebut, kita harus membuka kurung kurawal
untuk menuliskan blok kode yang akan dieksekusi.

Perulangan ini juga dapat digunakan untuk menampilkan item pada sebuah
array. Misalnya kita mempunyai array yang berisi nama.

Kemudian kita akan menuliskan perulangan for untuk menampilkan item di

dalam array tersebut. Menginisialisasi variabel y = 0, karena indeks pada array
berbasis 0. Diikuti y kurang dari panjang array names, kemudian diikuti ekspresi
incremental.

Ketika dijalankan, kode program tersebut akan menampilkan list item pada
array yang sudah dideklarasikan.
 Kedua, perulangan do-while. Perulangan do-while akan berulang sampai kondisi
tertentu bernilai false. Berbeda dengan for, perulangan do-while memisahkan
antara menginisialisasi variabel dan kondisi yang akan dieksekusi. Dimana do berisi
pernyataan dan while yang akan mengondisikan.

Untuk lebih jelas, silahkan perhatikan contoh perulangan do-while di bawah ini.
Kita akan mendeklarasikan variabel di luar perulangan do-while. Kemudian di dalam
do yang diapit menggunakan tanda kurung kurawal, berisi kode program yang akan
ditampilkan pada console, disertai ekspresi incremental. Namun, kode program
tersebut akan ditampilkan, ketika memenuhi kondisi yang terdapat pada while, yang
merupakan kondisi yang akan dieksekusi.

Ketika dijalankan, kode program tersebut akan menampilkan list item pada
array yang sudah dideklarasikan.
 Ketiga, perulangan while. Perulang while sedikit berbeda dengan kedua
perulangan tersebut. Perulangan while akan mengeksekusi pernyataan hanya jika
kondisinya terpenuhi. Misalnya, kode program di bawah ini tidak akan
menghasilkan apa-apa. Karena pada x pada console.log belum dieksekusi.

Namun, jika kita mengganti kode program menjadi seperti di bawah ini, dimana
kondisi perulangan diubah dan menambahkan incremental x++ yang akan
dieksekusi.
 Maka, ketika kode program di atas dijalankan, akan menghasilkan perulangan
angka dari 0 - 5.

Seperti itulah penjelasan beserta perbedaan dari ketiga perulangan yang terdapat
pada JavaScript.

j) Fungsi (Function)
Fungsi dapat dianggap sebagai sub program yang dapat memiliki nama sendiri,
dapat dipanggil kapan saja, dapat menerima parameter, dan juga dapat
mengembalikan nilai kita.

Untuk membuat sebuah fungsi, Anda harus lebih dahulu mendeklarasikan fungsi
Anda dengan menggunakan kata kunci function, diikuti nama fungsi tersebut.
Kemudian Anda membuka tanda kurung, dan dalam tanda kurung tersebut Anda
dapat menentukan daftar parameter yang kemudian dapat diteruskan ke fungsi.
Lalu, Anda akan membuka tanda kurung kurawal, yang di dalamnya Anda akan
meletakkan kode yang akan dieksekusi oleh fungsi tersebut. Dalam hal ini, kita akan
menampilkan sebuah message melalui console. Untuk pemanggilan fungsi, bisa
dilakukan di luar tanda kurung kurawal, dengan menuliskan nama fungsi, diikuti
nilai dari parameter yang akan ditampilkan. Seperti kode program di bawah ini.
 Kode program di atas akan menghasilkan output pada console berupa teks
“Hello”.

Pada fungsi JavaScript, Anda juga dapat melakukan sebuah operasi hitungan,
seperti di bawah ini. Pada fungsi tersebut, kita menambahkan dua parameter yang
digunakan untuk menyimpan operand pada operasi hitungan. Kemudian, pada
console.log, kita menambahkan rumus hitungan. Lalu, ketika pemanggilan fungsi
tersebut, kita menambahkan dua nilai dari parameter fungsi.

Ketika dijalankan, kode program tersebut akan menampilkan hasil dari fungsi
tersebut.
 Fungsi juga dapat mengembalikan (return) nilai. Jadi, misalnya daripada
menggunakan console.log seperti pada contoh kode program di atas, kita akan
menggunakan return untuk melakukan operasi hitungan. Kemudian, kita bisa
menggunakan nilai yang dikembalikan oleh fungsi dan menampilkan hasil melalui
console.log. Seperti pada contoh kode program di bawah ini.

Selain itu, fungsi juga dapat dideklarasikan seperti ini. Perhatikan kode program
di bawah ini. Misalnya kita akan melakukan perhitungan kuadrat dari suatu
bilangan. Jadi, kita akan menghitung kuadrat sama dengan fungsi dan kita akan
memasukkan angka, kemudian kita hanya akan me-return number dikalikan dengan
number. Untuk memanggil dan menampilkan hasil dari fungsi tersebut, kita bisa
menggunakan console.log.
 k) Selectors
Selector pada JavaScript memberikan Anda akses ke DOM dan memungkinkan
Anda untuk memanipulasinya. Selector ini terikat ke dalam dokumen dan objek
Window. Dan jika Anda ingat materi objek, objek pada dasarnya adalah kumpulan
properti dan method. Dengan menggunakan objek dan method ini, Anda dapat
memperoleh akses ke berbagai elemen di DOM Anda dan melakukan berbagai hal
dengan DOM.

Jadi, kita akan menggunakan beberapa selector yang lebih populer atau terkenal
yang biasa digunakan oleh desainer web. Kami memiliki beberapa list, dan banyak
ID di keduanya.
 Sekarang kita akan mulai dari sini. Jadi, kita akan membuat console.log untuk
document.body. Pada console, akan menghasilkan object-object yang terdapat pada
body.

Tetapi pada dasarnya, ini adalah cara yang sangat sederhana untuk mengakses
properti ini atau mendokumentasikan gambar misalnya. Anda dapat mempelajari
berbagai properti untuk gambar tersebut seperti URI dasar. Kita bisa mempelajari
alt, nama kelas, src, dan sebagainya. Jadi, dengan memiliki akses ke DOM, Anda
benar-benar dapat mulai menggunakan selector dan memanipulasinya.

Misalnya, ketika kita akan mengambil item pertama, yaitu item-1. Langkah yang
harus dilakukan adalah dengan menuliskan beberapa kode program seperti di bawah
ini. Pertama, mendeklarasikan variabel firstItem untuk mendapatkan objek
dokumen, dan kita akan menggunakan method getElementById, kemudian kita akan
memasukkan ID item-1 (sesuai dengan nama id di DOM pada item pertama). Setelah
itu, kita akan menggunakan console.log untuk menampilkan firstItem.

Jadi, itu adalah metode untuk mendapatkan elemen dengan ID. Ini
mengembalikan elemen pertama yang ditemukan di DOM dengan ID tertentu.
Sekarang, ini semua hanya akan mengembalikan satu elemen karena jika Anda ingin
HTML Anda valid, ID bersifat unik, jadi Anda tidak dapat memiliki elemen dengan
CMA dengan ID yang sama.

l) Event
Sebenarnya event ini terdapat atau terjadi di sisi HTML. Yang dapat Anda
lakukan dalam JavaScript adalah mendengarkan event dan beraksi sesuai dengan
itu. Sekarang, suatu event dapat berupa sesuatu yang dipicu oleh browser, seperti
misalnya ketika halaman telah selesai dimuat, browser memicu suatu event. Atau
ketika sebuah gambar telah selesai diunduh dari server, maka browser memicu event
lain. Atau mereka bisa menjadi sesuatu ketika dipicu oleh pengguna seperti mengklik
button.

Saat ini, kita akan mempelajari bagaimana mendengarkan event ini dan
bagaimana bereaksi terhadapnya. Dan ada dua cara Anda dapat mendengarkan ,
baik dalam HTML sebaris atau dalam JavaScript dengan addEventListener. Silahkan
perhatikan kode program di bawah ini, terdapat sebuah paragraf dan button. Saat ini
, ketika kita mengklik button tersebut, tidak akan melakukan apa-apa.
 Namun, yang dapat Anda lakukan adalah menambahkan OnClick, dan Anda
dapat mengeksekusi beberapa kode JavaScript. Jadi misalnya, Anda dapat
menambahkan sesuatu seperti console.log(‘Button Clicked’). Jadi, ketika button
tersebut di klik, maka akan menampilkan “Button Clicked” pada console.

Ini merupakan cara paling sederhana untuk mengikat ke event seperti klik. Ada
event lain misalnya, seperti onLoad, onMouseOver, onKeyUp. Sekarang kita akan
menunjukkan cara eventListener dari JavaScript atau menggunakan kode
JavaScript.

Jadi dalam file script, kita akan mendeklarasikan sebuah variabel terlebih
dahulu. variabel tersebut akan menjadi document.getElementById(‘submit’). Dan
kemudian kita akan menargetkan container = document.querySelector('container').
Sekarang, kita akan mendapatkan submited dan kita akan menggunakan fungsi
addEventListener. Kami akan meneruskan nama event yang ingin kami dengarkan,
dalam kasus kami itu klik. Dan kemudian kita akan menentukan apa yang terjadi
ketika event itu dipicu. Kami dapat memberikan nama fungsi atau kami dapat
mendeklarasikan fungsi anonim di sini. Jadi kita akan mengatakan fungsi, kita akan
meneruskan parameter event. Dan kemudian kita akan menambahkan console.log('
hey, i've been clicked!').
 Oke, jadi sekarang jika kita mengklik button, kita mendapatkan dua log konsol
yang berbeda. Salah satunya adalah dari OnClick di HTML dan yang kedua dari
addEventListener dari JavaScript.
D. Referensi

● https://javascript.info/
● https://www.petanikode.com/javascript-dasar/
● https://webdesign.tutsplus.com/courses/javascript-for-web-designers/lesson
s/working-with-javascript