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).
<html> <head> <script> var hodnota = 0; function kliknuto() { } </script> </head> <body> <span id="tenhletag">0</span> <input type="submit" value="Tlačítko" onclick="kliknuto()"> </body> </html>
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.
<html> <head> <script> function kliknuto(event) { } </script> </head> <body> <p onclick="kliknuto(event);">První odstavec. Není úplně krátký, ale zase ne přehnaně dlouhý. Neobsahuje vůbec nic zajímavého, takže by se ani neslušelo ho zbytečně protahovat větami, které o něm beztak nic neřeknou, protože o ničem se těžko dá říct něco kloudného. Natož užitečného.</p> <p onclick="kliknuto(event);">Druhý odstavec je celkem krátký a je tu proto, aby vás donutil použít <code>event.target</code> namísto <code>document.getElementById</code>.</p> </body> </html>
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.*
<html> <head> <script> function kliknuto(event) { return false; } </script> </head> <body> <form action="dummy.html" onsubmit="return kliknuto(event);"> <input id="policko" type="text" name="policko"> <input type="submit" value="Nastavit"> </form><br> <span id="levy">:(</span> ↔ <span id="pravy">:P</span> </body> </html>
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.*
<html> <head> <script> </script> </head> <body> <form action="dummy.html"> <input id="prvniPolicko" type="text" name="prvni"> <input id="druhePolicko" type="text" name="druhe"> <input type="submit" value="Odeslat"> </form> </body> </html>

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.
<html> <head> <script> </script> </head> <body> <form action="dummy.html"> <input id="policko" type="text" name="policko"> <input type="submit" value="Zkusit odeslat"> </form> </body> </html>
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.
<html> <head> <script> function kliknuto(event) { var policko = document.getElementById("policko"); var odstavec = document.getElementById("odstavec"); var format = document.getElementById("format"); //následující řádek je jen na ukázku; napište místo něj svůj kód odstavec.innerHTML += policko.value + format.value; } </script> </head> <body> <input id="policko" type="text"> <select id="format"> <option value="nic" selected>Bez zvýraznění</option> <option value="b">Tučně</option> <option value="i">Kurzíva</option> </select> <button onclick="kliknuto(event)">Přidat</button> <p id="odstavec"></p> </body> </html>
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. <html> <head> <script> // EUR ~= Kč / 25.74: € nebo € nebo € nebo String.fromCharCode(8364) // USD ~= Kč / 19.05: $ nebo &dollar; nebo $ nebo String.fromCharCode(36) var aktualniMena = "czk"; function prepnuto(event) { var policko = document.getElementById("policko"); var novaMena = event.target.value; aktualniMena = novaMena; } </script> </head> <body> <input id="policko" type="text" value="0"> <select id="mena" onchange="prepnuto(event)"> <option value="czk" selected>Česká Koruna (Kč)</option> <option value="eur">Euro (€)</option> <option value="usd">Americký Dolar (&dollar;)</option> </select> </body> </html>

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.*
<html> <head> <script> </script> </head> <body> No proto. </body> </html>
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.*
<html> <head> <script> function kliknuto() { var policko = document.getElementById("policko"); var odstavec = document.getElementById("odstavec"); } </script> </head> <body> <input id="policko" type="text" value="0"> <button onclick="kliknuto()">Zaspamuj</button> <p id="odstavec">Odstavec, který je zatím čistý.</p> </body> </html>
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).
<html> <head> <script> function jePrvocislo(x) { if (x < 2) return false; } function kliknuto() { var policko = document.getElementById("policko"); var vysledek = document.getElementById("vysledek"); if (jePrvocislo(parseInt(policko.value))) vysledek.innerHTML = "Ano, "+policko.value+" je prvočíslo."; else vysledek.innerHTML = "Ne, "+policko.value+" prvočíslo není."; } </script> </head> <body> <input id="policko" type="text" value="0"> <button onclick="kliknuto()">Ověř</button> <span id="vysledek"></span> </body> </html>

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.
<html> <head> <script> function zkontroluj(event) { } </script> </head> <body> <form action="dummy.html" onsubmit="return zkontroluj(event);"> <input id="policko" type="text" name="policko"> <input type="submit" value="Zkusit odeslat"> </form> </body> </html>
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čí.
<html> <head> <script> function preformatuj(text) { var vysledek = ""; var prev=0, pos=text.indexOf("["); while (pos >= 0) { vysledek += text.slice(prev, pos); if (text.slice(pos, pos+3) == "[B]") { var end = text.indexOf("[/B]", pos); prev = end+4; } else if (text.slice(pos, pos+5) == "[URL=") { var addrEnd = text.indexOf("]", pos); var end = text.indexOf("[/URL]", pos); prev = end+6; } // zkusíme v textu najít další značku od konce té poslední pos = text.indexOf("[", prev); } vysledek += text.slice(prev); return vysledek; } function kliknuto() { document.getElementById("vysledek").innerHTML = preformatuj(document.getElementById("pole").value); } </script> </head> <body> <textarea id="pole" cols="50"> Text [B]Tučný text[/B][URL="http://porg.cz"]Web školy[/URL] Konec textu </textarea> <button onclick="kliknuto()">Přeformátuj</button><br> <div id="vysledek"></div> </body> </html>
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).
<html> <head> <script> function vyhodnot(vyraz) { } function kliknuto(event) { var v = document.getElementById("policko").value; document.getElementById("hodnota").innerHTML = vyhodnot(v); } </script> </head> <body> <input id="policko" type="text" value="2*2+3*3*4+2*1"> <button onclick="kliknuto(event);">Zkusit odeslat</button><br> Výsledek: <span id="hodnota"></span> </body> </html>

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>.
<html> <head> <script> function init() { var seznam = ["PWR", "BWR", "PHWR", "RBMK", "AGR", "LMFBR", "PBR", "AHR"]; var ul = document.getElementById("reaktory"); } window.onload = init; </script> </head> <body> <h2>Obvyklejší typy štěpných reaktorů</h2> <ul id="reaktory"></ul> </body> </html>
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).
<html> <head> <script> var katalog = ["Plyšový medvěd", "Dovolená v Thajsku", "Víkend v Krušných horách", "Vstupenka na balet", "Oběd v luxusní restauraci", "Drátem do oka"]; var vybrane=[]; function zmena(event) { if (event.target.selected) { //uživatel vybral něco navíc, je potřeba to doplnit do seznamu a zkontrolovat počet (doplňte kód) } else { var pos = vybrane.indexOf(event.target); vybrane.splice(pos, 1); // ukázka: odebereme ze seznamu prvek, který uživatel odoznačil } } function init() { var body = document.body; for (var i=0; i<katalog.length; i++) { body.innerHTML += "<input type='checkbox' onchange='zmena(event)'>"+katalog[i]+"</input><br>"; } } window.onload = init; // všimněte si, tady používáme samotnou funkci bez závorek, aby ji šlo zavolat až někdy později </script> </head> <body> </body> </html>

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.
<html> <head> <style> </style> </head> <body> <div class="obsah"> <p>Text, který je úplně k ničemu a nezajímavý. Můžete mu nastavit pevnou šířku v pixelech, ušetříte si tím práci.</p> </div> <div class="menu"> <a href="#" onclick="return false">Nic</a><br> <a href="#" onclick="return false">Zas nic</a><br> <a href="http://mapy.cz/#!q=sassnitz">Sassnitz</a> </div> </body> </html>
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.
<html> <head> <style> /* Tady možná nic doplňovat nebudete chtít, to je na vás. Není to potřeba. */ </style> <script> function scrollovano() { var menu = document.getElementsByClassName("menu")[0]; } window.onscroll = scrollovano; </script> </head> <body> <p>Text nad menu, který je tu jen tak trochu na obtíž, aby se první chvilku menu scrollovalo spolu se stránkou. Nicméně, jakmile se tenhle text celý schová za horní okraj, menu byste měli přišpendlit.</p> <div class="menu"> <a href="#" onclick="return false">Nic</a> <a href="#" onclick="return false">Zas nic</a> <a href="http://mapy.cz/#!q=sassnitz">Sassnitz</a> </div><div id="vycpavka"></div> <p>Další zbytečný text, který je dobrý akorát k tomu, aby šlo scrollovat daleko dolů. Neobsahuje už žádné užitečné informace, nemusíte ho dál číst.</p> <p>Taky si na něm cvičím psaní na rychlost, bohužel ale pak moc nestíhám přemýšlet o obsahu, takže se sem asi nedostane žádné moc hluboké moudro. Lorem ipsum dolor sit amet. V našem záhonu s mrkví žádné zakopané drogy nehledejte.</p> <p>Další blbý text, aby toho nebylo málo. Místo nějaké užitečné práce tratím čas takovýmihle nesmysly. Ale docela mě to začlo bavit. Teď si nejsem jistý, jestli se to náhodou nemá psát jako začalo, ale jsem moc líný se podívat do pravidel.</p> </body> </html>
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ý.