3.5. tēma: Cikli (Loops) un atkārtošanās loģika

Tavs šīs stundas izaicinājums: Izstrādāt ciklisku algoritmu, lai automātiski apstrādātu datu masīvus un ģenerētu HTML saturu, izvairoties no manuālas koda pārrakstīšanas.

2.6.1. Pieraksta, lasa un izpilda algoritmus ar cikliskām darbībām; 5.2.1. Problēmrisināšana un optimizācija.

Teorija: Automātiskais dzinējs (For cikls)

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!");
}

1. uzdevums: "Laika atskaite" (15 min)

Uzrakstīt savu pirmo ciklu, kas automātiski izvada skaitļu virkni, reaģējot uz lietotāja klikšķi.

Izpildes soļi:

  1. HTML failā izveido pogu: <button onclick="saktAtskaiti()">Sākt atskaiti</button>.
  2. Savā script.js failā izveido funkciju saktAtskaiti().
  3. Funkcijas iekšienē izveido ciklu: for (let i = 1; i <= 5; i++) { ... }.
  4. Cikla figūriekavās ieraksti komandu: console.log("Aplis numur: " + i);.
  5. Spied pogu pārlūkā un apskaties konsolē – tu redzēsi piecus ziņojumus uzreiz!

2. uzdevums: "Burvju dziru brūvēšana" (20 min)

Savienot ciklu ar masīvu, lai dators pats "izietu cauri" visiem spēlētāja inventāra priekšmetiem.

Izpildes soļi:

  1. HTML failā izveido pogu "Pārbaudīt krājumus".
  2. JS failā, ārpus funkcijām, izveido masīvu: let krajumi = ["Ūdens", "Sēnes", "Zelts", "Krupja acs"];.
  3. Izveido jaunu funkciju pogai. Tajā raksti ciklu: for (let i = 0; i < krajumi.length; i++) { ... }. (Pievērs uzmanību: mēs izmantojam .length, lai dators pats zina, cik mantu ir!)
  4. Cikla iekšpusē izvadi katru elementu konsolē: console.log("Sastāvdaļa atrasta: " + krajumi[i]);. Mainīgais i katrā aplī kļūs par nākamo indeksu (0, 1, 2, 3).

3. uzdevums: Interaktīvā inventāra drukāšana (20 min)

Izmantot ciklu, lai automātiski ģenerētu HTML sarakstu spēles tīmekļa lapā, nevis tikai konsolē.

Izpildes soļi:

  1. HTML failā pievieno tukšu sarakstu un dod tam ID: <ul id="inventara-saraksts"></ul>. Pievieno arī pogu "Rādīt inventāru lapā".
  2. JS failā izveido funkciju. Vispirms atrodi HTML sarakstu:
    let saraksts = document.getElementById("inventara-saraksts");
  3. Pirms cikla iztukšo sarakstu, lai mantas nedublētos, ja pogu spiedīs vairākkārt: saraksts.innerHTML = "";
  4. Uzraksti for ciklu, kas iet cauri krajumi.length.
  5. Cikla iekšpusē izmanto += (pievienot klāt), lai ģenerētu HTML:
    saraksts.innerHTML += "<li>" + krajumi[i] + "</li>";.

4. uzdevums: Izaicinājums – Briesmoņu klonēšana (15 min)

Izveidot vizuālu ciklu, kas uzģenerē lietotāja izvēlētu skaitu elementu uz ekrāna.

Izpildes soļi:

  1. HTML failā izveido tukšu <div id="arēna"></div> un pogu "Izsaukt briesmoņus".
  2. JS funkcijā pajautā lietotājam skaitu: let skaits = Number(prompt("Cik briesmoņus izsaukt?"));
  3. Uzraksti for ciklu, kurš atkārtojas tik reizes, cik ievadīja lietotājs (i < skaits).
  4. Cikla iekšpusē pievieno arēnai Emoji:
    document.getElementById("arēna").innerHTML += "👺 ";
  5. Spied pogu un liec datoram uzģenerēt 100 briesmoņus vienā sekundē! Neaizmirsti veikt Commit & Push.

Biežākās kļūdas (un kā tās labot):

Koda piemērs

let labakieSpeletaji = ["Jānis", "Anna", "Pēteris", "Līga"];

// Atrodam HTML elementu (tukšu <ul> sarakstu)
let sarakstaElements = document.getElementById("top-saraksts");

// Cikls izies cauri visiem 4 spēlētājiem (indeksi 0, 1, 2, 3)
for (let i = 0; i < labakieSpeletaji.length; i++) {
    // Katru apmācāmo pievienojam kā jaunu <li> elementu
    sarakstaElements.innerHTML += "<li>" + (i+1) + ". vieta: " + labakieSpeletaji[i] + "</li>";
}
HTML lapā ģenerētais rezultāts:
  • 1. vieta: Jānis
  • 2. vieta: Anna
  • 3. vieta: Pēteris
  • 4. vieta: Līga
⬅ Iepriekšējā stunda Nākamā stunda ➡