Halo teman-teman semua, apa kabar? Selamat datang di channel Web Programming Unpas, channel yang membahas mengenai tutorial web design dan web programming. Masih bersama saya, Sandika Gali, sebagai instruktur kalian pada video kali ini. Dan di video kali ini, kita akan memulai sebuah seri yang baru, atau playlist yang baru di channel ini ya.
Seri kali ini akan membahas, melanjutkan mengenai JavaScript yang sudah ada di channel ini. Jadi buat teman-teman yang belum tahu, di channel ini sudah ada sebuah seri mengenai dasar pemograman menggunakan javascript Nah buat teman-teman yang belum tahu, silahkan dicek dulu playlistnya Mungkin aja teman-teman tertarik dengan seri itu Di seri kali ini kita akan melanjutkan belajar javascript kita Dan kali ini kita akan membahas sesuatu yang disebut dengan DOM Ya atau singkatan dari Document Object Model Oke, dan belajar mengenai DOM ini sangat penting ketika nanti kalian akan berinteraksi dengan halaman web kalian Untuk membuat halamannya lebih interaktif, lebih menarik, dan lebih baik lagi Begitu ya teman-teman ya Jadi yang sebelumnya udah ngikutin seri dasar pemrograman dengan javascript Mungkin teman-teman bisa lihat bahwa disitu kita belum berinteraksi dengan halaman web kita Kita hanya menggunakan konsol sebagai alat interaksi kita Dan juga mungkin ada beberapa elemen pop-up Kalau teman-teman ingat kita udah coba alert, confirm, dan prompt Nah itu adalah bagian dari browser Bukan bagian dari halaman HTML kalian Ketika kita mau berinteraksi dengan HTML, maka kita butuh DOM ini. Tapi sebelum kita masuk lebih jauh mengenai DOM ini, seperti biasa, bagaimana kalau kita bahas dulu mengenai definisinya? Apa sih DOM ini?
Coba kita lihat dulu mengenai definisinya. Jadi definisi dari DOM atau Document Object Model ini menurut Mozilla, kalian bisa lihat seperti ini. Coba teman-teman silakan dibaca dulu. Kita baca sama-sama. DOM adalah...
antarmuka pemrograman untuk HTML yang merepresentasikan halaman web sehingga program dapat mengubah dan memanipulasi strukturnya itu katanya kata Mozilla gimana teman-teman paham gak kira-kira? bingung ya? ya sama saya juga ya bingung dengan penjelasan yang dikasih Mozilla ini maksudnya apa tuh?
antarmuka pemrograman lalu mengubah dan memanipulasi strukturnya itu seperti apa? nah daripada kita bingung memahami definisinya Mozilla ini oke Nanti kita kembali lagi ke sini ya Coba kita pecah dulu deh Kita lihat arti dari masing-masing kata di dalam DOM itu Kita lihat itu dulu Nanti mudah-mudahan ketika kita kembali ke definisi ini Teman-teman sudah paham Coba kita lihat Dokumen, objek, model Kata pertamanya itu dokumen Maksudnya apa itu dokumen yang ada di dalam DOM ini? Dokumen itu adalah dokumen web kita tentu saja ya Tapi coba kita lihat Nih, coba di sebelah kiri saya.
Kalau kalian lihat ada sebuah website sederhana seperti ini, yang kalian buka menggunakan web browser, ya terserah web browsernya apapun ya, kalian mau pakai Google Chrome, Mozilla, Internet Explorer, silahkan. Kalian lihat tampilannya seperti ini. Yang kalian lihat di dalam area yang putih, ya di dalam itu, itu adalah dokumen.
Isi dari websitenya. Isi dari website itu tentu saja merupakan bagian dari window-nya kan, browser-nya. Nah itu lain lagi, itu beda lagi. Kita fokusnya di area yang isi website-nya saja.
Dan itu disebut dengan dokumen. Sekarang kita lihat, apa itu objek? Objek, nah harusnya teman-teman udah tahu ya, kalau teman-teman ngikutin playlist sebelumnya, objek itu contohnya seperti ini.
Jadi, objek itu adalah sebuah nilai atau tipe data yang ada dalam JavaScript. Contohnya seperti ini. Ini merupakan objek yang sederhana menurut saya. Jadi, kita bikin sebuah variable, misalnya namanya mahasiswa, yang di dalamnya terdapat banyak nilai. Dan yang namanya objek, dia punya, ada yang disebut dengan property, seperti nama, nrp, email itu, itu kita sebut dengan property, dan ada yang disebut dengan method.
Kalau kalian lihat hitung IPK itu adalah metode Karena dia berisi function Teman-teman mesti ingat Function merupakan nilai juga Di dalam javascript Jadi ini adalah objek yang cukup sederhana Nantinya objek itu bisa kita buat sangat kompleks Kita bisa bikin objek di dalam objek Yang di dalamnya ada array Yang di dalam array itu elemennya objek juga Jadi seperti itu Tapi sekali lagi Ini adalah objek Objek yang dimaksud dalam DOM itu ya ini Sama aja Oke Dan yang terakhir adalah model Nah model mungkin ini artinya ya representasi aja begitu ya Jadi representasi terhadap sesuatu begitu Nah jadi kalau saya rangkai definisi dari ketiga kata tersebut Menurut saya definisinya seperti ini Jadi DOM itu adalah sederhana gini aja lah Representasi elemen HTML yang ada di dalam dokumen Untuk nantinya dijadikan sebagai objek gitu Coba teman-teman pahami yang ini Jadi ada elemen HTML yang kalian bikin menggunakan file misalkan index.html Nah itu nantinya oleh browser itu direpresentasikan sebagai objek Ya atau dimodelkan sebagai objek disimpan ke dalam browsernya Nanti kita lihat contohnya deh seperti apa ya Ya sekarang kita lihat ini Kalau misalkan tadi ya kasusnya adalah sebuah website sederhana yang di dalamnya itu terdapat beberapa elemen HTML Kalian bisa lihat itu hello world-nya saya bentuk dari H1 Web Programming Unpass-nya itu dari H3 Paragraph-nya dari P, dan seterusnya ya Nah itu, kita bikinnya kan di file HTML Menggunakan tag-tag HTML Begitu file itu dibuka di browser seperti ini Maka, elemen-elemen HTML tadi akan dibaca oleh browser Dan diterjemahkan atau direpresentasikan sebagai objek di dalamnya Makanya kalau kita coba gini Kalian buka konsolnya Terus coba kalian ketik dokumen aja di konsolnya Seperti ini Nanti dia akan menghasilkan seperti ini. Dia akan mengembalikan ada nilai tanda pagar dokumen. Yang di sebelah kirinya kalian lihat itu ada tanda segitiganya. Itu artinya segitiganya itu bisa kalian expand atau dibuka begitu ya. Diklik nanti dia kebuka.
Ada isinya itu pasti di dalamnya. Nah itu jadi representasi halaman web kalian itu sama si browser disimpannya sebagai itu. Sebagai model itu.
Kalau kita buka, kita coba buka yang segitiganya. Tampilnya seperti itu Kelihatan ada tag-tag yang kalian buat di HTML-nya Kita coba deh ya Nah ini teman-teman ya Kalau kalian lihat di sebelah kiri saya ini Udah ada code editor saya buka Lalu di sebelahnya itu ada web browser-nya Nah misalnya gini Di dalam code editor-nya Saya udah bikin file namanya index.html Yang sudah saya hubungkan ke dalam script Oke Kalau saya tulis misalkan H1 Terus hello world Seperti ini Terus di bawahnya saya bikin paragraph Ini paragraph 1 Lalu paragraf 2 Lalu misalkan saya bikin ul Yang ada li nya misalkan ini list item 1 dan 2 ya Simple aja kayak gini dokumen html nya Save lalu saya lihat disini lihat hasilnya Refresh Tuh hasilnya kayak gitu ya Ini gak ada yang aneh kan Ini yang tampil di browser Tapi sebetulnya yang disimpan di dalamnya Itu seperti ini Coba kalian klik kanan Inspect terus buka konsolnya Coba sekarang saya tulis dokumen Terus pencet enter Kalian lihat ya Ini yang tersimpan Di dalam browsernya Kalau kita klik Tuh itu ada representasi atau model dari elemen HTML kita Kalau sekarang Kita nggak tulis di sini ya Tapi kita tulisnya lewat scriptnya Saya tulis gini Console.log.document Ini sama aja ya Akan menghasilkan nilai yang sama Kembali ke browser Sudah di save Terus refresh Tuh sama Jadi DOMnya itu ini, representasi yang ada di dalam browsernya Gimana? Paham nggak? Nah si DOM ini, model tadi itu tersimpan sebagai yang disebut dengan ini Pohon Hierarki DOM Jadi di dalam memori kalian itu tersimpannya sebagai Pohon Hierarki DOM Atau ada yang bilang ini namanya DOM3 Nah kenapa DOM3? Karena nanti representasinya mirip sebagai pohon Dia punya Cabang, dia punya akar, dan lain sebagainya.
Contohnya seperti ini. Jadi kalau misalkan kita buat sebuah halaman web, yang tersimpan itu representasinya gini modelnya. Ini sesuai dengan hirarki HTML yang kalian tulis. Ingat kan, kalau misalkan kita bikin HTML itu pasti tag terluarnya adalah HTML.
Terus di dalamnya ada dua tag utama. Ada head, ada body di bawahnya. Nah itu representasinya gini.
Jadi tag paling atasnya, Itu adalah HTML, terus dia punya anak dua ya, cabangnya dua, ada head, ada body, terus body punya banyak, terus head juga punya banyak di dalamnya. Ini yang disebut dengan pohon hirarki DOM. Dan pemahaman tentang DOM3 ini nantinya akan jadi sangat penting, terutama ketika kalian akan memilih atau menyeleksi sebuah elemen dan menelusurinya. Tapi itu nantilah kita lihat ya.
Jadi ini adalah DOM3-nya. Tiap-tiap kotak yang kalian lihat itu nantinya kita akan sebut sebagai simpul atau node. Yang bentuknya juga sama, dia objek juga Dan semua simpul ini, dia berada di bawah satu buah simpul yang tadi, namanya dokumen Gitu ya teman-teman, bener-bener paham nih sampai sini Atau kalau nggak kita lihat nih, contoh berikut ini Misalnya saya punya elemen HTML sederhana aja Satu tag paragraph seperti ini Di dalam paragraphnya ada tulisan Ini adalah paragraph dengan lalu spasi ada tag A-nya di situ Jadi paragraph di dalamnya ada tulisan, ada A-nya A-nya punya atribut, href tentu saja ya, A itu harus ada href-nya, supaya kalau diklik dia pindah. Pindah ke mana? Ke test.html.
Terus tulisan yang ada di A-nya itu link. Terus setelah itu ada tulisan di dalamnya. Nah ini simple aja.
Seperti ini coba kira-kira representasi pohon domnya seperti apa. Nah coba sampai sini. Kalian bisa kira-kira dulu nggak?
Mau digambar boleh lah ya. Kalian bikin tag mana yang ada di atasnya, tag mana yang menjadi anaknya, dan seterusnya. Ini hasilnya tuh seperti ini. Jadi tag utamanya adalah P. Yang di dalamnya, dia terbagi menjadi beberapa simpul tadi ya.
Ada tulisan ini adalah paragraf, terus ada tag lagi A, yang A-nya itu punya atribut, dan seterusnya. Dan tadi ya, tiap-tiap kotak dan lingkaran ini, kita sebut dengan apa? Simpul atau node. Jadi banyak nodenya. Ini baru satu tag pack.
Gimana kalau misalkan halamannya kompleks? Ya tentu saja DOM3-nya akan sangat besar sekali. Begitu.
Jadi kalau misalkan kita kembali lagi ke contoh kita yang ini Kita punya kasus beberapa tag HTML Ada hello world-nya, ada web programming unpas Yang representasinya kalian sudah bisa lihat di console Yang ada di bawah itu ya Itu ada di dalam object document Direpresentasikan sebagai pohon dom atau dom tree Nah sebetulnya object document ini Dia juga merupakan bagian dari object yang lain yang lebih tinggi Karena document itu kan tadi saya bilang yang ada di area yang putih itu saja kan Area website-nya lah Nah, browser itu ada lagi di objek yang lebih tinggi Ya, kita lihat Sebetulnya di atas dokumen itu masih ada lagi Yang namanya window Dokumen hanya salah satu bagian dari window Nah, window ini isinya lebih besar lagi Ya, kalau tadi dokumen kan cuma mengelola apapun yang ada di dalam website Nah, kalau window Dia sampai bisa kontrol browsernya Dia tahu ukuran browsernya berapa Dia tahu Posisi kursor ada di mana Dia tahu kita lagi scroll di jarak berapa Dan lain sebagainya Jadi ada objek lagi yang lebih besar lagi Jadi kalau kita lihat tadi dokumen itu hanya di sini ya Hanya di bagian website-nya aja Window itu semuanya Ya objeknya lebih besar lagi Ya tapi kita nggak akan khawatirkan dulu yang Windows Kita fokus di dokumennya aja dulu Gimana kita bisa mengelola Elemen-elemen yang ada di dalam website kita Menggunakan DOM tadi Gitu ya Jadi sampai sini mudah-mudahan teman-teman udah paham nih Kira-kira DOM itu apa sih? Dan representasinya seperti apa? Jadi kalau kita recap Coba kita ulang lagi ya DOM itu adalah tadi Kita sebut dengan antarmuka pemrograman berbasis objek Untuk merepresentasikan tadi Memodelkan dokumen web Nah jadi dia kita sebut antarmuka pemrograman lah ya Kenapa?
Karena nantinya kita bisa menghubungkan javascript Kedalam elemen HTML tadi Antarmukanya apa? Ya DOM tadi Kita nanti nyuruh DOM untuk tolong carikan elemen apa Begitu Sehingga kita bisa membuat seluruh komponen yang ada di dalam dokumennya tadi Bisa kita akses dan kita manipulasi Nah lalu komponen apa saja yang bisa kita akses dan manipulasi Ya macam-macam, tadi yang paling gampang adalah elemen HTML Dicari elemennya, terus kita manipulasi Terus kita juga bisa cari atributnya misalkan Elemen tersebut punya atribut apa? Nanti kita ubah Atau misalnya kita ubah tulisannya Yang tadi tulisannya apa kita ubah jadi apa Dan masih banyak lagi yang bisa kita akses dan manipulasi menggunakan DOM ini Dan nanti kita manipulasinya itu menggunakan JavaScript Nah jadi selanjutnya teman-teman buka sebuah website Apapun lah websitenya ya Misalnya kalian buka Facebook Itu kalian kalau misalkan mau nulis status di Facebooknya Begitu di klik kolom statusnya Tiba-tiba dia langsung berubah menjadi besar seperti ini Itu kenapa bisa gitu? Yaitu karena ada script di Facebooknya Yang mengakses ke dalam DOM HTML-nya Dan apapun lah, kalian buka misalnya toko online Nanti kalian buka toko online, di dalam tokonya itu kalian bisa lihat ada Gambar yang bisa bergerak secara otomatis Yang ada bulat-bulat kecilnya bisa kalian klik Terus gambarnya berubah Kalian klik menu, terus menunya tiba-tiba kebuka besar Nah itu nggak akan bisa kayak gitu Kalau misalkan tidak ada script yang mengakses DOM-nya Ya atau misalkan kalian mau bikin game penggunakan JavaScript lah Itu pun harus paham mengenai DOM ini Ya jadi sekali lagi DOM sangat penting dalam pemrograman web Dan selanjutnya, setelah kita tahu apa itu DOM dan apa yang bisa dilakukan DOM, pertanyaan selanjutnya adalah apa yang akan kita pelajari di seri ini? Kita lihat, yang pertama tentu saja kita akan belajar bagaimana caranya menyeleksi atau mengakses, disebutnya DOM Selection.
Bagaimana kita memilih sebuah elemen yang ada di dalam dokumen menggunakan JavaScript. Itu namanya DOM Selection, lalu ada DOM Manipulation atau manipulasi elemen HTML menggunakan DOM. Misalkan menambah elemen baru, menghapus, mengubah, dan lain sebagainya Dan yang terakhir, ini juga penting, ada yang disebut dengan DOM traversal Atau menelusuri elemen HTML lewat elemen HTML yang lain Nah ini penting ya Lalu kita juga akan belajar mengenai event handling Dimana nanti kita akan melakukan perubahan pada DOMnya Atau menelusuri DOMnya karena ada trigger Misalkan mouse di klik, kursor digerakkan, dan lain sebagainya Itu namanya event handling Dan nanti setelah kita belajar semua ini Tentu saja kita akan buat sebuah studi kasus Biar kalian ada implementasinya Kita akan membuat program-program sederhana Ya mungkin nanti di seri ini kita akan bikin kalkulator sederhana Kita akan bikin aplikasi untuk membuat slideshow Nah ini teman-teman banyak banget yang minta Wah tolong bikinkan tutorial mengenai pembuatan slideshow Jadi slideshow itu gambar yang otomatis pindah misalkan ya Itu seperti itu Atau nanti kita akan bikin game sederhana lah Game sederhana menggunakan konsep DOM ini Ya jadi diikuti aja terus serinya Saya yakin bakalan seru banget Lalu agar kalian mudah mengikuti materi-materi di seri ini, ada yang harus kalian pelajari terlebih dahulu.
Tapi kayaknya saya yakin kebanyakan dari kalian udah pada tau mengenai materi yang harus dipelajari. Tapi buat yang belum, kalian harus paham dulu mengenai HTML tentu saja ya. Karena kita akan memanipulasi si HTML-nya.
Jadi kalian harus paham dulu mengenai HTML, lalu mengenai CSS, dan terakhir mengenai JavaScript. Jadi tiga topik ini minimal harus kalian kuasai dulu. Ya buat yang belum.
Silahkan ikuti aja playlist-playlist yang ada di seri ini Sudah banyak playlist mengenai 3 topik ini Supaya kalian nanti lebih lancar lagi untuk ikutin seri yang ini Ya dan yang terakhir Yang harus kalian siapkan di seri ini Apa saja Ini terkait dengan software pendukungnya ya Ini simple aja gak aneh-aneh Kita butuh hanya 2 Kita butuh kode editor Kita butuh web browser Ya jadi silahkan teman-teman mau pakai kode editor apapun Mau pakai web browser apapun boleh Yang saya gunakan Di seri ini adalah seperti biasa Sublime Text dan Google Chrome Jadi kalau misalkan kalian mau bareng-bareng ikutinnya Silahkan yang belum punya diinstall dulu aja aplikasi-aplikasi ini Oke teman-teman jadi mungkin itu aja pengantarnya untuk seri kali ini Mudah-mudahan kalian semangat nanti untuk ikutin seri ini Tinggal selanjutnya kita akan siap-siap Karena di video berikutnya kita langsung praktek nge-loading mengenai DOM ini Oke jadi sampai sini dulu video pertamanya Seperti biasa teman-teman jangan lupa untuk selalu dukung kita dengan like videonya Share juga ke teman-teman yang lain yang baru mulai belajar mengenai web programming. Dan kalau kalian nggak mau ketinggalan jika ada video baru yang muncul, silakan subscribe aja di channel ini. Dan jangan lupa juga untuk klik lonceng notifikasinya yang ada di sebelah tombol subscribe, supaya kalian tahu duluan ketika ada video baru yang muncul.
Ya, dan kalau ada yang bingung dan ada yang mau ditanyakan, jangan ragu untuk tuliskan pertanyaannya di kolom komentar di bawah video ini. Dan terakhir, saya ucapkan terima kasih buat teman-teman yang udah nonton. Kita akan ketemu lagi di video berikutnya Saya Sandika Gali pamit Dan satu lagi, jangan lupa titik koma