DOM менен иштөөнү JavaScriptте оптималдаштыруу

DOM менен иштөө жай операция болуп саналат. Ошондуктан элементтерди алууну, маалыматты окууну жана жазууну, айрыкча циклде, минималдаштыруу керек.

Келгиле, мисал менен карап көрөлү. Бизде сан киргизилүүчү input бар дейли:

html<input>

Фокус жоготулганда, киргизилген сан белгилүү диапазондо турганын текшерип көрөлү:

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

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

Көйгөй, биз inputтон текстти эки жолу окуп жатабыз, ал эми андагы сан өзгөрбөйт. Бул, албетте, оптималдуу эмес. Оптималдаштыралы:

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

Төмөнкү код inputко киргизилген санга чейинки бүтүн сандардын суммасын табат. Оптималдаштырууну ишке ашырыңыз:

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

Төмөнкү код inputко киргизилген сандын бөлүүчүлөрүнүн суммасын табат. Оптималдаштырууну ишке ашырыңыз:

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

Төмөнкү код inputко белгилүү диапазондогу узундуктуу сап киргизилгенин текшерет. Оптималдаштырууну ишке ашырыңыз:

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