bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok share mengenai DOM. DOM adalah document object model. jadi intinya kita mengubah sesuatu dengan menggunakan javascript, mengubah html, css memberikan perintah kepada input, button agar bisa dinamis, kan katanya gitu javascript itu membuat website menjadi lebih dinamis atau lebih berinteraktif, karena kita bisa memberikan perintah apapun dengan menggunakan javascript, nah makanya kita membutuhkan DOM ini, sebenarnya kalau kita lihat tutorial sebelumnya kita udah sedikit-sedikit menggunakan DOM, cuman kalau ga di notice ga tau, ibarat kamu sering kasih kode ke gebetan kamu tapi dia nya ga peka-peka.
Oke anyway, kenapa di judul ada part-partnya ? karena ini adalah tutorial series belajar javascript dari dasar sampai bisa. kalau mau liat list tutorialnya bisa lihat dibawah ini ya
Tutorial Series Belajar Javascript es5 & es6
Selanjutnya kita langsung memulai aja ya, tutorial DOM ini ada tahapnya ini, biar ga kemana-mana gitu, jadi om bewok buatin aja nih apa saja yang akan kita pelajarin pada tutorial kali ini
1. Cara Mengambil Data & Cara Menambah Data (innerHtml)
2. Menambahkan style CSS menggunakan Javascript DOM
3. Bermain dengan List data
4. Belajar menggunakan button dengan menggunakan DOM (addEventListener)
1. Cara Mengambil Data & Cara Menambah Data
Oke kita buat folder terlebih dahulu dengan nama #16_dom dengan nama file yang bernama selector.html Lalu kodingan-Nya seperti dibawah ini ya
Tampilan-Nya seperti dibawah ini
document.querySelector adalah sebuah method untuk select data
Jadi kayak gini kalau di ceritain
Buat variabel tambahText, document.querySelector tolong ambilkan id demo lalu tambahkan html Hello bewoksatukosong
id demo di dapat dari html <h1 id="demo"></h1> kalau misalnya
<h1 class="demo"></h1> berarti gunakan titik (.demo)
id = #demo
class = .demo
2. Menambahkan Style CSS menggunakan Javascript DOM
Kodingannya seperti dibawah ini ya
Tampilannya seperti dibawah ini ya
Sama seperti no 1, tapi perbedaanya kita tambahkan css ketika menambahkan html. kita bisa menggunakan
<span style='color:blue;'>tambahkan apa aja</span>
3. Bermain dengan Properties DOM
Kita buat list data terlebih dahulu dengan menggunakan ul list, kita buat yang sederhana terlebih dahulu. Nah sebelum kita membuat javascript, kita buat html nya dulu nih, ibaratnya buat fondasinya dulu sebelum beraksi.
<ul class="list">
<li class="lists">mangga</li>
<li class="lists">apel</li>
<li class="lists">jeruk</li>
<li class="lists">pisang</li>
</ul>
Nah baru deh kita buat javascript-Nya ya. Full Kodingan-Nya bisa lihat di bawah ini ya. Selanjutnya kita select data dulu nih biar bisa kita atur, nih html mau kita apain. seperti sebelumnya kita gunain document.querySelector(.list) pake titik karena dia class.
Beberapa perintah yang bisa kita gunakan dengan lastElementChild
ul.lastElementChild.remove();
artinya kita akan menghapus data, hanya benar-benar data yang terakhir.
Kodinganya seperti dibawah ini
Kita juga bisa mengganti data dengan cara
ul.lastElementChild.innerHTML = 'masukin data yang mau diubah';
otomatis data yang terakhir akan berubah. berubah loh ya bukan menambahkan. kodinganya sepert dibawah ini
const ul = document.querySelector(".list");
Oke baru nih bisa kita ubah sesuka hati kita. 3.1 list.remove()
Kita hapus semuanya, kita bisa gunakan list.remove(). kodinganya seperti dibawah iniconst ul = document.querySelector(".list");
// semua ul class list hilang semua
ul.remove();
Coba tampilin ke browser, pasti kosong. 3.2 lastElementChild
Fungsi ini kita select data tapi hanya data yang terakhir yang kita ubahBeberapa perintah yang bisa kita gunakan dengan lastElementChild
ul.lastElementChild.remove();
artinya kita akan menghapus data, hanya benar-benar data yang terakhir.
Kodinganya seperti dibawah ini
ul.lastElementChild.remove();
Kita juga bisa mengganti data dengan cara
ul.lastElementChild.innerHTML = 'masukin data yang mau diubah';
otomatis data yang terakhir akan berubah. berubah loh ya bukan menambahkan. kodinganya sepert dibawah ini
ul.lastElementChild.innerHTML = '<h1>hallo apa kabar</h1>';
3.3 FirstElementChild
Fungsi ini kita bisa mengubah awal data sama seperti lastElementChild seperti ini
ul.firstElementChild.innerHTML = 'Hello';
Otomatis data yang pertama akan berubah menjadi hello
3.4 Children[i]
Fungsi ini kita bisa mengubah data dimanapun berada, angka nya mulai dari 0 jadi kodingannya seperti dibawah ini ya
ul.children[1].innerHTML = 'bewoksatukosong';
Seluruh kodingannya seperti dibawah ini ya
4. Belajar Menggunakan Button dengan menggunakan DOM (addEventListener)
Jadi ketika button di klik maka dia akan melakukan sesuatu, nah dengan menggunkan addEventListener kita bisa melakukan yang kita inginkan.
Contohnya ketika kita klik button maka akan menampilkan html. Langsung saja kita lihat codingannya dibawah ini
Tampilannya seperti dibawah ini y
Saya membuat 2 button biar bisa berganti-ganti tulisannya dan juga saya menggunakan arrow function dan cara lama.
Tutorial selanjutnya kita akan belajar cara membuat crud pure menggunakan javascript, sampai jumpa di tutorial selanjutnya ya.
Source Code Github
No comments:
Post a Comment