3.5 Cikli (Loops) un atkārtošanās loģika

Vai gribi lapā parādīt 100 ienaidniekus? Tev nav jāraksta 100 koda rindiņas! Lai liktu datoram atkārtot darbību, mēs izmantojam for ciklu. Tas sastāv no trim svarīgām daļām iekavās, kas atdalītas ar semikolu (;):

Daļa	Kods (Sintakse)	Ko tas nozīmē?
1. Sākums	let i = 0;	Kur sākam skaitīt? Parasti no 0, jo masīvi sākas ar 0.
2. Nosacījums	i < 5;	Cik ilgi atkārtosim? (Kamēr i ir mazāks par 5).
3. Solis	i++	Ko darām pēc katra apļa? Palielinām i par 1.

Kā tas izskatās kopā:

for (let i = 0; i < 5; i++) {
    console.log("Šis teksts parādīsies 5 reizes!");
}

---

Saziņa ar HTML lapu (document.getElementById)

Lai JavaScript varētu dinamiski mainīt to, ko lietotājs redz ekrānā, tam ir jāatrod konkrēts HTML elements. Programmēšanā mēs to panākam ar document.getElementById(), kas sameklē elementu pēc tā unikālā id atribūta. Kad elements ir atrasts, varam mainīt tā saturu, izmantojot .innerHTML (ja satur HTML tagus) vai .innerText (tikai tekstam).

1. HTML sagatave:

<!-- Izveidojam elementu ar unikālu identifikatoru (id) -->
<div id="rezultats">Sākotnējais teksts</div>

2. JavaScript rīcība:

// Atrodam elementu un pārrakstām tā saturu
document.getElementById("rezultats").innerHTML = "Sistēma veiksmīgi ielādēta!";

// Apvienojumā ar 'for' ciklu, lai pakāpeniski papildinātu saturu
document.getElementById("rezultats").innerHTML = ""; // Vispirms iztukšojam saturu
for (let i = 1; i <= 3; i++) {
    // Izmantojam += , lai pievienotu jaunu informāciju klāt esošajai
    document.getElementById("rezultats").innerHTML += "Ielādēts modulis " + i + "<br>";
}

1. uzdevums - Iesildies ar gatavu piemēru

Šis ir īss iesildīšanās uzdevums. Nokopē sagatavi, ielīmē to pareizajā koda vietā un palaid. Šeit pietiek droši izmēģināt tēmu 3.5 Cikli (Loops) un atkārtošanās loģika; detalizētu izpratni veidosi nākamajos uzdevumos.

Kopējamais piemērs vai sagatave: izmanto šo bloku kā starta punktu, nevis kā gala risinājumu.

// Atrodam elementu un pārrakstām tā saturu
document.getElementById("rezultats").innerHTML = "Sistēma veiksmīgi ielādēta!";

// Apvienojumā ar 'for' ciklu, lai pakāpeniski papildinātu saturu
document.getElementById("rezultats").innerHTML = ""; // Vispirms iztukšojam saturu
for (let i = 1; i <= 3; i++) {
    // Izmantojam += , lai pievienotu jaunu informāciju klāt esošajai
    document.getElementById("rezultats").innerHTML += "Ielādēts modulis " + i + "<br>";
}

1. Atver darba failu vai rīku. JavaScript fragmentu ievieto script.js failā vai lapas esošajā skripta daļā.
2. Nokopē visu piemēra bloku no šī uzdevuma un ielīmē to norādītajā vietā.
3. Palaid kodu tieši tādu, kāds tas ir, un pārliecinies, ka parādās rezultāts, izvade vai vismaz nav kļūdas paziņojuma.
4. Atrodi vienu drošu vietu, ko drīkst mainīt: tekstu, skaitli, krāsu, mainīgā vērtību vai testa ierakstu.
5. Maini tikai šo vienu vērtību un palaid kodu vēlreiz.
6. Salīdzini rezultātu pirms un pēc izmaiņas. Ja parādās kļūda, atcel pēdējo izmaiņu un palaid vēlreiz.
7. Turpini pie 2. uzdevuma tikai tad, kad šis mazais piemērs darbojas.

