JavaScript-da DOM bilan ishlashni optimallashtirish

DOM bilan ishlash sekin amal hisoblanadi. Shuning uchun elementlarni olish, ma'lumotlarni o'qish va yozish, ayniqsa tsikl ichida, minimal darajada cheklash kerak.

Keling, bir misolni ko'rib chiqaylik. Faraz qilaylik, bizda raqam kiritiladigan kirish maydoni mavjud:

html<input>

Kiritilgan raqam belgilangan oralig'ida ekanligini tekshirish uchun fokus yo'qolganida quyidagini bajaraylik:

javascriptlet input = document.querySelector('input');

input.addEventListener('blur', function() {
  if (+input.value > 0 && +input.value <= 10) {
    console.log('+++');
  } else {
    console.log('---');
  }
});

Muammo shundaki, biz inputdagi matnni ikki marta o'qiymiz, garchi undagi raqam o'zgarmasa ham. Bu, albatta, optimal emas. Keling, optimallashtiramiz:

javascriptlet input = document.querySelector('input');

input.addEventListener('blur', function() {
  let num = +input.value;
  
  if (num > 0 && num <= 10) {
    console.log('+++');
  } else {
    console.log('---');
  }
});

Задание 1

Quyidagi kod kiritilgan qiymatni tekshiradi. Optimallashtirishni bajaring:

html<input>

javascriptlet input = document.querySelector('input');

input.addEventListener('blur', function() {
  if (input.value === '1' || input.value === '2') {
    console.log('+++');
  } else {
    console.log('---');
  }
});

Задание 2

Quyidagi kod inputga kiritilgan raqamgacha bo'lgan butun sonlar yig'indisini topadi. Optimallashtirishni bajaring:

html<input>

javascriptlet input = document.querySelector('input');

input.addEventListener('blur', function() {
  let sum = 0;
  
  for (let i = 1; i <= +input.value; i++) {
    sum += i;
  }
  
  console.log(sum);
});

Задание 3

Quyidagi kod inputga kiritilgan raqamning bo'luvchilari yig'indisini topadi. Optimallashtirishni bajaring:

html<input>
<div></div>

javascriptlet input = document.querySelector('input');

input.addEventListener('blur', function() {
  let sum = 0;
  
  for (let i = 1; i <= +input.value; i++) {
    if (input.value % i === 0) {
      sum += i;
      
      let div = document.querySelector('div');
      div.textContent = sum;
    }
  }
});

Задание 4

Quyidagi kod abzatslardagi raqamlarni kvadratga ko'taradi. Optimallashtirishni bajaring:

html<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.textContent = elem.textContent * elem.textContent;
}

Задание 5

Quyidagi kod inputga belgilangan oraligdagi uzunlikdagi satr kiritilganligini tekshiradi. Optimallashtirishni bajaring:

html<input data-min="5" data-max="10">

javascriptlet inp = document.querySelector('input');

inp.addEventListener('blur', function() {
  if (inp.dataset.min > inp.value.length || inp.dataset.max < inp.value.length) {
    console.log('+++');
  } else {
    console.log('---');
  }
});