krouzek:settimeout_setinterval_dom [Kroužek Javascriptu]

(výchozí html soubor najdeš níže)

Úkoly

Změň 5s po načtení stránky barvu písma nadpisu h1 (Vítejte) na modrou (blue)
Rozšiř hodiny: ať zobrazují i milisekundy - hodnotu získáš pomocí funkce aktualniCas.getMilliseconds(). Experimentuj se změnou intervalu aktualizace.
Přidej do políčka formuláře každou sekundu nějaké písmenko
Změň zdroj (atribut src) obrázku po 4 sekundách na https://placehold.co/1200x200 (větší obrázek)
Zvyšuj postupně velikost textu (prvek.style.fontSize = promennaVelikost) odstavce.

Rady

5s je 5000ms
Když chceš pracovat s nějakým prvkem na stránce, můžeš jej pojmenovat (atribut id, např: <a id="unikatni_jmeno">) a přistoupit k němu document.getElementById("unikatni_jmeno"). Jsou i jiné možnosti (hledat dle názvu tagu, třídy či css selektorem), ale vrací pole a tak je to složitější
Prvku můžeš:
- Zjistit jeho hodnotu v css stylu, například: const barvaPozadi = prvek.style.backgroundColor
- Změnit hodnotu v css stylu, například: prvek.style.color = "red"
- Zjistit či změnit jeho obsah (html kód uvnitř), prvek.innerHTML = "<em>Test</em>"
- Zjistit hodnotu jeho atributu, například: const adresa = obrazek.getAttribute("src")
- Nastavit hodnotu jeho atributu, například: link.setAttribute("href") = "https://example.com/"
- A spoustu dalších věcí
Formulářový prvek input má navíc atribut .value který určuje hodnotu v políčku. Dá se přečíst/zapsat podobně jako innerHTML
Můžeš si vytvořit proměnnou pomocí let nejakaPromenna = 100 a s tou nějak pracovat, například ji měnit a nastavovat jako hodnotu atributu/stylu/obsahu html elementu
Spojování řetězců, příklad: element.style.fontSize = cislo + "%"

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>setTimeout a setInterval</title>
 
    <style>
 
    </style>
 
    <script>
 
        /* setTimeout = vykona se jednou */
        setTimeout(
            function(){
               document.body.style.backgroundColor = 'green'
            },
            2000 /* 2000ms jsou 2 sekundy */
        )
 
        /* 
        setInterval = vykona se opakovane, vzdy po zadanem poctu milisekund
        Prikladova hodnota 100ms = vykona se 10krat za sekundu
         */
        setInterval(
            function(){
               const aktualniCas = new Date() 
               document.getElementById('hodiny').innerHTML = aktualniCas.getHours() + ":" + aktualniCas.getMinutes() + ":" + aktualniCas.getSeconds()
            },
            100
        )
 
    </script>
</head>
 
<body>
    <div id="hodiny">...</div>
 
    <h1 id="nadpis">Vítejte na mé webové stránce</h1>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
 
    <h2>Obrázek:</h2>
 
    <img src="https://placehold.co/300x200" alt="Vzorový obrázek" id="obrazek">
 
    <h2>Odkaz:</h2>
 
    <a href="https://adasek.cz" target="_blank">Navštivte adasek.cz</a>
 
    <h2>Formulář:</h2>
 
    <form action="#" method="post">
        <label for="name">Jméno:</label>
        <input type="text" id="name" name="name">
    </form>
    </div>
</body>
</html>