Animal Trading cards

Learn Web Development at Udacity

...quyidagi JavaScript kodini ishga tushirgandan so‘ng nima sodir bo‘ladi:

const mainHeading = document.querySelector('#main-heading');

mainHeading.classList.toggle('richard');



Izoh:

.classList.toggle(‘myClass’) uslubi classList tarkibida mavjud bo’lmasa myClass sinfni qo’shadi, mavjud bo’lsa agar, olib tashlaydi. Toggle ingliz tilida “ikki holatda almashtirish” ma’nosini anglatadi.

10-Dars. Brauzer hodisalari bilan ishlash

2. Hodisalarga javob berish

1-savol

Quyidagi kodda hodisaning turi qanday?

const lotsOfElements = document.querySelectorAll('.quizzing-quizzby');

const element = lotsOfElements[2];
element.addEventListener('animationend', function () {

const mainHeading = document.querySelector('h1');
mainHeading.style.backgroundColor = 'purple';

});



Izoh:

Ushbu animationend satri hodisa tinglovchisining turi hisoblanadi.

2-savol

Ushbu kod berilgan:

document.addEventListener('keypress', function () {

document.body.remove();

});

Sichqoncha sahifaga bosilganda nima sodir bo‘ladi?

Izoh:

Ushbu kod tinglovchini faqat klavish tugmachasi bosilgandagina o‘rnatadi. Garchi hujjat bosilsa ham hech qanday tinglovchi o‘rnatilmaganligi sababli bosish e’tiborga olinmaydi.

2-savol

Quyidagi interfeyslar haqida o‘ylab ko‘ring:

• 
  EventTarget
  
• 
  Node
  
• 
  Element
  

Bu ikkalasi o‘rtasida farq bormi:

• 
  document.addEventListener()
  
• 
  myHeading.addEventListener() (o‘ylang myHeading variantli elementdir)
  

Javob:

Albatta farq bor, document.addEventListener() hodisa tinglovchisini butun hujjat uchun tayinlaydi, ya’ni foydalanuvchi veb sahifaning ixtiyoriy joyida sichqoncha bilan chertsa, hodisa tinglovchisi ishlaydi, myHeading.addEventListener() esa faqat shu elementni o’ziga.