terima kasih tuhan sudah menuntun saya ke channel yt pak sandhika. saya jadi lebih mudah dan semangat belajar. semoga selalu menjadi berkat bagi banyak orang ilmunya pak, rezeki juga lancar. saya ga skip iklan 🙏🏻
Gua agak ngerti nih konsepnya, jadi itu tuh di masukin ke variabel make function, nanti kita make function yg lain buat memprosesnya, sesuai kebutuhan gitu kan, make parameter juga tuh.
itu bukan function mas, itu manipulation method. disitu variabel digunakan untuk menampung hasil selection terhadap suatu elemen dan juga untuk menampung tugas yang dilakukan sebuah method. jadi, methodnya bisa bekerja dengan memanggil variabelnya.
1. perbedaan ecmascript dan typescript itu apa pak? 2. ada rencana buat tutorial node js ga pak? di youtube belum ketemu tutorial yang bener - bener lengkap tentang node js
Semoga bapak masih baca ya saya masih bingung pak misal cara mengganti tulisan hello world sesuka kita itu bagaimana pak kalau menggunakan manipulasi ini
Izin jawab. Bedanya kalau pake HTML dan CSS coba bisa dikelola oleh Developer beda kalau pake DOM user juga bisa berinteraksi. Kalau abangnya pernah maen game yang bisa edit karakternya itu dibuat pake DOM, kurang lebih gitu bang
Pak dika saya melakukan seperti ini dijadikan 1 baris : sectionA.appendChild(document.createElement('p').appendChild(document.createTextNode('Mermaid Baru'))); Yg keluar hanya textNodenya saja tanpa ada p.. Seharusnyakan Mermaid Baru.. Ini kenapa ya? Terimakasih
Mau tanya, Pak. Koding js bagian Paragraf Baru saya bisa berjalan, tapi selain itu tidak ada yg bisa jalan (add Judul Baru, remove link, dan replace), Pak. Dan saya sudah periksa semua kodenya dari awal 2x tapi tetap tidak jalan. Mohon bantuannya.
izin bertanya pak, di video sebelumnya pak Dika bilang bahwa ada saatnya kita tidak boleh menyentuh atau mengubah halaman HTML, saat kondisi seperti apa kita tidak boleh mengutak-atik halaman HTML?
bantu jawab, saya ambil contoh kasus, web pembuatan link seperti linktree, user tidak mungkin merubah link atau tombol di bagian backend, maka dibuat manipulasi DOM dibagian front end / bagian tampilan user, agar user dapat merubah / mengganti link tersebut dibagian front end, semoga bisa menjawab
Pa izin bertanya,, kenapa value dari method "appendChild(node)" tidak di kasih tanda kutip sedangkan method yg lain di kasih ?? Jadi bikin bingung knp yh alasannya ?? Terimakasih pa
karna dia manggil variabel yg tadi dibikin duluan, klo yang kutip kan buat milih node atau kasih String. contohnya : const baru = document.createElement('h2'); const teksh2baru = document.createTextNode('tesss'); baru.appendChild(teksh2baru); 'baru' ini dia bikin element baru yang tagnya h2, terus 'teksh2baru' ini bikin teks yang mau dimasukin ke dalem h2. jadi baru.appendChild(teksh2baru) = pilih variabel yang namanya baru, terus kasih child di dalemnya berupa variabel 'teksh2baru' yang dimana isinya string "tesss" klo dijadiin html simplenya bakal jadi gini doang tesss
Pak saya mau nanya di Menit ke 15.20 , Ketika const ul = document.querySelector diganti dengan -- const ul = document.getElementsByTagName ('ul'); const li2 = document.getElementsByTagName ('ul li); ul.appendChild(liBaru, li2); Kok Terjadi Error di ul.appendChild is not a function , kenapa ya ? apa karena Ul Li itu adalah Selector bukan Tag Html ? *note : ketika saya menggunakan document.querySelector tidak error appendChild nya
getElementsByTagNama itu menghasilkan HTMLColection(Mirip seperti array) punya index .jadi waktu melakukan DOM selectionnya tuliskan Indexnya. coba nonton ulang video ini th-cam.com/video/bCKxPvA8KPo/w-d-xo.html
Ijin bertanya pak @sandhikagalih, saya menambahkan paragraph pada sectionB untuk paragraph 5 dibawah element paragrap 4. yang terjadi adalah paragrap baru (paragraph 5) berada di bawah item 3 ( element ul li item 3) bukan di element setelah paragrap ke 4. kira2 bagaimana ya supaya berada di bawah paragraph 4?
pak, baris kode const teksPBaru = document.createTextNode('Paragraf Baru'); pBaru.appendChild(teksPBaru); kenapa ngga langsung pBaru.innerHTML = 'Paragraf Baru'; saja pak?
ooohhh.. ternyata ini jawabnnya createTextNode will escape any strings and show them as they are, while innerHTML could render html-like strings into a DOM
untuk bertanya tentang error source code, langsung sertakan saja source codenya mas. karna error dalam coding ga hanya 1 jenis, bisa human error, logical error, dan syntax error. kalo disertakan source codenya disini, orang lain jadi lebih mudah meneliti dan memberikan solusinya.
Permisi pak mau nanya, saya sudah mempunyai element Table pada HTML dan ingin menambahkan row baru , kira2 bagaimana menambahkan element row baru dan dengan menambahkan class pada row yang baru dibuat tersebut ya?
berikut source code yang bisa dicoba ==HTML== Table Manipulation Hello World
Data 1
==JAVASCRIPT== const createElement = document.createElement('tr'); // dengan ini elemen baru telah dibuat tapi hanya disimpan didalam memori const textCreateElement = document.createTextNode('Data 2'); // dengan ini, text content baru telah dibuat didalam elemen // dengan 2 variabel tersebut, sudah dibuat elemen dan teks contentnya, tetapi mereka berdua belum menyatu. // maka satukan text contentnya dengan elementnya dengan appendChild createElement.appendChild(textCreateElement); // dengan ini, kita sudah menyatukan variabel dari elemen dan text contentnya. // tahap akhir, tempatkan elemen baru tersebut ke tempat yang diinginkan. const selectSectionA = document.querySelector('section#a table'); selectSectionA.appendChild(createElement); createElement.setAttribute('class', 'classBaru'); // memberikan atribut berupa class baru
Pak mau tanya.. Saya melakukan 2 kali appendchild dengan variabel dari create textnode yg sama.. Tetapi kenapa text node pada appendchild yg pertama jdi kosong.. Jdi cuman masuk di appendchild yg kedua? Terima kasih..
document.createElement() gaperlu melakukan selection terhadap elemen manapun karna tugasnya hanya membuat elemen baru dan ditempatkan didalam memori. yang memerlukan selection adalah node.appendChild() atau node.insertBefore()
pak mau tanya, apakah bisa dengan menggunakan javascript misal kita login ke gmail, nah kita bisa ngesend email itu lewat javascript, jadi sistem nya kaya bot, bisa ngesend otomatis
Sampai di penjelasan membuat elemen baru yg ribet, saya bingung kenapa butuh ini Kenapa tidak tambahkan seperti biasa ke HTML seperti menit 3:35 Kalau ada yg ribet, kenapa harus yg mudah?
@@ItzMeHio Bukan gitu. Intinya adalah penerapan DOM bukan utk kasus seperti ini, karena ada cara yg lebih mudah. Saya hanya mewakili pemikiran pemula ketika melihat video ini
Ada proyekan dimana kita gaboleh merubah elemen htmlnya jadi mau gamau kita musti ngerti konsep dom Jadi ini bukan masalah ribet susahnya,pemrograman non freelance misal perusahaan,kan kerjanya dalam tim
pak pengertian dari vas bunga, bunga dan ruang tamu ilustrasi yang sangat mudah dipahami...mantap pak
terima kasih tuhan sudah menuntun saya ke channel yt pak sandhika. saya jadi lebih mudah dan semangat belajar. semoga selalu menjadi berkat bagi banyak orang ilmunya pak, rezeki juga lancar. saya ga skip iklan 🙏🏻
Hatur nuhun pak Galih seru pisann euyyy ngoding sareng bapak,, mugia sehat selalu🙏
Gak semuanya orang pintar bisa mengajar, bahkan sangat sedikit yang bisa. Terima kasih pak sandhika.
guru terbaik saya belajar coding. penjelasannya mudah dipahami, bahasanya kompleks simple padat dan jelas. semangat pak, terimakasih atas ilmunya
pak dika makasih banyak saya paham setelah beberapa kali ulang dan pahami. Semoga makain berkembang web programming Unpas
ya alloh bapak mantap banget gampang difahamin dan sangat sabar pelan2, sehat selalu pak :D
semoga disehatkan selalu ya pak
ilmu nya sangat membantu bagi yang belajar sendiri
Terimakasih bang dika share ilmunya sangat bermanfaat
Video nya mudah dipahami dan sgt terstruktur, sya jadi mudah belajar nya hehe
Keren, terima kasih pak ilmunya
thanks for saving my life Sir
0 Dislike menandakan video dan pengajaran bapak Mantap! Terimakasih Pak Sandhika...
analogi vas bunga dan bunga nya keren pak
Ia pak di tunggu freamwork php nya
mudah dimengerti pak makasih ilmu nya pak 😊
Terima kasih banyak Pak Dhika. Penjelasannya sangat mudah dipahami :D
keren pak terimakasih
Hadir.... Suksess selalu
Ditunggu framework laravelnya atau CI pak, yang paling banyak dibutuhin perusahaan web dev deh😅
Terima kasih Bro Sandhika Galih
makin keren kang dhika...
terima kasih pa ilmunya
thanks ilmunya pak
Mantap lah pokoknya mh
yang masih nonton ditahun 2024 bulan 11 ☝
Makasih pak dika atas tutorialnya
terima kasih....
Terima kasih pak
sehat selalu njih pak
mantul pak...
Mantap
lanjut dom
Gua agak ngerti nih konsepnya, jadi itu tuh di masukin ke variabel make function, nanti kita make function yg lain buat memprosesnya, sesuai kebutuhan gitu kan, make parameter juga tuh.
itu bukan function mas, itu manipulation method. disitu variabel digunakan untuk menampung hasil selection terhadap suatu elemen dan juga untuk menampung tugas yang dilakukan sebuah method. jadi, methodnya bisa bekerja dengan memanggil variabelnya.
di tunggu video selanjutnya pak :)
Mas dhika bikin tutorial bahasa pemograman untuk mobile dong seperti c# ?
cek channel youtube 'Kelas Terbuka' :)
Di tunngu framework php nya pak
Thanks Pak
Terimakasih Pak :)
Mangap pak, sehat selalu
Thankyou Pak :)
Angular 4 dong pak 😆😆😆😊😊
kalau pakai document saja gak pakai tag html nya boleh tah.
tetap semangat nonton
mantul pa (y)
Node.js pak, ke backend😂
1. perbedaan ecmascript dan typescript itu apa pak?
2. ada rencana buat tutorial node js ga pak? di youtube belum ketemu tutorial yang bener - bener lengkap tentang node js
dan sekarang sudah terkabul wkwk
@@rezadwiputra1416 wkwkw
@@rezadwiputra1416 alhamdulillah wkwkwk
saya dari masa depan
Wkwkwk ga kerasa udah 6 thn yg lalu
insertBeforenya undefined kenapa ya pak ? Padahal 3 komponen yg di butuhkan sudah benar di uji2 satu2 di console ?
First
pak mau tanya misa saya ada class container yang didalamnya ada 3 buah class , trus saya mau ada 3 container yang sama menggunakan js gimana ya pak?
klo bisa nambah elemen dr html langsung , knpa hrs lewat js pak?
saya juga bingung
Untuk generate konten webpage secara dinamis, contohnya video-video pada home page youtube yang muncul saat di-scroll.
sama saya juga penasaran kenapa harus pake DOM jika HTML dan CSS juga memiliki fungsi yg sama
pak untuk perbedaanya antara appendChild( ) ama insertBefore( ) masih bingun yang itu
*parentNode.appendChild(child)* menambahkan elemen 'child' sebagai anak terakhir dari 'parentNode'.
- parent-node _
Semoga bapak masih baca ya saya masih bingung pak misal cara mengganti tulisan hello world sesuka kita itu bagaimana pak kalau menggunakan manipulasi ini
kalau ada pertanyaan, kirim ke mana ya pak?
Kedua
mau tanya pak, untuk documentation nya bisa dilihat dimana ya pak seputar dom ini?
Pak saya masih penasaran kenapa kita harus menggunakan DOM, padahal kegunaannya mirip seperti HTML dan CSS..... apa ada alasan khusus ?
Izin jawab. Bedanya kalau pake HTML dan CSS coba bisa dikelola oleh Developer beda kalau pake DOM user juga bisa berinteraksi. Kalau abangnya pernah maen game yang bisa edit karakternya itu dibuat pake DOM, kurang lebih gitu bang
Pak dika saya melakukan seperti ini dijadikan 1 baris :
sectionA.appendChild(document.createElement('p').appendChild(document.createTextNode('Mermaid Baru')));
Yg keluar hanya textNodenya saja tanpa ada p..
Seharusnyakan Mermaid Baru.. Ini kenapa ya? Terimakasih
kalau mau 1 baris jadinya gini gan:
sectionA.appendChild(document.createElement('p')).appendChild(document.createTextNode('Mermaid Baru'));
Mau tanya, Pak. Koding js bagian Paragraf Baru saya bisa berjalan, tapi selain itu tidak ada yg bisa jalan (add Judul Baru, remove link, dan replace), Pak. Dan saya sudah periksa semua kodenya dari awal 2x tapi tetap tidak jalan. Mohon bantuannya.
Coba cek console browsernya
ko saya gapaham2 ya di bagian inshertBefore nya saran nya pak
Kenapa yang pas saya implementasi menambah paragraf baru di akhir section#a nya malah elemen nya a nya hilang kyk ketimpa gitu solusi nya gi mana pak
izin bertanya pak, di video sebelumnya pak Dika bilang bahwa ada saatnya kita tidak boleh menyentuh atau mengubah halaman HTML, saat kondisi seperti apa kita tidak boleh mengutak-atik halaman
HTML?
bantu jawab, saya ambil contoh kasus, web pembuatan link seperti linktree, user tidak mungkin merubah link atau tombol di bagian backend, maka dibuat manipulasi DOM dibagian front end / bagian tampilan user, agar user dapat merubah / mengganti link tersebut dibagian front end, semoga bisa menjawab
@@syarieeef4879 trimakasih bang jawabannya
pak update javascript nya dong ke 2020-2021
erlangga_hadir
Pak kalo misalnya kita mau buat element baru dg class gimana caranya? Misal buat
const pBaru = document.createElement('p');
pBaru.classList.add('a');
Oh gitu ya pak jadi harus buat elemen dulu trs kasih class
Oh gitu ya pak jadi harus buat elemen dulu trs kasih class
Berarti bisa donk kita design semua halaman html kita dengan file script js yg kita buat, maksudnya design by script
untuk style bisa saja dengan CSS, tapi kalo UX untuk interaksi web dengan user bisa pake js.
@@malvinval izin nanya, berarti dom membantu css dalam hal transisi dll ya ?
wah, pas tau ada kaya gini jadi inget admin di wp. bisa kan ya dijadiin gitu pak?
Pa izin bertanya,, kenapa value dari method "appendChild(node)" tidak di kasih tanda kutip sedangkan method yg lain di kasih ?? Jadi bikin bingung knp yh alasannya ?? Terimakasih pa
karna dia manggil variabel yg tadi dibikin duluan, klo yang kutip kan buat milih node atau kasih String.
contohnya :
const baru = document.createElement('h2');
const teksh2baru = document.createTextNode('tesss');
baru.appendChild(teksh2baru);
'baru' ini dia bikin element baru yang tagnya h2, terus 'teksh2baru' ini bikin teks yang mau dimasukin ke dalem h2.
jadi baru.appendChild(teksh2baru) = pilih variabel yang namanya baru, terus kasih child di dalemnya berupa variabel 'teksh2baru' yang dimana isinya string "tesss"
klo dijadiin html simplenya bakal jadi gini doang tesss
mulai bingung di section ini bang
Pak saya mau nanya di Menit ke 15.20 ,
Ketika const ul = document.querySelector diganti dengan --
const ul = document.getElementsByTagName ('ul');
const li2 = document.getElementsByTagName ('ul li);
ul.appendChild(liBaru, li2);
Kok Terjadi Error di ul.appendChild is not a function , kenapa ya ? apa karena Ul Li itu adalah Selector bukan Tag Html ?
*note : ketika saya menggunakan document.querySelector tidak error appendChild nya
getElementsByTagNama itu menghasilkan HTMLColection(Mirip seperti array) punya index .jadi waktu melakukan DOM selectionnya tuliskan Indexnya. coba nonton ulang video ini th-cam.com/video/bCKxPvA8KPo/w-d-xo.html
Jangan lupa index ke brp nya [2]
Ijin bertanya pak @sandhikagalih, saya menambahkan paragraph pada sectionB untuk paragraph 5 dibawah element paragrap 4.
yang terjadi adalah paragrap baru (paragraph 5) berada di bawah item 3 ( element ul li item 3) bukan di element setelah paragrap ke 4. kira2 bagaimana ya supaya berada di bawah paragraph 4?
Pake insertBefore, di scop dulu ul nya, kalo pake appendChild dia pasti berada di akhir dari isi parent node nya
kalau tambah paragraf baru di section " b " setelah paragraf 4, buat const 'section b' dan "ul'
codingannya :
const pBaru = document.createElement('p');
const textPBaru = document.createTextNode('Paragraf 5');
pBaru.appendChild(textPBaru);
const sectionB = document.getElementById('b');
const ul = document.querySelector('section#b ul');
sectionB.insertBefore(pBaru, ul)
pak, baris kode
const teksPBaru = document.createTextNode('Paragraf Baru');
pBaru.appendChild(teksPBaru);
kenapa ngga langsung pBaru.innerHTML = 'Paragraf Baru'; saja pak?
ooohhh.. ternyata ini jawabnnya
createTextNode will escape any strings and show them as they are, while innerHTML could render html-like strings into a DOM
Kodingan saya yang insertBefore kok ga jalan ya pak. Padahal caranya sudah sama. Sy pakai browser chrome. Kira2 knp pak?
mungkin getElement nya,
untuk id gak pakai huruf s
untuk bertanya tentang error source code, langsung sertakan saja source codenya mas. karna error dalam coding ga hanya 1 jenis, bisa human error, logical error, dan syntax error. kalo disertakan source codenya disini, orang lain jadi lebih mudah meneliti dan memberikan solusinya.
23:19 apakah sekarang sudah support di semua browser pak ?
TERGANTUNG!,kalo lu sudah update yah support
Permisi pak mau nanya, saya sudah mempunyai element Table pada HTML dan ingin menambahkan row baru , kira2 bagaimana menambahkan element row baru dan dengan menambahkan class pada row yang baru dibuat tersebut ya?
berikut source code yang bisa dicoba
==HTML==
Table Manipulation
Hello World
Data 1
==JAVASCRIPT==
const createElement = document.createElement('tr'); // dengan ini elemen baru telah dibuat tapi hanya disimpan didalam memori
const textCreateElement = document.createTextNode('Data 2'); // dengan ini, text content baru telah dibuat didalam elemen
// dengan 2 variabel tersebut, sudah dibuat elemen dan teks contentnya, tetapi mereka berdua belum menyatu.
// maka satukan text contentnya dengan elementnya dengan appendChild
createElement.appendChild(textCreateElement); // dengan ini, kita sudah menyatukan variabel dari elemen dan text contentnya.
// tahap akhir, tempatkan elemen baru tersebut ke tempat yang diinginkan.
const selectSectionA = document.querySelector('section#a table');
selectSectionA.appendChild(createElement);
createElement.setAttribute('class', 'classBaru'); // memberikan atribut berupa class baru
Kok saya pake pBaru ga bisa ya?
Pak mau tanya.. Saya melakukan 2 kali appendchild dengan variabel dari create textnode yg sama..
Tetapi kenapa text node pada appendchild yg pertama jdi kosong.. Jdi cuman masuk di appendchild yg kedua? Terima kasih..
Kirim source codex gan biar kita pecahkan sama2
kalo dengan appendChild(); gabisa, coba dengan insertBefore();
perbedaan append dengan appendChild itu apa ya?
sama saja, untuk menempatkan child baru dibagian akhir sebuah elemen html.
KeEnam
pak kalo document create element itu ,elementnya harus kita seleksi dari html nya ?
document.createElement() gaperlu melakukan selection terhadap elemen manapun karna tugasnya hanya membuat elemen baru dan ditempatkan didalam memori. yang memerlukan selection adalah node.appendChild() atau node.insertBefore()
@@malvinval thankyou
Assalamu'alaikum, pak Dika, SectionA itu bukannya parent-nya p ya?
betul, tapi tergantung p yang mana, karena di dalam sectionB juga ada p..
makasih pak
Web Programming UNPAS terima kasih pak
kok style nya ngak ikut pak saat menambahkan elementnya ?
bisa diatur stylenya dengan document.style.();
Pak boleh minta ppt nya gak?
cara komentar (// ) gimana?
Saya bantu jawab ya mas..
semua yg mau dijadiin comment diblock dulu, kemudian tekan ctrl + /
Yang ini aga bingung
pak mau tanya, apakah bisa dengan menggunakan javascript misal kita login ke gmail, nah kita bisa ngesend email itu lewat javascript, jadi sistem nya kaya bot, bisa ngesend otomatis
Mau ngapain tuh kira-kira 😂
Sampai di penjelasan membuat elemen baru yg ribet, saya bingung kenapa butuh ini
Kenapa tidak tambahkan seperti biasa ke HTML seperti menit 3:35
Kalau ada yg ribet, kenapa harus yg mudah?
namanya juga DOM cok
@@ItzMeHio Bukan gitu. Intinya adalah penerapan DOM bukan utk kasus seperti ini, karena ada cara yg lebih mudah. Saya hanya mewakili pemikiran pemula ketika melihat video ini
@@Duda-ke3uz karena disini kita belajar dari dasar konsepnya
Ada proyekan dimana kita gaboleh merubah elemen htmlnya jadi mau gamau kita musti ngerti konsep dom
Jadi ini bukan masalah ribet susahnya,pemrograman non freelance misal perusahaan,kan kerjanya dalam tim
@@Duda-ke3uz bisa tolong dijelasin lagi ga bang ? saya masih penasaran alasan penggunaan DOM ini, kegunaannya mirip seperti CSS dan HTML
//
Terima kasih pak