DOM ёрдамида JavaScript да кодини ёзиш бўйича маслаҳатлар

Сизнинг олдингизда ўта мураккаб вазифа турибди, амалга ошириш учун бир қанча сатр код ёзиш зарур деб фараз қилайлик.

Бутун ечимни бирданига ёзиб, сўнгра уни текширишни бошлаш нотўғри ёндашив бўлар эди. Бундай ҳолда, сизнинг ҳеч нарсангиз ишламаслиги мумкин, хатоликни эса кўп миқдордаги коддан излашга тўғри келар эди.

Тўғри ёндашив эса, вазифани кичик элементар қадамларга бўлиб олишдир, уларни амалга ошириб, дароҳ ўзларининг тўғрилигини текшириб боришдир. Бундай ҳолда, хатто агар сиз бирор жойда хатоласангиз ҳам, дароґ муаммони пайқаб, уни тузата оласиз.

Амалиётда синаб кўрайлик. Сизда абзацлар бор деб фараз қилайлик:

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

Сизнинг олдингизда 3 га карата каратма сонли абзацларни топиш ва уларнинг сонлари йиғиндисини топиш вазифаси турибди деб фараз қилайлик.

Биринчи кичик қадам сифатида, бизнинг абзацларимизни массив кўринишида олиш ва бу массивни консолга чиқариб, биз ҳаммасини тўғри олганимизни кўриб чиқишни таклиф қиламан. Буни амалга оширамиз:

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

Кейинги кичик қадамда бизнинг абзацларимизни цикл билан айлантириш ва ҳар бирини консолга алоҳида чиқариш керак:

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

for (let elem of elems) {
	console.log(elem);
}

Энди циклда бизнинг абзацларимизнинг матнларини чиқарайлик:

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

for (let elem of elems) {
	console.log(elem.textContent);
}

Энди сонлари 3 га бўлинадиган абзацларнинг матнларини чиқарайлик:

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

for (let elem of elems) {
	let text = +elem.textContent;
	
	if (text % 3 === 0) {
		console.log(text);
	}
}

Биз тўғри абзацларни олганимизга ишонч ҳосил қилганимиздан сўнг, уларнинг сонларини йиғишни бошлаш мумкин:

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

for (let elem of elems) {
	let text = +elem.textContent;
	
	if (text % 3 === 0) {
		sum += text;
	}
}

console.log(sum);

Йиллар билан рўйхат берилган:

<ul>
	<li>2000</li>
	<li>2004</li>
	<li>2021</li>
	<li>2022</li>
	<li>2025</li>
	<li>2031</li>
</ul>

Рақамлари йиғиндиси 6 га тенг бўлган йилларни олинг. Олинган йилларнинг йиғиндисини топинг.