JavaScript හි DOM ක්‍රියාකාරිත්වය හොඳින් සකස් කිරීම

DOM සමඟ වැඩ කිරීම යනු මන්දගාමී මෙහෙයුමකි. එමනිසා, අංග ලබා ගැනීම, දත්ත කියවීම සහ ලිවීම අවම කළ යුතුය, විශේෂයෙන් ලූපයක් තුළ.

අපි උදාහරණයක් බලමු. අපට අංකයක් ඇතුළත් කළ හැකි ආදාන ක්ෂේත්‍රයක් ඇතැයි සිතමු:

<input>

අවධානය අහිමි වූ විට, ඇතුළත් කරන ලද අංකය නියමිත පරාසයක පවතිනවාද යන්න පරීක්ෂා කරමු:

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

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

ප්‍රශ්නය නම්, අපි ආදාන ක්ෂේත්‍රයෙන් පෙළ දෙවරක් කියවන නමුත් එහි අංකය වෙනස් නොවේ. ඇත්ත වශයෙන්ම, මෙය ප්‍රශස්ත නොවේ. අපි දැන් හොඳින් සකස් කරමු:

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

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

පහත කේතය ඇතුළත් කරන ලද අගය පරීක්ෂා කරයි. හොඳින් සකස් කිරීම සිදු කරන්න:

<input>

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

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

පහත කේතය ආදාන ක්ෂේත්‍රයට ඇතුළත් කරන ලද අංකය දක්වා පූර්ණ සංඛ්‍යාවල එකතුව සොයයි. හොඳින් සකස් කිරීම සිදු කරන්න:

<input>

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

input.addEventListener('blur', function() {
	let sum = 0;
	
	for (let i = 1; i <= +input.value; i++) {
		sum += i;
	}
	
	console.log(sum);
});

පහත කේතය ආදාන ක්ෂේත්‍රයට ඇතුළත් කරන ලද අංකයේ බෙදුම්කරුවන්ගේ එකතුව සොයයි. හොඳින් සකස් කිරීම සිදු කරන්න:

<input>
<div></div>

let 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;
		}
	}
});

පහත කේතය ඡේදවල ඇති සංඛ්‍යා වර්ග කරයි. හොඳින් සකස් කිරීම සිදු කරන්න:

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.textContent = elem.textContent * elem.textContent;
}

පහත කේතය ආදාන ක්ෂේත්‍රයට නියමිත පරාසයක දිගැති පේළියක් ඇතුළත් කර ඇත්දැයි පරීක්ෂා කරයි. හොඳින් සකස් කිරීම සිදු කරන්න:

<input data-min="5" data-max="10">

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