# 06 - JavaScript a HTML

## 🎯 Co se naučíte

V této lekci se naučíte propojit JavaScript s HTML elementy a vytvořit interaktivní kalkulačku.

## 📚 Témata lekce

- **getElementById()** - získání elementu podle ID
- **innerHTML** - změna obsahu elementu
- **innerText** - změna textu elementu
- **onclick** - obsluha kliknutí na tlačítko
- **Input elementy** - čtení hodnot z formulářových polí
- **Number()** - převod textu na číslo
- **Matematické operace** v JavaScriptu

## 📂 Soubory v projektu

- `index.html` - HTML s inputy a tlačítky
- `js/app.js` - JavaScript s funkcí pro výpočet

## 💻 Ukázka z lekce

```html
<!-- HTML -->
<input type="number" id="num1" placeholder="Číslo 1">
<button onclick="vypocitat('+')">SEČÍST</button>
<span id="vysledek"></span>
```

```javascript
// JavaScript
function vypocitat(operator) {
    let cislo1 = document.getElementById("num1").value;
    let cislo2 = document.getElementById("num2").value;
    // výpočet a zobrazení výsledku
    document.getElementById("vysledek").innerHTML = vysledek;
}
```

## 🚀 Jak s lekcí pracovat

1. Otevřete `index.html` v prohlížeči
2. Vyzkoušejte kalkulačku - zadejte čísla a klikněte na tlačítka
3. Otevřete `js/app.js` a prozkoumejte funkci `vypocitat()`
4. Sledujte, jak se hodnoty čtou z inputů pomocí `getElementById()`
5. Zkuste přidat další operace (mocnina, odmocnina)
6. Použijte Developer Console (F12) pro debugování

## 💡 Tip pro studenty

- **getElementById()** vrací element, ne hodnotu - musíte použít `.value`
- **onclick** můžete použít přímo v HTML: `onclick="nazevFunkce()"`
- Hodnoty z inputů jsou vždy **string** - použijte `Number()` pro převod
- **innerHTML** vs **innerText**: innerHTML umožňuje HTML tagy, innerText jen text
- Používejte **console.log()** pro kontrolu hodnot při vývoji

## 🔗 Související lekce

- **Předchozí:** 05_js_intro - základy JavaScriptu
- **Další:** 07_js_css_dom - manipulace s CSS přes JavaScript
- **Související:** 08_js_form - práce s formuláři