LEMBAR ASISTENSI

PRAKTIKUM PEMROGRAMAN WEB

LABORATORIUM TEKNIK KOMPUTER
JURUSAN TEKNIK ELEKTRO FAKULTAS TEKNIK
UNIVERSITAS LAMPUNG

Judul Praktikum : JavaScript Basic dan JavaScript DOM

Praktikan : Fani Pebrianto (2115061061)
Asisten : Asha Imalia (2015061006)
Dwindy Monica (2015061022)
Kelas : Teknologi Informasi

No Catatan Tanggal Paraf

Bandar Lampung, 2023

.............................................................
NPM.
I. JUDUL PERCOBAAN

JAVASCRIPT BASIC DAN JAVASCRIPT DOM

II. TUJUAN PERCOBAAN

Adapun tujuan dari percobaan ini adalah :

1. Mahasiswa memahami bagaimana logika komputer diimplementasikan pada
dokumen web
2. Mahasiswa dapat memahami dan menggunakan JavaScript untuk melakukan
pemrograman logika
3. Mahasiswa memahami DOM pada HTML
4. Mahasiswa Dapat memanipulasi DOM pada HTML menggunakan JavaScript

III. TEORI DASAR

JavaScript adalah bahasa pemrograman yang digunakan untuk pengembangan

