Návrh XML [2024-02-27]

Vyřešte úlohy 1 a 3 z návrhu XML pro jídelní lístek.

PS: Úloha číslo 2, tj. použití programu xmllint, není povinná. Kdo chce, může si to vyzkoušet, kdo nechce, tomu postačí základní validace pomocí prohlížeče.

Ostylování XML [2024-03-05]

Vyřešte úlohy 4 a 5 z návrhu XML pro jídelní lístek, tj. doplňte XML z minulé úlohy o vhodná CSS-pravidla, aby se na jídelní lístek dalo rozumně koukat.

PS: V nápovědě pro pátou úlohu je pár návrhů na vhodná pravidla, ale „vyřádit“ se můžete samozřejmě víc.

Jednoduchá aplikace formulářových prvků [2024-04-02]

Řešte úlohu generátor náhodných čísel pomocí formulářových prvků.

PS: Zase si můžete výsledek vyzkoušet i na telefonu.

Kreslení do canvasu a aplikace WebWorkers [2024-04-23]

Na hodině jsme prakticky ověřili, že kreslení do canvasu po jednotlivých pixelech je PŘÍŠERNĚ POMALÉ :-) Učiňte proto následující pokusy:

1. Doplňte kód z přednášky o měření času stráveného výpočtem a vykreslením obrázku (viz Date.now()).
2. Doplňte kód z přednášky tak, aby barva každého pixelu byla generována náhodně.
3. Přepište kód tak, aby se nejdříve spočítala data celého obrázku a teprvé poté se obrázek překreslil do canvasu celý najednou.
4. Přesuňte výpočet dat obrázku z předchozího kroku do WebWorkeru.
5. Přesuňte do WebWorkeru i zobrazení dat obrázku. (Jelikož naklonovat DOMElement do WebWorkeru nejde, musíte použít OffscreenCanvas.)

Který ze způsobů kreslení do canvasu je nejrychlejší?

Aplikace WebAudio API [2024-04-23]

Vyřešte úvodní úlohu na aplikaci WebAudio API – webové piano. Pozor – poslední změny v bezpečnosti vyžadují zavedení audio-kontextu až na uživatelovo vyžádání, takže musíte veškerý kód uzavřít do nějaké funkce :-(

PS: Když zjistíte frekvence tónů oktávy, je to jednoduché. Takže to berte opravdu jako náhradu za odpadlou hodinu a spíš se podívejte, jak WebAudio funguje, příště na to navážeme.

Další aplikace WebAudio API [2024-04-30]

Pokračujte v řešení úlohy z hodiny. Konkrétně:

• Zvětšete graf, klidně i na celou stránku.
• Přidejte možnost měnit frekvenci oscilátoru za běhu aplikace. (Nejlépe asi pomocí <input type="range">.)
• Přidejte možnost změny tvaru vlny. (Možná pomocí <option> nebo klidně i tlačítky?)

PS: Příklad z GitHubu počítá souřadnice do grafu asi lépe než příklad z MDN.