Belajar Dasar Pemrograman Javascript - DOM

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 ✨

🍌 full playlist disini 🍌

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

Join this channel to get access to perks:

#programming #tutorial #coding

=================
💌 Email (for business) 💌
==================

🔻🔻🔻 SUBSCRIBE 🔻🔻🔻
For More Update
🔺🔺🔺LONCENGNYA 🔺🔺🔺

[chandrahndrna]

karna menggunakan innerHTML, <marquee> adalah element yang hanya berjalan di HTML jadi nanti dia bacanya <marquee>" Test "</marquee>, sedangkan kalau pake innerText sama textContent dia hanya akan baca itu sebagai text ( " <marquee>" Test " </marquee> " ).

[Termoic]

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
contoh innerHTML:
didalam html akan terbaca seperti

[mayomayodhaf]

pembawaan materinya ngebuat penjelasannya jadi lebih mudah untuk dimengerti dan ga ngenakutin. Terima kasih banyak videonya bang!

[fmssudiang]

karna menggunakan innerHTML artinya kita memasukan element HTML kedalam body, sehingga marquee yang merupakan element html bisa terbaca

[kra-fy]

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 (mengambil masa 5 minit untuk memahaminya tanpa menggunakan chatgpt, google atau segala macam hehe😁)

[KelasAutomation]

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

[ibnualhakim]

versi gw bang

//buat variable penampung
const body = document.body
const tombol1 =

//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'
}

[raehanramadhan]

Bener bang Dea
<button
id="butt"
onclick="klikButton()"
onmouseover="ubahText()"
onmouseout="keluarText()"
></button>

<script>
const btn =

// 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";
}
}
</script>

[edmenang]

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

[arkasyah]

akhhir nya bisa 🤯 :
const btn2 =
const body = document.body;

function addText() {
const newText = document.createElement("p");
newText.textContent = "Muhammad Arka";
body.append(newText);
}

function changeColor() {
const tagP =
for (let i = 0; i < tagP.length; i++) {
tagP[i].style.color = "aqua";
}
}

[firdausfitri]

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

[khusnimubarok]

//mencari objeck di dalam html
const 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 = mubarok')
//menggabungkan value dan paragraf
paragraf.appendChild(text);
//ketika paragraf sudah dipanggil maka kita masukkan element ke dalam body
const itemNew =

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

[megaperbawa]

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

[ibnualhakim]

wow, powerful bgt ya si JS ini. pantesan ada posisi full stack

[muhammadabdillahasyhar]

Akhirnya dibuat juga, thank you bang sangat membantu untuk proses belajar 🙏🙏

[yudahidayat]

function newtext() {
const newtext = document.createElement('h1')
newtext.textContent = 'muncul saat mouseover'
body.append(newtext)
}

function updatecolortext() {
const geth1 = document.querySelector('h1')
geth1.style.color = 'blue'
}

awalnya pusing mikir mikir dulu, coba coba dan codingan seperti itu berhasil hehehe

[erlandwowor]

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'
}

[haryorachmadityaw]

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

[galihpurwo]

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

[aslaycr]

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