Muuttujat ja ehdot · Koodaa Martinin kanssa

Opeta sivusi muistamaan asioita ja tekemään päätöksiä. Tämä on ohjelmoinnin ydin.

Näytän sinulle: muuttujat – ohjelman muisti

Muuttuja on nimellä varustettu laatikko, johon ohjelma tallentaa arvon:

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

let luo muuttujan jota voi muuttaa.
const (tunnet jo aiemmin) luo muuttujan jota ei koskaan muuteta.

Voit tehdä matematiikkaa muuttujilla ja muuttaa niitä:

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

Näytän sinulle: klikkauslaskuri

Yhdistetään muuttuja edellisen oppitunnin painikkeeseen:

<button id="counter">Clicked: 0×</button>

const counter = document.getElementById("counter");
let count = 0;

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

Ensimmäistä kertaa sivu muistaa jotain. Jokainen klikkaus kasvattaa laatikon numeroa ja näyttää sen.

Näytän sinulle: ehdot – päätösten tekeminen

Ehto sanoo: “Jos tämä on totta, tee A. Muuten tee B.”

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

if (ehto) { ... } – “jos tämä on totta…”
else { ... } – “…muuten”
Vertailut: > suurempi kuin, < pienempi kuin, >= suurempi tai yhtä suuri, === yhtä suuri, !== ei yhtä suuri.

Nyt sinun vuorosi 💪

Rakenna laskuri yllätyksellä: tietyn määrän klikkauksien jälkeen tapahtuu jotain ylimääräistä.

🏫 Koulun sivu – äänestä paras ruokala-ruoka

<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. 🏆";
  }
});

🙋 Henkilökohtainen sivu – jongleerauslaskuri

<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! 🎉";
  }
});

🌍 Matkapäiväkirja – käytyjen maiden laskuri

<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. 🎒";
  }
});

Huomaa else if – näin ketjutat useita ehtoja peräkkäin.

⚽ Seuran sivu – maaliseuranta

<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;
  }
});

💡

Opit juuri oikeaa ohjelmointia. Muuttujat ja ehdot eivät ole vain “verkkojuttuja” – ne toimivat täsmälleen samalla tavalla Pythonissa, peleissä ja sovelluksissa. Kuka tahansa joka osaa muuttujat ja ehdot, osaa puhua mille tahansa ohjelmointikielelle maailmassa.

✅

Tarkista itse: Laskurisi laskee, ja kun se osuu rajaan, tapahtuu jotain ylimääräistä. Kokeile selittää ääneen mitä koodi tekee, rivi riviltä – jos pystyt siihen, perusteet ovat hallussa.

Mitä opit tästä oppitunnista

Muuttuja on laatikko arvolla: let (muutettava), const (muuttumaton). count++ kasvattaa yhdellä.
Ehto if / else if / else on miten ohjelma tekee päätöksiä.
Vertailut käyttävät >, <, >=, ===, !==.