Vinkkejä koodin kirjoittamiseen DOM:n avulla JavaScriptissä

Oletetaan, että edessäsi on riittävän monimutkainen tehtävä, jonka toteuttamiseksi täytyy kirjoittaa tietty määrä koodirivejä.

Väärä lähestymistapa olisi yrittää kirjoittaa koko ratkaisun koodi kerralla, ja vasta sitten aloittaa sen testaaminen. Tässä tapauksessa on suuri todennäköisyys, että mikään ei toimi, ja virhe täytyy etsiä suuresta määrästä koodia.

Oikea lähestymistapa on jakaa tehtävä pieniin perusasioihin, jotka toteutat ja tarkistat heti niiden oikeellisuuden. Tässä tapauksessa, vaikka tekisit virheen jossain, huomaat sen välittömästi ongelman ja korjaat sen.

Kokeillaan käytännössä. Oletetaan, että sinulla on kappaleet:

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

Oletetaan, että tehtävänä on löytää kappaleet, joiden numerot ovat 3:lla jaettavia, ja laskea niiden numeroiden summa.

Ensimmäisenä pienenä askeleena ehdotan, että saamme kappaleemme taulukkona ja tulostamme tämän taulukon konsoliin, jotta voimme tarkistaa, saimmeko kaiken oikein. Tehdään se:

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

Seuraavaksi pienenä askeleena täytyy käydä läpi kappaleemme silmukalla ja tulostaa jokainen niistä erikseen konsoliin:

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

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

Ja nyt silmukassa tulostetaan kappaleidemme tekstit:

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

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

Nyt tulostetaan tekstit niistä kappaleista, joiden numero on jaollinen 3:lla:

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

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

Varmistettuaan, että saamme oikeat kappaleet, voidaan aloittaa niiden numeroiden summaaminen:

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

Annettu lista vuosista:

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

Hanki vuodet, joiden numeroiden summa on 6. Laske saatujen vuosien summa.