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
keyword: - event handler: a. inline html attribute (tidak disarankan) b. element method - addEventListener - perbedaanya event handler akan menimpa event listener tidak menimpa
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 mau bertanya, jika js addEventListener kita tidak jalan dan di console ada notif 'cannot read property addEventListener', solusinya bagaimana? Terimakasih.
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.
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!
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.
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 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 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.
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'
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
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..
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
addEventListener 12:54
Perbedaan EventHandler vs addEventListener 17:42
Event List 21:11
Ga sia sia ngikutin dari Intro Javascript, akhirnya sampe ke Materi ini dan mulai berasa serunya 😄 Terima Kasih Pak Dhika
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
Aku coba kreasi sedikit dan berhasil waduh seneng banget terimakasih pak
keyword:
- event handler:
a. inline html attribute (tidak disarankan)
b. element method
- addEventListener
- perbedaanya event handler akan menimpa event listener tidak menimpa
Telah datang yang kunanti. Terimakasih Mas Dhika..
penjelasan yg sangat clear
terimakasih banyak pak, very helpful
ThankYou Pak Dhika :)
Keren saya jadi faham javascrpit dan makin semangat belajarnya makasih pak dhika 😅
masih dijalur webdev mas?
Keren, terima kasih pak ilmunya
mantap cespleng terima kasih sebanyak-banyaknya saya ucapkan
Sangat membantu & bermanfaat sekali,....... terus berkarya pak ,,
Mantappp pak, syukron ilmunya
Awwww keren bangettttt
mantap pak. hatur nuhuuuuuunnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn :)
Pas banget saya lagi nyari materi ini ....
suka banget dg cara penyampaiannya. Kalem dan detail sedetailnya. Sukses gan.
Bermanfaat banget videonya, Pak. Terima kasih!
Makasih pak dika❤❤❤❤❤❤❤❤
keren sekali, sangat membantu......
Terima Kasih Ilmunya Mahal banget Pak
thanks pak dosen online ku
Hadir,,, Mantap.... sehat and suksess selalu
alhamdulillah, hatur nuhun pak :)
sangat bermanfaat, terima kasih pak :)
Terima kasih pak dika
keren pak
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?
// keren abis!
Mantap pak... selalu di tunggu-tunggu video nya pak :D
mantab pak dika
kereeeeen B)
Pak Dika tolong bikin pembahasan HISTORY API (pushstate, replacestate, dsb) + dikombinasi sama AJAX.. 😀
terima kasih....
Terima kasih pak
Di menit 10:58 diprank sama pak dosen. jadi melek lagi mata :)
makin ngerti pak dika hehehe...
mantap
Mantap pak dika
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
keren
izin bertanya pak, apakah pada saat diberikan "mouseenter" bisa di sertai "transition"?
Nice
Bang mau tanya, utk addEventListener itu argumen keduanya harus function ???
Pak,, tolong bikin tutorial tentang window.onload.
semakin menemukan titik terang..heheheee
Pak, perbedaan hover dengan mouseleave dan mouseenter apa? Mana yang lebih bagus performance nya pak
baca di dokumentasi nya aja bre, lebih lengkap
Kenapa di function nya nda pake return pak yang buat nambah item li saat di clicj
Pak dika .Cara Gunain Events Focus Buat Form Input . Mohon bantuanya .
janganLupaTitikKoma;
#mantul
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 pas saya ikutin yang menit 15 itu ko di console bilang nya 'canot read property addEventListener off null'
Ko gitu pak ?
hadir.
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.
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?
Kang, jelasin setter dan getter dong
Hadir
Nuhun videonya bang dika
erlangga hadir
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.
Request Pak, Drag & drop element vanilla javascript
kakk aku taunya mouseover dan mouseout, apakah sama dengan mouseenter dan mouseleave?
pertamax
Kenapa pas habus nge bind
const p3 = document.querySelector('.p3');
p3 nya gak bisa dikasih style ya ???
liat codenya
@@Mikeul2GT class bang
video vlog nya blom jalan pk Dhika,,
Klw d terapkan untuk isi yang didalam Li pak gmana
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.
bisa buat video tentang node js?
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);
});
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 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";
});
Machine learning dong pak
11:20 kenapa ketika p3 di click,justru p2 yang berupah??
ada yg tahu?
lihat menit 9:00
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.
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
Mungkin kalo pakenya function yang bukan kosong gimana ya pak?
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
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; 😁
Kapan ngebahs ttg JAVA ?
Ke kelas terbuka aja Bang
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
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
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 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..
Pak tanya minimal spesifikasi laptop buat programing seperti apa?
core i3 gan
Terimakasih infonya 🙏
I wish i were here 3 years ago
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
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
pak kenapa saya nggak bisa ya pas di onclick, nggak jalan
wah sama kita bro, pas gk dimasukin function bisa berubah kan wkwkwk
DOM Traversal tuh yg kaya gimana pak Dhika :/ ?
nanti akan ada videonya san, sabar yaa.. :)
siap pak . kirain kelewat hehe :D
Tutorial Framework dong mas :(
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 :)
Node.js pak
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