Polski

Europa

Azja

← Poziom 2 – Czarodziej

Lekcja 3 z 8 ⏱ 30 minut

Zmienne i warunki

Nauczysz stronę pamiętać rzeczy i podejmować decyzje. To jest serce programowania.

Pokażę ci: zmienne – pamięć programu

Zmienna to pudełko z etykietą, w którym program trzyma wartość:

let clickCount = 0;        // number
let name = "Jake";         // string (text)
let isWeekend = true;      // true/false

Na zmiennych można liczyć i je zmieniać:

clickCount = clickCount + 1;   // increase by 1
clickCount++;                  // same thing, shorter

Pokażę ci: licznik kliknięć

Połączymy zmienną z przyciskiem z poprzedniej lekcji:

<button id="counter">Clicked: 0×</button>
const counter = document.getElementById("counter");
let count = 0;

counter.addEventListener("click", () => {
  count++;
  counter.textContent = "Clicked: " + count + "×";
});

Po raz pierwszy strona coś pamięta. Każde kliknięcie zwiększa liczbę w pudełku i wyświetla ją.

Pokażę ci: warunki – podejmowanie decyzji

Warunek mówi: „Jeśli to jest prawda, zrób A. W przeciwnym razie zrób B.”

if (count >= 10) {
  counter.textContent = "Ten clicks! You've got some serious stamina 🏆";
} else {
  counter.textContent = "Clicked: " + count + "×";
}

Teraz ty 💪

Zbuduj licznik z niespodzianką: po pewnej liczbie kliknięć dzieje się coś ekstra.

🏫 Strona mojej szkoły – głosowanie na najlepsze jedzenie ze stołówki 
<h2>Vote for pizza day!</h2>
<button id="vote">Vote 🍕 (0 votes)</button>
<p id="result"></p>
const vote = document.getElementById("vote");
const result = document.getElementById("result");
let votes = 0;

vote.addEventListener("click", () => {
  votes++;
  vote.textContent = "Vote 🍕 (" + votes + " votes)";

  if (votes >= 5) {
    result.textContent = "Decided! Pizza day wins the election. 🏆";
  }
});
🙋 Moja strona osobista – licznik żonglowania 
<h2>How many times can I juggle the ball?</h2>
<button id="kick">Kick! (0)</button>
<p id="record"></p>
const kick = document.getElementById("kick");
const record = document.getElementById("record");
let kicks = 0;

kick.addEventListener("click", () => {
  kicks++;
  kick.textContent = "Kick! (" + kicks + ")";

  if (kicks === 20) {
    record.textContent = "20 kicks – new personal record! 🎉";
  }
});
🌍 Dziennik podróży – licznik odwiedzonych krajów 
<h2>Country counter</h2>
<button id="country">Add a country (0)</button>
<p id="rating"></p>
const country = document.getElementById("country");
const rating = document.getElementById("rating");
let countryCount = 0;

country.addEventListener("click", () => {
  countryCount++;
  country.textContent = "Add a country (" + countryCount + ")";

  if (countryCount >= 10) {
    rating.textContent = "Ten countries – you're a globetrotter! 🌍";
  } else if (countryCount >= 5) {
    rating.textContent = "Five countries – beginner traveler. 🎒";
  }
});

Zauważ else if – tak właśnie łączysz kilka warunków jeden za drugim.

⚽ Strona klubu sportowego – wskaźnik wyniku 
<h2>Shooting practice</h2>
<button id="goal">GOAL! ⚽</button>
<p id="score">Score: 0</p>
const goal = document.getElementById("goal");
const score = document.getElementById("score");
let goals = 0;

goal.addEventListener("click", () => {
  goals++;

  if (goals >= 10) {
    score.textContent = "Score: " + goals + " – hat trick and more! Player of the match 🏆";
  } else {
    score.textContent = "Score: " + goals;
  }
});
💡

Właśnie nauczyłeś się prawdziwego programowania. Zmienne i warunki to nie tylko „rzeczy od stron” – działają dokładnie tak samo w Pythonie, w grach i w aplikacjach. Kto zna zmienne i warunki, dogada się z każdym językiem programowania na świecie.

✅

Sprawdź się: Twój licznik liczy, a po osiągnięciu limitu dzieje się coś ekstra. Spróbuj na głos opowiedzieć, co robi kod, linijka po linijce – jeśli dasz radę, podstawy masz w kieszeni.

Co wyniesiesz z tej lekcji

© 2026 Ing. Martin Polak / AlgoRhino · Warunki korzystania z treści