website agar lebih dinamis. Ibarat kata, JavaScript memberikan “kehidupan”
dalam website sehingga terciptanya interaksi antara pengunjung dengan situs
tersebut. Website dinamis yang dimaksud berarti konten di dalamnya dapat
bergerak atau mengubah apapun yang tampak di layar tanpa harus dimuat ulang
secara manual. Misalnya seperti konten gambar animasi, maps, slideshow,
polling, dan sebagainya. Elemen-elemen tersebut tentunya membuat website
menjadi lebih menarik, sehingga pengunjung jadi betah mengeksplorasi isi di
dalamnya. Penggunaan JavaScript dalam pengembangan website sering dikaitkan
dengan HTML dan CSS. Hal ini karena dalam pembuatan website, ketiga elemen
tersebut berperan penting dan saling berkaitan satu sama lain. Ilustrasi berikut
menggambarkan fungsi HTML, CSS, dan JavaScript ketika membangun sebuah
website.
JavaScript pertama kali diciptakan tahun 1995 oleh Brendan Eich, seorang
karyawan Netscape. Awalnya, ia diminta untuk membuat bahasa scripting seperti
Java yang dapat diterapkan di browser. Ia kemudian mendesain bahasa
pemrograman baru hanya dalam waktu 10 hari dengan menggabungkan fitur-fitur
yang terinspirasi dari Java, Scheme, dan Self. Versi pertama hanya terbatas untuk
kalangan Netscape saja. Mulanya, bahasa pemrograman ini dinamai Mocha, lalu
sempat diubah menjadi LiveScript sebelum pada akhirnya berubah nama menjadi
JavaScript. Tak lama kemudian, Microsoft membuat bahasa baru yaitu Jscript
yang digunakan pada browser miliknya (Internet Explorer). Pada dasarnya Jscript
merupakan hasil adopsi dari JavaScript.
Netscape lalu melakukan standarisasi dan di tahun 1997, JavaScript berhasil
diajukan ke ECMA Internasional dengan label ECMAScript. ECMAScript terus
berkembang hingga tahun 1998, ECMAScript 2 diluncurkan disusul dengan
ECMAScript 3 pada tahun 1999.
ECMAScript mengalami banyak revisi dan peningkatan hingga menjadi bahasa
pemrograman JavaScript seperti sekarang yang andal untuk digunakan di berbagai
model aplikasi.
Fungsi JavaScript :
1. Membuat website interaktif
penggunaan JavaScript ini memungkinkanmu untuk membuat situs yang dinamis
dan interaktif.Fungsi utama JavaScript bisa dibilang untuk membuat website
terlihat menarik dengan konten-kontennya yang dinamis. Konten website yang
bisa bergerak dengan otomatis tanpa perlu direload berkali-kali adalah salah satu
pengaplikasian JavaScript.
2. Mengembangkan aplikasi mobile
Bukan hanya website, JavaScript juga banyak digunakan untuk mengembangkan
aplikasi di HP. Developer semakin dimudahkan membuat aplikasi mobile untuk
dua sistem operasi sekaligus (Android dan iOS) berkat adanya framework
JavaScript khusus untuk aplikasi mobile, React Native.
3. Menjalankan web server
Tidak hanya bekerja untuk sisi browser/frontend saja, JavaScript juga mampu
dijalankan di sisi server dengan bantuan Node.js. Semenjak ada Node.js,
JavaScript bisa kamu gunakan di luar dari browser, misalnya untuk
mengembangkan back-end (server), console, program desktop, mobile, game, dan
lain sebagainya.
Kelebihan JavaScript:
1. Mudah dipelajari
JavaScript termasuk bahasa pemrograman yang mudah dipelajari. Bagi pemula,
sintaks dan penulisan kodenya cukup ringkas hingga gampang untuk dimengerti.
Sebagai perbandingan, berikut penulisan sintaks di JS dengan beberapa bahasa
lainnya untuk menampilkan “Hello World!”.
2. Fleksibel
JavaScript adalah bahasa pemrograman yang fleksibel. Meski pemanfaatan
utamanya pada sisi frontend, JavaScript juga bisa dipakai untuk sisi server dengan
adanya Node.js. Kamu bisa mengembangkan beragam jenis aplikasi seperti
server, aplikasi mobile, dan desktop, game hingga console.
3. Interaktif dan responsif
JavaScript sangat cocok untuk membuat halaman web yang user-friendly. Saat ini
semua produk digital baik aplikasi web ataupun mobile sangat mementingkan
pengalaman penggunanya. Dengan JavaScript, developer dapat merancang
halaman web interaktif dengan beragam desain antarmuka yang kreatif.
4. Multiplatform dan cross browser
JavaScript bisa diimplementasikan untuk basis sistem operasi apa pun.
Pengembangan frontendnya bersifat lintas platform sehingga dapat digunakan
untuk mengembangkan aplikasi yang berfungsi di browser, desktop, bahkan di
smartphone. Hampir semua browser juga didukung oleh JavaScript sehingga
dapat menampilkan video, animasi, dan media lain pada halaman web.
5. Ketersediaan framework dan library yang melimpah
Ketersediaan kerangka kerja dan library yang melimpah sangat membantu dalam
menyediakan komponen bawaan agar pengembangan di JavaScript menjadi lebih
mudah.
Kekurangan JavaScript:
1. Masalah keamanan
Masalah keamanan bisa jadi salah satu kelemahan JavaScript. Kemampuan
enkripsi bahasa pemrograman ini masih terbilang rendah. Dalam beberapa kasus,
kode yang bisa dieksekusi di komputer pengguna justru rentan untuk
dieksploitasi. Kode JavaScript selalu terlihat karena ditambahkan secara eksplisit
ke halaman web sehingga bisa dilihat di dalam browser. Siapa pun dapat
membaca kode tersebut dan menggunakannya kembali.
2. Memiliki keterbatasan objek
Bahasa pemrograman JavaScript mempunyai objek yang terbatas. Hal ini
dipengaruhi oleh kondisi umum JavaScript yang sangat sederhana, sehingga
mempengaruhi fitur yang dimilikinya.
3. Bukan untuk pengembangan standalone app
Penggunaan JavaScript bukan untuk pengembangan standalone app atau aplikasi
yang berdiri sendiri. Membuat aplikasi dengan JavaScript harus didukung dengan
bahasa lain seperti HTML. Tanpa HTML, JavaScript tidak dapat berjalan
sempurna. Berbeda dengan bahasa C++ atau Java yang bisa di-compile lalu
menjadi sebuah aplikasi dengan bahasa itu sendiri.
DOM adalah singkatan dari Document Object Model, DOM ini merupakan object
model standar pada XML serta HTML yang mempunyai dasar platform
independent. Ketika menjalankan suatu halaman web di Browser, file HTML
yang ada pada web akan ditampilkan serta ditayangkan di layar perangkat. Pada
objek pada dokumen itu terdapat berbagai fungsi serta data dan atribut yang bisa
digunakan saat menjalankan program Javascript. Hal itulah yang disebut dengan
API (Application Programming Interface).
Pada dasarnya, DOM ini tidak Cuma terdapat pada Javascript saja, tetapi juga ada
di berbagai jenis bahasa pemrograman lain. Pada tingkatan yang dasar, situs
sebuah web terdiri dari dokumen HTML dan juga CSS. Browser menciptakan
representasi dokumen yang umumnya dikenal dengan sebutan DOM (Document
Object Model).
DOM dapat berfungsi untuk memanipulasi tampilan web yang menggunakan
JavaScript. Pada saat proses render berlangsung, browser akan membuat model
objek dokumen atau DOM. Objek yang berasal dari dokumen HTML akan
menyediakan kumpulan data, fungsi, serta atribut yang bertujuan agar dapat
bermanfaat pada saat proses membuat program JavaScript.
IV. PROSEDUR PERCOBAAN

