Úvod od JavaScriptu – 4.díl

V dnešní lekci si ukážeme, jak lépe využít javascript z toho, co už umíme. Názorně zde ukáži pár příkladů..

V tomto příkladu načteme přes furmulář od uživatele nějakou matematickou funkci a pomocí JS funkce eval() ji spočítáme a vypíšeme funkcí alert()

<form name="formular">
<input type="text" value="Výraz" name="kalkulacka" size="20">
<input type="button" value="Vypočítej" onclick="alert(eval(document.formular.kalkulacka.value))">
</form>

Zde opět příklad s formuláři, tentokrát jednoudušší validace:

<script language="JavaScript" type="text/javascript">
 function zkontroluj() {
 if(document.kontrola.policko.value.length == 0) {
 alert("Zapomněli jste vyplnit políčko!");
 }
 }
</script> 

<form name="kontrola" onSubmit="zkontroluj();">
 <input type="text" name="policko" />
 <input type="submit" value="odeslat" />
</form>

Pokud zde uživatel nevyplní pole s názvem „policko“, tak ho JS oknem alert upozorní, že pole nevyplnil. Zde si s tím můžete pohrát a např. pro PSČ dát délku 5-6 znaků, nebo pomcí regulárních výrazů zkontrolovat emailovou adresu. Regulární výrazy jsou téma na celý článek, zde na ně pouze poukazuji, tak si je zkuste vygooglit :), možná se časem článek objeví.

Pomocí formulářů jdou dělat různé věci. Při použití CSS stylů a JS můžete vytvoři docale hezkou kalkulačku. Je to jen na Vaší představivosti.

Jako poslední příklad si ukážeme, dnes velice používané LightBoxy. Co to vlastně je? LightBox nám po kliknutí na náhled obrázku, obrázek zvětší přes stránku nebo do jeho původní velikosti. Pro příklad je už i používá, všem známý myslím :), Facebook. Na internetu je celá řada volně dostupných LightBoxů. Použití není vůbec těžké. Ukáži Vám jeden znich:

Z této adresy si stáhněte onen lightbox: http://www.huddletogether.com/projects/lightbox2/#download
Rozbalte jej a nahrajte do kořenového adresáře, kde chcete LightBox používat.
Dále do hlavičky stránky (mezi tagy head) vložte následující kód:

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Nyní to je z příprav vše, teď stačí LightBoxu říct, jaké obrázky má používat. Jak uvidíte jedná se pouze o to, že použijeme v odkazu atribut rel=”lightbox”

<a title=”Popis obrázku” rel=”lightbox” href=”images/image-1.jpg” >obrazek #1</a>

Nebo pokud chceme přidat skupinu obrázků a přepínat mezi nimi šipkami:

<a rel=”lightbox[skupina]” href=”images/image-1.jpg” >obrazek #1</a>
<a rel=”lightbox[skupina]” href=”images/image-2.jpg” >obrazek #2</a>
<a rel=”lightbox[skupina]” href=”images/image-3.jpg” >obrazek #3</a>


Doufám, že jste se dnes v tomto dílu zase něco přiučili v JavaScriptu. Chtěl jsem tento díl zaměři na praktičtější využití. Snad se mi to alespoň trochu povedlo. Přiště si nejspíš ukážeme něco z AJAXu…

O Antonín Crha

Jsem studentem Masarykovy Univerzity - Fakulta Informatiky. Zabývám se především tvorbou webových prezentací pomocí PHP, XHTML, CSS, MySQL, JS, AJAX a základní SEO optimalizace. Dále mi také není cizí JAVA, C, počítačové sítě a oprava PC. Jinak rád hraji fotbal, stolní tenis a ještě radši jsem s přáteli v nějaké hospůdce :)...