Ini mungkin salah satu alternatif cara yg lebih efektif pak: const range = document.querySelectorAll('input'); for (let i = 0; i < range.length; i++) { range[i].addEventListener('input', function () { const r = range[0].value; const g = range[1].value; const b = range[2].value; document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`; }); }
11:58 kasus 2 | bikin warna random 20:39 concatenasi bisa pake backtik(`) jadi nanti tulisannya ga perlu ('string' + 'misalIniVariable') nantinya bakal jadi `string ${misalIniVariable}` 22:15 kasus 3 | bikin slider 34:29 kasus 4 | cursor bergerak
33:46 Mungkin ini yang lebih efektif ya pak? const SWarna = document.getElementsByClassName("sWarna"); //tangkap semua slider, sebelumnya dikasih class sWarna untuk semua slider //cek event value masing-masing slider dengan loop for (let i = 0; i < SWarna.length; i++) { SWarna[i].addEventListener("input", function () { const r = SWarna[0].value; //menangkap value r const g = SWarna[1].value; //menangkap value g const b = SWarna[2].value; //menangkap value b document.body.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")"; // console.log(r, g, b); //cek console rgb }); }
mantap pak pembelajrannya. Baru belajar di 2021 agak telat mungkin komennya, menurut saya mungkin yang efektif di htmlnya di tambahin: div id="nama id bebas" di sebelum membuat rangenya supaya di javascriptnya tidak perlu membuat 3 document.addEventListener seperti itu. mungkin itu menurut saya kalo ada salah mungkin bisa dikoreksi atau ditambahkan. Mantap pak teruskan pembelajarannya! sukses selalu pak
@Rafki Desramadhan yg div kan ada 2 class: yg kotak ngasi lebar dan tinggi persegi disetiap rgb, kalo merah,hijau, biru warna yg diatas slidernya. CMIIW.
ketemu nih pak cara yg menurut saya efektif,.. sebelum sintaks : sMerah.addEventListener('input', function(){} kita beri nilai nol dulu pada masing-masing value nya const r = sMerah.value=0; const g = sHijau.value=0; const b = sBiru.value=0; soalnya klo nggak kita kasih nilai nol, kita console dia mulai dari 128 nilai nya
33:42, code js saya yang efektiif let range = document.getElementsByTagName("input")[0]; range.addEventListener("input", function () { semuaRGB(); }); let range1 = document.getElementsByTagName("input")[1]; range1.addEventListener("input", function () { semuaRGB(); }); let range2 = document.getElementsByTagName("input")[2]; console.log(range2); range2.addEventListener("input", function () { semuaRGB(); }); let semuaRGB = function () { let gerak = range.value; let gerak2 = range1.value; let gerak3 = range2.value; document.body.style.backgroundColor = "rgb(" + gerak + "," + gerak2 + "," + gerak3 + ")"; };
Seru banget pak,walaupun masih sering error karna kecerobohan saya menggunakan variable yang cepet saya lupa,dan lupa menggunakan huruf kapital jika ada 2 kata
bagi temen temen yang eror pada saat mengikuti ka Sandhika ada kata 'biru-muda' dibuatkan dlu pada style deket title dibawah .body { }dengan .biru-muda { backgroundColor : 'lightblue' }; dan kalau keyword after kalian gabisa pakai ini tombolUbahWarna.insertAdjacentElement('afterend', tombolAcakWarna);
Keren abiss wkwk mantap pak dhika bisa dilanjutkan dengan ide-ide luar biasa lainnya ya buat video2 selanjutnya hehe, tetap semangat pak! btw ini channel kesayangan banget parah👍👍
let tombol = document.getElementById('tombol'); let i = 0; let j = 0; let k = 0; let warna = ['blue','red','green','yellow','black','white']; tombol.addEventListener('click',function(){ document.body.classList.toggle('biru-muda'); }) let rTombol = document.createElement('button'); let teksTombol = document.createTextNode('Acak Warna'); rTombol.appendChild(teksTombol); rTombol.setAttribute('type','button'); rTombol.setAttribute('id','acak'); rTombol.style.marginLeft = '5px'; tombol.after(rTombol); let br = document.createElement('br'); rTombol.after(br); rTombol.after(br); let sRed = document.querySelector('input[name=red'); let sBlue = document.querySelector('input[name=blue'); let sGreen = document.querySelector('input[name=green'); i = sRed.value; j = sGreen.value; k = sBlue.value; document.body.style.backgroundColor = 'rgb('+i+','+j+','+k+')' ; sRed.addEventListener('input',function(){
i = sRed.value; document.body.style.backgroundColor = 'rgb('+i+','+j+','+k+')' ; }); sGreen.addEventListener('input',function(){
mantap.. tambah bagus mas video pembelajarannya, mudah dimengerti dan dipelajari. sudah agak paham javascript sekarang mas. update trus video pembelajarannya karna apa yang anda lakukan sangat mempermudah dalam belajar. 1. ada video studi kasus perancangan database gak buat web dengan php? Lanjut trus. ditunggu videonya. terima kasih.
ya allah baru ngeuh ini yang komen 4 5 6 tahun yang lalu😅, berkah selalu ilmu nya pak galih, saya mhsiswa semester 1 yng sedang beljr javaScript di tahun 2024
nice tutorial Mas Dhika, sangat interaktif.. oiya mas Dhika saya sedang menunggu animasi dengan elemen canvas nya lho hehe.. nuhun dan sehat selalu Mas..
Mungkin cara terbaik untuk menghilangkan bug terakhir menurut saya adalah pada saat mau menggunakan eventListenernya, ruang lingkupnya diubah yang tadinya document.body.- menjadi document.- saja.
-1:49 (waktu mundur) Pertanyaan : selector body & html. jika body di beri height 100% berarti dia penuh pada parent nya, yaitu tag html. saya lihat pak sandhika memberi tag html dengan height 100% juga, artinya tag html tidak penuh pada DOM document! apa benar begitu pak? #ask #selector
Saya mau tambahin pak, jadi jika user meng-inputkan warna dari input yang bertipe "color", maka background akan berubah sesuai yang kita input-kan tadi: **HTML** **JavaScript** const colorPickerBG = document.querySelector('input[type=color]'); colorPickerBG.addEventListener('change', function() { const rgb = colorPickerBG.value; document.body.style.backgroundColor = rgb; }
Pak Dika maaf saya belum mengerti untuk di menit 20:40, kenapa kita harus menambahkan + ya pak, apakah tidak bisa 'r' saja? Apakah dengan + kita merubah r menjadi integer ?
Pak dika, saya ada pertanyaan. Bukannya pembuatan variabel menggunakan const isinya tidak bisa dirubah ? Tapi kenapa const r untuk pergerakan mouse selalu terubah pak ? Terimakasih
untuk yang terakhir kayanya lebih simple gini const range = document.querySelectorAll('input[type="range"]'); range.forEach( e => { e.addEventListener("input", ()=> { document.body.style.backgroundColor = `rgb(${range[0].value},${range[1].value},${range[2].value})` }) })
Keren, Pak! Saya udah coba, tp untuk yg terakhir, walau html & body udah disett hight ke 100%,kenapa ya bagian atas H1 tetep ngga menggenerate random color ketika mouse-nya digerakkan, Pak..
Maksud dari angka 1 di situ adalah sebagai angka minimal yang dihasilkan dari angka random. Jadi, angka random yang dihasilkan tidak bisa kurang dari 1.
@@nizam6196 nah Math.Random itu hanya mengeluarkan angka acak antara angka 0 dan angka 1. Contoh hasil Math.random() yaitu 0.0031184543733711045. Jika angka itu kita kali angka 255, maka hasilnya adalah 0.7952058652096317. Rgb kan hanya mendukung format angka dari angka 0 sampai angka 255. Oleh karena itu kita menggunakan Math.floor() untuk membulatkan angka ke bawah ataupun Math.ceil() untuk membulatkan angka ke atas. Kalau kita pakai Math.floor() pada hasil ini, otomatis nilainya menjadi 0. Oleh karena itu, Pak Dhika menggunakan + 1. Jadi, yang tadi nilai Math.Random() itu 0.0031184543733711045 jika ditambah 1 menjadi 1.0031184543733711045. Sehingga akan menghasilkan angka 1 jika kita menggunakan Math.Floor(). Dari code ini, maka kita tidak akan pernah mendapat angka 0 untuk rgb. Selain itu, mungkin ada pertanyaan dari kalian yaitu "kok Pak Dhika bikin minimalnya angka 1 untuk rgb? Emgnya angka 0 itu tidak bisa dipakai untuk format rgb?". Jawaban : Rgb itu mendukung format angka dari 0-255. Jadi, boleh saja kita menggunakan angka 0. Rgb itu Red Green Blue. Jika kita menggunakan format rgb (255,0,0). Otomatis itu akan menjadi warna merah normal. Format rgb (0,255,0) akan menghasilkan warna hijau normal. Sedangkan, Format rgb (0,0,255) akan menghasilkan warna biru normal. Jadi, saya rasa alasan Pak Dhika itu menggunakan angka 1 sebagai angka minimal yang dihasilkan adalah agar warna rgb yang dihasilkan itu juga bervariasi / tidak polos. Contohnya yang harusnya (255,0,0) / merah normal menjadi (255,1,0) yaitu merah ada campuran sedikit warna biru.
@@jekigates8039 berarti yg sebelumnya 0.003118...45 ditambah 1 menjadi 1.003118..45 Berarti kalo gacha angka random lagi yg beda cuman angka setelah koma nya dong? Angka awalnya akan tetap 1. Lalu gimana bisa dapet angka 2-225?
Sedikit kegabutan saya , oh iya untuk html tinggal komenin input range aj soalnya cuma kepakai satu input range bisa di copy atau buat baru lagi // Ini untuk memuncul angka random const h1 = document.querySelector('h1'); const button = document.querySelector('button'); button.addEventListener('click', function() { const angkaRandom = Math.floor(Math.random() * 10) + 1; h1.innerHTML = angkaRandom; }); //Ini untuk atur volume untuk yang ini kelen tinggal tambahin h3 aj dengan judul Atur Volume dan untuk h4 saya tambahin nya lewat javascript saja dan jika ada yang heran mengapa langsung 50% soalnya saya langsung mengikuti posisi range nya soalnya titik awal rangenya ditengah const slider = document.querySelector('input'); const h3 = document.querySelector('h3'); const h4 = document.createElement('h4'); const teks = document.createTextNode('50%'); h4.append(teks); h3.append(h4); slider.addEventListener('input', function() { const volume = slider.value;
h4.innerHTML = `${volume}%`; }); sekian terimakasih dan selama mencoba ;
Maaf pertanyaan nya melenceng dari konten pak. #namespace #use Saya sedang blajar oop php pak, yg mau saya tanyakan, cara untuk import class dari file lain menggunakan keyword 'use' apa harus file nya di include/require terlebih dahulu ? soalnya ak baca2 tutorial di internet file nya kok gag di include trlebih dahulu. Tapi ak coba import class dari file lain menggunakan 'use' tanpa ak include/require terlebih dahulu gag berhasil. Mohon jawabannya untuk memastikan pak.
iya pak saya pernah baca ttg 16 million color(256*256*256) sama ttg konversi desimal ke Hexa. di implementasikan ke tutorial pa sandhika jadi seru banget hehe !!
Kak Mau tanya begitu saya geser slidernya terus console log itu hasil undefined tidak ada angka, saya coba pakai alert muncul alertnya, kira2 apanya itu ya Kak
Maaf pak dika sedikit koreksi, kalo diawal kita klik btn (Acak Warna) setelah itu klik btn (Ubah Warna) itu btn (Ubah Warna) jd gak fungsi pak, karna ketiban atribut dari btn (Acak Warna), seharusnya pada function dari btn (Ubah Warna) ditambahkan method removeAttribute() pak dika🙏
kenapa ya tombol yang terkait dengan fungsi toggle hanya bisa dilakukan ketika fungsi lainnya belum di gunakan ? misal : ketika saya sudah menggunakan tombol yang berfungsi untuk random warna, lalu kemudian saya menggunakan tombol yang terkait dengan toggle. jadi tidak berfungsi.
Ini mungkin salah satu alternatif cara yg lebih efektif pak:
const range = document.querySelectorAll('input');
for (let i = 0; i < range.length; i++) {
range[i].addEventListener('input', function () {
const r = range[0].value;
const g = range[1].value;
const b = range[2].value;
document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
});
}
11:58 kasus 2 | bikin warna random
20:39 concatenasi bisa pake backtik(`) jadi nanti tulisannya ga perlu ('string' + 'misalIniVariable') nantinya bakal jadi `string ${misalIniVariable}`
22:15 kasus 3 | bikin slider
34:29 kasus 4 | cursor bergerak
33:46 Mungkin ini yang lebih efektif ya pak?
const SWarna = document.getElementsByClassName("sWarna"); //tangkap semua slider, sebelumnya dikasih class sWarna untuk semua slider
//cek event value masing-masing slider dengan loop
for (let i = 0; i < SWarna.length; i++) {
SWarna[i].addEventListener("input", function () {
const r = SWarna[0].value; //menangkap value r
const g = SWarna[1].value; //menangkap value g
const b = SWarna[2].value; //menangkap value b
document.body.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
// console.log(r, g, b); //cek console rgb
});
}
Makin semangat belajar nya karna pak Dika padahal materinya sulit tapi mudah dipahami,makasi pak🙏
Coba semua dosen saya spt bapak, jago semua mhsnya 😅 ,trims ilmunya pak 🙏
33:49
paling efektif sih pake forEach
const range = document.querySelectorAll('input[type="range"]');
const body = document.body;
range.forEach(input => {
input.addEventListener('input', () => {
const color = `rgb(${range[0].value}, ${range[1].value}, ${range[2].value})`;
body.style.backgroundColor = color;
});
});
Cakep nih kode nya mudah di fahami 👍
baru tahu nih pak, ternyata dengan javascript web kita jadi lebih menarik, trus perdalam pak dika materi tentang javascrpt-nya...
mantap pak pembelajrannya. Baru belajar di 2021 agak telat mungkin komennya, menurut saya mungkin yang efektif di htmlnya di tambahin:
div id="nama id bebas"
di sebelum membuat rangenya supaya di javascriptnya tidak perlu membuat 3 document.addEventListener seperti itu.
mungkin itu menurut saya kalo ada salah mungkin bisa dikoreksi atau ditambahkan. Mantap pak teruskan pembelajarannya! sukses selalu pak
@Rafki Desramadhan yg div kan ada 2 class: yg kotak ngasi lebar dan tinggi persegi disetiap rgb, kalo merah,hijau, biru warna yg diatas slidernya. CMIIW.
Tutorial yang niat banget..mantap Pak. Semoga bisa terus continue.
Bermanfaat banget videonya, Pak. Terima kasih!
ketemu nih pak cara yg menurut saya efektif,..
sebelum sintaks : sMerah.addEventListener('input', function(){}
kita beri nilai nol dulu pada masing-masing value nya
const r = sMerah.value=0;
const g = sHijau.value=0;
const b = sBiru.value=0;
soalnya klo nggak kita kasih nilai nol, kita console dia mulai dari 128 nilai nya
bukan harusnya pakai let ya kalau nilainya berubah-ubah
33:42, code js saya yang efektiif
let range = document.getElementsByTagName("input")[0];
range.addEventListener("input", function () {
semuaRGB();
});
let range1 = document.getElementsByTagName("input")[1];
range1.addEventListener("input", function () {
semuaRGB();
});
let range2 = document.getElementsByTagName("input")[2];
console.log(range2);
range2.addEventListener("input", function () {
semuaRGB();
});
let semuaRGB = function () {
let gerak = range.value;
let gerak2 = range1.value;
let gerak3 = range2.value;
document.body.style.backgroundColor =
"rgb(" + gerak + "," + gerak2 + "," + gerak3 + ")";
};
Keren bangat, terima kasih banyak pak ilmunya
pak dika memang luar biasa :D
Mantap Pak Dika :D
Lanjut terus pak. Mudah-mudahan selalu di berikan kesehatan selalu .. aamiin
NH Tutorial amin
alhamdulillah ada lagi. hadir
makasih banyak pak !
sangatt mindblowing
33:45 mungkin yang ini lebih efektif pak
// range
const cMerah = document.querySelector('.merah');
const cGreen = document.querySelector('.green');
const cBlue = document.querySelector('.blue');
let rgb = () => {
const r = cMerah.value;
const g = cGreen.value;
const b = cBlue.value;
let rgbs = (document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`);
return rgbs;
};
cMerah.addEventListener('input', rgb);
cGreen.addEventListener('input', rgb);
cBlue.addEventListener('input', rgb);
work bro. makasih
bisa juga gini, pakai query selector all, terus di foreeach:
const sMerah = document.querySelector('input[name=sMerah]')
const sHijau = document.querySelector('input[name=sHijau]')
const sBiru = document.querySelector('input[name=sBiru]')
const inputWarna = document.querySelectorAll('input[type=range]')
inputWarna.forEach(input => {
input.addEventListener('input', function () {
const r = sMerah.value
const g = sHijau.value
const b = sBiru.value
body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`
})
})
mantap...
terima kasih pak..saya sering mencobanya
Smngt pa Dika, lnjut trus
Saluuutttt dahhhh
mantab Pak.. bisa untuk membuat web mode Dark/Light
Trimakasih bang dika ilmunya keren bangat
Ini ilmu mahal bgt, tapi gratis ❤️
mantaff pak dika, makasih atas ilmunya
Seru banget pak,walaupun masih sering error karna kecerobohan saya menggunakan variable yang cepet saya lupa,dan lupa menggunakan huruf kapital jika ada 2 kata
mantap pak program nya trims
mengganti nilai hijau pada mousemove bisa menggunakan math random
document.body.addEventListener("mousemove", (e) => {
const posX = Math.round((e.clientX / window.innerWidth) * 255);
const posY = Math.round((e.clientY / window.innerWidth) * 255);
const green = Math.round(Math.random() * 255);
document.body.style.backgroundColor = `rgb(${posX}, ${posY}, ${green})`;
});
di tunggu latihan berikutnya pak DIKA OK BGT VIDEONYA
terimaksih pak
hadir... sehat, maju, and sukses selalu bung!!!
bagi temen temen yang eror pada saat mengikuti ka Sandhika ada kata 'biru-muda'
dibuatkan dlu pada style deket title dibawah .body { }dengan .biru-muda { backgroundColor : 'lightblue' };
dan kalau keyword after kalian gabisa pakai ini
tombolUbahWarna.insertAdjacentElement('afterend', tombolAcakWarna);
Keren abiss wkwk mantap pak dhika
bisa dilanjutkan dengan ide-ide luar biasa lainnya ya buat video2 selanjutnya hehe, tetap semangat pak!
btw ini channel kesayangan banget parah👍👍
let tombol = document.getElementById('tombol');
let i = 0;
let j = 0;
let k = 0;
let warna = ['blue','red','green','yellow','black','white'];
tombol.addEventListener('click',function(){
document.body.classList.toggle('biru-muda');
})
let rTombol = document.createElement('button');
let teksTombol = document.createTextNode('Acak Warna');
rTombol.appendChild(teksTombol);
rTombol.setAttribute('type','button');
rTombol.setAttribute('id','acak');
rTombol.style.marginLeft = '5px';
tombol.after(rTombol);
let br = document.createElement('br');
rTombol.after(br);
rTombol.after(br);
let sRed = document.querySelector('input[name=red');
let sBlue = document.querySelector('input[name=blue');
let sGreen = document.querySelector('input[name=green');
i = sRed.value;
j = sGreen.value;
k = sBlue.value;
document.body.style.backgroundColor = 'rgb('+i+','+j+','+k+')' ;
sRed.addEventListener('input',function(){
i = sRed.value;
document.body.style.backgroundColor = 'rgb('+i+','+j+','+k+')' ;
});
sGreen.addEventListener('input',function(){
j = sGreen.value;
document.body.style.backgroundColor = 'rgb('+i+','+j+','+k+')' ;
});
sBlue.addEventListener('input',function(){
k = sBlue.value;
document.body.style.backgroundColor = 'rgb('+i+','+j+','+k+')' ;
});
rTombol.addEventListener('click',function(){
i = Math.floor(Math.random() * 256);
sRed.value = i;
j = Math.floor(Math.random() * 256);
sGreen.value = j;
k = Math.floor(Math.random() * 256);
sBlue.value = k;
document.body.style.backgroundColor = 'rgb('+i+','+j+','+k+')' ;
});
document.addEventListener('mousemove', function(event){
let xPos = Math.floor((event.clientX / window.innerWidth) * 255);
let yPos = Math.floor((event.clientY / window.innerHeight) * 255);
document.body.style.backgroundColor = 'rgb('+xPos+','+yPos+','+k+')' ;
});
33:45 mungkin yang ini lebih efektif pak 🙏
mantap.. tambah bagus mas video pembelajarannya, mudah dimengerti dan dipelajari. sudah agak paham javascript sekarang mas. update trus video pembelajarannya karna apa yang anda lakukan sangat mempermudah dalam belajar.
1. ada video studi kasus perancangan database gak buat web dengan php?
Lanjut trus. ditunggu videonya.
terima kasih.
cek playlist "Belajar PHP Untuk Pemula"
Keren bangettttt, cuma bingung, masih banyak yg belum di ketahui, mulai dari method sama eventsnya
wah keren mungkin ini bisa saya pake untuk menampilkan cek harga sewa dari jarak ke jarak ijin coba :D
terima kasih...
Thank You Pak :)
Dosen Programmer Indonesia 😅. Mantap pak
Makasih pak ilmunya,
@jenkinzsz
0 seconds ago
34:22 "kalo kalian ngerti dom kalian punya kuasa" -pak sandhika😄; epic word of 2023
keren pak
thanks pak
saya langsung ngakak di bagian
"Terutama IE"
wkwkw
23:45
ya allah baru ngeuh ini yang komen 4 5 6 tahun yang lalu😅, berkah selalu ilmu nya pak galih, saya mhsiswa semester 1 yng sedang beljr javaScript di tahun 2024
mantap
Terima kasih pak
nice tutorial Mas Dhika, sangat interaktif.. oiya mas Dhika saya sedang menunggu animasi dengan elemen canvas nya lho hehe.. nuhun dan sehat selalu Mas..
Bikin lampu diskotik kereeen
semoga bertambh ilmunya
Sangat bermanfaat sekaliii 😍 saya harap next time ada tutorial android studio kak hehe.
Mungkin cara terbaik untuk menghilangkan bug terakhir menurut saya adalah pada saat mau menggunakan eventListenernya, ruang lingkupnya diubah yang tadinya document.body.- menjadi document.- saja.
mantaps bang
keren
MUANTAB
mantab pak dika
Ajib pisan pak :D..
kapan kapan livestream dong pak biar bisa tanya jawab langsung hehe :)
mantap
-1:49 (waktu mundur)
Pertanyaan : selector body & html.
jika body di beri height 100% berarti dia penuh pada parent nya, yaitu tag html. saya lihat pak sandhika memberi tag html dengan height 100% juga, artinya tag html tidak penuh pada DOM document! apa benar begitu pak?
#ask #selector
kerenn..
Mantap pa 👍
Nice
*SEMOGA JADI WEB PROGRAMMER*
mantap pak.
pas buat rgb pake concatination, skrng udah ada template literals wkwkk parah dulu agak ribet juga yaa
Lanjutkan pak
Saya mau tambahin pak, jadi jika user meng-inputkan warna dari input yang bertipe "color", maka background akan berubah sesuai yang kita input-kan tadi:
**HTML**
**JavaScript**
const colorPickerBG = document.querySelector('input[type=color]');
colorPickerBG.addEventListener('change', function() {
const rgb = colorPickerBG.value;
document.body.style.backgroundColor = rgb;
}
Pak Dika maaf saya belum mengerti untuk di menit 20:40, kenapa kita harus menambahkan + ya pak, apakah tidak bisa 'r' saja?
Apakah dengan + kita merubah r menjadi integer ?
izin menjawab ya mas, r kan di dalam variabel jadi jika variabel dimasukkan ke dalam string '' ' maka nilainya string bukan variabel
Dengan contoh
r = 2
' + r + '
' + 2 + '
' 2 '
Pak dika, saya ada pertanyaan. Bukannya pembuatan variabel menggunakan const isinya tidak bisa dirubah ? Tapi kenapa const r untuk pergerakan mouse selalu terubah pak ? Terimakasih
setau saya bisa hanya saja tidak bisa dirubah total, misal const x = [1,2,3] x = [1,2,3,4] itu boleh. Mohon dikoreksi kalo salah
Mantapp pak :)
Kalau kita mau slidernya pindah sendiri sesuai warnanya pas kita tekan tombol warna random pakai apa ya?
Itu ngitungnya gimana pak yang (event.clientx/window.innerWidth) * 255? Hitung"annya gimana
untuk yang terakhir kayanya lebih simple gini
const range = document.querySelectorAll('input[type="range"]');
range.forEach( e => {
e.addEventListener("input", ()=> {
document.body.style.backgroundColor = `rgb(${range[0].value},${range[1].value},${range[2].value})`
})
})
Terima kasih bapak atas ilmunya. Pak izin pak cuman pas saya coba di tombol dengan classList.togglenya kok gk bisa dipake lagi ya pak ? Izin diskusi
Akhirnya saya tahu cara ngegunain Math.random()
Pak Sandhika , NodeJS masuk list pembelajaran kah? kapan?
Mantap pak sering-sering buat latihan pak.salam titik koma;
Efek kegabutan saya
i) 0 < = rgb
Keren, Pak! Saya udah coba, tp untuk yg terakhir, walau html & body udah disett hight ke 100%,kenapa ya bagian atas H1 tetep ngga menggenerate random color ketika mouse-nya digerakkan, Pak..
untuk math randomnya kan antarar 0-1, nah tapi di fungsinya kok x*255+1, kalo begitu saat x=1, hasilnya 256 dan itu diluar dari scope rgb kan?
KASUS 3 - Kode Efektif menurut saya
const sMerah = document.querySelector('input[name=sMerah]');
const sHijau = document.querySelector('input[name=sHijau]');
const sBiru = document.querySelector('input[name=sBiru]');
function updateBackgroundColor() {
const r = sMerah.value;
const g = sHijau.value;
const b = sBiru.value;
document.body.style.backgroundColor = `rgb(${r},${g},${b})`;
}
sMerah.addEventListener('input', updateBackgroundColor);
sHijau.addEventListener('input', updateBackgroundColor);
sBiru.addEventListener('input', updateBackgroundColor);
6:38 Oiya ngembaliin html collection... makannya kok ga berubah berubah dari tadi
const btn = document.getElementById('btn');
const background = document.getElementsByTagName('body')[0];
btn.addEventListener('click', function(){
background.style.backgroundColor = 'orange'
});
maaf telat banyak tahun
tapi ini caraku
const range = document.querySelectorAll('input[type=range]')
range.forEach(() => {
e.addEventListener('input', () => {
body.style.backgroundColor = 'rgb(' + range[0].value + ',' + range[1].value + ',' + range[2].value + ')'
})
})
setAttribute sepanjang saya belajar JS DOM di pl unpas tidak dipelajari bg, boleh bagi link vidio nya bg
Assalamu'alaikum, pak Dika..
Di menit ke 21.37 mengenai "Math.random()*255 + 1"
Mengapa harus ditambah 1 ?
Maksud dari angka 1 di situ adalah sebagai angka minimal yang dihasilkan dari angka random. Jadi, angka random yang dihasilkan tidak bisa kurang dari 1.
@@jekigates8039 : makasih pencerahannya,mas..
@@jekigates8039 lalu gunanya 255 untuk apa? Kalau misal math random nya 2, dikali 255 = 510. Yang berarti lebih dari 255
@@nizam6196 nah Math.Random itu hanya mengeluarkan angka acak antara angka 0 dan angka 1. Contoh hasil Math.random() yaitu 0.0031184543733711045. Jika angka itu kita kali angka 255, maka hasilnya adalah 0.7952058652096317. Rgb kan hanya mendukung format angka dari angka 0 sampai angka 255. Oleh karena itu kita menggunakan Math.floor() untuk membulatkan angka ke bawah ataupun Math.ceil() untuk membulatkan angka ke atas. Kalau kita pakai Math.floor() pada hasil ini, otomatis nilainya menjadi 0. Oleh karena itu, Pak Dhika menggunakan + 1. Jadi, yang tadi nilai Math.Random() itu 0.0031184543733711045 jika ditambah 1 menjadi 1.0031184543733711045. Sehingga akan menghasilkan angka 1 jika kita menggunakan Math.Floor(). Dari code ini, maka kita tidak akan pernah mendapat angka 0 untuk rgb.
Selain itu, mungkin ada pertanyaan dari kalian yaitu "kok Pak Dhika bikin minimalnya angka 1 untuk rgb? Emgnya angka 0 itu tidak bisa dipakai untuk format rgb?".
Jawaban : Rgb itu mendukung format angka dari 0-255. Jadi, boleh saja kita menggunakan angka 0. Rgb itu Red Green Blue. Jika kita menggunakan format rgb (255,0,0). Otomatis itu akan menjadi warna merah normal. Format rgb (0,255,0) akan menghasilkan warna hijau normal. Sedangkan, Format rgb (0,0,255) akan menghasilkan warna biru normal. Jadi, saya rasa alasan Pak Dhika itu menggunakan angka 1 sebagai angka minimal yang dihasilkan adalah agar warna rgb yang dihasilkan itu juga bervariasi / tidak polos. Contohnya yang harusnya (255,0,0) / merah normal menjadi (255,1,0) yaitu merah ada campuran sedikit warna biru.
@@jekigates8039 berarti yg sebelumnya 0.003118...45 ditambah 1 menjadi 1.003118..45
Berarti kalo gacha angka random lagi yg beda cuman angka setelah koma nya dong? Angka awalnya akan tetap 1. Lalu gimana bisa dapet angka 2-225?
menit 20:00 saya bingung kenapa kudu dikurang 1 (-1), pdhl rangenya kan dr 0 sd 255 bkn 0 sd 256.
Sedikit kegabutan saya , oh iya untuk html tinggal komenin input range aj soalnya cuma kepakai satu input range bisa di copy atau buat baru lagi
// Ini untuk memuncul angka random
const h1 = document.querySelector('h1');
const button = document.querySelector('button');
button.addEventListener('click', function() {
const angkaRandom = Math.floor(Math.random() * 10) + 1;
h1.innerHTML = angkaRandom;
});
//Ini untuk atur volume
untuk yang ini kelen tinggal tambahin h3 aj dengan judul Atur Volume dan untuk h4 saya tambahin nya lewat javascript saja dan jika ada yang heran mengapa langsung 50% soalnya saya langsung mengikuti posisi range nya soalnya titik awal rangenya ditengah
const slider = document.querySelector('input');
const h3 = document.querySelector('h3');
const h4 = document.createElement('h4');
const teks = document.createTextNode('50%');
h4.append(teks);
h3.append(h4);
slider.addEventListener('input', function() {
const volume = slider.value;
h4.innerHTML = `${volume}%`;
});
sekian terimakasih dan selama mencoba ;
Saya pusing tetapi saya tidak menyerah karena saya sudah memutuskan untuk ke web development sebelum ke yg lain lain karena it luas
Daripada di edit di css, mungkin di document.body.addEventListener bisa diganti jadi document.addEventListener pak.
30:40 mending pake function declaration Kan?
Maaf pertanyaan nya melenceng dari konten pak.
#namespace
#use
Saya sedang blajar oop php pak, yg mau saya tanyakan, cara untuk import class dari file lain menggunakan keyword 'use' apa harus file nya di include/require terlebih dahulu ? soalnya ak baca2 tutorial di internet file nya kok gag di include trlebih dahulu. Tapi ak coba import class dari file lain menggunakan 'use' tanpa ak include/require terlebih dahulu gag berhasil. Mohon jawabannya untuk memastikan pak.
33:42 . saya ketemu pak :D , cara yang mungkin lebih efektif pastebin.com/LbfCc2UE
Bener, pake section
iya lebih simple mantap
mau nanya pak, kan itu yg di beri eventListener section nya, cara dapetin nilai range nya itu gimana pak ? masih bingung saya
@@denandaprayoga5269 kaya nya itu nilai default aja sih jadinya ya udah bagitu aja ya logika terdekat aja ini mah sih
@@denandaprayoga5269 kan di html nya dikasih nilai min & max bro ,, lalu nilai min & max itu dikirim ke javascript dengan nama.value
mau tanya punya saya ko hanya bisa di klik sekali klik berikutnya warnanya tetap
Cara saya begini pak... gimana.
document.body.addEventListener('mousemove', function(event){
const namaVar = Math.round((Math.random() * (event.clientX / event.clientY) )*(255*255*255)).toString(16);
document.body.style.backgroundColor = '#'+ namaVar ;
*ket : (255*255*255) => Posibility warna
body css => transition: .5s; (atau sesuai selera)
.toString(16) => convert ke HEX color
wow keren Za, ga kepikiran saya untuk ubah jadi bilangan hexa.. good job!! 👍
iya pak saya pernah baca ttg 16 million color(256*256*256) sama ttg konversi desimal ke Hexa.
di implementasikan ke tutorial pa sandhika jadi seru banget hehe !!
Kak Mau tanya begitu saya geser slidernya terus console log itu hasil undefined tidak ada angka, saya coba pakai alert muncul alertnya, kira2 apanya itu ya Kak
Kalo game snake bisa pake dom enggak pak @webprogrammingunpas?
Maaf pak dika sedikit koreksi, kalo diawal kita klik btn (Acak Warna) setelah itu klik btn (Ubah Warna) itu btn (Ubah Warna) jd gak fungsi pak, karna ketiban atribut dari btn (Acak Warna), seharusnya pada function dari btn (Ubah Warna) ditambahkan method removeAttribute() pak dika🙏
Keren, Mas! tapi saya dari tadi ngulik belum ketemu cara biar yg button awal tetep berfungsi. Jadi harusnya penulisan kode-nya gimana, ya?
@@jessica-tv6ep tambahkan document.body.removeAttribute("style"); di dalam addEventListener nya btn ubah warna
kenapa ya tombol yang terkait dengan fungsi toggle hanya bisa dilakukan ketika fungsi lainnya belum di gunakan ?
misal : ketika saya sudah menggunakan tombol yang berfungsi untuk random warna, lalu kemudian saya menggunakan tombol yang terkait dengan toggle. jadi tidak berfungsi.