3I_WTL_2025/06_js_html

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 -->
<input type="number" id="num1" placeholder="Číslo 1">
<button onclick="vypocitat('+')">SEČÍST</button>
<span id="vysledek"></span>

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