Adapun prosedur percobaan yang dilakukan adalah sebagai berikut

4.1 Percobaan 6-7: Event Listener

Gambar 4.1 Percobaan 6-7: Event Listener

4.2 Percobaan 6-8: Redirect, Timeout, & Print

Gambar 4.2 Percobaan 6-8: Redirect, Timeout, & Print

4.3 Percobaan 7-1: Mengakses Elemen DOM

Gambar 4.3 Percobaan 7-1: Mengakses Elemen DOM

4.4 Percobaan 7-4: Membuat Node

Gambar 4.4 Percobaan 7-4: Membuat Node

4.5 Percobaan 7-9: Animasi DOM

Gambar 4.5 Percobaan 7-9: Animasi DOM

V. PEMBAHASAN

Adapun pembahasan dari percobaan adalah sebagai berikut:

5.1 Percobaan 6-7: Event Listener
5.1.a Source Code Percobaan 6-7: Event Listener

5.1.a Source Code Percobaan 6-7: Event Listener

Pada baris ke-1 ada <!DOCTYPE html> yang digunakan untuk mendeklarasikan
doctype untuk dokumen HTML5 yang memberitahu browser bahwa dokumen ini
menggunakan standar HTML5. Pada baris ke-2 ada <html> yang digunakan
sebagai elemen akar dari halaman web. Pada baris ke-3 ada <head> yang
digunakan sebagai elemen yang berisi metadata tentang halaman web yang dapat
berisi karakter set ataupun judul halaman. Pada baris ke-4 ada <title> digunakan
sebagai elemen untuk menentukan judul halaman yang akan ditampilkan pada tab
browser. Pada baris ke-5 ada </head> merupakan akhir dari isi elemen head pada
baris ke-3. Pada baris ke-6 ada <body> merupakan elemen yang berisi konten
utama dari halaman web. Pada baris ke-8 dan 9 fungsi over digunakan untuk
mencetak teks “Mouse Over” ke dalam dokumen saat dipanggil dengan
menggunakan perintah document.write. pada baris ke-12 sampai 14 ada elemen
<span> yang berisi <h2> yang digunakan untuk mengatur judul level 2 dengan
teks “bagian dalam SPAN”. Span digunakan untuk mengelompokan konten atau
styling. Pada baris ke-15 sampai 17 ada <div> dengan atribut onmouseover yang
berarti ketika mouse berada diatas elemen ini maka fungsi over() akan dipanggil
dan “Mouse Over” akan dicetak dalam dokumen. Pada baris ke-18 sampai 23 ada
<script> yang digunakan untuk menambahkan event listener ke dalam elemen
pertama dengan tag <span> yang terjadi ketika mouse meninggalkan elemen
<span> dan akan mencetak kedalam dokumen kalimat “Mouse Leave”. Event
listener pada tag <span> mendefinisikan atribut onmouseover, yang artinya ketika
mouse bergerak di atas elemen <span>, fungsi over() akan dipanggil. Fungsi
over() mencetak teks "Mouse Over" ke dalam dokumen. Ini akan menghasilkan
teks "Mouse Over" di dalam dokumen saat mouse bergerak ke atas elemen
<span>. Event listener pada tag <div> juga menggunakan atribut onmouseover,
sehingga ketika mouse bergerak di atas elemen <div>, fungsi over() juga akan
dipanggil, dan teks "Mouse Over" akan dicetak ke dalam dokumen. Ini adalah
mirip dengan event listener pada tag <span>, dan perbedaan utamanya adalah
elemen targetnya. document.getElementsByTagName('span') adalah cara untuk
mengambil semua elemen HTML dengan tag <span> dari dokumen HTML. Ini
mengembalikan sebuah array-like objek (NodeList) yang berisi semua elemen
<span> dalam dokumen.
5.1.b Output Percobaan 6-7: Event Listener

Gambar 5.1.b Output Percobaan 6-7: Event Listener

Berdasarkan Gambar 5.1.b Output Percobaan 6-7: Event Listener yang

ditampilkan pada output adalah judul level 2 yang dimana di dapatkan pada
source code pada baris ke-13 dengan menggunakan tag h2, kemudian apabila
kursor diarahkan ke arah kalimat “bagian dalam span” lalu kursor di jauhkan dari
kalimat bagian dalam span maka akan muncul kalimat “Mouse Leave” yang
dimana ini sesuai dengan source code pada baris ke-19 sampai 21. Kemudian
kalimat “bagian dalam DIV” didapatkan dari source code pada baris ke-16 yang
dimana menggunakan tag h2 yang berada dibungkus oleh elemen div yang
dimana akan memanggil fungsi over yang akan menampilkan teks “Mouse over
dengan menggunakan document.write apabila kursor diarahkan ke kalimat
“bagian dalam DIV”
5.2 Percobaan 6-8: Redirect, Timeout, & Print
5.2.a Source Code Percobaan 6-8: Redirect, Timeout, & Print

