3.4 Masīvi (Arrays) un datu strukturēšana

Mainīgais ir kā viena kaste. Bet ko darīt, ja klasei ir projekta materiālu saraksts ar 10 lietām? Mēs izmantojam masīvu (Array) – tas ir kā vilciens, kur katrā vagonā ir savs saturs. Programmēšanā vagonus (indeksus) sāk skaitīt no 0!

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.4 Masīvi (Arrays) un datu strukturēš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>3.4 Masīvi (Arrays) un datu strukturēš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: 3.4 Masīvi (Arrays) un datu strukturēš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 izveido masīvu: let rezultati = [];
2. Pievieno index.html saraksta elementu <ul id="rezultatu-saraksts"></ul>.
3. Pievieno script.js funkciju paradītRezultatus(), kas ar innerHTML izveido <li> elementu katram rezultātam.
4. Pievieno funkciju pierakstitRezultatu(p), kas izsauc rezultati.push(p) un tad paradītRezultatus().
5. Pievieno pogu "Iesniegt rezultātu" un izsauc pierakstitRezultatu(punkti) no tās.
6. Saglabā un atver pārlūkā - iesniegt dažus rezultātus un pārbaudi, ka saraksts pieaug.
7. Salabo, ja saraksts netiek atjaunots - pārbaudi, vai innerHTML tiek notīrīts pirms jauna satura.
8. Veic git commit -m "Add highscore array and display".

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

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

1. Atver Console un ieraksti rezultati - pārbaudi, ka redzams masīvs ar iepriekš ievadītajiem datiem.
2. Ieraksti rezultati.push(999) - pārbaudi, ka saraksts ekrānā atjaunojas ar jaunu elementu.
3. Ieraksti rezultati[0] - pārbaudi, ka izvadās pirmais (ne otrais) elements.
4. Ieraksti rezultati.length - pārbaudi, ka tas sakrīt ar reālo elementu skaitu lapā.
5. Salabo, ja saraksts rāda nepareizu skaitu vai secību.
6. Pievieno pogu "Notīrīt", kas izsauc rezultati = []; paradītRezultatus();.
7. Pieraksti vienu secinājumu: kāpēc masīvs ir ērtāks nekā daudzi atsevišķi mainīgie.

Papildu uzdevums - Pievieno mazu funkciju

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

1. Atrodi lielāko rezultātu masīvā: let labakais = Math.max(...rezultati);
2. Pievieno elementu <p id="labakais"></p> un atjauno to pēc katras iesniegšanas.
3. Atver pārlūkā, ievadi vairākus dažādus rezultātus - pārbaudi, ka "Labākais" atjaunojas.
4. Pārbaudi tukšu masīvu (rezultati = []) - vai Math.max() neatgriež -Infinity?
5. Nodrošini, ka tukšā gadījumā ekrānā parādās "Vēl nav rezultātu" nevis kļūda.
6. Veic git commit -m "Track and display best score".
7. Demonstrē klasesbiedram - vai labākais rezultāts redzami izceļas starp pārējiem?

• Nobīde par viens (Off-by-one error): Mēģinot dabūt pirmo elementu ar masivs[1]. Atceries: pirmā elementa numurs ir 0!
• Neatrodams elements (undefined): Ja masīvā ir 3 lietas (indeksi 0, 1, 2) un tu prasi masivs[3], JavaScript atbildēs ar "undefined", jo ceturtā vagona nav.
• Kvadrātiekavu sajaukšana ar figūriekavām: Masīvi izmanto [ ], nevis { }. Figūriekavas kalpo objektu izveidei un funkciju blokiem.