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.
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>
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>
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>
<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>
<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>
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>
<html>
<head>
<script>
// EUR ~= Kč / 25.74: € nebo € nebo € nebo String.fromCharCode(8364)
// USD ~= Kč / 19.05: $ nebo $ nebo $ 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 (€)</option>
<option value="usd">Americký Dolar ($)</option>
</select>
</body>
</html>
<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>
[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>
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>
<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>
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>