Gambar 5.2.a Source Code Percobaan 6-8: Redirect, Timeout, & Print

Pada baris ke-1 ada <!DOCTYPE html> yang digunakan untuk mendeklarasikan
doctype untuk dokumen HTML5 yang memberitahu browser bahwa dokumen ini
menggunakan standar HTML5. Pada baris ke-2 ada <html> yang digunakan
sebagai elemen akar dari halaman web. Pada baris ke-3 ada <head> yang
digunakan sebagai elemen yang berisi metadata tentang halaman web yang dapat
berisi karakter set ataupun judul halaman. Pada baris ke-4 ada <title> digunakan
sebagai elemen untuk menentukan judul halaman yang akan ditampilkan pada tab
browser. Pada baris ke-6 ada <body> merupakan elemen yang berisi konten utama
dari halaman web. Pada baris ke-8 sampai 10 ada function redirect yang dimana
fungsi ini mengubah lokasi jalaman dengan menggunakan window.location dan
mengarahkannya ke web eksternal. Pada baris ke-11 ada alert yang digunakan
untuk menampilkan pesan pop up kepada pengguna yang mengatakan bahwa akan
diarahkan ke halaman lain dalam 10 detik. Pada baris ke-12 ada setTimeout yang
digunakan untuk memanggil fungsi redirect seterah 10 detik. Pada baris ke-14
sampai 16 ada input dengan tipe button yang digunakan untuk mencetak halaman
saat tombol ini ditekan. Saat tombol di klik maka fungsi window.print akan
dijalankan untuk memulai proses mencetak halaman. Fungsi window.print() dan
setTimeout dapat digunakan bersama, tetapi perilaku mereka akan berbeda
tergantung pada urutan pemanggilan dan waktu yang ditentukan. didalam kode,
setTimeout('Redirect()', 10000) akan dijalankan terlebih dahulu, dan setelah 10
detik, fungsi Redirect akan memicu perubahan lokasi halaman dengan
window.location. Ini berarti bahwa setelah 10 detik, pengguna akan diarahkan ke
"http://meizano.github.io," dan kode JavaScript selanjutnya tidak akan dieksekusi
di halaman saat ini. Nilai 10000 dalam setTimeout adalah jumlah milidetik (ms).
Dalam hal ini, itu berarti bahwa Redirect() akan dijalankan setelah 10.000 ms atau
10 detik. window.location adalah objek yang digunakan dalam JavaScript untuk
mengakses dan mengubah URL (alamat web) dari halaman saat ini.
5.2.b Output Percobaan 2: Formulir 2.0

Gambar 5.2.b Output Percobaan 6-8: Redirect, Timeout, & Print

Berdasarkan Gambar 5.2.b Output Percobaan 6-8: Redirect, Timeout, & Print
didapatkan tampilan peringatan dalam browser yang berisi kalimat “Anda akan
diarahkan ke halaman lain dalam 10 detik.” Yang mana berasal dari source code
pada baris ke-11 kemudian akan mengatur timeout dengan setTimeout untuk
menjalankan fungsi redirect setelah 10 detik. Kemudian dalam 10 detik maka
akan menampilkan tombol yang bertuliskan print yang apabila di klik maka akan
langsung mencetak halaman web tersebut ini berasal dari surce code pada baris
ke-14 sampai 16. Kemudian akan stelah 10 maka fungsi redirect akan dijalankan
yang mana akan mengarahkan web ke web eksternal dengan perintah
window.location, dalam hal ini web akan diarahkan ke "http://meizano.github.io"
5.3 Percobaan 7-1: Mengakses Elemen DOM

5.3.a Source Code Percobaan 7-1: Mengakses Elemen DOM

Gambar 5.3.a Source Code Percobaan 7-1: Mengakses Elemen DOM

