Člověk by při tvorbě internetových stránek měl dodržovat určitá pravidla a snažit se věci dotáhnout k dokonalosti. O této problematice jsem již na tomto serveru psal. V zásadě jde o volbu kvalitního hostingu, výstižné domény, poutavého designu a tak dále s tím, že je třeba dbát na optimalizaci vzhledu, SEO a vlastně všechny nejposlednější detaily. Osobně se ale domnívám a považuji za správný takový názor, že v jednoduchosti je síla, a proto neobohacujme své stránky nepřeberným množstvím animací a efektů či zbytečných informací, neboť v závěru by nám takové počínání mohlo spíše ublížit. Na místě ovšem zůstává web určitým způsobem a s trochou citu zpestřit. Příkladem mohou být klasické ankety, jednoduché dotazníky, kontaktní formuláře nebo třeba obrázkoví smajlíci. Já vám ale dnes ukáži několik způsobů, jak vylepšit své stránky pomocí JavaScriptu, z nichž si můžete některé vybrat a použít. Jednoduše zkopírujete uvedený kód a vložíte jej do těla vaší HTML stránky.
1. Změna obrázku po kliknutí na text
Pomocí JavaScriptu lze velice snadno měnit určitý prvek při kliknutí na jiný určitý prvek, aniž bychom znovu načetli celou stránku. V našem případě klikneme na Načti první obrázek a ten se zobrazí, poté klikneme na Načti druhý obrázek a ten se ukáže místo obrázku prvního a tak dále. Pro tento účel si proto připravíme čtyři obrázky (počet je po drobné úpravě kódu pouze na vás), které mezi sebou budeme chtít měnit a použijeme tento kód:
<script language="JavaScript">
function klik1(zdroj) {obr1.src=zdroj}
</script>
<img id="obr1" src="obr1.jpg">
<h2 onclick="klik1('obr1.jpg')">Načti první obrázek</h2>
<h2 onclick="klik1('obr2.jpg')">Načti druhý obrázek</h2>
<h2 onclick="klik1('obr3.jpg')">Načti třetí obrázek</h2>
<h2 onclick="klik1('obr4.jpg')">Načti čtvrtý obrázek</h2>
Obrázky pochopitelně musejí být pojmenovány, jak je napsáno v tomto kódu, a neuvedeme-li cestu, musejí být také umístěny ve stejné složce jako HTML stránka s touto funkcí. Pokud chcete, aby se texty pro načtení jiného obrázku chovaly jako odkazy, do CSS souboru ještě vložte:
h2 {cursor: pointer}
2. Změna velikosti textu po kliknutí
Velice efektivní a užitečnou funkcí, která se mně osobně skutečně líbí, je zvětšení textu po kliknutí na něj. Máme tedy čtyři odstavce textu, přičemž při přejetí myši přes každý z nich se jeho barva vždy změní na červenou. Pokud na odstavec klikneme, velikost jeho písma se zvětší na dvojnásobek. Klikneme-li podruhé, písmo se vrátí do původní velikosti. Hezké, nemyslíte? Takového výsledku lze docílit touto funkcí:
<script language="JavaScript">
st=1;
function akce(nazev) {nazev.style.color="red"}
function akce2(nazev) {nazev.style.color="black"}
function akce3(nazev) {
if (st==1) {st=0;nazev.style.fontSize="200%";}
else {st=1;nazev.style.fontSize="100%";}
}
</script>
<p id="o1" onclick="akce3(o1)" onmouseover="akce(o1)" onmouseout="akce2(o1)">Odstavec jedna.</p>
<p id="o2" onclick="akce3(o2)" onmouseover="akce(o2)" onmouseout="akce2(o2)">Odstavec dva.</p>
<p id="o3"onclick="akce3(o3)" onmouseover="akce(o3)" onmouseout="akce2(o3)">Odstavec tři.</p>
<p id="o4" onclick="akce3(o4)" onmouseover="akce(o4)" onmouseout="akce2(o4)">Odstavec čtyři.</p>
Tento efekt můžete použít ku příkladu ve svém e-shopu u jednotlivých zboží, čímž upoutáte pozornost a zvýšíte jejich prodej, nebo třeba na svých osobních stránkách jako doplněk navíc pro slabozraké čtenáře.
3. Změna formátování odstavce po přejetí myši
Odstavce uzavřené do párového tagu <p> můžeme různě formátovat. Toto formátování lze pomocí CSS a JavaScriptu libovolně měnit po pouhém přejetí myší. V mém případě se vždy odstavec se žlutou barvou písma, červený pozadím a šířkou 400px změní na odstavec s bílou barvou písma, modrým pozadím a šířkou 500px. Do těla dokumentu vložte:
<p class="t1" onmouseover="{this.className='t2'}" onmouseout="{this.className='t1'}">Odstavec jedna.</p>
<p class="t1" onmouseover="{this.className='t2'}" onmouseout="{this.className='t1'}">Odstavec dva.</p>
<p class="t1" onmouseover="{this.className='t2'}" onmouseout="{this.className='t1'}">Odstavec tři.</p>
<p class="t1" onmouseover="{this.className='t2'}" onmouseout="{this.className='t1'}">Odstavec čtyři.</p>
Poté nezapomeňte v CSS souboru nadefinovat vzhled odstavců t1 a t2:
.t1 {background:red; color: yellow; width:400px}
.t2 {background:blue; color: white; width:500px}
4. Přepínání barevných záložek s textem
S touto funkcí se na internetu můžeme setkat poměrně často. Jedná se o přepínání záložek různých barev, kdy první záložka se žlutou barvou má pod sebou textový odstavec se žlutým pozadím. Po kliknutí na červenou záložku se namísto žlutého odstavce zobrazí červený odstavec s jiným textem a tak dále. Tuto funkci lze umístit například do horní části webu jako informační panel bez nutnosti znovunačtení stránky. Jedna záložka může kupříkladu obsahovat text o vás, druhá o vašem webu a podobně. Pokud záložky chcete realizovat, nejprve vložte do těla stránky tento JavaScript:
<script language="javascript">
function akce1() {o1.style.display="block";o2.style.display="none";
o3.style.display="none";o4.style.display="none"}
function akce2() {o2.style.display="block";o1.style.display="none";
o3.style.display="none";o4.style.display="none";}
function akce3() {o3.style.display="block";o1.style.display="none";
o2.style.display="none";o4.style.display="none"}
function akce4() {o4.style.display="block";o1.style.display="none";
o2.style.display="none";o3.style.display="none"}
</script>
<p id="odkaz"> <span id="ao1" onclick="akce1(o1)">Zobrazit článek 1</span> <span id="ao2" onclick="akce2(o2)">Zobrazit článek 2</span> <span id="ao3" onclick="akce3(o3)">Zobrazit článek 3</span> <span id="ao4" onclick="akce4(o4)">Zobrazit článek 4</span> </p> <p id="o1"> Text článku 1.</p> <p id="o2"> Text článku 2.<p> <p id="o3"> Text článku 3.</p> <p id="o4">Text článku 4.<p>
Následně musíme definovat styl jednotlivých záložek, a proto doplňte váš CSS soubor:
body {background-color: gray}
#odkaz {display: inline}
#o2, #o3, #o4{display: none}
#o1 {background-color: yellow; margin: 0px}
#o2 {background-color: red; margin: 0px}
#o3 {background-color: green; margin: 0px}
#o4 {background-color: blue; margin: 0px}
#ao1 {background-color: yellow; cursor: pointer}
#ao2 {background-color: red; cursor: pointer}
#ao3 {background-color: green; cursor: pointer}
#ao4 {background-color: blue; cursor: pointer}
5. Kalkulačka
Pomocí formuláře a jednoduché funkce si můžete na vaše stránky vložit kalkulačku pro rychlý výpočet. Ta se skládá ze dvou políček a dvou tlačítek. Do jednoho pole zadáte výraz pro výpočet, kliknete na Vypočítej a v poli druhém se zobrazí výsledek. Tlačítko Smaž slouží pro vymazání vepsaných hodnot. Chcete-li vyzkoušet tuto kalkulačku, do těla vašeho HTML souboru zkopírujte následující:
<script>
function pocitej() {kalk.vysledek.value=eval(kalk.vyraz.value)}
</script>
<form name="kalk"> Zadej výraz: <input type="text" name="vyraz"> Výsledek: <input type="text" name="vysledek"> <input type="button" value="Vypočítej" onclick="pocitej()"> <input type="reset" value="Vymaž"> </form>
6. Určení největšího a nejmenšího čísla a aritmetického průměru z deseti zadaných
Jako poslední bych vám rád nabídnul funkci, která při načtení stránky vyzve k zadání deseti libovolných čísel, poté je všechny vypíše, určí největší a nejmenší z nich a spočte aritmetický průměr.
<script language="javascript">
MAX=0,s=0,MIN=100;
for(i=1;i<11;i++)
{A=eval(prompt("Zadej "+i+". číslo",""));document.write(A+" ");
if(A>MAX) MAX=A;s+=A;
if(A<MIN) MIN=A;
}
s=s/10;
document.write("<br><span class=\"cerv\">Max. číslo je "+MAX+"</span>")
document.write("<br><span class=\"cerv\">Aritmetický průměr je "+s+"</span>")
document.write("<br><span class=\"cerv\">Min. číslo je "+MIN+"</span>")
</script>
V CSS pak ještě definujeme třídu cerv:
.cerv {color: red}
V tomto článku jsem představil pouze zlomek možností a vylepšení, kterých lze dosáhnout pomocí JavaScriptu. Všechny tyto funkce mám sám vyzkoušené a rád je používám. Nezapomeňte ale, že uživatelům s nepovoleným JavaScriptem v internetovém prohlížeči nebudou fungovat. Těch však dnes není příliš. Pokud sami víte o dobré a jednoduché funkci pro zpestření webu, určitě nám dejte vědět v komentáři.