JavaScript'te DOM İşlemlerini Optimize Etme

DOM ile çalışmak yavaş bir işlemdir. Bu nedenle, özellikle döngü içinde öğeleri alma, veri okuma ve yazma işlemlerini en aza indirmek gerekir.

Bir örnekle inceleyelim. Bir sayı girilen bir giriş kutumuz olsun:

html<input>

Odak kaybedildiğinde, girilen sayının belirli bir aralıkta olup olmadığını kontrol edelim:

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

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

Sorun şu ki, içindeki sayı değişmese bile giriş kutusundaki metni iki kez okuyoruz. Bu elbette optimal değil. Optimize edelim:

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ğıdaki kod, girilen değeri kontrol ediyor. Optimizasyonu gerçekleştirin:

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ğıdaki kod, giriş kutusuna girilen sayıya kadar olan tam sayıların toplamını buluyor. Optimizasyonu gerçekleştirin:

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ğıdaki kod, giriş kutusuna girilen sayının bölenlerinin toplamını buluyor. Optimizasyonu gerçekleştirin:

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ğıdaki kod, paragraflardaki sayıların karesini alıyor. Optimizasyonu gerçekleştirin:

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ğıdaki kod, giriş kutusuna belirli bir aralıkta uzunluğa sahip bir dizi girilip girilmediğini kontrol ediyor. Optimizasyonu gerçekleştirin:

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