Pada baris ke-1 ada <!DOCTYPE html> yang digunakan untuk mendeklarasikan
doctype untuk dokumen HTML5 yang memberitahu browser bahwa dokumen ini
menggunakan standar HTML5. Pada baris ke-2 ada <html> yang digunakan
sebagai elemen akar dari halaman web. Pada baris ke-3 ada <head> yang
digunakan sebagai elemen yang berisi metadata tentang halaman web yang dapat
berisi karakter set ataupun judul halaman. Pada baris ke-4 ada <title> digunakan
sebagai elemen untuk menentukan judul halaman yang akan ditampilkan pada tab
browser. Pada baris ke-6 ada <body> yang merupakan konten utama dari halaman
web. Pada baris ke-7 ada <h1> yang merupakan elemen judul level 1 yang
digunakan untuk menampilkan teks “Mengakses Elemen. Pada baris ke-8 dan 9
ada <p> yeng merupakan elemen paragraf yang akan menampilkan teks “elemen
yang diakses adalah yang memiliki kata pada script.” Dan “modul ini akan dibuat
menjadi sebuah buku”. Pada baris ke-10 ada <script> ini adalah teg yang
digunakan untuk menyisipkan kode JavaScript. Pada baris ke-11 ada var elemen
=”belum ketemu”; yang merupakan deklarasi varable JavaScript elemen yang
diinisialisasi dengan nilai awal “belum ketemu”. Pada baris ke-12 sampai 23 ada
function mencariString yang digunakan untuk mencari elemen di dalam dom yang
mengandung string yang dicari. Fungsi ini melakukan pencarian dengan
mengiterasi melalui semua elemen dan teks dalam struktur dom. Pada baris ke-25
ada console.log(elemen); yang digunakan untuk mencetak nilai dari variabel
elemen ke konsol browser. Pada baris ke-26 ada console.log(mencariString) yang
digunakan untuk mencetak hasil dari pemanggilan fungsi mencariString dengan
mencari kata “buku” dalam elemen <body> Hasil pencarian ini akan dicetak ke
konsol. Dalam kode ini, fungsi mencariString akan mengembalikan true jika kata
"buku" ditemukan dalam teks, dan elemen akan diubah menjadi elemen yang
berisi kata tersebut. Pada baris ke-27 ada console.log( elemen) variabel elemen
akan diperbarui sesuai dengan hasil pencarian. Hasil akhir pencarian akan dicetak
ke konsol. Jadi, nilai variabel elemen setelah pemanggilan fungsi adalah elemen
yang mengandung kata "buku."
5.3.b Output Percobaan 7-1: Mengakses Elemen DOM

Gambar 5.3.b Output Percobaan 7-1: Mengakses Elemen DOM

Berdasarkan Gambar 5.3.b Output Percobaan 7-1: Mengakses Elemen DOM

terdapat terdapat kalimat “Mengakses Elemen” yang berasal dari source code
pada baris ke-7 yang mana merupakan judul level 1 dengan menggunakan tag h1.
Kemudian kalimat “Elemen yang diakses adalah yang memiliki kata pada script.”
dan “Modul ini akan dibuat menjadi sebuah buku.” Berasal dari source code pada
baris ke-8 dan 9 yang mana merupakan paragraf. Kemudian pada konsol yang
pertama ditampilkan adalah kalimat “belum ketemu” yang ditampilkan dengan
perintah console.log(elemen) yang dimana dijalankan sebelum pemanggilan
fungsi mencariString. Kemudian console.log(mencariString(document.body,
"buku")) akan memanggil fungsi mencariString dengan parameter document.body
yang dimana akan mencari kata buku di dalam tag body. Kata buku telah
ditemukan maka di dalam konsol ditampilkan bernilai “true”. Kemudian
console.log(elemen) akan menampilkan kalimat “Modul ini akan dibuat menjadi
sebuah buku.” Dikarenakan terdapat kata buku di dalam elemen <p> tersebut.
5.4 Percobaan 7-4: Membuat Node
5.4.a Source Code Percobaan 7-4: Membuat Node

Gambar 5.4.a Source Code Percobaan 7-4: Membuat Node

