Maaf pak hanya untuk saran, jika di tutorial ada kode yang harus ditulis oleh viewers seperti di menit 0:46, daripada harus di pause dulu mending bapak upload file mentahan yang berisikan kode untuk bisa diikuti ketika nonton tutorial bapak. nanti viewers hanya download file tersebut tanpa harus diketik dahulu. saya suka channel bapak sejak membahas OOP pada PHP
mending seperti ini aja pak jdi gk membuat kita yang baru belajar dan serius belajar jadi malas ketik kode, sekalian melemaskan jari kita, jd klo kita salah ketik dan terjadi erro kita belajar dri situ
kalo masalah mending mah balik lagi ke pribadi sob, ada yg pingin ngetik ulang ada juga yang engga. Malahan, kalo code nya di share menjadi tantangan tersendiri untuk yg lagi belajar, apa mau ketik manual atau copas saja.
Ini HTMLnya: Video Durations sfml dasar sfml part2 qt5 dasar qt5 part2 c++ dasar c++ part1 c++ part2 c++ part3 c++ part4 c++ part5
Ini js nya : //Ambil element Video const Video = document.querySelectorAll("[data-duration-video]"); const DisplayTotal = document.getElementById("total"); //ubah element video tadi menjadi Array const dataVideo = Array.from(Video); //inisialisasi waktu dan jumlah video let totalSeconds =0; let jumlahVideo = 0; //pilih yang ingin di pilih const cppFindDuration = dataVideo.filter((video)=>{ return video.textContent.includes("c++"); }).map((item)=>{ jumlahVideo +=1; // console.log(item.dataset.durationVideo); return item.dataset.durationVideo; }).map((duration)=>{ const [minute,seconds] = duration.split(":"); //console.log("menit: ",minute,"detik: ",second); /*totalDetik +=*/ return (Number(minute)*60)+Number(seconds); // console.log("total: detik: "+totalDetik); }).reduce((totalS,seconds)=>{ return totalS+seconds; }); //definisikan dan konversikan waktu(detik/seconds) totalSeconds += cppFindDuration; const jam = Math.floor(totalSeconds/3600); const sisaDetik1 = totalSeconds % 3600; const menit = Math.floor(sisaDetik1/60); const sisaDetik2 = sisaDetik1%60; //hanya untuk melihat kecocokan console.log(cppFindDuration); console.log(totalSeconds); //melihat proses konversi console.log(jam); console.log(sisaDetik1); console.log(menit); console.log(sisaDetik2); //tampilkqn ke html DisplayTotal.textContent = `total video belajar c++: ${jumlahVideo}. total waktu menonton video: ${jam} jam ${menit} menit ${sisaDetik2} detik`; /*Note: aku sengaja merubah beberapa hal kecil terutama dalam kodenya, maksud dan tujuanya masih sama dan aku coding hanya dengan hp jadi maaf jika jelek kodenya*/
Prosesnya emang njelimet banget karena harus chaining High Order Function terus tapi pas bisa tampil itu rasanya puas banget. Makasih banyak pak dhika buat latihannya. Ternyata serumit ini cuma buat bikin total jam video dan detik hahaha.
pas bagian ubah format jadi jam : menit : detik. bisa gunain kode dibawah, biar lebih simpel dan ga ngubah constnya jsLanjut const jam = Math.floor(jsLanjut/ 3600); const menit = Math.floor((jsLanjut% 3600) / 60); const detik = jsLanjut % 60;
Saya suka contoh aplikasi yang seperti ini pak. Karena kami disini kan tujuannya mau belajar web, jadi kalau ada contoh-contoh yang seperti ini membuat kami semakin semangat
const jam = Math.floor(jsLanjut / 3600); const menit = Math.floor((jsLanjut % (jam * 3600)) / 60); const detik = (jsLanjut % (jam * 3600) - menit * 60); ini untuk bagian ubah format yaa... sama aja sih dengan punya pak dhika tapi ini versi pakai modulo
Pak bikin video tantang cara membuat rancangan database dari suatu kasus dong, bagus keliatannya buat para programmer pemula :) , hanya sekedar saran aja sih : )
Saya juga masih kurang paham pada bagian ini. Kenapa penulisannya cukup dengan "dataset.duration" ya pak @sandhika ? kalau saya sengaja tak ganti menggunakan .getAttribute("data-duration"), supaya nanti ga bingung sendiri kedepannya :)
Itu karena "data" pada "data-duration" adalah data fiks yang tidak bisa kita ganti. Jadi misalkan kalau kita ingin bikin atribut data baru di html, kita harus menambahkan kata "data" diawalnya, contoh "data-waktu", "data-angka", "data-baju" dst. Nah key "data" inilah yang nantinya dibaca oleh javascript sehingga kita bisa pake fungsi(function) dataset pada javascript. Oleh karena itu, kita gaperlu menuliskan lagi "data-duration", cukup dengan "duration" aja karena datanya sudah dipahami javascript bahwa kita memanggil atribut dataset dari html Tapi ini hipotesis aja sih..
sepertinya saya punya ide yg mungkin bisa membantu pak, gimana kalo playlist JavaScript DOM dimasukkan juga ke jalur belajar "Back-end Web Development : JavaScript"? karena mungkin banyak dari kita murid online Bapak yg baru mulai belajar Back-end Web di channel Bapak melanjutkan dari JavaScript dasar belum mengerti perihal DOM nya pak.
const jsLanjut = videos.filter (video => video.textContent.includes('JAVASCRIPT LANJUTAN')); aku tulis itu kenapa ada pesan "videos.filter" is not a function ya? padahal console.log (videos); nya bekerja
@@sandhikagalihWPU smoga kedepan ada tutorialnya. Karena kalau bapak yang jadi tutornya saya yg awam dengan php merasa teknik yang bapak berikan menarik dan mudah dipahami. Terima kasih smoga secepatnya ada tutorial web gis. Dan smoga bapak tambah sukses dan sehat slalu.. Aamiin
Maaf pak hanya untuk saran, jika di tutorial ada kode yang harus ditulis oleh viewers seperti di menit 0:46, daripada harus di pause dulu mending bapak upload file mentahan yang berisikan kode untuk bisa diikuti ketika nonton tutorial bapak. nanti viewers hanya download file tersebut tanpa harus diketik dahulu. saya suka channel bapak sejak membahas OOP pada PHP
ide bagus, saya upload sekarang!
mending seperti ini aja pak jdi gk membuat kita yang baru belajar dan serius belajar jadi malas ketik kode, sekalian melemaskan jari kita, jd klo kita salah ketik dan terjadi erro kita belajar dri situ
Mending tulis manual aja, jadi kita juga bisa lebih mengingat syntax program nya
kalo masalah mending mah balik lagi ke pribadi sob, ada yg pingin ngetik ulang ada juga yang engga. Malahan, kalo code nya di share menjadi tantangan tersendiri untuk yg lagi belajar, apa mau ketik manual atau copas saja.
lebih baik ketik manual. kalo mau di percepat emmet ada, yang penting itu code kita :D
Penjelasannya sangat mudah dipahami. Cara lain untuk nyari menit dan detik, kita bisa pake modulo
Ini HTMLnya:
Video Durations
sfml dasar
sfml part2
qt5 dasar
qt5 part2
c++ dasar
c++ part1
c++ part2
c++ part3
c++ part4
c++ part5
Ini js nya :
//Ambil element Video
const Video = document.querySelectorAll("[data-duration-video]");
const DisplayTotal = document.getElementById("total");
//ubah element video tadi menjadi Array
const dataVideo = Array.from(Video);
//inisialisasi waktu dan jumlah video
let totalSeconds =0;
let jumlahVideo = 0;
//pilih yang ingin di pilih
const cppFindDuration = dataVideo.filter((video)=>{
return video.textContent.includes("c++");
}).map((item)=>{
jumlahVideo +=1;
// console.log(item.dataset.durationVideo);
return item.dataset.durationVideo;
}).map((duration)=>{
const [minute,seconds] = duration.split(":");
//console.log("menit: ",minute,"detik: ",second);
/*totalDetik +=*/
return (Number(minute)*60)+Number(seconds);
// console.log("total: detik: "+totalDetik);
}).reduce((totalS,seconds)=>{
return totalS+seconds;
});
//definisikan dan konversikan waktu(detik/seconds)
totalSeconds += cppFindDuration;
const jam = Math.floor(totalSeconds/3600);
const sisaDetik1 = totalSeconds % 3600;
const menit = Math.floor(sisaDetik1/60);
const sisaDetik2 = sisaDetik1%60;
//hanya untuk melihat kecocokan
console.log(cppFindDuration);
console.log(totalSeconds);
//melihat proses konversi
console.log(jam);
console.log(sisaDetik1);
console.log(menit);
console.log(sisaDetik2);
//tampilkqn ke html
DisplayTotal.textContent = `total video belajar c++: ${jumlahVideo}. total waktu menonton video: ${jam} jam ${menit} menit ${sisaDetik2} detik`;
/*Note: aku sengaja merubah beberapa hal kecil terutama dalam kodenya, maksud dan tujuanya masih sama dan aku coding hanya dengan hp jadi maaf jika jelek kodenya*/
jumlah video saya mah dari array.length aja pak... Sejauh ini video2nya sangat clear. Sangat bersaing dengan video2 bapak2 bule yang pake bayar itu.
Prosesnya emang njelimet banget karena harus chaining High Order Function terus tapi pas bisa tampil itu rasanya puas banget. Makasih banyak pak dhika buat latihannya. Ternyata serumit ini cuma buat bikin total jam video dan detik hahaha.
pas bagian ubah format jadi jam : menit : detik. bisa gunain kode dibawah, biar lebih simpel dan ga ngubah constnya jsLanjut
const jam = Math.floor(jsLanjut/ 3600);
const menit = Math.floor((jsLanjut% 3600) / 60);
const detik = jsLanjut % 60;
sama bwang ane pake ini dulu, taunya beda sama padika
thanks bro jadi lebih simple diliat
saya sangat berterima kasih untuk ilmunya,,,ini mah sepadan dengan kuliah satu semester malah lebih,,,,semoga tuhan yang membalas
terimakasih banyak pa dika, saya jadi mulai paham penggunaan javascript di html
Di tunggu react, vue jsnya pak untuk framework
Iya pak, sukses selalu, di tunggu pembelajaran react sm vue frameworknya
Saya suka contoh aplikasi yang seperti ini pak. Karena kami disini kan tujuannya mau belajar web, jadi kalau ada contoh-contoh yang seperti ini membuat kami semakin semangat
const jam = Math.floor(jsLanjut / 3600);
const menit = Math.floor((jsLanjut % (jam * 3600)) / 60);
const detik = (jsLanjut % (jam * 3600) - menit * 60);
ini untuk bagian ubah format yaa... sama aja sih dengan punya pak dhika tapi ini versi pakai modulo
Terimakasih banyak pak, sangat bermanfaat unt junior frontEnd
Makasih pak, saya ulangin berkali-kali biar paham hehe
Semoga sehat selalu pak
Kereen penyampaian materinya pak, Terima kasih atas Ilmuny :)
Pak bikin video tantang cara membuat rancangan database dari suatu kasus dong, bagus keliatannya buat para programmer pemula :) , hanya sekedar saran aja sih : )
Terimakasih pak... Semoga ilmunya bermanfaat.. 🙏🙏
Pak lanjutin playlist laravel dong😁, bahas tentang authentication (login register) atau yang lainnya gitu pak
Mantap pak dhika terima kasih
lanjutkan js sampai ke akar2 nya pak
Sangat bermanfaat pa semua videonya, saya suka download video2nya pa dika mohon ijin karna kouta terbatas 😅😅,
Mantap pak dosen
Mantul sekali pak
Tetap semangat belajar walaupun tidak ngerti pembagian matematika nya
mantap ...
Terimakasih banyak pak atas ilmunya
Thanks berat pak dika
Mantul..
Terima kasih pak
ditunggu tutorial VUE js nya pak dika:)
untuk mengetahui adanya text "JAVASCRIPT LANJUTAN", kayaknya lebih ideal pakai Regular Expression deh
bisa pakai regex juga
@@mrchronicle8197 hmmm bukannya Regular Expression itu regex?
@@aldhanekai iya maksud saya emang bisa pake regex hahah, komennya emg rada ambigu
canggih kieu euy
Makasih pak Dhikaa
mantap pak mudah dipahami
pusing yaa balik dulu ke video sebelumnya dah kwkwkw
Keren
Pak bikin video browser object model dong
padika buat tutorial SSO donk, single sign on jadi tidak login berkali kali ke berbagai layanan cukup satu akun saja tks responnya
pak izin bertanya, cara mengatasi agar mudah mengingat kapan harus buka kurung dan kapan harus tutup kurung bagaimana ya pak?
terimakasih salam ..
lanjutttt
cara simpel
const jam = Math.floor(waktu / 3600);
const menit = Math.floor(waktu % 3600 / 60) ;
const detik = Math.floor(waktu % 3600 )% 60 ;
Nah Sempat heran juga knpa di videonya gak pake modulus
Web RTC dong master, d Indonesia belum ada yg bikin tutorial
Knp gk pake dataset.data-duration kan di html nya Javascript Lanjutan
Saya juga masih kurang paham pada bagian ini.
Kenapa penulisannya cukup dengan "dataset.duration" ya pak @sandhika ?
kalau saya sengaja tak ganti menggunakan .getAttribute("data-duration"), supaya nanti ga bingung sendiri kedepannya :)
@@moiskandar_ bang coba kirimin tulisan syntaksnya, sepertinya saya penasaran jika menggunakan getAttribute. terima kasih
Masih menunggu jawaban juga nih
Itu karena "data" pada "data-duration" adalah data fiks yang tidak bisa kita ganti.
Jadi misalkan kalau kita ingin bikin atribut data baru di html, kita harus menambahkan kata "data" diawalnya, contoh "data-waktu", "data-angka", "data-baju" dst.
Nah key "data" inilah yang nantinya dibaca oleh javascript sehingga kita bisa pake fungsi(function) dataset pada javascript.
Oleh karena itu, kita gaperlu menuliskan lagi "data-duration", cukup dengan "duration" aja karena datanya sudah dipahami javascript bahwa kita memanggil atribut dataset dari html
Tapi ini hipotesis aja sih..
wiihh.. bisa tau macem2 method darimana y pak? research dulu, lgsung browsing atau apa ?
Maaf pak Dika mau tanya...kok pada codingan saya textContent.includes tidak di kenal browser ya....apa textContent di ambil dari library lain???
Kapanpun matematika, pusing banget memang
Kalau di android jadi nya NAN JAM NAN MENIT NAN DETIK
itu gimana ngakalinnya pak
sepertinya saya punya ide yg mungkin bisa membantu pak, gimana kalo playlist JavaScript DOM dimasukkan juga ke jalur belajar "Back-end Web Development : JavaScript"? karena mungkin banyak dari kita murid online Bapak yg baru mulai belajar Back-end Web di channel Bapak melanjutkan dari JavaScript dasar belum mengerti perihal DOM nya pak.
Pak tolong bikin video tutorial cara membuat web pake google cloud dong pak..
Setuju like
const jsLanjut = videos.filter (video => video.textContent.includes('JAVASCRIPT LANJUTAN'));
aku tulis itu kenapa ada pesan "videos.filter" is not a function ya? padahal console.log (videos); nya bekerja
coba liat lagi di variabel videosnya. sudah ada method Array.from belum?
pak saya merubah total detiknya jadi total hour nya kaya begini
const totalHour = new Date(jsLanjut * 1000).toISOString().substr(11, 8)
Maaf pak, mau tanya klo video web gis belum ada y untuk menampilkan latitude longitude dr Db ke google maps ? terima kasih.
belum ada
@@sandhikagalihWPU smoga kedepan ada tutorialnya.
Karena kalau bapak yang jadi tutornya saya yg awam dengan php merasa teknik yang bapak berikan menarik dan mudah dipahami. Terima kasih smoga secepatnya ada tutorial web gis.
Dan smoga bapak tambah sukses dan sehat slalu..
Aamiin
pak kalau backend perlu belajar js dom juga ?
Pak gunanya atribut data-duration apa ya?
mungkin www.w3schools.com/tags/att_global_data.asp
11:06 kenapa dataset.duration bukannya dataset.data-duration, kan katanya sesuai namanya
dataset itu methodnya, data itu attributenya , & duration itu nama datanya. koreksi kalau salah
judul lagu closing nya apa pak? bagi yg tau mohon info
wkwkwkkw salah langkah, ga tau ada parsefloat..
jadiknya si array nya di ginikan
return (parts[0] * 60) + (parts[1] / 1);
itu properti yang di element li itu disebut apa ya?
bukan class ataupun id baru liat saya
kynya itu select elemen li nya pake atribut makanya pake kurung siku
erlangga_hadir
pak gmna kalo durasi videonya lebih dari satu jam pak ntar kan jadi 01:50:12 nah ntr detik nya gk keambil pak kan cma array 0 dan 1 aja?
wah iya betul.. berati tinggal ditambah kondisi aja ketika menghitung detiknya 😊
ionic dong sekali kali
660 + '18' = 66018 :v
kok saya jadi pusing memahami syntaknya pak T_T
padika buat tutorial SSO donk, single sign on jadi tidak login berkali kali ke berbagai layanan cukup satu akun saja tks responnya