JAVASCRIPT LANJUTAN | 4.3 Latihan Filter, Map & Reduce

Latihan untuk mengimplementasikan konsep Higher Order Function (Filter, Map & Reduce)
--
DOWNLOAD SOURCE index.html :
gist.github.co...
--
PLAYLIST JAVASCRIPT
1. DASAR PEMROGRAMAN DENGAN JAVASCRIPT
• Dasar Pemrograman deng...
2. JAVASCRIPT & DOM (Document Object Model)
• Javascript dan DOM (Do...
--
KELAS ONLINE "Menjadi Seorang FULL STACK DESIGNER"
fullstackdesign...
---
PLAYLIST LAIN
- HTML Dasar
• HTML Dasar
- CSS Dasar
• CSS Dasar
- Tutorial Sublime Text
• Tutorial Sublime Text 3
- CSS Layouting
• CSS Layouting
- PHP DASAR
• Belajar PHP untuk PEMULA
- OOPHP
• OOP DASAR pada PHP
---
FOLLOW ME
- / sandhikagalih
- / webprogrammingunpas
- codepen.io/webp...
- github.com/san...
- / sandhikagalih
---
UNIVERSITAS PASUNDAN BANDUNG
www.unpas.ac.id/
www.if.unpas.ac...
terimakasih dan selamat #ngoding!
@sandhikagalih

[@oktapascal4348]

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

[@sandhikagalihWPU]

ide bagus, saya upload sekarang!

[@hajarsyef5490]

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

[@rakazakaria4954]

Mending tulis manual aja, jadi kita juga bisa lebih mengingat syntax program nya

[@muhammadalfat984]

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.

[@kusanali5945]

lebih baik ketik manual. kalo mau di percepat emmet ada, yang penting itu code kita :D

[@footballistaedit25]

Penjelasannya sangat mudah dipahami. Cara lain untuk nyari menit dan detik, kita bisa pake modulo

[@dimasrizkymaulana3464]

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;

[@_jayantaka]

sama bwang ane pake ini dulu, taunya beda sama padika

[@Orbitez]

thanks bro jadi lebih simple diliat

[@riveralight104]

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.

[@junevenlee1979]

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

[@RizaHariati]

jumlah video saya mah dari array.length aja pak... Sejauh ini video2nya sangat clear. Sangat bersaing dengan video2 bapak2 bule yang pake bayar itu.

[@akhmadi3815]

saya sangat berterima kasih untuk ilmunya,,,ini mah sepadan dengan kuliah satu semester malah lebih,,,,semoga tuhan yang membalas

[@pudypay]

Di tunggu react, vue jsnya pak untuk framework

[@NyomanSuryasa]

Iya pak, sukses selalu, di tunggu pembelajaran react sm vue frameworknya

[@iday7045]

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*/

[@ahmadihsanullahrabbani8282]

terimakasih banyak pa dika, saya jadi mulai paham penggunaan javascript di html

[@Duda-ke3uz]

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

[@AhmadAnwar31Aan]

Pak bikin video tantang cara membuat rancangan database dari suatu kasus dong, bagus keliatannya buat para programmer pemula :) , hanya sekedar saran aja sih : )

[@revadoniaprilio7709]

Pak lanjutin playlist laravel dong😁, bahas tentang authentication (login register) atau yang lainnya gitu pak

[@hanmuid9387]

Makasih pak, saya ulangin berkali-kali biar paham hehe Semoga sehat selalu pak

[@rizalahmad7427]

Terimakasih pak... Semoga ilmunya bermanfaat.. 🙏🙏

[@fuadrivai1279]

Terimakasih banyak pak, sangat bermanfaat unt junior frontEnd

[@jatnikaenjat6334]

Sangat bermanfaat pa semua videonya, saya suka download video2nya pa dika mohon ijin karna kouta terbatas 😅😅,

[@abdillahputraal-iman1370]

Kereen penyampaian materinya pak, Terima kasih atas Ilmuny :)

[@aldhanekai]

untuk mengetahui adanya text "JAVASCRIPT LANJUTAN", kayaknya lebih ideal pakai Regular Expression deh

[@mrchronicle8197]

bisa pakai regex juga

[@aldhanekai]

@@mrchronicle8197 hmmm bukannya Regular Expression itu regex?

[@mrchronicle8197]

@@aldhanekai iya maksud saya emang bisa pake regex hahah, komennya emg rada ambigu

[@achdyat4795]

padika buat tutorial SSO donk, single sign on jadi tidak login berkali kali ke berbagai layanan cukup satu akun saja tks responnya

[@fanydifia9977]

lanjutkan js sampai ke akar2 nya pak

[@andhika5787]

ditunggu tutorial VUE js nya pak dika:)

[@khairulbahri3106]

Mantap pak dosen

[@amienulrana8597]