Pada baris ke-1 ada <!DOCTYPE html> yang digunakan untuk mendeklarasikan
doctype untuk dokumen HTML5 yang memberitahu browser bahwa dokumen ini
menggunakan standar HTML5. Pada baris ke-2 ada <html> yang digunakan
sebagai elemen akar dari halaman web. Pada baris ke-3 ada <head> yang
digunakan sebagai elemen yang berisi metadata tentang halaman web yang dapat
berisi karakter set ataupun judul halaman. Pada baris ke-4 ada <title> digunakan
sebagai elemen untuk menentukan judul halaman yang akan ditampilkan pada tab
browser. Pada baris ke-7 ada <p> yang merupakan elemen paragraf yang
digunakan untuk menampilkan teks “Cari sendiri gambar kupu-kupu dan
bunganya.” Pada baris ke-8 dan 9 ada <p> yang merupakan elemen paragraf yang
berisi dua elemen gambar gambar pertama memiliki atribut src yang menunjuk ke
“img/kupu1.png” dan atribut alt yang digunakan untuk memberikan nama alias
dari gambar tersebut kemudian gambar kedua memiliki atribut src yang menunjuk
ke “img/bunga1.png” dan atribut alt “bunga. Pada baris ke-10 ada <p> yang
berjenis tombol yang apabila di klik maka akan memanggil fungsi Javascript
replaceImage() yang akan mengubah gambar menjadi teks alternatif. Pada baris
ke-12 ada function replaceImage yang digunakan untuk mengganti gambar-
gambar dalam dokumen dengan teks alternatif. Pada baris ke-13 ada let images =
document.body.getElementsByTagName("img"); yang mana variabel image akan
mengambil semua elemen gambar yang ada di dalam elemen body. Pada baris ke-
14 for (let i = images.length - 1; i >= 0; i--) yang mana akan melakukan iterasi
dari belakang ke depan melalui array images. Pada baris ke-15 ada let image =
images[i]; yang mana variabel image akan menyimpan referensi ke elemen
gambar saat ini selama iterasi. Pada baris ke-16 sampai 21 ada if (image.alt) yang
dimana akan memeriksa kondisi apakah elemen gambar memiliki atribut alt jika
ada maka akan membuat node teks baru yang berisi nilai dari atribut alt elemen
gambar tersebut, dengan menggunakan image.parentNode.replaceChild(text,
image); akan mengganti elemen gambar dengan node teks yang telah dibuat.
5.4.b Output Percobaan 7-4: Membuat Node

Gambar 5.4.b Output Percobaan 7-4: Membuat Node

Berdasarkan Gambar 5.4.b Output Percobaan 7-4: Membuat Node didapatkan

kalimat “Cari sendiri gambar kupu-kupu dan bunganya.” Yang berasal dari source
code pada baris ke-7 dimana menggunakan tag <p> yang merupakan paragraf.
Kemudian gambar kupu dan bunga berasal dari tag <img> yang memiliki atribut
src yang digunakan untuk merujuk ke file img yang merupakan tempat untuk
menyimpan gambar kupu dan bunga, dan memiliki atribut alt yang merupakan
teks alternatif untuk gambar kupu dan bunga. Kemudian ada tombol ganti yang
apabila di klik maka akan menjalankan fungsi replaceImages yang akan mencari
semua elemen <img> dalam dokumen jika elemen tersebut memiliki atribut alt
maka elemen gambar tersebut akan diganti dengan teks yang ada dalam atribut alt
seperti gambar diatas gambar kupu kupu diganti kata “kupu” dan gambar bunga
diganti dengan kata “bunga” ini berasal dari source code pada baris ke-10 sampai
21
5.5 Percobaan 7-9: Animasi DOM
5.5.a Source Code Percobaan 7-9: Animasi DOM

Gambar 5.5.a Source Code Percobaan 7-9: Animasi DOM

Pada baris ke-1 ada <!DOCTYPE html> yang digunakan untuk mendeklarasikan
doctype untuk dokumen HTML5 yang memberitahu browser bahwa dokumen ini
menggunakan standar HTML5. Pada baris ke-2 ada <html> yang digunakan
sebagai elemen akar dari halaman web. Pada baris ke-3 ada <head> yang
digunakan sebagai elemen yang berisi metadata tentang halaman web yang dapat
berisi karakter set ataupun judul halaman. Pada baris ke-4 ada <title> digunakan
sebagai elemen untuk menentukan judul halaman yang akan ditampilkan pada tab
browser. Pada baris ke-7 ada <p> yang merupakan elemen paragraf yang akan
menampilkan teks “Cari sendiri gambar kupu-kupunya.” Pada baris ke-8 ada <p
style="text-align: center">yang mana elemen ini memiliki atribut style yang
digunakan untuk mengatur gaya teks yang berpusat menhadi rata tengah. Pada
baris ke-9 ada tag <img> yang memiliki atribut src yang digunakan untuk merujuk
ke file yang ingin ditampilkan lalu memiliki atribut style=”position : relative”
yang digunakan untuk mengubah posisi gambar. Pada baris ke-12 ada let kupu =
document.querySelector("img"); yang merupakan deklarasi dari variabel kupu
yang digunakan untuk menyimpan referensi ke elemen gambar yang pertama yang
ditemukan dalam dokumen. Pada baris ke-13 ada let angle = Math.PI / 2; yang
digunakan untuk mendeklarasikan variabel angle yang diinisialisasi dengan nilai
awal Math.PI/2 Math.PI digunakan untuk menginisialisasi variabel angle dengan
nilai awal yang setara dengan setengah lingkaran penuh, atau 90 derajat dalam
radian.. Pada baris ke-14 ada function animate yang akan mengendalikan animai
elemen gambar. Pada bari ke-15 ada if lastTime != null) yang mana akan
memeriksa apakah lastTime bukan null. Jika tidak, maka akan mengubah nilai
angle berdasarkan selisih waktu antara frame saat ini dan frame sebelumnya,
angle += (time - lastTime) * 0.001; Di sini, (time - lastTime) adalah selisih waktu
antara frame animasi saat ini dan frame animasi sebelumnya. Ini mengukur berapa
lama waktu yang telah berlalu sejak frame sebelumnya dijalankan. Kemudian,
nilai ini dikalikan dengan 0.001 (1 milidetik) untuk mengatur laju perubahan
sudut angle.. Pada baris ke-18 ada kupu.style.top yang akan mengubah posisi
vertikal pada elemen gambar berdasarkan nilai sinus dari sudut angle. Pada baris
ke-19 ada kupu.style.left yang akan megubah posisi horizontal yang mana akan
memeberikan efek pergerakan horizontal. Pada baris ke-20 ada
requestAnimationFrame(newTime => animate(newTime, time)) yang digunakan
untuk menjadwalkan frame animasi berikutnya dengan memanggil fungsi animate
dengan parameter newTime dan time. Pada baris ke-22 ada
requestAnimationFrame(animate) digunakan unntuk pemanggilan pertama untuk
memulai animasi dimulai dengan frame pertama.
5.5.b Output Percobaan 7-9: Animasi DOM

