›_ ebskola.lv
← Tēma 4.2 →

4.1 Funkcijas un koda atkārtota izmantošana

Stundas uzdevums: Izstrādāt un pielietot atkārtoti izmantojamus koda blokus (funkcijas), lai optimizētu spēles loģiku un izvairītos no koda dublēšanās.

2.6.1. Ievēro programmas pieraksta un strukturēšanas labās prakses ieteikumus; 1.3.4. Izvēlas programmu izvēlētā izstrādājuma īstenošanai.

70 min darba sadalījums: 1. uzdevums (~20 min) - atjauno teorijas piemēru vai minimālo prototipu; 2. uzdevums (~25 min) - pielieto to galvenajā uzdevumā; 3. uzdevums (~25 min) - pārbaudi rezultātu, izlabo kļūdas un tikai beigās pieraksti vienu secinājumu. Papildus/4. līmeņa uzdevums ir paredzēts tikai tad, ja pamatdarbs ir pabeigts.

Pirms sāc: izmanto iepriekš apgūto un šīs lapas teorijas/koda piemērus. Ja vajadzīga jauna komanda vai rīks, vispirms atrodi tās paraugu teorijas sadaļā.

Teorija: Koda "Receptes" (Funkcijas)

Funkcija ir kā recepte – tu to uzraksti vienreiz, bet vari "pagatavot" (izsaukt) cik reizes vien vēlies. Tā ļauj sagrupēt kodu loģiskos blokos.

Praktiskie uzdevumi

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 4.1 Funkcijas un koda atkārtota izmantošana; detalizētu izpratni veidosi nākamajos uzdevumos.

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

<section class="iesildisanas-demo">
  <h2>4.1 Funkcijas un koda atkārtota izmantošana</h2>
  <p id="rezultats">Sākuma teksts</p>
  <button id="poga">Pārbaudīt</button>
</section>
.iesildisanas-demo {
  padding: 16px;
  border: 2px solid #FFB142;
  border-radius: 6px;
}

.iesildisanas-demo button {
  cursor: pointer;
}
const rezultats = document.querySelector("#rezultats");
const poga = document.querySelector("#poga");

poga.addEventListener("click", () => {
  rezultats.textContent = "Kods darbojas: 4.1 Funkcijas un koda atkārtota izmantošana";
});
  1. Atver darba failu vai rīku. Sagataves ievieto atbilstošajos projekta failos: index.html, style.css un script.js.
  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 script.js un pārraksti punktu pievienošanu kā funkciju ar parametru: function pievienotPunktus(daudzums) { punkti += daudzums; atjaunotEkranu(); }
  2. Izsauc pievienotPunktus(10) no kādas pogas HTML failā.
  3. Pievieno funkciju zaudētDzivibu(), kas atņem vienu dzīvību un atjauno <p id="dzivibas">.
  4. Pievieno funkciju restartētSpeli(), kas atjauno gan punktus, gan dzīvības uz sākuma vērtībām.
  5. Pievieno pogas katrai funkcijai un pārbaudi, ka tās darbojas neatkarīgi.
  6. Pārbaudi, ka restartētSpeli() tiešām atjauno visus datus, ne tikai vienu.
  7. Salabo pirmo kļūdu, piemēram, ja funkcija mainīgo nevar atrast (ReferenceError).
  8. Veic git commit -m "Add reusable game functions".

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

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

  1. Atver Console un izsauc pievienotPunktus(50) - pārbaudi, ka punkti atjaunojas ekrānā.
  2. Izsauc pievienotPunktus(50) vēlreiz - pārbaudi, ka rezultāts ir 100, ne 50.
  3. Izsauc zaudētDzivibu() trīs reizes - pārbaudi, ka dzīvību skaits kļūst 0.
  4. Izsauc restartētSpeli() - pārbaudi, ka punkti un dzīvības atgriežas sākuma vērtībās.
  5. Salabo, ja kāda funkcija maina mainīgo, bet ekrāns neatjaunojas.
  6. Pārliecinies, ka visas trīs funkcijas darbojas arī pēc restarta.
  7. Pieraksti vienu secinājumu: kāpēc labāk ir viena funkcija pievienotPunktus(daudzums) nekā divas atsevišķas?

Papildu uzdevums - Pievieno mazu funkciju

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

  1. Pievieno funkciju iestatītLimeni(n), kas maina limenis = n un atjauno <p id="limenis">.
  2. Pievieno pogu "Nākamais līmenis" ar onclick="iestatītLimeni(limenis + 1)".
  3. Atver pārlūkā un nospied pogu vairākas reizes - pārbaudi, ka līmenis pieaug.
  4. Paplašini restartētSpeli(), lai tā arī atjauno limenis = 1.
  5. Pārbaudi, ka "Restarts" atjauno visus trīs: punktus, dzīvības un līmeni.
  6. Veic git commit -m "Add level function and full restart".
  7. Demonstrē klasesbiedram visas pogas - vai viņš saprot, ko katra dara?

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

Koda piemērs

// Globālie mainīgie (redzami visur)
let spelesPunkti = 0;

// 1. Funkcijas definēšana (ar parametru)
function iegutBonuspunktus(lietasVertiba) {
    spelesPunkti = spelesPunkti + lietasVertiba;
    console.log("Iegūti bonusa punkti! Tagad tev ir " + spelesPunkti + " punkti.");
    
    // 2. Funkcija var saturēt IF blokus!
    if (spelesPunkti >= 100) {
        document.getElementById("status").innerText = "Jauns līmenis atbloķēts!";
    }
}

// 3. Funkcijas izsaukšana dažādās situācijās
iegutBonuspunktus(10); // Spēlētājs atrisina īso jautājumu
iegutBonuspunktus(50); // Spēlētājs pabeidz klases izaicinājumu
iegutBonuspunktus(50); // Spēlētājs pabeidz vēl vienu izaicinājumu (kopā 110 punkti -> Jauns līmenis!)
Konsolē:
Iegūti bonusa punkti! Tagad tev ir 10 punkti.
Iegūti bonusa punkti! Tagad tev ir 60 punkti.
Iegūti bonusa punkti! Tagad tev ir 110 punkti.

HTML elementā (#status): Jauns līmenis atbloķēts!
⬅ Tēmas apkopojums Nākamā stunda ➡