Proměnné a podmínky · Programuj s Martinem

Naučíš stránku pamatovat si věci a rozhodovat se. Tohle je srdce programování.

Ukaž mi to: proměnné – paměť programu

Proměnná je krabička se jménem, do které si program ukládá hodnotu:

let pocetKliknuti = 0;        // číslo
let jmeno = "Kuba";           // řetězec (text)
let jeVikend = true;          // pravda/nepravda (true/false)

let vytvoří proměnnou, kterou lze měnit.
const (znáš z minula) vytvoří proměnnou, která se už měnit nebude.

S proměnnými se dá počítat a měnit je:

pocetKliknuti = pocetKliknuti + 1;   // zvýš o 1
pocetKliknuti++;                     // totéž, zkráceně

Ukaž mi to: počítadlo kliknutí

Spojíme proměnnou s tlačítkem z minulé lekce:

<button id="pocitadlo">Klikáno: 0×</button>

const pocitadlo = document.getElementById("pocitadlo");
let pocet = 0;

pocitadlo.addEventListener("click", () => {
  pocet++;
  pocitadlo.textContent = "Klikáno: " + pocet + "×";
});

Stránka si poprvé něco pamatuje. Každé kliknutí zvýší číslo v krabičce a vypíše ho.

Ukaž mi to: podmínky – rozhodování

Podmínka říká: „Když platí tohle, udělej A. Jinak udělej B.”

if (pocet >= 10) {
  pocitadlo.textContent = "Deset kliků! Ty máš ale výdrž 🏆";
} else {
  pocitadlo.textContent = "Klikáno: " + pocet + "×";
}

if (podmínka) { ... } – „když platí…”
else { ... } – „…jinak”
Porovnávání: > větší, < menší, >= větší nebo rovno, === rovná se, !== nerovná se.

Teď ty 💪

Postav počítadlo s překvapením: po určitém počtu kliknutí se stane něco navíc.

🏫 Stránky školy – hlasování o nejlepší jídlo

<h2>Hlasuj pro buchtičky se šodó!</h2>
<button id="hlas">Hlasovat 🍮 (0 hlasů)</button>
<p id="vysledek"></p>

const hlas = document.getElementById("hlas");
const vysledek = document.getElementById("vysledek");
let hlasy = 0;

hlas.addEventListener("click", () => {
  hlasy++;
  hlas.textContent = "Hlasovat 🍮 (" + hlasy + " hlasů)";

  if (hlasy >= 5) {
    vysledek.textContent = "Rozhodnuto! Buchtičky vyhrávají volby. 🏆";
  }
});

🙋 Osobní stránky – počítadlo žonglování

<h2>Kolikrát dokážu žonglovat s míčem?</h2>
<button id="kop">Kop! (0)</button>
<p id="rekord"></p>

const kop = document.getElementById("kop");
const rekord = document.getElementById("rekord");
let kopy = 0;

kop.addEventListener("click", () => {
  kopy++;
  kop.textContent = "Kop! (" + kopy + ")";

  if (kopy === 20) {
    rekord.textContent = "20 kopů – nový osobní rekord! 🎉";
  }
});

🌍 Cestovatelský deník – počítadlo navštívených zemí

<h2>Počítadlo zemí</h2>
<button id="zeme">Přidat zemi (0)</button>
<p id="hodnoceni"></p>

const zeme = document.getElementById("zeme");
const hodnoceni = document.getElementById("hodnoceni");
let pocetZemi = 0;

zeme.addEventListener("click", () => {
  pocetZemi++;
  zeme.textContent = "Přidat zemi (" + pocetZemi + ")";

  if (pocetZemi >= 10) {
    hodnoceni.textContent = "Deset zemí – jsi světoběžník! 🌍";
  } else if (pocetZemi >= 5) {
    hodnoceni.textContent = "Pět zemí – cestovatel začátečník. 🎒";
  }
});

Všimni si else if – takhle se řetězí víc podmínek za sebou.

⚽ Web klubu – ukazatel skóre

<h2>Trénink střelby</h2>
<button id="gol">GÓL! ⚽</button>
<p id="skore">Skóre: 0</p>

const gol = document.getElementById("gol");
const skore = document.getElementById("skore");
let goly = 0;

gol.addEventListener("click", () => {
  goly++;

  if (goly >= 10) {
    skore.textContent = "Skóre: " + goly + " – hattrick³! Střelec zápasu 🏆";
  } else {
    skore.textContent = "Skóre: " + goly;
  }
});

💡

Právě ses naučil(a) skutečné programování. Proměnné a podmínky nejsou „webařina” – úplně stejně fungují v Pythonu, ve hrách i v aplikacích. Kdo umí proměnné a podmínky, domluví se s každým programovacím jazykem na světě.

✅

Kontrola: Tvoje počítadlo počítá a po dosažení hranice se stane něco navíc. Zkus v duchu říct, co se v kódu děje, řádek po řádku – když to zvládneš, máš základy v kapse.

Co si z téhle lekce odnést

Proměnná = krabička s hodnotou: let (měnitelná), const (neměnná). pocet++ zvýší o 1.
Podmínka if / else if / else = rozhodování programu.
Porovnává se pomocí >, <, >=, ===, !==.