JavaScript-de DOM bilen işlemegi optimizasiýa etmek

DOM bilen işlemek haýal amaldyr. Şonuň üçin elementleri almagy, maglumatlary okamagy we ýazmagy, esasanam aýlawda, iň aza indirmek gerek.

Geliň, bir mysal göreli. Bizde bir san girizilýän input bolsun:

html<input>

Geliň, fokus ýitirilende, girizilen sanyň bellenen aralykda ýa-da däl-digini barlaýaly:

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

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

Mesele şonda, biz inputdaky tekstden iki gezek okap alýarys, onuň içindäki san bolsa üýtgemeýär. Bu, elbetde, optimal däl. Optimizasiýa edeliň:

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şakdaky kod girizilen bahany barlaýar. Optimizasiýa ýerine ýetiriň:

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şakdaky kod inputa girizilen sanyň birinden bahasyna çenli bolan bitin sanlaryň jemini gözleýär. Optimizasiýa ýerine ýetiriň:

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şakdaky kod inputa girizilen sanyň bölenleriniň jemini gözleýär. Optimizasiýa ýerine ýetiriň:

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şakdaky kod abzaslardaky sanlary kwadratyna göterýär. Optimizasiýa ýerine ýetiriň:

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şakdaky kod, inputa girizilen setiriň uzynlygynyň bellenen aralykda ýa-da däl-digini barlaýar. Optimizasiýa ýerine ýetiriň:

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