›_ ebskola.lv
← 4.2 4.4 →

4.3 DOM manipulācija – dinamiska elementu pārvaldība

Stundas uzdevums: Izstrādāt algoritmu spēles varoņa vizuālai pārvietošanai pa ekrānu, mainot tā CSS koordinātas reāllaikā caur JavaScript.

2.6.1. Pieraksta, lasa un izpilda algoritmus; 2.4.7. Veido kompleksu pieeju (apvieno CSS un JS).

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: Tīmekļa koordinātu sistēma un CSS pozicionēšana

Lai mēs varētu kustināt elementu (piemēram, spēlētāja kvadrātu vai attēlu) ar JavaScript, tam HTML/CSS vidē ir jābūt "atrautam" no parastās teksta plūsmas.

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 4.3 DOM manipulācija – dinamiska elementu pārvaldība; 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>4.3 DOM manipulācija – dinamiska elementu pārvaldība</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: 4.3 DOM manipulācija – dinamiska elementu pārvaldība";
});
  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. Pārbaudi, ka spēles laukumam CSS ir position: relative; un spēlētājam - position: absolute;.
  2. Atver script.js un definē let spX = 180; let spY = 250;.
  3. Pievieno funkciju kustinat(dx, dy), kas palielina/samazina spX un spY un atjauno style.left un style.top.
  4. Pārliecinies, ka pie vērtību piešķiršanas vienmēr pievieno "px": el.style.left = spX + "px".
  5. Pievieno pogas "Pa kreisi", "Pa labi" un izsauc kustinat(-10, 0) un kustinat(10, 0).
  6. Saglabā un atver pārlūkā - nospied pogas un pārbaudi, ka spēlētājs pārvietojas.
  7. Salabo, ja spēlētājs "izlek" ārpus rāmja - pārbaudi, vai laukumam ir overflow: hidden;.
  8. Veic git commit -m "Add DOM-based player movement".

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ā un nospied "Pa labi" vairākas reizes - pārbaudi, ka elements pārvietojas par precīzi 10px katru reizi.
  2. Atver DevTools → "Elements" → atlasi spēlētāja elementu - pārbaudi, ka style.left mainās.
  3. Pārbaudi, ka spēlētājs apstājas pie laukuma malas un neiziet ārpus.
  4. Pievieno console.log("X: " + spX + " Y: " + spY) funkcijai kustinat.
  5. Salabo, ja koordinātes konsolē un ekrānā nesakrīt.
  6. Nomaini dx no 10 uz 20 - pārbaudi, ka kustība kļūst ātrāka.
  7. Pieraksti vienu secinājumu: kāpēc CSS koordinātu Y ass iet no augšas uz leju, nevis otrādi.

Papildu uzdevums - Pievieno mazu funkciju

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

  1. Pievieno otro elementu <div id="moneta" style="position:absolute;width:20px;height:20px;background:gold;border-radius:50%;"></div> laukumā.
  2. Atver script.js un pievieno funkciju parvietotMonetu(), kas piešķir monētai nejaušas koordinātes.
  3. Izsauc parvietotMonetu() lapas ielādes laikā un pēc katras "savākšanas".
  4. Atver pārlūkā - pārbaudi, ka zeltā monēta parādās laukumā.
  5. Pārbaudi, ka monētas koordinātes paliek laukuma robežās (0–380 pa X, 0–280 pa Y).
  6. Veic git commit -m "Add collectable coin element".
  7. Demonstrē klasesbiedram - vai viņš saprot, ka monēta parādās jaunā vietā?

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

Koda piemērs

let varonisX = 50;
let varonisY = 50;
let varonisObj = document.getElementById("speletajs");

document.addEventListener("keydown", function(event) {
    // 1. Mainām koordinātas
    if (event.key === "ArrowRight") {
        varonisX += 10; // Īsāks pieraksts vietā varonisX = varonisX + 10
    } else if (event.key === "ArrowLeft") {
        varonisX -= 10;
    }

    // 2. Robežu pārbaude (pieņemot, ka laukums ir 500px plats un varonis 50px)
    if (varonisX < 0) {
        varonisX = 0; // Neļauj iziet ārpus kreisās malas
    } else if (varonisX > 450) {
        varonisX = 450; // Neļauj iziet ārpus labās malas
    }

    // 3. Vizuālā atjaunināšana (SVARĪGI!)
    varonisObj.style.left = varonisX + "px";
});
Tagad nospiežot labo vai kreiso bultiņu, tavs "div" kvadrātiņš reāli slīdēs pa ekrānu!
⬅ Iepriekšējā stunda Nākamā stunda ➡