Datorika 9 · 3. tēma · 6 dubultstundas - JavaScript · algoritmi · DOM

Algoritmi un JavaScript // pamati

Ja HTML ir spēles ķermenis un CSS ir tās apģērbs, tad JavaScript ir tās smadzenes. Iemācies mainīgos, loģiku, masīvus un ciklus - un izveido savu pirmo interaktīvo programmu.

› Sākt 3.1 stundu Noslēguma projekts →

6 dubultstundas JavaScript ES6 algoritmi · DOM projekts 3.6

spele/game.js

● game.js index.html

1 2 3 4 5 6 7 8 9 10 11 12

// Spēles loģika (game.js) let punkti = 0; const MAX_PUNKTI = 100; function pievienot(skaits) { punkti += skaits; if (punkti >= MAX_PUNKTI) { alert("Līmenis pabeigts!"); } } pievienot(10);

● JavaScript ES6 UTF-8 Ln 11, Col 16

JavaScript ES6 mainīgie · funkcijas DOM manipulācija

# 02 špikeris

JavaScript špikeris

Mainīgie, datu ievade, loģika, masīvi, cikli un HTML manipulācija.

1. Mainīgie un pamatdarbības

// Mainīgo definēšana un mainīšana
let punkti = 0;
const MAX_PUNKTI = 100;

punkti = punkti + 10;
console.log("Tavi punkti: " + punkti);

let – mainīgais, kura vērtību kodā vēlāk var mainīt.

const – konstante, kuras vērtība paliek nemainīga.

console.log() – izmanto kodu atkļūdošanai, izvadot datus pārlūka izstrādātāju slēptajā konsolē (F12).

2. Datu ievade un funkcijas

// Funkcija, ko var piesaistīt HTML pogai
function pievienotDatus() {
    let ievade = prompt("Ievadi punktu daudzumu:");
    let skaitlis = Number(ievade);
    console.log(typeof skaitlis);
}

prompt() – atver dialoglodziņu lietotāja ievadei. Piezīme: rezultāts vienmēr ir teksta formātā (String).

Number() – pārveido teksta datu tipu par skaitli, lai varētu veikt matemātiskas darbības.

function – definē atkārtoti izmantojamu koda bloku, ko aktivizē ar onclick atribūtu HTML pogā.

3. Loģiskie operatori un sazarojumi

// Lēmumu pieņemšana kodā
if (punkti >= MAX_PUNKTI) {
    console.log("Līmenis pabeigts!");
} else if (punkti > 50 && punkti < 100) {
    console.log("Puse ir garām!");
} else {
    console.log("Turpini censties!");
}

=== un !== – precīzi vienāds / nav vienāds.
< un > – mazāks / lielāks.

&& (loģiskais UN) – abiem nosacījumiem jāizpildās.
|| (loģiskais VAI) – vismaz vienam nosacījumam jāizpildās.

if / else if / else – nosaka koda izpildi atkarībā no tā, vai nosacījums ir true vai false.

4. Masīvi (Datu strukturēšana)

// Masīva izveide un manipulācija
let materiali = ["Marķieris", "Pieraksti"];

materiali.push("Uzlīmes"); // Pievieno beigās
materiali.pop();         // Izdzēš pēdējo

console.log(materiali[0]); // Izvada: Marķieris
console.log("Skaits: " + materiali.length);

Masīvs (Array) – datu struktūra vairāku vērtību glabāšanai. Tiek definēts ar kvadrātiekavām [].

Indeksi – elementu skaitīšana masīvā vienmēr sākas ar 0.

.push() / .pop() – pievieno vai dzēš elementu no masīva beigām.

.length – atgriež kopējo masīva elementu skaitu.

5. Cikli un HTML manipulācija

// Automātiska HTML saraksta ģenerēšana
let saraksts = document.getElementById("dati");
saraksts.innerHTML = ""; // Iztukšo esošo saturu

for (let i = 0; i < 3; i++) {
    saraksts.innerHTML += "<li>Aplis " + i + "</li>";
}

for cikls – atkārto koda bloku. Sastāv no 3 daļām: sākuma stāvokļa (let i = 0), nosacījuma (i < 3) un soļa (i++).

document.getElementById() – atrod HTML elementu pēc tā ID.

innerHTML += – papildina HTML elementa saturu ar jaunā koda virkni, nepārrakstot visu iepriekšējo.

Algoritmi un JavaScript // pamati

6 dubultstundas - tēmas saturs

Ievads JavaScript un mainīgie

Datu tipi un interaktivitāte

Loģiskie operatori un If/Else

Masīvi un datu strukturēšana

Cikli un atkārtošanās loģika

Noslēguma projekts: Radošā teksta spēle