DOM ilə işi JavaScript-də optimallaşdırmaq

DOM ilə iş yavaş əməliyyatdır. Ona görə də elementlərin alınmasını, məlumatların oxunması və yazılmasını minimuma endirmək lazımdır, xüsusən də dövr içərisində.

Gəlin bir nümunəyə baxaq. Tutaq ki, bizim rəqəm daxil edilən bir inputumuz var:

html<input>

Gəlin fokus itirildikdə yoxlayaq ki, daxil edilmiş rəqəm təyin edilmiş aralıqdadırmı:

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

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

Problem ondadır ki, biz inputun dəyərini iki dəfə oxuyuruq, baxmayaraq ki, ondakı rəqəm dəyişmir. Bu, əlbəttə ki, optimal deyil. Gəlin optimallaşdıraq:

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

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

Задание 1

Aşağıdakı kod daxil edilmiş dəyəri yoxlayır. Optimallaşdırmanı yerinə yetirin:

html<input>

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

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

Задание 2

Aşağıdakı kod inputa daxil edilmiş rəqəmə qədər olan tam ədədlərin cəmini tapır. Optimallaşdırmanı yerinə yetirin:

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

Aşağıdakı kod inputa daxil edilmiş rəqəmin bölənlərinin cəmini tapır. Optimallaşdırmanı yerinə yetirin:

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

Aşağıdakı kod abzaslardakı rəqəmləri kvadrata yüksəldir. Optimallaşdırmanı yerinə yetirin:

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

Aşağıdakı kod yoxlayır ki, inputa müəyyən edilmiş aralıqda uzunluğu olan sətir daxil edilibmi. Optimallaşdırmanı yerinə yetirin:

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