Možné řešení úloh z 1. a 8. října

Funkčních řešení každé z úloh je nesmírně mnoho. Zde nabízená nejsou ta nejkratší ani nejrychlejší, ale snad jsou co nejnázornější.

Je pěkné, že máte o řešení úloh zájem. Okýnka na zkoušení kódu na této stránce ale nenajdete: jestli se chcete něco naučit, čtení samo o sobě vám moc nedá. Zkuste pochopit základní myšlenku řešení, snažte se v zápisu najít všechno, co by vás překvapilo, a potom příslušnou úlohu vyřešit zpaměti.

1 Syntax jazyků Javascript a HTML

1.1 Počítání
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.
<html> <head> <script> var hodnota = 0; function kliknuto() { hodnota = hodnota + 1; document.getElementById("tenhletag").innerHTML = hodnota; } </script> </head> <body> <span id="tenhletag">0</span> <input type="submit" value="Tlačítko" onclick="kliknuto()"> </body> </html>
1.2 Přeformátování
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í.
<html> <head> <script> function kliknuto(event) { event.target.innerHTML = "<b>" + event.target.innerHTML + "</b>"; } </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
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) { var ciloveId = document.getElementById("policko").value; document.getElementById(ciloveId).innerHTML = ":)"; 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
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> function zkontroluj(event) { var form = event.target; return confirm('Vážně byste chtěli do světa vytrubovat "' + form["prvni"].value + '" a "' + form["druhe"].value + '"?'); } </script> </head> <body> <form action="dummy.html" onsubmit="return zkontroluj(event)"> <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í
Do formuláře přidejte funkci, která zabrání jeho odeslání, pokud není v textovém políčku nic vyplněno.
<html> <head> <script> function zkontroluj() { if (document.getElementById("policko").value == "") { return false; } return true; } </script> </head> <body> <form action="dummy.html" onsubmit="return zkontroluj()"> <input id="policko" type="text" name="policko"> <input type="submit" value="Zkusit odeslat"> </form> </body> </html>
2.2 Přehazovací formátování
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"); if (format.value == "nic") { odstavec.innerHTML += policko.value; } else { odstavec.innerHTML += "<"+format.value+">" + 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
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 &euro; nebo &#8364; nebo String.fromCharCode(8364) // USD ~= Kč / 19.05: $ nebo &dollar; nebo &#36; nebo String.fromCharCode(36) var aktualniMena = "czk"; function prepnuto(event) { var policko = document.getElementById("policko"); var novaMena = event.target.value; var cenaVKorunach = policko.value; if (aktualniMena == "eur") cenaVKorunach *= 25.56; else if (aktualniMena == "usd") cenaVKorunach *= 18.80; if (novaMena == "eur") policko.value = cenaVKorunach / 25.56; else if (novaMena == "usd") policko.value = cenaVKorunach / 18.80; else policko.value = cenaVKorunach; 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 (&euro;)</option> <option value="usd">Americký Dolar (&dollar;)</option> </select> </body> </html>

3 Cykly

3.1 Tvrdohlavec
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> while(!confirm("klikni na OK")) {} </script> </head> <body> No proto. </body> </html>
3.2 Spam
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"); for (var i=0; i<policko.value; i++) { odstavec.innerHTML += " spam"; } } </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
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.
<html> <head> <script> function jePrvocislo(x) { if (x < 2) return false; for (var i=2; i*i<=x; i++) { if (x % i == 0) return false; } return true; } 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
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).*
<html> <head> <script> function zkontroluj(event) { var mail = event.target["policko"].value; if (mail.indexOf("@") >= 0 && mail.indexOf("@") == mail.lastIndexOf("@") && mail.indexOf("@") < mail.lastIndexOf(".")) { return true; } return false; } </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
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ží.
<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); vysledek += "<b>" + text.slice(pos+3, end) + "</b>"; prev = end+4; } else if (text.slice(pos, pos+5) == "[URL=") { var addrEnd = text.indexOf("]", pos); var end = text.indexOf("[/URL]", pos); var addr = text.slice(pos+5, addrEnd); vysledek += "<a href=" + addr + ">" + text.slice(addrEnd+1, end) + "</a>"; 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í
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é.
<html> <head> <script> function vyhodnot(vyraz) { var posPlus = vyraz.indexOf("+"); if (posPlus >= 0) // pokud jsme něco našli... return vyhodnot(vyraz.slice(0, posPlus)) + vyhodnot(vyraz.slice(posPlus+1)); var posKrat = vyraz.indexOf("*"); if (posKrat >= 0) return vyhodnot(vyraz.slice(0, posKrat)) * vyhodnot(vyraz.slice(posKrat+1)); return parseInt(vyraz); // to se stane jedině, pokud žádná z obou podmínek neuspěla } 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
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"); for (var i=0; i<seznam.length; i++) { ul.innerHTML += "<li>"+seznam[i]+"</li>"; } } 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ří
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).
<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.checked) { //uživatel vybral něco navíc, je potřeba to doplnit do seznamu a zkontrolovat počet vybrane.push(event.target); if (vybrane.length > 3) { vybrane[0].checked = false; vybrane.splice(0, 1); } } else { var pos = vybrane.indexOf(event.target); vybrane.splice(pos, 1); } } 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
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> div.obsah { position: relative; left: 200px; width: 400px; } div.menu { position: absolute; top: 20px; width: 180px; } </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
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.
<html> <head> <style> </style> <script> function scrollovano() { var menu = document.getElementsByClassName("menu")[0]; if (window.pageYOffset > menu.offsetTop) { menu.style.position = "fixed"; menu.style.top = 0; document.getElementById("vycpavka").style.height = menu.offsetHeight; } } 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>