Оптимизатсияи коркард бо DOM дар JavaScript

Коркард бо DOM амали камест. Аз ин рӯ, зарур аст, гирифтани унсурҳо, хондан ва навиштан маълумотҳо, хусусан дар ҳалқа, ба ҳадди имкон кам карда шавад.

Биёед мислан назар андозем. Фарз мекунем, ки мо инпут дорем, ки ба он рақам дохил карда мешавад:

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