ebSkola

3. tēma / 3.2

3.2 Ievadi tekstu un aprēķini punktus

Šodien: Izveido formu, kas no ievadītā skaita aprēķina spēlētāja punktus.

Īsā teorija

<input> ir ievades lauks. .value nolasa tajā ierakstīto tekstu.

Number(...) pārvērš ievadi skaitlī. * nozīmē reizināšanu.

Gatavā funkcija paradit() izpildās, kad nospiež pogu. Šodien tajā mainīsi aprēķinu un rezultāta tekstu. 

const skaits = Number(document.getElementById("skaits").value);
const punkti = skaits * 5;

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ā 32.html .
Lejupielādēt 32.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 dati</h1>
<label for="vards">Spēlētāja vārds</label>
<input id="vards" value="Spēlētājs">
<label for="skaits">Savākto zvaigžņu skaits</label>
<input id="skaits" type="number" min="0" value="2">
<button onclick="paradit()">Parādīt rezultātu</button>
<p id="atbilde">Nospied pogu.</p>
<script>
// Gatava funkcija: poga izpilda rindas starp figūriekavām.
function paradit() {
  const vards = document.getElementById("vards").value;
  const skaits = Number(document.getElementById("skaits").value);
  const punkti = skaits * 5;
  document.getElementById("atbilde").textContent = vards + ": " + punkti + " punkti";
}
</script>
</body>
</html>

1. uzdevums

Izmēģini ievadi

Vide: VS Code → pārlūks

  1. Sāc ar 32.html un atver to pārlūkā.
  2. Ieraksti spēlētāja vārdu un skaitu 2 . Nospied pogu.
  3. Pārliecinies, ka parādās ierakstītais vārds un 10 punkti .

Gatavs, kad: Esi pārbaudījis gatavo ievadi un aprēķinu.

2. uzdevums

Maini punktu vērtību

Vide: VS Code

  1. Atrodi const punkti = skaits * 5; .
  2. Nomaini vienas zvaigznes vērtību no 5 uz 10 .
  3. Virs pogas HTML daļā pievieno rindkopu Viena zvaigzne dod 10 punktus. .

Gatavs, kad: Aprēķins un norāde lapā izmanto 10 punktus.

3. uzdevums

Pievieno bonusu un pārbaudi

Vide: VS Code → pārlūks

  1. Aprēķinu papildini līdz const punkti = skaits * 10 + 5; .
  2. Rindkopā paskaidro, ka spēlētājs saņem arī 5 sākuma punktus.
  3. Pārlūkā pārbaudi ievadi 0 un 3 : jāparādās attiecīgi 5 un 35 punktiem.
  4. Pārbaudi ar citu spēlētāja vārdu. Saglabā un nosūti darbu uz GitHub.

Gatavs, kad: Rezultāts izmanto ievadīto vārdu, skaitu un bonusu.

Iesniedz 3. uzdevuma rezultātu

Iesniedz pabeigto 32.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:

  • Poga nolasa abus ievades laukus.
  • Aprēķins ir skaits × 10 + 5; lapā tas ir paskaidrots.
  • Ievade 0 dod 5 punktus, ievade 3 dod 35 punktus.

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.2 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: Maini savācamo 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. Nomaini zvaigzni uz savai spēlei piemērotu priekšmetu.
  2. Izvēlies citu punkta vērtību un saskaņo aprēķinu ar tekstu.
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