JavaScript Začátečník – Část 3: Oživíme stránku!

Kapitola 1

Co je JavaScript?

⚡

🏠 HTML, CSS, JavaScript — tři kamarádi

Představ si webovou stránku jako dům:

Jazyk	Co dělá	Příklad
HTML	Stavba domu — zdi, okna, dveře	Tlačítko existuje
CSS	Malování — barvy, styl, nábytek	Tlačítko je modré
JavaScript	Elektřina — světla, pohyb, akce	Klik → otevřou se dveře

Kde píšeme JavaScript? Přímo do HTML, mezi tagy <script> a </script>.

<!-- HTML tlačítko -->
<button onclick="pozdrav()">Klikni na mě!</button>

<script>
  function pozdrav() {
    alert("Ahoj! Já jsem JavaScript! 🎉");
  }
</script>
    

💡 Tip: alert() ukáže vyskakovací okno se zprávou.

✏️ Vyzkoušej si sám

⚡ ŽIVÝ KÓD

📝 Kód

👁️ Výsledek

🧠 Otázka: Co dělá příkaz alert("Ahoj")?

Kapitola 2

Proměnné — krabičky na data

📦

📦 Co je proměnná?

Proměnná je jako pojmenovaná krabička, do které ukládáš informace. Třeba jméno, věk, nebo skóre ve hře.

// Takhle vytvoříme proměnnou:
let jmeno = "Tomáš";
let vek = 10;
let maSePekne = true;  // true = ano, false = ne

// Zobrazit na stránce:
document.getElementById("vystup").textContent = jmeno;
    

Typ	Příklad	Co to je
String (text)	"Ahoj"	Text v uvozovkách
Number (číslo)	42	Číslo bez uvozovek
Boolean	true / false	Ano nebo Ne

let vs const: Použij let když se hodnota bude měnit. Použij const když se nikdy nezmění.

✏️ Krabičky s daty

⚡ ŽIVÝ KÓD

📝 Kód

👁️ Výsledek

🧠 Otázka: Jaký typ proměnné je let vek = 10?

Kapitola 3

Funkce — receptury na akce

🔧

🔧 Co je funkce?

Funkce je jako recept na vaření. Napíšeš ji jednou a pak ji použiješ kolikrát chceš. Dostane ingredience (parametry) a vrátí výsledek.

// Definice funkce:
function pozdrav(jmeno) {
  alert("Ahoj, " + jmeno + "! 👋");
}

// Zavolání funkce:
pozdrav("Tomáš");  // → Ahoj, Tomáš! 👋
pozdrav("Petra");  // → Ahoj, Petra! 👋

// Funkce s návratovou hodnotou:
function secti(a, b) {
  return a + b;
}
let vysledek = secti(3, 5);  // = 8
    

✏️ Kalkulačka

⚡ ŽIVÝ KÓD

📝 Kód

👁️ Výsledek

🧠 Otázka: Jak zavoláme funkci pozdrav?

Kapitola 4

Podmínky — rozhodování

🔀

🔀 if / else — když... tak... jinak...

Podmínka je jako křižovatka. Počítač se zeptá: "Je to pravda?" Když ano → jde doleva. Když ne → jde doprava.

let vek = 10;

if (vek >= 18) {
  alert("Jsi dospělý! 🎉");
} else {
  alert("Ještě nejsi dospělý 👶");
}

// Operátory porovnání:
//  >   větší    |  >=  větší nebo rovno
//  <   menší    |  <=  menší nebo rovno
// ===  přesně rovná se  |  !==  nerovná se
    

✏️ Hádej číslo

⚡ ŽIVÝ KÓD

📝 Kód

<p>🔢 Tajné číslo je mezi 1 a 10. Hádej!</p>
<input type="number" id="vstup" min="1" max="10">
<button onclick="hadej()">Zkusit štěstí! 🎲</button>
<div id="zprava"></div>

function hadej() {
    let had = parseInt(document.getElementById("vstup").value);
    let z = document.getElementById("zprava");

if (had === tajne) {
      z.textContent = "🎉 Správně! Uhodl jsi číslo " + tajne + "!";
      z.style.color = "green";
    } else if (had < tajne) {
      z.textContent = "📉 Moc málo! Zkus větší číslo.";
      z.style.color = "orange";
    } else {
      z.textContent = "📈 Moc velké! Zkus menší číslo.";
      z.style.color = "red";
    }
  }
</script>

👁️ Výsledek

🧠 Otázka: Jaký operátor použijeme pro "přesně se rovná"?

Kapitola 5

Smyčky — opakování

🔁

🔁 for — opakuj X krát

Smyčka dělá to samé opakovaně. Místo abys psal 100× to samé, napíšeš to jednou a řekneš "udělej to 100krát".

// Vypíše čísla 1 až 5:
for (let i = 1; i <= 5; i++) {
  console.log(i);
}

// Jak fungují 3 části:
// let i = 1   → začínáme od 1
// i <= 5      → jedeme dokud je i max 5
// i++         → přidej 1 po každém kroku
    

✏️ Hvězdičkový vzor

⚡ ŽIVÝ KÓD

📝 Kód

👁️ Výsledek

🧠 Otázka: Kolikrát se provede for (let i=0; i<3; i++)?

Kapitola 6

Mini hra — dej to dohromady!

🎮

🎮 Matematický bleskový kvíz

Tato hra používá proměnné (skóre), funkce (nová otázka), podmínky (správně/špatně) a náhodná čísla — Math.random().

⚡ Matematický kvíz

0

bodů

Připraven?

// Takto funguje kód hry výše:
let skore = 0;
let spravnaOdpoved;

function novaOtazka() {
  // Math.random() → číslo od 0.0 do 1.0
  // * 10 → od 0 do 10, floor → zaokrouhlí dolů
  let a = Math.floor(Math.random() * 10) + 1;
  let b = Math.floor(Math.random() * 10) + 1;
  spravnaOdpoved = a + b;
}

function zkontroluj(odpoved) {
  if (odpoved === spravnaOdpoved) {
    skore++;
  }
}
    

Naučíme stránku myslet!

🏠 HTML, CSS, JavaScript — tři kamarádi

🧠 Otázka: Co dělá příkaz alert("Ahoj")?

📦 Co je proměnná?

🧠 Otázka: Jaký typ proměnné je let vek = 10?

🔧 Co je funkce?

🧠 Otázka: Jak zavoláme funkci pozdrav?

🔀 if / else — když... tak... jinak...

🧠 Otázka: Jaký operátor použijeme pro "přesně se rovná"?

🔁 for — opakuj X krát

🧠 Otázka: Kolikrát se provede for (let i=0; i<3; i++)?

🎮 Matematický bleskový kvíz

⚡ Matematický kvíz

🧠 Otázka: Co vrátí Math.floor(3.9)?

🏆 Tvoje odznaky