2. uzdevums - Ievieto algoritmu projektā

Pievieno šīs stundas paņēmienu kā nelielu, lietotājam redzamu projekta daļu.

1. Atver index.html un pievieno elementu <div id="ienaidnieki"></div>.
2. Atver script.js un pievieno funkciju radītIenaidniekus(skaits).
3. Iekšā funkcijā vispirms notīri elementu: document.getElementById("ienaidnieki").innerHTML = "";
4. Pievieno for ciklu, kas pievieno skaits reižu <div class='ienaidnieks'>E[i+1]</div>.
5. Pievieno style.css klasi .ienaidnieks { display: inline-block; margin: 4px; padding: 8px; background: #FF5733; color: white; border-radius: 4px; }.
6. Izsauc radītIenaidniekus(5) un atver pārlūkā - pārbaudi, ka redzami 5 sarkani bloki.
7. Salabo, ja ienaidnieki netiek rādīti - pārbaudi innerHTML sintaksi un klases nosaukumu.
8. Veic git commit -m "Generate enemies with for loop".

3. uzdevums - Testē kodu un izdari secinājumu

Pārbaudi, vai algoritms darbojas paredzami vairākās situācijās.

1. Atver pārlūkā un pārbaudi, ka ienaidnieku skaits ekrānā atbilst funkcijas argumentam.
2. Mainī izsaukumu uz radītIenaidniekus(3) - pārbaudi, ka tagad redzami tikai 3 ienaidnieki.
3. Izsauc radītIenaidniekus(0) - pārbaudi, ka nav redzams neviens bloks.
4. Atver DevTools → "Elements" → paplašini #ienaidnieki - pārbaudi, cik <div> elementu ir iekšā.
5. Salabo, ja teksts "E1", "E2" neparādās pareizi - pārbaudi (i + 1) daļu ciklā.
6. Nomaini fona krāsu ienaidniekam CSS failā - pārbaudi, ka mainās visiem vienlaikus.
7. Pieraksti vienu secinājumu: kas notiktu, ja for ciklā aizmirstu i++?

Papildu uzdevums - Pievieno mazu funkciju

Ja pamatdarbs ir pabeigts, paplašini projektu ar vienu nelielu programmētu uzlabojumu.

1. Izveido masīvu let skala = [10, 20, 50, 100, 200];
2. Pievieno elementu <ul id="punktu-skala"></ul> index.html.
3. Pievieno funkciju, kas ar for ciklu izveido <li> katrai vērtībai masīvā.
4. Atver pārlūkā - pārbaudi, ka saraksts parāda visas 5 vērtības.
5. Pievieno nosacījumu: ja vērtība ir > 50, iezīmē to ar style="color: gold;".
6. Veic git commit -m "Display score scale with loop".
7. Parādi klasesbiedram - vai viņš saprot, kāpēc daži punkti izceļas ar citu krāsu?

• Mūžīgais cikls (Infinite Loop): Ja uzrakstīsi i-- (samazināt) vietā i++ (palielināt), nosacījums vienmēr būs patiess. Pārlūks uzkārsies un "iesaldēs" lapu. Rūpīgi pārbaudi cikla soli!
• Komati semikolu vietā: For cikla iekavās trīs daļas ir jāatdala ar semikolu (;), nevis komatu. for (let i = 0, i < 5, i++) izmetīs kļūdu.
• Kļūda "undefined" pēdējā aplī: Ja izmantosi i <= masivs.length (mazāks vai vienāds), cikls mēģinās nolasīt neeksistējošu elementu. Indeksi beidzas pirms garuma, tāpēc izmanto tikai < (mazāks).