3I_WTL_2025/07_js_css_dom

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 -->
<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
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

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