Tetap semangat belajar walaupun tidak ngerti pembagian matematika nya

[@KawanLama_]

Thanks berat pak dika

[@ngaung9374]

cara simpel const jam = Math.floor(waktu / 3600); const menit = Math.floor(waktu % 3600 / 60) ; const detik = Math.floor(waktu % 3600 )% 60 ;

[@odir8254]

Nah Sempat heran juga knpa di videonya gak pake modulus

[@aldoanonym7527]

Web RTC dong master, d Indonesia belum ada yg bikin tutorial

[@hanifakbar7237]

pak izin bertanya, cara mengatasi agar mudah mengingat kapan harus buka kurung dan kapan harus tutup kurung bagaimana ya pak? terimakasih salam ..

[@ibeth2964]

Mantap pak dhika terima kasih

[@kaizen7069]

wiihh.. bisa tau macem2 method darimana y pak? research dulu, lgsung browsing atau apa ?

[@YEFF05]

mantap ...

[@fahmy4you]

Kalau di android jadi nya NAN JAM NAN MENIT NAN DETIK itu gimana ngakalinnya pak

[@ihsannurulhabib9729]

Mantul sekali pak

[@faridrusdyanto4647]

Keren

[@ahmadakhbarf7118]

Terimakasih banyak pak atas ilmunya

[@nabillaaaaa]

Terima kasih pak

[@papasheo9584]

pusing yaa balik dulu ke video sebelumnya dah kwkwkw

[@muhammadsofyansyah9571]

Knp gk pake dataset.data-duration kan di html nya Javascript Lanjutan

[@moiskandar_]

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 :)

[@robifirmansyah9049]

@@moiskandar_ bang coba kirimin tulisan syntaksnya, sepertinya saya penasaran jika menggunakan getAttribute. terima kasih

[@odir8254]

Masih menunggu jawaban juga nih

[@Cinotoners]

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..

[@candrapurnawirawan3847]

Mantul..

[@Dragonsoul567]

Maaf pak Dika mau tanya...kok pada codingan saya textContent.includes tidak di kenal browser ya....apa textContent di ambil dari library lain???

[@muslimbarakah9531]

Pak tolong bikin video tutorial cara membuat web pake google cloud dong pak.. Setuju like

[@sahrulamri7859]

Pak bikin video browser object model dong

[@naufalyasin1315]

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

[@robifirmansyah9049]

coba liat lagi di variabel videosnya. sudah ada method Array.from belum?

[@andhikarmukti]

pak saya merubah total detiknya jadi total hour nya kaya begini const totalHour = new Date(jsLanjut * 1000).toISOString().substr(11, 8)

[@JutaanUnboxing]

lanjutttt

[@ujangbrudin1554]

canggih kieu euy

[@guramezuku2294]

Makasih pak Dhikaa

[@maulanamalikibrahim2199]

mantap pak mudah dipahami

[@azkiamima5733]

wkwkwkkw salah langkah, ga tau ada parsefloat.. jadiknya si array nya di ginikan return (parts[0] * 60) + (parts[1] / 1);

[@aryaprima4698]

Kapanpun matematika, pusing banget memang

[@odir8254]

11:06 kenapa dataset.duration bukannya dataset.data-duration, kan katanya sesuai namanya

[@clwbola4826]

dataset itu methodnya, data itu attributenya , & duration itu nama datanya. koreksi kalau salah

[@dedijunaedi8444]

Maaf pak, mau tanya klo video web gis belum ada y untuk menampilkan latitude longitude dr Db ke google maps ? terima kasih.

[@sandhikagalihWPU]

belum ada

[@dedijunaedi8444]

@@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

[@ramafajar5543]

Pak gunanya atribut data-duration apa ya?

[@tottiandraristiano1085]

mungkin www.w3schools.com/tags/att_global_data.asp

[@erlanggarizky4216]

erlangga_hadir

[@aryaadinulfadlan8998]

judul lagu closing nya apa pak? bagi yg tau mohon info

[@sidiqtoha3173]

pak kalau backend perlu belajar js dom juga ?

[@krisnakrisna837]

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?

[@sandhikagalihWPU]

wah iya betul.. berati tinggal ditambah kondisi aja ketika menghitung detiknya 😊

[@nolep5555]

itu properti yang di element li itu disebut apa ya? bukan class ataupun id baru liat saya

[@musuhabadi2534]

kynya itu select elemen li nya pake atribut makanya pake kurung siku

[@firhanyulianto4161]

ionic dong sekali kali

[@gimmegame0]

660 + '18' = 66018 :v

[@annajmalbupy]

kok saya jadi pusing memahami syntaknya pak T_T

[@achdyat4795]

padika buat tutorial SSO donk, single sign on jadi tidak login berkali kali ke berbagai layanan cukup satu akun saja tks responnya