# 07 - JavaScript, CSS a DOM

## 🎯 Co se naučíte

V této lekci se naučíte měnit CSS styly pomocí JavaScriptu a pracovat s DOM (Document Object Model).

## 📚 Témata lekce

- **DOM (Document Object Model)** - struktura HTML v JavaScriptu
- **style.property** - změna CSS vlastností přes JS
- **onchange** event - reakce na změnu hodnoty
- **Select element** - práce s rozbalovacím seznamem
- **Input type="color"** - barevný picker
- **Dynamická změna stylů** (barva textu, barva pozadí, font)

## 📂 Soubory v projektu

- `index.html` - HTML s select elementy a color pickery
- `css/style.css` - základní CSS styly
- `js/index.js` - JavaScript pro změnu barev
- `js/changeFont.js` - JavaScript pro změnu fontu

## 💻 Ukázka z lekce

```html
<!-- HTML -->
<p id="ltext">Lorem ipsum...</p>
<select id="scolor" onchange="changeSColor()">
    <option value="black">černá</option>
    <option value="red">červená</option>
</select>
<input type="color" id="tcolor" onchange="dynColor()">
```

```javascript
// JavaScript
function changeSColor() {
    let element = document.getElementById("ltext");
    let barva = document.getElementById("scolor").value;
    element.style.color = barva;
}

function dynColor() {
    let element = document.getElementById("ltext");
    let barva = document.getElementById("tcolor").value;
    element.style.color = barva;
}
```

## 🚀 Jak s lekcí pracovat

1. Otevřete `index.html` v prohlížeči
2. Vyzkoušejte měnit barvu textu pomocí selectu a color pickeru
3. Změňte font pomocí selectu
4. Prozkoumejte JS soubory - jak se elementy mění pomocí `.style`
5. Zkuste přidat další styly (velikost textu, tučnost, kurzíva)
6. Experimentujte s různými CSS vlastnostmi

## 💡 Tip pro studenty

- **element.style.property** - property musí být v camelCase:
  - CSS: `background-color` → JS: `backgroundColor`
  - CSS: `font-size` → JS: `fontSize`
- **onchange** se spouští při změně hodnoty (select, input)
- **input type="color"** vrací hodnotu v HEX formátu (#000000)
- Používejte **Developer Tools** (F12) → Elements → Styles pro inspekci CSS

## 🎨 CSS vlastnosti, které můžete měnit přes JS

```javascript
element.style.color = "red";
element.style.backgroundColor = "blue";
element.style.fontSize = "20px";
element.style.fontFamily = "Arial";
element.style.fontWeight = "bold";
element.style.textAlign = "center";
element.style.padding = "10px";
element.style.margin = "5px";
```

## 🔗 Související lekce

- **Předchozí:** 06_js_html - propojení JS a HTML
- **Další:** 08_js_form - validace formulářů s JavaScriptem
- **Související:** 05_js_intro - základy JavaScriptu