Kompyuterni tashkil etish fanidan tayyorlagan taqdimoti

1.

• Zahiriddin Muhammad Bobur nomidagi
Andijon davlat universiteti 2-bosich sirtqi
• Kompyuter injiniringi At-servis yoʻnalishi
201- guruh talabasi
• Yodgorov Asliddinning
• Kompyuterni tashkil etish fanidan
tayyorlagan taqdimoti

2.

JavaScript yordamida
Dinamik Elementlar
Qo‘shish
Ushbu taqdimotda JavaScript yordamida dinamik elementlarni
qo‘shish usullari ko'rib chiqiladi. Veb-dizaynda dinamik elementlarning
ahamiyati va ularni yaratish bosqichlari tushuntiriladi.

3.

HTML Elementlarini Yaratish
createElement() metodi
Element turlari
document.createElement()` metodi orqali yangi elementlar
Element turlari: div, p, span va hokazo.
yaratiladi.
Misol: `let yangiDiv = document.createElement('div');`

4.

Elementlarga Matn
Qo‘shish
textContent xususiyati
createTextNode()
metodi
`element.textContent`
`document.createTextNode()`
xususiyati orqali matn
metodi bilan matn tugunini
qo'shiladi.
yaratish mumkin.
Misol
`yangiDiv.textContent = 'Salom Dunyo!';`

5.

Elementlarga Attributlar Qo‘shish
setAttribute() metodi
Misol
Muhim atributlar
`element.setAttribute()` metodi orqali
`yangiDiv.setAttribute('id', 'asosiyDiv');`
Muhim atributlar: class, id, style, src,
atributlar qo'shiladi.
href va hokazo.

6.

Elementlarni Sahifaga Joylashtirish
appendChild() metodi
`appendChild()` metodi orqali elementlar sahifaga joylashtiriladi.
insertBefore() metodi
`insertBefore()` metodi bilan elementlarni oldinga joylashtirish mumkin.
Misol
`document.body.appendChild(yangiDiv);`

7.

Elementlarni O'chirish va
Almashtirish
1
removeChild() metodi
`removeChild()` metodi orqali elementlar o'chiriladi.
2
replaceChild() metodi
`replaceChild()` metodi bilan elementlar almashtiriladi.
3
Misol
`document.body.removeChild(yangiDiv);`

8.

Voqealar (Events) bilan Ishlash
Misol
2
`tugma.addEventListener('click',
function() { /* Kod */ });`
addEventListener() metodi
1
`addEventListener()` metodi orqali
voqealarni tinglash mumkin.
Voqealar turlari
Voqealar turlari: click, mouseover,
3
keypress va hokazo.

9.

Dinamik Ro'yxatlar Yaratish
Ma'lumotlar massivi
1
Ro'yxat elementlarini yaratish
2
3
for tsikli
`for` tsikli yordamida ro'yxat elementlarini dinamik yaratish. Malumotlar massividan ro'yxat elementlarini dinamik yaratish
va sahifaga joylashtirish.

10.

Real Misollar
Dinamik formalar
Ma'lumotlarni yuklash
Interaktiv ilovalar
Foydalanuvchi interfeysida dinamik
Dinamik tarzda ma'lumotlarni yuklash
Interaktiv veb-ilovalar yaratishda
formalar yaratish.
va ko'rsatish.
dinamik elementlarning roli.

11.

Xulosa
1 Afzalliklari
2 O'rganishlar
Dinamik elementlarni
Kelajakdagi o'rganishlar va
yaratishning afzalliklari.
resurslar.
3 Savollar
Savollar uchun vaqt.