›_ ebskola.lv
← 3.1 3.3 →

3.2 Datu tipi un interaktivitāte (Input/Output)

Stundas uzdevums: Izstrādāt interaktīvu datu apmaiņas ciklu, kurā programma pieņem lietotāja ievadi, identificē datu tipu un izvada apstrādātu rezultātu.

2.6.1. Izmanto mainīgos un datu tipus; 5.2.1. Kritiskā domāšana un problēmrisināšana; 5.2.6. Digitālā pratība.

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: Saziņa ar lietotāju un funkcijas

Programmēšanā Input ir dati, ko lietotājs iedod datoram, bet Output ir informācija, ko dators parāda lietotājam.

1. Datu tipi un apstrāde:

2. Funkcijas un pogas:

Lai koda rindiņas neizpildītos uzreiz pēc lapas ielādes, tās "iesaiņo" funkcijā. Funkcija ir kā recepte - tā stāv virtuvē, līdz kāds izdomā to pagatavot.

// Funkcijas definēšana
function mana_funkcija() {
    console.log("Poga tika nospiesta!");
}
<!-- Funkcijas izsaukšana -->
<button onclick="mana_funkcija()">Spied šeit!</button>

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 3.2 Datu tipi un interaktivitāte (Input/Output); detalizētu izpratni veidosi nākamajos uzdevumos.

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

<!-- Funkcijas izsaukšana -->
<button onclick="mana_funkcija()">Spied šeit!</button>
  1. Atver darba failu vai rīku. HTML fragmentu ievieto index.html faila <body> daļā.
  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 index.html un pievieno pogu <button onclick="prasitVardu()">Ievadīt vārdu</button>.
  2. Pievieno elementu <p id="sveiciens"></p>.
  3. Atver script.js un pievieno: function prasitVardu() { let v = prompt("Kā tevi sauc?"); document.getElementById("sveiciens").textContent = "Sveiks, " + v + "!"; }.
  4. Saglabā un atver pārlūkā - nospied pogu, ievadi savu vārdu un pārbaudi, ka tas parādās lapā.
  5. Pievieno otru pogu "Pievienot punktus" un funkciju, kas ar prompt jautā cik punktus pievienot.
  6. Pārbaudi, vai punktu saskaitīšana dod pareizu rezultātu (izmanto Number()).
  7. Salabo, ja redzams "NaN" - pārbaudi, vai Number() tiek izsaukts pirms saskaitīšanas.
  8. Veic git commit -m "Add player name input and score prompt".

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

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

  1. Atver pārlūkā, nospied "Ievadīt vārdu" - ievadi savu vārdu un pārbaudi, ka tas parādās <p> elementā.
  2. Nospied "Pievienot punktus" - ievadi skaitli un pārbaudi, ka tas pareizi saskaita ar esošajiem punktiem.
  3. Ievadi tekstu (piemēram, "divi") punktu laukā - pārbaudi, vai parādās NaN vai kļūda.
  4. Salabo funkciju: pārbaudi, vai Number(ievade) nav NaN pirms pievienošanas.
  5. Ievadi tukšu vārdu (tikai nospied OK) - pārbaudi, ko rāda ekrāns.
  6. Nodrošini, ka tukšs vārds rāda "Sveiks, nezināmais!" ar if (v === "") nosacījumu.
  7. Pieraksti vienu secinājumu: kāpēc prompt() vienmēr atgriež tekstu, pat ja ievadi ciparu.

Papildu uzdevums - Pievieno mazu funkciju

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

  1. Pievieno pogu <button onclick="prasitVecu()">Ievadīt vecumu</button>.
  2. Atver script.js un pievieno funkciju, kas jautā vecumu un rāda "Tu esi [vecums] gadus vecs."
  3. Pārbaudi ar ciparu - vai rāda pareizo tekstu?
  4. Mēģini ievadīt tekstu vecuma laukā - parādi saprotamu kļūdas ziņojumu, nevis NaN.
  5. Apvieno vārda un vecuma datus vienā teikumā ekrānā.
  6. Veic git commit -m "Add age input with validation".
  7. Demonstrē klasesbiedram - vai viņš saprot, kā izmantot abas pogas bez papildu instrukcijām?

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

Koda piemērs

let punkti = 0;

function pievienotPunktus() {
    let ievade = prompt("Cik punktus nopelnīja grupa?");
    // Pārveidojam tekstu par skaitli
    let jauniPunkti = Number(ievade);
    
    punkti = punkti + jauniPunkti;
    console.log("Kopā sakrāts: " + punkti + " punkti.");
}
Kopā sakrāts: 15 punkti.
⬅ Iepriekšējā stunda Nākamā stunda ➡