Gambar 5.5.b Output Percobaan 7-9: Animasi DOM

Berdasarkan Gambar 5.5.b Output Percobaan 7-9: Animasi DOM didapatkan

kalimat “Cari sendiri gambar kupu-kupunya.” Yang berasal dari source code pada
baris ke-7 dengan menggunakan tag <p> yang dimana merupakan elemen
paragraf. Kemudian <p style="text-align: center"> akan mengatur gambar berada
di tengah horizontal. Gambar berasal dari tag <img> yang dimana memiliki
atribut src yang digunakan untuk merujuk file gambar yang digunakan, dan
memiliki atribut style=”position: relative” yang dimana mengatur posisi gambar
relatif terhadap posisi awal. Kemudian let angle = Math.PI / 2 digunakan untuk
mengatur sudut pergerakan kupu-kupu dalam radian. Kemudian fungsi animate
akan mengatur animasi dengan menerima parameter time dan lastTime yang
digunakan untuk menghitung perubahan sudut berdasarkan waktu. Dalam
hasilnya gambar kupu-kupu akan naik dan turun serta bergerak ke kiri dan kanan
dalam efek animasi yang cukup sederhana namun menarik. Jadi, efek animasi
yang didapatkan adalah kupu-kupu yang bergerak seperti terbang di atas halaman.
VI. KESIMPULAN

Adapun kesimpulan yang didapatkan dari pembahasan adalah sebagai berikut:

1. Berdasarkan percobaan 5.1 addEventListener dapat digunakan untuk
menangani peristiwa saat kursor keluar dari elemen span yang mana akan
menjalankan perintah document.write yang akan menampilkan teks “Mouse
Leave” .
2. Berdasarkan percobaan 5.2 fungsi setTimeout dapat digunakan untuk
mengatur waktu penundaan sebelum mengarahkan ke halaman lain yang
dimana dalam kode percobaan 5.2 waktu yang digunakan adalah 10.000
milidetik (10 detik).
3. Berdasarkan percobaan 5.3 console.log(mencariString(document.body,
"buku")); dapat digunakan untuk memanggil fungsi mencariString dengan
parameter document.body (elemen <body>) dan mencari kata "buku" di
dalamnya. Hasil pencarian akan ditampilkan di konsol. Jika kata "buku"
ditemukan, maka fungsi ini akan mengubah nilai variabel elemen menjadi
elemen yang mengandung kata tersebut.
4. Berdasarkan percobaan 5.5 tombol Ganti pada output apabila diklik akan
menjalankan fungsi replaceImages yang dimana akan menggantikan gambar
kupu-kupu dan bunga menjadi teks alt dari gambar kupu-kupu dan bunga.
5. Berdasarkan percobaan 5.5 pada output dihasilkan animasi gambar kupu-
kupu yang secara vertikal dan horizontal yang dimana pergerakan vertikal
diatur menggunakan rumus (Math.sin(Math.PI / 2) * 20) + "px", dan
pergerakan horizontal diatur menggunakan rumus (Math.cos(Math.PI / 2) *
200) + "px".
 DAFTAR PUSTAKA

SIANIPAR, Rismon Hasiholan. Pemrograman Javascript: Teori Dan

