keyword: - event handler: a. inline html attribute (tidak disarankan) b. element method - addEventListener - perbedaanya event handler akan menimpa event listener tidak menimpa
08:20 Event Handler dalam HTML 09:54 Event Handler dengan method 12:10 addEventListener 17:42 Perbedaan EventHandler vs addEventListener 21:11 Event List
kita juga bisa kan tambahin 2 style sekaligus dalam satu func.. contohnya.. const p4 = document.querySelector('section#b p'); p4.addEventListener('click', function() { p4.style.backgroundColor = 'navy'; p4.style.color = 'white'; }); jadi ketika di klik bgColor jadi navy dan text berubah jadi putih.. tapi dalam satu func dan mungkin bisa menghemat coding. CMIIW...
11:58 --> kenapa pemanggilan function di antara "inline HTML attribute" dan "element method", yang satu bisa pakai "( )" yang satu harus di hilangkan penggunaan "( )" nya ??? Padahal sama² pakai event onclick bukan!? aktif begitu di klik!! Terimakasih...
kalo inline kita memanggil function yang ada di file jsnya jadi perlu pakai (), kalo method ngga, karena mungkin, event handlernya udah ada di file yang sama dengan functionnya
Pak Dhika. Semoga sehat selalu. Saya mau buat form input autocomplete. Tetapi sumber datanya dari database. Contoh sumber datanya di javascript : var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"]; Saya ingin sumber data diatas berasal dari database mysql. Minta SOLUSI pak Dhika.
pak dika gimana ya menggabungkan event keyup format angka ke rupiah dan penjumlahan otomatis di dalam sebuah form? udah coba cara ke duanya dari event handler tapi belum juga cocok logikanya. :(
Pak sandhika, mw tanya. Untuk menghapus element li tertentu diklik pake for loop gak bisa, tapi saat for loop memunculkan alert pada li tertentu bisa. Tolong solusinya pak. Terima kasih
Pak,saat saya lihat modal bootstrap pada website modern saat ini ketika di infect element tidak terlihat element tentang modal,tapi pada saat modal diaktifkan barulah muncul element untuk modal itu.maaf pak,ini metode nya gimana ya pak?
Halo, Pak Dhika, Alhamdulillah saya ngerti banget sama materi ini, hehehe tapi ada mau nanya satu, Pak. Untuk penggunaan function, penulisannya bisa seperti ini, kan, Pak? p2.addEventListener('click', function() { p2.style.backgroundColor = 'lightblue'; p2.style.color = 'red'; }); atau baiknya dipisah satu-satu saja? p2.addEventListener('click', function() { p2.style.backgroundColor = 'lightblue'; }); p2.addEventListener('click', function() { p2.style.color = 'red'; }); Terima kasih, Pak!
Pak mau bertanya, jika js addEventListener kita tidak jalan dan di console ada notif 'cannot read property addEventListener', solusinya bagaimana? Terimakasih.
Sebenernya agak jauh dari tema Web programing UNPAS Pak. Seandainya bisa membuat Tutorial Instal ulang laptop pak, hehe kalau boleh, Pak. Soalnya ada juga tutorial instal ulang Laptop di yang lain, itu videonya kurang lengkap, jadi masih ragu untuk di instalasi ulang, takut macet di logo doang. Siapa tahu, Bapak berkenan berbagi ilmunya, atau merekomendasikan Tutorial instalasi ulang yang mudah di mengerti. hehe Terimkasih pak
Semisal kita mau mengambil nilai variabel PHP untuk dikelola didalam Javascript apa bisa Pak? Jadi saya punya variabel $a yang isinya adalah: $a=$_GET['xxx']; Dan saya sudah punya 1 textfield atau 1 label. Yang saya inginkan, ketika saya hover mousenya diatas label atau textfield saya maka otomatis textfield saya langsung terisi nilai dari $a. Trimakasih.
izin bertanya pak dika, const p4 = document.querySelector("section#b p"); const ul = document.querySelector("section#b ul"); const itemBaru = document.createElement("li"); const textItemBaru = document.createTextNode("item baru"); itemBaru.appendChild(textItemBaru); p4.addEventListener("click", function () { p4.classList.toggle("biru-muda"); ul.appendChild(itemBaru); }); ini variable2nya saya keluarin dari functionnya, kok jadinya saat diklik, itemnya cuma nambah sekali aja ya? di klik lagi gak mau, nambahlagi, kenapa ya?
tabelnya saja di seleksi pakai DOM selection.. lalu, kasih event click.. pindah halamannya pakai script ini : document.location.href = 'alamatweblain.html'
Pak saya mau nanya mengenai materi event ini, kalo semisal kita buat event untk menambah element seperti paragraf baru seandainya kita klik hingga 5x paragraf pun akan muncul sebanyak 5x tp seandainya kita refresh maka paragraf tsb akan hilang. gmn caranya agar ketika direfresh paragraf tsb tidak akan hilang alias stay trhdp tag parentnya tsb. trmksh pak, mohon minta pencerahannya :)
ohh bgtu yaa.. berarti untuk membuat datanya permanen kita harus menggunakan teknologi php juga dgn databasenya?atau bahasa server side lainnya?istilahnya mengcombine bahasa javascript dgn serverside contoh : php..
tolong beri tau lebih spesifik errornya gimana. tapi bisa di coba nih source code js dari saya yang work, siapa tau bisa dijadikan referensi.. // algorithm : ketika 'Add to Wishlist' di klik, maka akan bertambah 1 list. const testEventListener = document.querySelector('section#b p'); testEventListener.innerHTML = 'Add to Wishlist'; testEventListener.addEventListener('click', function () { const vinListener = document.createElement('li'); const valListener = document.createTextNode('New item added to wishlist'); vinListener.appendChild(valListener); const whereListener = document.querySelector('section#b ul'); whereListener.appendChild(vinListener); });
Pak kenapa harus membuat anonymous function lagi dimenit 20:20 . Padahal kalo p3.style.color nya ditaruh didalam satu function dengan p3.style.backgroundColor itu bisa dijalankan ke-duanya tanpa harus ada yang kena timpa.
karna akan sangat berguna jika menjalankan event yang sedikit kompleks. saya beri contoh source code algoritma sederhana wishlist olshop nih.. ==HTML== Dom Events * { border: 2px solid #dedede; padding: 15px; margin: 15px; } html { margin: 0; padding: 0; } body { max-width: 600px; margin: 30px auto; font-family: sans-serif; color: #333; } #judul { color: red; } li:nth-child(2) { background-color: cornflowerblue; } .p3:active { background-color: yellow; } paragraf 4 item 1 item 2 item 3
==JAVASCRIPT== // algorithm : ketika "Add to Wishlist" di klik, maka akan bertambah 1 item wishlist. const testEventListener = document.querySelector('section#b p'); testEventListener.innerHTML = 'Add to Wishlist'; testEventListener.addEventListener('click', function () { // butuh 2 parameter : event yang didengar, tindakan yang dilakukan const vinListener = document.createElement('li'); const valListener = document.createTextNode('New item added to wishlist'); vinListener.appendChild(valListener); const whereListener = document.querySelector('section#b ul'); whereListener.appendChild(vinListener); }); sangat menyusahkan jika membuat program tersebut tanpa function. semoga membantu :)
pelan>terstruktur> jelas> faham
Aku coba kreasi sedikit dan berhasil waduh seneng banget terimakasih pak
addEventListener 12:54
Perbedaan EventHandler vs addEventListener 17:42
Event List 21:11
keyword:
- event handler:
a. inline html attribute (tidak disarankan)
b. element method
- addEventListener
- perbedaanya event handler akan menimpa event listener tidak menimpa
08:20 Event Handler dalam HTML
09:54 Event Handler dengan method
12:10 addEventListener
17:42 Perbedaan EventHandler vs addEventListener
21:11 Event List
penjelasan yg sangat clear
mantap cespleng terima kasih sebanyak-banyaknya saya ucapkan
terimakasih banyak pak, very helpful
Keren, terima kasih pak ilmunya
Sangat membantu & bermanfaat sekali,....... terus berkarya pak ,,
keren sekali, sangat membantu......
Telah datang yang kunanti. Terimakasih Mas Dhika..
Keren saya jadi faham javascrpit dan makin semangat belajarnya makasih pak dhika 😅
masih dijalur webdev mas?
kita juga bisa kan tambahin 2 style sekaligus dalam satu func..
contohnya..
const p4 = document.querySelector('section#b p');
p4.addEventListener('click', function() {
p4.style.backgroundColor = 'navy';
p4.style.color = 'white';
});
jadi ketika di klik bgColor jadi navy dan text berubah jadi putih.. tapi dalam satu func dan mungkin bisa menghemat coding.
CMIIW...
nah benar sepemikiran.. up
sip gan
tapi ini contohin menimpa fungsi on click / addeventlistener gk sih?
Hadir,,, Mantap.... sehat and suksess selalu
suka banget dg cara penyampaiannya. Kalem dan detail sedetailnya. Sukses gan.
Bermanfaat banget videonya, Pak. Terima kasih!
Mantappp pak, syukron ilmunya
Terima kasih pak dika
ThankYou Pak Dhika :)
alhamdulillah, hatur nuhun pak :)
Pas banget saya lagi nyari materi ini ....
Terima Kasih Ilmunya Mahal banget Pak
Pak Dika tolong bikin pembahasan HISTORY API (pushstate, replacestate, dsb) + dikombinasi sama AJAX.. 😀
keren pak
terima kasih....
Makasih pak dika❤❤❤❤❤❤❤❤
Awwww keren bangettttt
Terima kasih pak
thanks pak dosen online ku
mantap pak. hatur nuhuuuuuunnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn :)
sangat bermanfaat, terima kasih pak :)
mantap
Pak,, tolong bikin tutorial tentang window.onload.
keren
mantab pak dika
// keren abis!
Kang, jelasin setter dan getter dong
Nuhun videonya bang dika
Di menit 10:58 diprank sama pak dosen. jadi melek lagi mata :)
Mantap pak dika
Bang mau tanya, utk addEventListener itu argumen keduanya harus function ???
hadir.
Nice
semakin menemukan titik terang..heheheee
Pak dika .Cara Gunain Events Focus Buat Form Input . Mohon bantuanya .
erlangga hadir
Mantap pak... selalu di tunggu-tunggu video nya pak :D
makin ngerti pak dika hehehe...
kereeeeen B)
Hadir
izin bertanya pak, apakah pada saat diberikan "mouseenter" bisa di sertai "transition"?
Pak, perbedaan hover dengan mouseleave dan mouseenter apa? Mana yang lebih bagus performance nya pak
baca di dokumentasi nya aja bre, lebih lengkap
Request Pak, Drag & drop element vanilla javascript
Kenapa di function nya nda pake return pak yang buat nambah item li saat di clicj
bisa buat video tentang node js?
Machine learning dong pak
janganLupaTitikKoma;
#mantul
Klw d terapkan untuk isi yang didalam Li pak gmana
11:58 --> kenapa pemanggilan function di antara "inline HTML attribute" dan "element method", yang satu bisa pakai "( )" yang satu harus di hilangkan penggunaan "( )" nya ???
Padahal sama² pakai event onclick bukan!? aktif begitu di klik!!
Terimakasih...
kalo inline kita memanggil function yang ada di file jsnya jadi perlu pakai (), kalo method ngga, karena mungkin, event handlernya udah ada di file yang sama dengan functionnya
I wish i were here 3 years ago
pertamax
video vlog nya blom jalan pk Dhika,,
Mungkin kalo pakenya function yang bukan kosong gimana ya pak?
kakk aku taunya mouseover dan mouseout, apakah sama dengan mouseenter dan mouseleave?
Pak Dhika. Semoga sehat selalu. Saya mau buat form input autocomplete. Tetapi sumber datanya dari database. Contoh sumber datanya di javascript :
var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
Saya ingin sumber data diatas berasal dari database mysql. Minta SOLUSI pak Dhika.
pak dika gimana ya menggabungkan event keyup format angka ke rupiah dan penjumlahan otomatis di dalam sebuah form? udah coba cara ke duanya dari event handler tapi belum juga cocok logikanya. :(
Pak sandhika, mw tanya. Untuk menghapus element li tertentu diklik pake for loop gak bisa, tapi saat for loop memunculkan alert pada li tertentu bisa. Tolong solusinya pak. Terima kasih
Pak pas saya ikutin yang menit 15 itu ko di console bilang nya 'canot read property addEventListener off null'
Ko gitu pak ?
Kenapa pas habus nge bind
const p3 = document.querySelector('.p3');
p3 nya gak bisa dikasih style ya ???
liat codenya
@@Mikeul2GT class bang
Pak,saat saya lihat modal bootstrap pada website modern saat ini ketika di infect element tidak terlihat element tentang modal,tapi pada saat modal diaktifkan barulah muncul element untuk modal itu.maaf pak,ini metode nya gimana ya pak?
Halo, Pak Dhika, Alhamdulillah saya ngerti banget sama materi ini, hehehe
tapi ada mau nanya satu, Pak. Untuk penggunaan function, penulisannya bisa seperti ini, kan, Pak?
p2.addEventListener('click', function() {
p2.style.backgroundColor = 'lightblue';
p2.style.color = 'red';
});
atau baiknya dipisah satu-satu saja?
p2.addEventListener('click', function() {
p2.style.backgroundColor = 'lightblue';
});
p2.addEventListener('click', function() {
p2.style.color = 'red';
});
Terima kasih, Pak!
Disambung saja mas untuk meringkas memory dan juga baris kode
jadikan 1 aja dalam sebuah function, mungkin bisa juga dikreasikan dengan dimasukkan kedalam 2 parameter untuk backgroundColor dan color.
Pak gimana caranya contohnya di dalam section a, ketika kita klik dia akan merubah background color nya
gini kan
const sectionA = document.getElementById("a");
sectionA.addEventListener("click", function () {
sectionA.style.backgroundColor = "#333";
sectionA.style.color = "#fff";
});
Pak mau bertanya, jika js addEventListener kita tidak jalan dan di console ada notif 'cannot read property addEventListener', solusinya bagaimana?
Terimakasih.
Nah sama bro
dah nemu jabawan belum bang? baru belajar ni wkwk@@S666VR
Pak, boleh request video tutorial 😀
video apa dik? :)
Sebenernya agak jauh dari tema Web programing UNPAS Pak. Seandainya bisa membuat Tutorial Instal ulang laptop pak, hehe kalau boleh, Pak. Soalnya ada juga tutorial instal ulang Laptop di yang lain, itu videonya kurang lengkap, jadi masih ragu untuk di instalasi ulang, takut macet di logo doang. Siapa tahu, Bapak berkenan berbagi ilmunya, atau merekomendasikan Tutorial instalasi ulang yang mudah di mengerti. hehe
Terimkasih pak
Kapan ngebahs ttg JAVA ?
Ke kelas terbuka aja Bang
Node.js pak
Anonymus function, callback function, closure. Masih bingung dgn konsep ini
anonymous function() adalah function yang dijalankan tanpa menggunakan nama maupun parameter sebagai identitas function tersebut
Semisal kita mau mengambil nilai variabel PHP untuk dikelola didalam Javascript apa bisa Pak?
Jadi saya punya variabel $a yang isinya adalah:
$a=$_GET['xxx'];
Dan saya sudah punya 1 textfield atau 1 label.
Yang saya inginkan, ketika saya hover mousenya diatas label atau textfield saya maka otomatis textfield saya langsung terisi nilai dari $a. Trimakasih.
Sekolah Komputer
kalo saya,
di htmlnya dikasih attribut baru, namanya data. nnti var phpnya d taruh d situ.
izin bertanya pak dika,
const p4 = document.querySelector("section#b p");
const ul = document.querySelector("section#b ul");
const itemBaru = document.createElement("li");
const textItemBaru = document.createTextNode("item baru");
itemBaru.appendChild(textItemBaru);
p4.addEventListener("click", function () {
p4.classList.toggle("biru-muda");
ul.appendChild(itemBaru);
});
ini variable2nya saya keluarin dari functionnya, kok jadinya saat diklik, itemnya cuma nambah sekali aja ya? di klik lagi gak mau, nambahlagi, kenapa ya?
yg createElement sama createTextNode jgn dikeluarin. Kan itu yang nambahin elemen barunya
Tutorial Framework dong mas :(
pak gak buatt tutorial jquery ?
untuk saat ini belum Josh, masih fokus di javascript dasarnya dulu.. :)
Functionya tidak di return ya??
iya karena tidak memiliki sebuah nilai, sedangkan return digunakan untuk mengembalikan sebuah nilai
halo pak Sandhika, apakah bisa event di halaman HTML A merubah struktur di halaman HTML B? terima kasih..
bisa bang tapi harus ditangkap dulu elementnya
Om caranya klo saya punya dua project biar kita pncet projectnya itu buka tab baru lg . Itu gmna om? Makasih
sisipkan atribut target="blank" di elemen yang dijadikan link.
Pak, jika object tabel. Salah satu field record, misalnya record ke 5 diklik, langsung pindah halaman yg lain bagaimana...?
tabelnya saja di seleksi pakai DOM selection.. lalu, kasih event click.. pindah halamannya pakai script ini :
document.location.href = 'alamatweblain.html'
Jangan lupa TITIK KOMA; 😁
11:20 kenapa ketika p3 di click,justru p2 yang berupah??
ada yg tahu?
lihat menit 9:00
Pak tanya minimal spesifikasi laptop buat programing seperti apa?
core i3 gan
Terimakasih infonya 🙏
Pak lanjut react js pak
React JS belajar yg bagus dimana gan
@@fadlyyfadlyy8754 channel nya prawito hudoro bang
@@informationunfaedah7071 Itu buat fundamental nya, kalo selesai itu belajar reactnya kemana lagi mas
@@fadlyyfadlyy8754 bikin project aja
@@informationunfaedah7071 Oke gan makasih banyak :)
itu kenapa pas queryselector(.p3) kok pake titik sebelum p3 ya pak?
Karena memanggil class
tanda titik melambangkan bahwa p3 itu adalah sebuah class yang ingin dijadikan selector
Makasih gan pencerahannya
Pak saya mau nanya mengenai materi event ini, kalo semisal kita buat event untk menambah element seperti paragraf baru seandainya kita klik hingga 5x paragraf pun akan muncul sebanyak 5x tp seandainya kita refresh maka paragraf tsb akan hilang. gmn caranya agar ketika direfresh paragraf tsb tidak akan hilang alias stay trhdp tag parentnya tsb. trmksh pak, mohon minta pencerahannya :)
lebih tepatnya agar tag paragrafnya permanen jdi ketika diklik dan direfresh tidak akan hilang kembali seperti semula..
harus digabung dengan database supaya datanya permanen
ohh bgtu yaa.. berarti untuk membuat datanya permanen kita harus menggunakan teknologi php juga dgn databasenya?atau bahasa server side lainnya?istilahnya mengcombine bahasa javascript dgn serverside contoh : php..
menit ke 17:15 sudah ku coba, ku ikuti dan ku ketik ulang tapi kenapa ngga muncul item baru di section b nya ya?? Huhu :(
coba di cek2 node rootnya mas...sy aja gitu :v
@@dxxta node root itu yang mana sih bro ?
@@S666VR node root itu node yang paling tertinggi dalam pohon hierarki DOM. coba liat di vidio2 awal tentang DOM.
tolong beri tau lebih spesifik errornya gimana. tapi bisa di coba nih source code js dari saya yang work, siapa tau bisa dijadikan referensi..
// algorithm : ketika 'Add to Wishlist' di klik, maka akan bertambah 1 list.
const testEventListener = document.querySelector('section#b p');
testEventListener.innerHTML = 'Add to Wishlist';
testEventListener.addEventListener('click', function () {
const vinListener = document.createElement('li');
const valListener = document.createTextNode('New item added to wishlist');
vinListener.appendChild(valListener);
const whereListener = document.querySelector('section#b ul');
whereListener.appendChild(vinListener);
});
DOM Traversal tuh yg kaya gimana pak Dhika :/ ?
nanti akan ada videonya san, sabar yaa.. :)
siap pak . kirain kelewat hehe :D
pak kenapa saya nggak bisa ya pas di onclick, nggak jalan
wah sama kita bro, pas gk dimasukin function bisa berubah kan wkwkwk
Pak kenapa harus membuat anonymous function lagi dimenit 20:20 . Padahal kalo p3.style.color nya ditaruh didalam satu function dengan p3.style.backgroundColor itu bisa dijalankan ke-duanya tanpa harus ada yang kena timpa.
kenapa harus mengunakan function ada yg tau??
karna akan sangat berguna jika menjalankan event yang sedikit kompleks. saya beri contoh source code algoritma sederhana wishlist olshop nih..
==HTML==
Dom Events
* {
border: 2px solid #dedede;
padding: 15px;
margin: 15px;
}
html {
margin: 0;
padding: 0;
}
body {
max-width: 600px;
margin: 30px auto;
font-family: sans-serif;
color: #333;
}
#judul {
color: red;
}
li:nth-child(2) {
background-color: cornflowerblue;
}
.p3:active {
background-color: yellow;
}
paragraf 4
item 1
item 2
item 3
==JAVASCRIPT==
// algorithm : ketika "Add to Wishlist" di klik, maka akan bertambah 1 item wishlist.
const testEventListener = document.querySelector('section#b p');
testEventListener.innerHTML = 'Add to Wishlist';
testEventListener.addEventListener('click', function () { // butuh 2 parameter : event yang didengar, tindakan yang dilakukan
const vinListener = document.createElement('li');
const valListener = document.createTextNode('New item added to wishlist');
vinListener.appendChild(valListener);
const whereListener = document.querySelector('section#b ul');
whereListener.appendChild(vinListener);
});
sangat menyusahkan jika membuat program tersebut tanpa function. semoga membantu :)
pak izin nanya giman cara gunain onchange di .addeventlistener yah pak?
onchange dipakai jika value dari object/element html dapat kita manipulsi, misalnya checkbox, dropdown, color picker dll
const sectionB = document.getElementById("b");
const p4 = sectionB.getElementsByTagName("p")[0];
const ul = sectionB.getElementsByTagName("ul")[0];
p4.addEventListener("click" , function () {
const liPanjang = ul.getElementsByTagName("li").length;
const li = document.createElement("li");
const liBaru = document.createTextNode("item " + (liPanjang + 1));
li.appendChild(liBaru);
ul.appendChild(li);
});
ini punya saya pak
Terima kasih guru
hadir