ebSkola

3. tēma / 3.4

3.4 Masīvs: spēlētāja priekšmetu saraksts

Šodien: Izveido priekšmetu sarakstu, kuru spēlētājs papildina ar pogu.

Īsā teorija

Masīvs ir vērtību saraksts kvadrātiekavās. Tekstus atdala ar komatiem.

manta[0] ir pirmais priekšmets. Skaitīšana sākas ar nulli.

manta.push("atslēga") pievieno priekšmetu; manta.length pasaka to skaitu. const saraksta saturu drīkst papildināt. 

const manta = ["karte", "lukturis"];
manta.push("atslēga");

Sākuma kods un darba vieta

Vide: mācību lapa → VS Code

  1. VS Code ar File → Open Folder atver Desktop/datorika9-tema3 . Ja mapes nav, izveido to darbvirsmā.
  2. Šajā mācību lapā nospied Kopēt sākuma kodu .
  3. VS Code nospied Ctrl+N un ielīmē kodu ar Ctrl+V .
  4. Saglabā ar Ctrl+Shift+S tēmas mapē kā 34.html .
Lejupielādēt 34.html

Atvērt pilno sākuma kodu 
<!DOCTYPE html>
<html lang="lv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mana spēle</title>
<style>
body { font-family: Arial, sans-serif; max-width: 680px; margin: 24px auto; padding: 16px; line-height: 1.6; }
button, input { font: inherit; padding: 10px; margin: 4px; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

</style>
</head>
<body>
<h1>Spēlētāja soma</h1>
<p id="soma"></p>
<p id="skaits"></p>
<button onclick="pievienot()">Paņemt atslēgu</button>
<script>
const manta = ["karte", "lukturis"];
// Gatava parādīšana. join savieno saraksta tekstus.
function paradit() {
  document.getElementById("soma").textContent = manta.join(", ");
  document.getElementById("skaits").textContent = "Priekšmetu skaits: " + manta.length;
}
function pievienot() {
  manta.push("atslēga");
  paradit();
}
paradit();
</script>
</body>
</html>

1. uzdevums

Izveido savu somu

Vide: VS Code

  1. Sāc ar 34.html .
  2. Saraksta pirmajā rindā ieraksti trīs savai spēlei vajadzīgus priekšmetus.
  3. Starp tekstiem atstāj komatus un katru tekstu ieliec pēdiņās.

Gatavs, kad: Sākuma sarakstā ir trīs priekšmeti.

2. uzdevums

Pielāgo priekšmeta pogu

Vide: VS Code

  1. Funkcijā pievienot() nomaini push iekavās esošo tekstu.
  2. Nomaini pogas tekstu, lai tas pasaka, kuru priekšmetu pievienos.
  3. Saglabā paradit(); , kas atjauno sarakstu lapā.

Gatavs, kad: Pogas teksts atbilst pievienotajam priekšmetam.

3. uzdevums

Parādi pirmo priekšmetu un pārbaudi

Vide: VS Code → pārlūks

  1. HTML zem virsraksta pievieno <p id="pirmais"></p> .
  2. Funkcijā paradit() pievieno document.getElementById("pirmais").textContent = "Pirmais: " + manta[0]; .
  3. Atver lapu no jauna. Pārbaudi sākuma skaitu 3; pēc diviem klikšķiem jābūt 5. Pirmā priekšmeta nosaukumam jāsakrīt ar sarakstu.
  4. Saglabā un nosūti darbu uz GitHub.

Gatavs, kad: Lapa parāda sarakstu, pirmo priekšmetu un pareizo skaitu.

Iesniedz 3. uzdevuma rezultātu

Iesniedz pabeigto 34.html skolotāja norādītajā vietā. Šo pašu versiju saglabā arī GitHub.

Stunda ir ieskaitīta, ja 3. uzdevuma rezultāts atbilst visiem šiem punktiem:

  • Sākumā ir trīs paša izvēlēti priekšmeti.
  • Poga pievieno tekstā norādīto priekšmetu; divi klikšķi palielina skaitu līdz 5.
  • Atsevišķi parādīts pirmais saraksta priekšmets ar manta[0].

1. un 2. uzdevums sagatavo šo rezultātu. Papildu uzdevums nav vajadzīgs ieskaitei.

Saglabā un nosūti uz GitHub — pogu atgādne

Vide: VS Code / Source Control → GitHub pārlūkā

  1. Ar File → Save All saglabā failus. Atver Source Control ar Ctrl+Shift+G .
  2. Pie Changes nospied + (Stage All Changes). Pārbaudi, ka vajadzīgie faili pārvietojas uz Staged Changes .
  3. Ziņas laukā ieraksti īsu izmaiņu, piemēram, Pabeigts 3.4 darbs . Spied Commit .
  4. Ja šī tēmas mape vēl nav GitHub, spied Publish to GitHub un izveido publisku projektu datorika9-tema3 . Jau publicētam projektam spied Sync Changes . Ja pogas nav, atver … → Push .
  5. Pārlūkā atver savu GitHub projektu un pārbaudi faila pēdējās izmaiņas.

Ja Source Control rāda Initialize Repository , vispirms nospied to. Ja parādās kļūda vai sapludināšanas pieprasījums, izmanto palīdzību un palūdz skolotāja atbalstu.

Papildu uzdevums: Parādi pēdējo priekšmetu

Sāc, kad 3. uzdevums ir gatavs un iesniegts. Ja vēlies paturēt obligāto versiju, saglabā kopiju ar citu nosaukumu.

  1. Pievieno HTML rindkopu ar id="pedejais" .
  2. Funkcijā parādi manta[manta.length - 1] pēc pirmā priekšmeta parauga.
Ja kaut kas neizdodas

Palīdzība Git, kontam un darba atvēršanai

Skolotājam: sasniedzamo rezultātu saistība

Šajā nodarbībā vingrina šādu rezultātu daļas no 9. klases saraksta . Piesaiste pati par sevi nenozīmē visa rezultāta apguvi.

SR 2.6.1

Kursa nosacījumi un satura pārklājums