JavaScript-те DOM-мен жұмыс істеуді оңтайландыру

DOM-мен жұмыс істеу баяу операция болып табылады. Сондықтан элементтерді алуды, деректерді оқу мен жазуды, әсіресе цикл ішінде, minimum деңгейге дейін азайту керек.

Мысал арқылы қарастырайық. Бізде сан енгізілетін енгізу өрісі бар болсын:

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