Це відео не доступне.
Перепрошуємо.
Belajar Dasar Pemrograman Javascript - DOM
Вставка
- Опубліковано 1 сер 2024
- Tutorial belajar coding javascript materi dom document object model untuk pemula. Jangan lupa ada tugas menanti juga, tonton sampai habis ya 💋
✨ tutorial JS Dasar disini ✨
• Belajar Dasar Pemrogra...
🍌 full playlist disini 🍌
• 🍌 Javascript Tutorial 🍌
timestamps:
00:00 Konten
01:05 Apa itu DOM
01:30 Point Materi
02:05 Persiapan Projek
03:25 Document Title
06:10 Document Body
06:45 Append DOM
08:50 Create & Combine DOM
11:55 Penjelasan
13:10 Alternatif 1
14:13 Alternatif 2
15:14 Pertanyaan Besar
16:14 QUIZ 1
17:00 Data Selector
19:25 Styling Selector
20:59 QuerySelector
22:00 ById VS QS
23:00 Event Props
24:00 Event Trigger
25:45 Event Combination
26:30 Mouse Event
28:30 Event Combination 2
32:20 Klu Tugas
34:15 TUGAS!
35:05 Motivasi
Transfer DONASI: saweria.co/deaafrizal
Join this channel to get access to perks:
/ @deaafrizal
#programming #tutorial #coding
Telegram Open Grup: t.me/cuyuniverse
Istagram: / dea.afrizal
=================
💌 Email (for business) 💌
dea.afrizal@icloud.com
==================
🔻🔻🔻 SUBSCRIBE 🔻🔻🔻
For More Update
🔺🔺🔺LONCENGNYA 🔺🔺🔺
karna menggunakan innerHTML, adalah element yang hanya berjalan di HTML jadi nanti dia bacanya " Test ", sedangkan kalau pake innerText sama textContent dia hanya akan baca itu sebagai text ( " " Test " " ).
textcontent merupakan isi keseluruhan text yang di nampakkan bukan menambahkan element codingan baru,sama seperti innertext yakni menambahkan keseluruhan sebagai kalimat biasa, Sedangkan innerHTML menambahkan kata sekaligus menambahkan element codingan baru
contoh textcontent dan innertext:
didalam html akan terbaca seperti "blablabla"
contoh innerHTML:
didalam html akan terbaca seperti "blablabla"
gacor kang
karna menggunakan innerHTML artinya kita memasukan element HTML kedalam body, sehingga marquee yang merupakan element html bisa terbaca
pembawaan materinya ngebuat penjelasannya jadi lebih mudah untuk dimengerti dan ga ngenakutin. Terima kasih banyak videonya bang!
Akhirnya dibuat juga, thank you bang sangat membantu untuk proses belajar 🙏🙏
DOM nya buat yang document.querySelector bisa lebih complex lagi nanti bisa panggil tag atau tag + class, atau [class='x'], btw thanks videonya bang.. mantapp
Cara penyampaian nya enak bed, ditunggu video selanjutnya ..tengkyu bang👍
mantap mang deaa, arigathanks ilmunyaaa. besok lanjut
Malam bang, aku membuatnya jadi begini
const addText = document.createElement('p');
function tambahText(){
addText.textContent='Hello Edwin';
body.append(addText);
}
function gantiWarna(){
addText.style.color='red';
}
dan itu berhasil XD
makasih bang akhirnya dapet pencerahan ngeliat kode lu
Terima kasih bang
Terima kasih bang
innerHTML sets or returns the HTML content (including tags) of an element, innerText sets or returns the visible text content of an element (excluding HTML tags), and textContent sets or returns the text content of an element (including whitespace and line breaks).
Bisa kursus
perbedaan innerHTML, innerText, textContent
sepengetahuan saya innerHTML dia bisa menyimpan string berupa tag html ke document dan meng eksekusi string yang berisi tag html sesuai dengan fungsinya
atau
ketika kita selector menggunakan fungsi innerHTML dia akan mengembalikan semua element yang ada di dalam selector nya
sedangkan innerText dan textContent berperilaku mirip dia hanya bisa menyimpan sebuah string yang berisi tag html namun dia tidak mengeksekusi tag sesuai dengan fungsinya malahan dia menampilkan tag ke layar karena dia menganggap bahwa element html yang ada di dalam string itu berupa string biasa bukan tag html
begitulah kira2 klo ada salah tolong di betulkan hehe
Makasih bang
bang mau tanya
const newText = document.createElement('p')
misal dia di public cuma bisa hover satu kali, tapi kalau di dalam function bisa hover ber kali- kali itu kenapa yang bang?
terimakasih
wow, powerful bgt ya si JS ini. pantesan ada posisi full stack
//mencari objeck di dalam html
const klik = document.querySelector('.klik')
//ketika mouse dimasukkan akan membuat paragraf
klik.addEventListener('mouseover',function(){
//membuat paragraf
const paragraf = document.createElement('p')
//ketika paragraf sudah dibuat kita masukkan value nya
const text = document.createTextNode('khusni mubarok')
//menggabungkan value dan paragraf
paragraf.appendChild(text);
//ketika paragraf sudah dipanggil maka kita masukkan element ke dalam body
const itemNew = document.querySelector('body')
itemNew.appendChild(paragraf);
//ketika mouse dikeluarkan maka paragraf nya ganti warna
paragraf.addEventListener('mouseout', function(){
paragraf.style.color = 'blue';
});
});
Gini bang walau aku tambahin dari chanel nya pak sandika😅😅
nambah lagi materi, auto upgrade otak. gw bang 😇
naaah ini dia yang di cari-cari bang
Bener bang Dea
const btn = document.querySelector("#butt");
// membat button ada teks nya
const body = document.body;
const defaultText = "klik dong";
btn.textContent = defaultText;
// let baruAja; variabel baru diluar func keluar
// ubah text
btn.style.color = "black";
btn.style.background = "aqua";
btn.style.padding = "10px";
// onclick
function klikButton() {
btn.style.color = "red";
btn.style.padding = "15px";
}
// saat cursor berada di button
function ubahText() {
baruAja = document.createElement("p");
baruAja.innerHTML = "Raehan Ramadhan";
baruAja.style.color = "red";
// memasukan element baru ke dalam body
body.append(baruAja);
}
function keluarText() {
if (baruAja) {
baruAja.style.color = "black";
}
}
Kok gk bisa yang pas mousenya d8geser keluar tombol
Kau benar benar dosenku, semangat ngontennya bang
Masha Allah hebat bang.... Tempatnya buat belajar.. Java ini lah tempatnya
Javascript bang, bukan java
ilmu gua belum sampai sini, tapi gua yakin gua bisa sampai di sini
Mantapp hanupiss kang deaa 💥💥
const btn2 = document.getElementById('btn2')
btn2.style.background = 'aqua'
const tambahElement = document.createElement('h1')
const defaultNama = 'Alldy'
btn2.textContent = defaultNama
function gantiwarna2() {
btn2.style.background = '#3498db' // blue-ish color
}
function gantiWarnaHover2() {
const tambahText = tambahElement
tambahText.textContent = defaultNama
tambahText.style.color = 'black'
body.append(tambahText);
}
function ubahText2() {
tambahElement.style.color = 'tomato'
}
sekedar shareing
16:17 innerHTML bermakna di dalam HTML, innerText bermakna di dalam text, kerna itu jika meletakkan tag marquee ia tidak bergerak kerna menggunakan innerText, membaca di dalam text..... (mengambil masa 5 minit untuk memahaminya tanpa menggunakan chatgpt, google atau segala macam hehe😁)
Mksh broo🎉🎉
lanjutt teruss bang!!
Moment Senam Pagi : 28:21
"1, 2, 3, 4, 5, 6.. 1,2,3,4..." malah suara senam pagi di sekolah wkwkwkwk
thank for video-nya bang! aku terbantu untuk semester 3 ini
Bang kenapa ya tempat saya ketika browser masih buka console itu mouse over nya tidak berfungsi, tetapi kalo fitur consolenya close berfungsi??
Ahhayy Ueduun kang😁👍👍
wkwkwk
baru ngikutin tutorial mas dea
tbtb ngide begini buat tugas di akhir video
document.title = " BOBOCIP Tes Click"
const body = document.body
const btn = document.getElementById ('btn')
const defaultText = ('Click Saya')
btn.textContent = defaultText
btn.style.border = '35px'
btn.style.padding = '40px'
btn.style.fontSize = '40px'
btn.style.background = 'yellow'
body.style.fontSize = '85px'
function masuk(){
body.append('cie mau click ya')
}
function ubahWarna (){
body.style.color = 'red'
body.style.background = 'black'
}
lha kok berhasil wkwkwk
akhhir nya bisa 🤯 :
const btn2 = document.querySelector("#btn2");
const body = document.body;
function addText() {
const newText = document.createElement("p");
newText.textContent = "Muhammad Arka";
body.append(newText);
}
function changeColor() {
const tagP = document.getElementsByTagName("p");
for (let i = 0; i < tagP.length; i++) {
tagP[i].style.color = "aqua";
}
}
BANG BOLEH TOLONG JELASIN GAK SOAL FOR NYA, LOGIKA GW GK NYAMBUNG
OTODIDAK HADIR🙋♂️😂KANG...mulungan weh lah😋😂🤣repot juga pengen pinter gk punya modal teh euy,,mungutin ajah ilmu dri KANG Dea Weh lah🙏😊Tetap Semangat. ...✊✊✊✊✊
bang bisa buat konten tentang programmer remote bg..
ini juga sebagai curhatan saya bg apakah programmer remote bisa untuk pemula bang, udah sering sih bang bermain koding tapi sewaktu kuliah bisa html, css , javascript , joomla , sql server , visual basic tapi setelah tamat kuliah saya pengalaman kerja di bagian programmer tidak ada bg tapi lebih ke IT Support bg sudah sampai 5 tahun bg dan sudah menjabat sebagai supervisor juga bg, tapi dikarenakan dikerjaan banyak an waktu santai jadi pikiran saya waktu saya banyak terbuang begitu saja nah sekarang ada niat mau belajar program lagi tapi dengan tujuan harus programmer remote bg.
mohon jawabnya bg
terima kasih
OTODIDAK HADIR🙋♂️😂KANG...mulungan weh lah😋😂🤣repot juga pengen pinter gk Punya modal,teh euy Aslina iyeu mah,mungutin ajah ilmu dri KANG Dea🙏😊Tetap Semangat. ...
siap gaskeun terus mang!
Bantuannya bang 🙏 untuk tugasnya ini bang, kenapa ketika pindah ke onmouseout, teks dari onmouseover tidak hilang bang?
Enak euy ngajarnya
Mantap bang, lanjut
akhirnya js js js huhahhuhah pedas wangi wangi wangi
Bang saat main.js ekternal kita tuliskan alert ('hayoho') kita refres di browse nya gk muncul
sepertinya kudu innerhtml sama baru gerak
Makasih banyak bang
Sip kang. 😁
Lagi musim Pantarlih yg dimana pendataan dps pakai aplikasi e coklit, apakah aplikasi e coklit aman karena aplikasi tersebut tidak tersedia di play store?
Mohon bantuannya dijawab
siap
Bang kalau mau iseng buat website sendiri tapi dapat atau bikin desain web yg bagus itu gimana
bang gimana caranya buat menampilkan rumus program kedalam element input misalnya rumus 3+9 kalo mau masukin itu kedalam inputnya gimana bang?
pas banget lgi belajar javascript hahahahaa
bg lanjut strukrur data objek sma properti bg😁😁
bang kok yang saya onmouseover nya tuh harus manual ya harus di klik dulu baru ganti
Mantapp pisann.. thankyou bang dea
semoga gak telat memulai belajar JS
Udh selesai bang tugas nya tapi di gua kok cuma bisa sekali ya bang gua kan pengen berkali2 gtu keluar si huruf sama warna nya abis tugas dibahas dong bang codingan nya
Yuhuu
CUMA DISINI DOANG GW BELAJAR 3 HARI UDAH LANCAR WKWKW, QUIS PUN SKALI SAT SET LGSG SESUAI PERMINTAAN QUIS NYA, TQ BANG DEA , TERUS2IN BAGI ILMU NYA BANG
Msih gk mudeng bg
bang gw kok pake body.append() gk bisa ya tapi giliran pake document.body.apped() bisa padahal udh buat variabel body dlu dan coba juga gk buat variabel body dulu kenapa ya, apa mungkin karna saya gk pake extension tertentu?
Bang Dea bikin tutorial Javascript ini pake ES6 apa 5 bang??
terimakasih
Bang, setiap code harus di beri jarak ke bawah?
Kok gak di jadiin satu kalimat gitu
19:35 bang kenapa saya tidak bisa nge style button nya? Tolong di jawab🙏🙏🙏🙏🙏
Bang, sepemahamanku tentang tugas yang abangnya berikan itu kita disuruh button yang dimana button itu tadi dapat menambahkan kata baru (nama kita) ketika kursor berada didalam button dan akan berubah warna ketika keluar dari button. Betul begitu ya bang?
Terbaek tugasnya bang
Pantesan tadi dibuat kok cuma text pertama yang muncul, ternyata pakai perulangan wkwkwk
ahahha hayoloooo
Bang Deaa tugas yg kedua gmn caranyaa, tolong di bahas, saya otodidak g tau mau nanya siapa, ngerjain besik kaya gitu aja udah ngabisin berjam-jam....
lanjutin smpe ke js backend bang😁👍
bisa sih bang tugasnya, ketika mouse nya di atas tombol, dan ketika tidak di atas tombol, akan keluar kata "halo bung! apa kabar", warna kata nya juga berubah jadi warna lain, akan tetapi ketika mouse nya di atas tombol, terus mousenya keluar dari border tombol, warna kata berpindah ke kata selanjutnya bang bagaimana itu saya bingung tolong coment nya bg
sangat membantu bang semangat
bang itu yang fikri gobles kenapa ga jalan kan dia juga innerText , ga bgerti
punyaku kyk gini jsnya
const body = document.body
const btn = document.querySelector("#btn")
btn.style.fontSize = "30px"
const newtext = document.createElement('div')
newtext.textContent = 'essa'
newtext.style.fontSize = '30px'
function munculintext(){
body.append(newtext)
}
function gantiwarna(){
newtext.style.color = "blue"
}
untuk menampilkan js di bawa index htmlnya bang
Bang kalo muncul tulisan "Cannot set properties of null (setting 'textContent')TypeError" apanya yang salah?
sdh nemu bro? saya juga sama..
Kalo innerHTML bisa ngebaca yang marque hehe jadinya bisa jalan, sedangkan kalo yang text berarti dia cuma pure masukin text yg di input user
bang coba video full javascript tanpa html bisa gak?
16:50 karna marquee itu tag html bang, nah makanya yg gerak cuman innerhtml yg lain nggak
Mntp bg,,,❤❤❤
Jangan dibully ya baru belajar hehe
.
.
.
.
.
.
const defaultText = 'klik Saya 2'
btn2.textContent = defaultText
const newText = document.createElement('p')
body.append(newText)
function mouseOver(){
newText.style.color = 'black'
newText.textContent = "Erland gaul"
}
function mouseOut() {
newText.style.color = 'aqua'
}
ahh sial gw nyari 2 jam sendirian tapi ttp ga ketemu caranya dan alhasil gw tau karna lu,,, apa gw gabisa jdi programmer yah😢
Kenapa gak muncul semua button di bahagian console log? 23:08
truss perbedaan textContent; sama innetText; apa?
Saya pas bagian onmouseover nya malah gak mau muncul bang alertnya padahal kursor nya udah di arahin ke buttonnya😅😅
17:00 saya kira dari tulisan perintahnya sudah jelas, inner html = menambahkan perintah dalam bentuk html, inner text = menambahkan perintah dalam bentuk text
Masih lanjutin cuyuniverse ga bang?
ngamanin website pake javascript,bisa ngk Bang?
mantappp
Bang bahas konekin html+js ke database bang
FIRST KAH BANG HEHE
const body = document.body
const x = document.getElementById ('wakwaw')
const awalnya = 'Klik lah'
x.textContent = awalnya
x.style.background = 'tomato'
x.style.padding = '10px'
x.style.length = '10px'
x.style.borderRadius = '5px'
function o() {
x.style.background = 'black'
x.style.color = 'white'
const kataBaru =document.createElement ('p')
kataBaru.innerHTML = 'WAKWAAAWWWW'
body.append (kataBaru)
}
function i() {
const bismillah = document.getElementById('ampun')
bismillah.style.color = 'blue'
}
Bang, gw udah ikutin cara lo tapi pas di consol dia ga ada titlenya gimana nih ?
Bang kenapa gw ga bisa style di js nya kenapa ya???
Jquery sama DOM fungsinya sama gk sih?
versi gw bang
//buat variable penampung
const body = document.body
const tombol1 = document.querySelector('#btn1')
//variable untuk memunculkan paragraf baru
const muncul_elemen1 = document.createElement('p')
muncul_elemen1.textContent = 'ibnu al hakim'
//styling tombol1
tombol1.style.background = 'orange'
//function ketika cursor digeser masuk ke tombol1
function mouse_masuk(){
body.append(muncul_elemen1)
}
//function ketika cursor digeser keluar dari tombol1
function mouse_keluar(){
muncul_elemen1.style.color = 'yellow'
}
inner html itu kaya html tapi versi ekstern ga si jadi bisa pake tag tag yang ada di html asli
bang, gw pengen belajar logika dimana ya? soal" test junior dev logika semua, dimana gw orang nya agak goblok. tolong pencerahan bang
Hadir bang
Request coba collab sama developer Game Andy Lukito
info abang abang cara supaya codingan berbeda berbeda warnanya soalnya saya sama semua jadi agak pusing
bang apa itu js oop, modules, async, sama standar liblary sumpah pusheng 😭
next time boleh ga bang, tutor python
16:37 kenapa yang "dea afrizal" bergerak dan yang lain tidak,
karena menggunakan innerhtml, apakah benar bang?
karena js nya ngebaca bahwa innerhtml itu bawaan dari html yg di masukkan ke js, tag marquee pun demikian. maka kesimpulannya marquee hanya berfungsi pada inner html karena 2 tag tersebut sama sama bawaan html. CMIIW
Buat yang udah buntu banget ya
.
.
.
.
.
.
klo dari gw sih kurang lebih begini di jsnya.
const body = document.body
const munculText = document.createElement('p')
munculText.textContent = 'Mega Perbawa !'
function newText() {
button.style.background ='aqua'
munculText.style.color = 'black'
body.append(munculText)
}
function ubahWarnaText() {
button.style.background ='white'
munculText.style.color = 'red'
body.append(munculText)
}
tolong bantu gw bang,masih kurang paham, di html nya gk ada yang di ubah kah?,terus di bagian js : const munculText = document.createElement('p') dan munculText.textContent = 'Mega Perbawa !' letak spesifiknya dimana bang?,soalnya di saya gk berhasil
Bang buatin visual basic 6.0 dong, sy dijepang sedang kursus itu
mungkin kalau menggunakan textContent itu hanya isinya saja yang dimasukkan, tetapi kalau menggunakan innerHTML itu bersamaan dengan tag nya
absen di komen dah, nyesel dulu kuliah banyal skip absen wkwkwkwk
bang buat tugas yang terakhir pas onmouseout nya, itu maksudnya kita bikin function ganti warna text yang udah muncul, apa function ganti warna sekaligus munculin text baru dibawahnya?
gua bikinnya function di onmouseout dia ganti warna dan muncul text dibawah teks yang awal, tapi text yang pas muncul di onmouseover nya ga keganti warna, ada saran kah bang?
@@shidqirizkilah4960 sama saya juga gitu
@@shidqirizkilah4960 variablenya taro diluar function nya
Yang bisa munculin tulisan dari kanan ke kiri cuma fungsi innerHTML
Itu kah gampangannya 😅
16:45 karena innert html menyiarkan atau apa ya aaa menampilkan element html bukan bang bener g? Karena Marquee adalaah element html cmiiw
ikut ngumpulin tugas kang dea
const tombol = document.querySelector('#btn2');
const h3 = document.createElement('h3');
const teksH3 = document.createTextNode('Muhammad Farid');
tombol.addEventListener('mouseover', function() {
h3.append(teksH3);
body.append(h3);
h3.style.color = 'black';
})
tombol.addEventListener('mouseout', function() {
h3.style.color = 'salmon';
})
gokil cuyy, makasih banyak udah comment akhirnya terpecah PR kali ini awokwokwok... kalau boleh tahu kegunaan add.even.listener itu buat apa ya ?
btw code ini work sesuai ekspetasi gue
sekali lagi makasih cuy