Implementasi. Penerbit Informatika, 2015.
SIAHAAN, Vivian; SIANIPAR, Rismon Hasiholan. JavaScript: Dari A Sampai
Z. sparta publisher, 2018.
EDY WINARNO, S. T., et al. Pemrograman Web Berbasis Html 5, php, dan
Javascript. Elex Media Komputindo, 2014.
 TUGAS AKHIR

1. Tugas akhir

1.a Source code Tugas akhir HTML

Gambar 1.a Source code Tugas akhir HTML

Pada baris ke-1 ada <!DOCTYPE html> yang digunakan untuk mendeklarasikan
doctype untuk dokumen HTML5 yang memberitahu browser bahwa dokumen ini
menggunakan standar HTML5. Pada baris ke-2 ada <html> yang digunakan
sebagai elemen akar dari halaman web. Pada baris ke-3 ada <head> yang
digunakan sebagai elemen judul halaman web yang dapat berisi karakter set
ataupun judul halaman. Pada baris ke-4 ada <title> digunakan sebagai elemen
untuk menentukan judul halaman yang akan ditampilkan pada tab browser. Pada
baris ke-7 ada tag <h1> yang mana akan menampilkan judul level 1 yang
menampilkan teks “Nilai Ganjil dan Genap”. Pada baris ke8 ada <button> yang
digunakan untuk membuat elemen tombol yang memiliki atribut id dengan nama
“tmblGanjil” dengan kata yeng tercetak pada tombol adalah Ganjil. Pada baris ke-
9 ada <button> yang digunakan untuk membuat elemen tombol yang memiliki
atribut id dengan nama “tmblGenap” dan kata yang tercetak pada tombol adalah
Genap. Pada baris ke-11 ada <script> dengan atribut src yang digunakan untuk
merujuk ke file javaScript yang digunakan.
1.b Source kode Tugas akhir eksternal javaScript

Gambar 1.b Source kode Tugas akhir javaScript

Pada baris ke-1 ada document.addEventListener yang merupakan event listener

yang akan menjalankan kode didalamnya ketika seluruh dokumen HTML telah
dimuat. Pada baris ke-2 ada const outputDiv yag digunakan untuk mengambil
elemen HTML dengan ID “output” dan menyimpannya dalam variabel outputDiv.
Pada baris ke-3 dan 4 ada const tmblGanjil dan const tmblGenap yang digunakan
untuk mengambil dua elemen html dengan id “tmblGanjil” dan “tmblGenap” yang
dimana tombol ini digunakan untuk menghasilkan angka-angka ganjil dan genap.
Pada baris ke-6 ada tmblGanjil.addEventListener("click", function () digunakan
untuk menjalankan fungsi ketika tombol “tmblGanjil” diklik maka akan
menjalankan fungsi generateGanjil dan hasilnya akan ditampilkan di elemen
outputDiv. Pada baris ke-10 ada tmblGenap.addEventListener("click", function ()
yang digunakan untuk menjalankan fungsi dari generateGenap apabila tmblGenap
diklik dan hasilnya akan ditampilkan pada elemen outputDiv. Pada baris ke-14
ada generateGanjil(start, end) yang digunakan untuk menghasilkan array angka
ganjil dari rentang 1 sampai 10000, kemudian fungsi ini akan mengiterasi melalui
semua angka dalam rentang tersebut dan menambahkan angka ganjil ke dalam
array ganjil. Pada baris ke-24 ada generateGenap(start, end) yang digunakan
untuk menghasilkan array angka genap dari rentang 10001 sampai 20000,
kemudian fungsi ini akan mengiterasi melalui semua angka dalam rentang
tersebut dan menambahkan angka genap ke dalam array genap.
1.c Output Tugas akhir

Gambar 1.c Output Tugas akhir

Berdasarkan Gambar 1.c Output Tugas akhir didapatkan ada judul dari halaman
web adalah “Nilai Ganjil dan Genap” ini ditampilkan menggunakan elemen <h1>
yang dimana merupakan judul level 1. Kemudian terdapat tombol “Ganjil” dan
“Genap” yang dibuat dengan menggunakan perintah <button> yang dimana ketika
tombol tersebut ditakan maka akan menampilkan angka yang sesuai dengan
tombol tersebut. Yang dimana apabila tombol Ganjil di klik maka akan
menampilkan bilangan ganjil yang dimulai dari 1 sampai 10.000 yang mana akan
ditampilkan pada elemen div. Kemudian apabila tombol Genap diklik maka akan
menampilkan bilangan genap dari 10.001 sampai 20.000 yang mana outputnya
akan ditampilkan oleh elemen div.