JavaScriptда DOM билан ишлашни оптимизациялаш

DOM билан ишлаш секин амалдир. Шунинг учун элементларни олиш, маълумотларни ўқиш ва ёзишни, ахусса цикл ичида, минимал darajada чеклаш керак.

Келгила, мисолда кўрамиз. Фарз қилайлик, бизда киритиладиган сон бўлган инпут мавжуд:

html<input>

Келгила, фокус йўқотилганда, киритилган сон белгиланган диапозонда эканини текширамиз:

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

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

Муаммо шундаки, биз инпутдан матнни икки марта ўқиёміз, ҳолбуки ундаги сон ўзгармайди. Бу, албатта, оптимал эмас. Оптимизация қилайлик:

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

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

Задание 1

Қуйидаги код киритилган қийматни текширади. Оптимизацияни бажаринг:

html<input>

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

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

Задание 2

Қуйидаги код инпутга киритилган сонгача бўлган бүт сонлар йиғиндисини топади. Оптимизацияни бажаринг:

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

Қуйидаги код инпутга киритилган соннинг бўлувчилари йиғиндисини топади. Оптимизацияни бажаринг:

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

Қуйидаги код абзацлардаги сонларни квадратга кўтаради. Оптимизацияни бажаринг:

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

Қуйидаги код инпутга белгиланган диапозон узунлигидаги сатр киритилганлигини текширади. Оптимизацияни бажаринг:

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('---');
  }
});