Programátorské výzvy

Dle libosti si zvolte a vyřešte co nejvíc úloh, na které si troufnete. Číslo v závorce za názvem úlohy udává počet řádků, jaký asi odhadmo zabere řešení. Řešení (některá z možných) jsou na oddělené stránce.

Některé úlohy můžou být z webdesignerského nebo programátorského hlediska nevýchovné; takové jsou označené hvězdičkou. Jestli jste zvědaví, zeptejte se na podrobnosti. Jinak to nic neznamená.

1 Syntax jazyků Javascript a HTML

Úlohy pro cvičení základů programování.
1.1 Počítání (2ř.)
Funkce kliknuto() se volá při každém kliknutí na tlačítko. Doplňte ji tak, aby nastavila obsah tagu span na hodnotu vždy o 1 vyšší než minule.
Bude se vám hodit funkce document.getElementById(id).
1.2 Přeformátování (1ř.)
Po kliknutí na tag p se zavolá funkce kliknuto(event). Doplňte ji tak, aby změnila celý text v tom tagu na tučné písmo. Je fuk, co udělá druhé a další kliknutí.*
Ušetříte si práci, když využijete hodnotu event.target.
1.3 Výhybka (2ř.)
Formulář obsahuje jenom jedno políčko, ale jsou pod ním dva tagy span s různými id. Když uživatel zadá do políčka slovo levy, nastavte levý span na usměváčka :), když zadá pravy, nastavte totéž pravému span. Nemusíte řešit, co se stane, když uživatel zadá něco jiného.*
1.4 Kontrola formuláře (6ř.)
Formulář obsahuje dvě políčka. Před jeho odesláním zobrazte uživateli zprávu (okýnko ok/cancel), ve které bude mimo jiné napsaný obsah těch obou políček. Formulář se odešle jedině, pokud uživatel zvolí OK.*

2 Podmínky

2.1 Kontrola vyplnění (4ř.)
Do formuláře přidejte funkci, která zabrání jeho odeslání, pokud není v textovém políčku nic vyplněno.
Mmch. vlastně k tomu ani není potřeba psát žádný if. Ale to je na vás.
2.2 Přehazovací formátování (5ř.)
Po kliknutí na tlačítko na konec odstavce připište text zadaný uživatelem v políčku, a to se zvoleným formátováním.
K hodnotě vybrané v prvku select se dostanete přes jeho vlastnost value, jako vidíte v ukázce.
2.3 Měny s přepočtem (5ř.)
Při přepnutí měny převeďte částku v textovém políčku podle odpovídajícího kurzu tak, aby její hodnota v nově nastavené měně zůstala stejná.
Dost možná si ušetříte práci, když hodnotu z políčka nejdřív převedete na nějakou pevně danou měnu (třeba na koruny) a teprve potom z ní na tu nově zvolenou.

3 Cykly

3.1 Tvrdohlavec (1ř.)
Během načítání stránky se má uživateli ukázat potvrzovací okýnko a objevovat se znovu a znovu, dokud neklikne na OK.*
3.2 Spam (3ř.)
Doplňte kód funkce, která na konec odstavce napíše tolikrát za sebou slovo spam, kolik uživatel zadal v textovém poli.*
3.3 Prvočísla (5ř.)
Doplňte kód funkce, která o zadaném čísle rozhodne, zda je to prvočíslo. Svůj závěr navrátí jako booleovskou hodnotu true/false.
Budete k tomu asi potřebovat prozkoušet všechny rádoby-dělitele mezi dvěma a odmocninou z x, včetně. Většinou se k tomu používá výpočet zbytku po dělení, psaný jako dělenec % dělitel – když je nulový, pravé číslo dělí to levé beze zbytku. Pro příklad: jestli je x dělitelné třemi, zjistíme podmínkou if (x % 3 == 0) { něco... (ale to je jen ukázka, musíte ji poupravit). Dále, všimněte si, že odmocninu vlastně nepotřebujete počítat; ale kdyby přece jen, je to Math.sqrt(x).

4 Práce s řetězci

4.1 Přesvědčivá mailová adresa (5ř.)
Formuláři doplňte funkci, která zabrání jeho odeslání, pokud textové políčko neobsahuje: jeden zavináč (a ne víc) a za ním aspoň jednu tečku (ale klidně i nějaké před ním).*
Budou se vám hodit funkce: String.indexOf(čeho[, odkud]) a String.lastIndexOf(čeho[, dokud]). Závorky [] v předchozí větě znamenají, že parametr můžete vynechat.
4.2 Formátování BB Code (3ř.)
Uživatel zadá vstup do textového pole s formátovacími značkami [B][/B] pro tučné písmo a [URL="adresa"]text[/URL] pro webový odkaz. Změňte je na odpovídající HTML tagy. Když uživatel zadá nesmysly, je jedno, co se stane. Uvnitř jedné značky nesmí být žádná další a na velikosti písmen záleží.
Velká část kódu je už doplněná, aby vám ušetřila práci, ale stejně ho budete potřebovat pochopit. Všimněte si poněkud zvláštní podmínky v cyklu while: pokud žádná závorka není za pozicí prev v textu nalezena, navrátí se hodnota -1 a cyklus skončí.
4.3 Násobení a sčítání (11ř.)
V textovém políčku je zadaný výraz obsahující přirozená čísla, sčítání (+) a násobení (*). Doplňte funkci, která spočítá jeho výsledek. Nepoužívejte funkci eval(), to by bylo moc jednoduché.
Nejsnáz se to dá napsat rekurzí: sčítání má vlevo a vpravo nějaký výraz, tak oba rekurzí vyhodnotíme a sečteme. Když není co sčítat, zkusíme podobný postup s násobením. Když ani to, je zřejmě celý vstup jediné číslo, takže na něj stačí zavolat parseInt. Bude se vám hodit použít String.indexOf(hledané) a String.slice(odkud, kam).

5 Práce se seznamy

5.1 Seznam ze seznamu (3ř.)
Všechny položky seznamu vypište do stránky jako nečíslovaný odrážkový seznam. Ten už ve stránce je: stačí doplnit jeho položky, tj. tagy <li>.
5.2 Výběr tří (3ř.)
Uživatel si smí vybrat tři položky z katalogu, ale ne víc. Upravte kód stránky tak, aby se při označení čtvrtého políčka některé jiné odoznačilo (je jedno které, jen ne to, na které uživatel zrovna kliknul).
Katalog se vyrábí ze seznamu automaticky po načtení stránky (ve funkci init()). K odebírání prvků z pole je nejlepší použít funkci Array.splice(začátek, počet, [nahrazení]). Vložit prvek na konec pole můžete snadno pomocí Array.push(prvek).

6 Kaskádové styly

6.1 Postranní menu (9ř.)
Aniž byste měnili kód samotné stránky, doplňte CSS stylesheet tak, aby se menu zobrazovalo v bloku vlevo vedle textu.
6.2 Vytržené menu (5ř.)
Kombinace CSS a Javascriptu. Upravte stránku tak, aby se při scrollování nedostalo menu výš než na horní okraj stránky, a potom si zapnulo position: fixed a zůstalo navrchu stránky.
Bude se vám hodit vlastnost Element.scrollTop (ten ale v některých prohlížečích nefunguje) a možná taky Window.pageYOffset. Určitě použijete vlastnosti jako je Element.style.
6.3 Rozbalovací menu
K téhle úloze jsem nestihl udělat ukázkový kód. Jestli se do ní chcete pustit, budete si muset poradit sami. Jako vzor vám může posloužit kód téhle stránky, ale ten je poměrně spletitý.