4.2. tēma: Notikumu klausītāji (Event Listeners) un interakcija

Tavs šīs stundas izaicinājums: Piesaistīt izstrādātās JavaScript funkcijas reālām lietotāja darbībām (peles klikšķiem un klaviatūras taustiņiem), padarot spēles saskarni pilnībā interaktīvu.

2.6.1. Ievēro programmas pieraksta labo praksi; 1.3.3. Īsteno risinājumu atbilstoši plānam.

Teorija: Kā iemācīt lapai "klausīties"?

Lai pārlūkprogramma zinātu, kad izsaukt tavu funkciju, mēs izmantojam notikumu klausītājus (Event Listeners). Tas ir kā neredzams sargs, kas stāv pie HTML elementa un gaida, kad notiks konkrēta darbība (notikums).

Notikumu veidi: click (peles klikšķis), keydown (taustiņa nospiešana), mouseenter (peles novietošana virs elementa).
Sintakse: elements.addEventListener('notikums', funkcijasNosaukums);
Notikuma objekts (Event Object): Kad notiek darbība, pārlūks bieži nodod papildu informāciju (piemēram, KURU tieši taustiņu tu nospiedi). Mēs to varam "noķert" funkcijas parametros, visbiežāk apzīmējot ar burtu e vai event.

Svarīgi: Mūsdienu izstrādē mēs izvairāmies no onclick="" rakstīšanas tieši HTML failā. HTML ir struktūrai, JS ir uzvedībai!

1. uzdevums: Peles klikšķa (Click) uztveršana

Izveidot pogu un piesaistīt tai funkciju, izmantojot addEventListener.

Izpildes soļi:

Sava index.html faila spēles laukumā pievieno pogu: <button id="monetas-poga">Savākt monētu</button>.
script.js failā atrod šo pogu un saglabā to mainīgajā: let poga = document.getElementById("monetas-poga");.
Izveido funkciju function savakt() { console.log("Monēta savākta!"); }.
Pievieno klausītāju: poga.addEventListener("click", savakt);. Atver pārlūku un klikšķini pogu!

2. uzdevums: Spēles stāvokļa mainīšana ar klikšķi

Savienot klikšķa notikumu ar iepriekšējā stundā radītajiem mainīgajiem un DOM atjaunināšanu.

Izpildes soļi:

Pārveido savakt() funkciju tā, lai tā pieskaita 10 punktus tavam spelesPunkti mainīgajam.
Pievieno komandu, kas atjaunina punktu skaitu uz ekrāna (izmantojot innerText tavam punktu <span> elementam).
Pārbaudi: katru reizi nospiežot pogu, punktiem uz ekrāna jākļūst par 10 lielākiem.

3. uzdevums: Tastatūras (Keydown) vadība

Iemācīties uztvert klaviatūras taustiņu nospiešanu un atpazīt, kurš tieši taustiņš tika nospiests.

Izpildes soļi:

Pievieno klausītāju visam dokumentam, jo mēs gribam uztvert taustiņus neatkarīgi no tā, kur atrodas pele: document.addEventListener("keydown", function(event) { ... });.
Iekšā uzraksti console.log(event.key);. Paspied bultiņas uz tastatūras un skaties konsolē – tu redzēsi vārdus "ArrowUp", "ArrowDown" utt.
Pievieno sazarojumu (if): Ja event.key === "ArrowUp", izvadi ziņojumu "Varonis lec!". Sinhronizē darbu ar GitHub.

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

Funkcijas tūlītēja izsaukšana: Rakstot poga.addEventListener("click", savakt()); (ar iekavām beigās), funkcija izpildīsies UZREIZ lapas ielādes brīdī, nevis gaidīs klikšķi. Pareizi ir savakt (bez iekavām).
Nepareizs notikuma nosaukums: Rakstīt "onClick" JS failā ir kļūda. HTML vidē tas bija "onclick", bet addEventListener prasa tikai "click".
Elementa neatrašana (null): Ja mēģini pievienot klausītāju pogai, pirms HTML fails to ir uzzīmējis (piem., `script` tags ir lapas sākumā), radīsies kļūda.

Koda piemērs

// 1. Atrodam pogu HTML dokumentā
let uzbrukumaPoga = document.getElementById("uzbrukt-btn");

// 2. Definējam darbību
function veiktUzbrukumu() {
    console.log("Bam! Ienaidnieks saņem bojājumus.");
}

// 3. Piesaistām "klausītāju" - gaidām KLIKŠĶI, tad izsaucam veiktUzbrukumu (bez iekavām!)
uzbrukumaPoga.addEventListener("click", veiktUzbrukumu);

// ----------------------------------------------------
// Tastatūras uztveršana visā lapā (document)
document.addEventListener("keydown", function(e) {
    // Pārbaudām, kurš taustiņš tika nospiests
    if (e.key === " ") { // Atstarpes (Space) taustiņš
        console.log("Spēle iepauzēta!");
    }
});

(Pēc pogas nospiešanas konsolē parādīsies:)
Bam! Ienaidnieks saņem bojājumus.

(Nospiežot atstarpi uz tastatūras, parādīsies:)
Spēle iepauzēta!