JavaScript a jQuery

PHP Obsah lekce:

Použití jQuery
Selektory
Praktický příklad

Použití jQuery

Při vytváření webových stránek si často nevystačíme s pouhým statickým HTML, ať již napsaným přímo v souborech, či dynamicky generovaným pomocí nějakého programovacího jazyka. Jedná se například o nejrůznější efekty s obrázky, textem či formuláři jako je skrytí textu, zvětšení obrázku při najetí myši či kontrola zda je formulář správně vyplněný.

K takovým efektům se nejčastěji používá javascript. Pří práci s javascriptem je ale největším problémem nekompatibilita s nejrůznějšími druhy prohlížečů, která nám práci velmi znesnadňuje. Existují však javascriptové frameworky, které spoustu problémů způsobených nekompatibilitou řeší za nás. Navíc nám i velice usnadňují práci s javascriptem, kdy můžeme i zdánlivě složitý efekt velmi lehce použít či dokonce vytvořit.

Jedním z takových frameworků je jQuery, který lze zdarma stáhnout na oficiálních stránkách. Ke každé verzi jsou k dispozici 2 varianty - minified a uncompressed. Liší se od sebe pouze velikostí souboru, funkčně jsou ale naprosto stejné. Verze uncompressed je větší a má díky tomu přehledněji uspořádaný kód. Její použití je vhodné zejména v případě, kdy by chtěl programátor provádět úpravy přímo v kódu frameworku jQuery.

HTML kód nutný pro načtení knihovny

<script type="application/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="application/javascript"> $(document).ready(function(){ //sem patri kod - spusti se az je stranka "pripravena" }); </script>

Jak je patrné z výše uvedeného příkladu. Do kódu stránky je nutné přidat odkaz na soubor s jQuery frameworkem (v našem případě řádek <script type="application/javascript" src="js/jquery-1.4.2.min.js"></script> - použitá cesta k souboru se však může lišit dle varianty jQuery, kterou zvolíme, a dle umístění tohoto souboru) a javascript s funkcí $(document).ready. Tato funkce bude obsahovat kód, který bude jQuery na naší stránce provádět. Příkazy, které do této funkce umístíme, se provedou ihned po načtení stránky.

Selektory

Nejsilnější zbraní jQuery je práce s objektovým modelem dokumentu (DOM). Existuje několik druhů selektorů, pomocí kterých můžeme najít prvek ve stránce a dále s ním pracovat. Jsou to tyto kategorie selektorů:

XPath
CSS
Speciální selektory

Pro nás budou nejzajímavější CSS selektory. Díky nim můžeme totiž vyhledávat v HTML dokumentu prvky stejně snadno, jako v kaskádových stylech.

Následující ukázka demonstruje, jak lze po kliknutí na tlačítko (id="tlacitko") nechat skrýt (funkce hide() ) všechny bloky (p).

Ukázka použití selektorů

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/javascript" src="jquery-1.5.js"></script>
<script type="application/javascript">
$(document).ready(function(){
	$('#tlacitko').click(
		function(){
			$('p').hide();
		}
	);
});
</script>
<title>Ukázka použití JQuery</title>
</head>
<body>
<p>Ukázka použití JQuery</p>
<input type="button" id="tlacitko" value="Skrýt text" />
</body>
</html>

Skript použitý v této ukázce funguje následovně. Na stránce je umístěno tlačítko s identifikátorem id="tlacitko". Pomocí jQuery je tomuto tlačítku přiřazena událost click (funkce, která bude provedena po kliknutí myší na toto tlačítko). V této události je definována funkce, která obsahuje jedinou operaci - pro všechny odstavce provede příkaz hide(), tj. skryje tyto odstavce ($('p').hide();).

Naši ukázku si dále upravíme. Funkci hide(), která pouze skryje objekt na stránce, nahradíme funkcí toggle(). Ta objekt zobrazí nebo skryje, dle toho, zda je skrytý nebo ne. Upravená stránka tedy bude vypadat následovně:

Ukázka použití selektorů

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/javascript" src="jquery-1.5.js"></script>
<script type="application/javascript">
$(document).ready(function(){
	$('#tlacitko').click(
		function(){
			$('p').toggle();
		}
	);
});
</script>
<title>Ukázka použití JQuery</title>
</head>
<body>
<p>Ukázka použití JQuery</p>
<input type="button" id="tlacitko" value="Zobrazit / skrýt text" />
</body>
</html>

Ukázku si ještě dále rozšíříme. Pokud bychom chtěli zobrazit nebo skrýt pouze jeden konkrétní odstavec, musíme mu přiřadit hodnotu id, na kterou se budeme pomocí jQuery odkazovat.

Ukázka použití selektorů

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/javascript" src="jquery-1.5.js"></script>
<script type="application/javascript">
$(document).ready(function(){
	$('#tlacitko').click(
		function(){
			$('p').toggle();
		}
	);
    
    $('#tlacitko2').click(
		function(){
			$('#varovani').toggle();
		}
	);
});
</script>
<title>Ukázka použití JQuery</title>
</head>
<body>
<p>Ukázka použití JQuery</p>
<p id="varovani">Varování</p>
<input type="button" id="tlacitko" value="Zobrazit / skrýt text" />
<input type="button" id="tlacitko2" value="Zobrazit / skrýt varování" />
</body>
</html>

Na posledním příkladu si ukážeme použití selektorů pomocí CSS třídy (class). Tímto způsobem můžeme přistupovat k několika různým objektům na stránce (které maji nastavenou stejnou hodnotu class).

Ukázka použití selektorů

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/javascript" src="jquery-1.5.js"></script>
<script type="application/javascript">
$(document).ready(function(){
	$('#tlacitko').click(
		function(){
			$('p').toggle();
		}
	);
    
    $('#tlacitko2').click(
		function(){
			$('#varovani').toggle();
		}
	);
    
        $('#tlacitko3').click(
		function(){
			$('p.napoveda').toggle();
		}
	);
});
</script>
<title>Ukázka použití JQuery</title>
</head>
<body>
<p class="napoveda">Nápověda 1</p>
<p>Ukázka použití JQuery</p>
<p class="napoveda">Nápověda 2</p>
<p id="varovani">Varování</p>
<p class="napoveda">Nápověda 3</p>
<input type="button" id="tlacitko" value="Zobrazit / skrýt text" />
<input type="button" id="tlacitko2" value="Zobrazit / skrýt varování" />
<input type="button" id="tlacitko3" value="Zobrazit / skrýt nápovědu" />
</body>
</html>

Úkol

stáhněte si soubor ukol1.html a pomocí jQuery vytvořte skript, který provede následující:

Po načtení stránky schová všechny odpovědi
Po zadání správného hesla a kliknutí na tlačítko zobrazí příslušnou odpověď.

K vypracování Vám můžou pomoct tyto odkazy: Selektory, funkce Parent(), Události (Events).

Řešení úkolu

Soubor ukol1.html si uložíme do počítače a otevřeme v HTML editoru. Zjistíme, že zde již máme předchystaný javascript s funkcí $(document).ready, do které pouze dopíšeme skript, který se má provést po zadání hesla a kliknutí na tlačítko.

Nejprve je však nutné zajistit, aby se všechny odpovědi skryly. Všechny odpovědi jsou na stránce umístěny v blocích p, které mají nastavenou CSS třídu odpoved. Do skriptu tedy doplníme následující (zvýrazněno tučným písmen):

Řešení úkolu - skrytí odpovědí

<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.odpoved').hide();
});
</script>

Dále je nutné zajistit, aby se po zadání hesla zobrazila odpověď.

Řešení úkolu - dokončení

<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.odpoved').hide();
    
    	$('input[type="submit"]').click(function() {
		if ($('input[type="text"]',$(this).parent('form')).val()  == "heslo")
		{
			$('.odpoved',$(this).parent('form').parent('.polozka')).show();
			$(this).parent('form').hide();
		}
		return false;
	});
});
</script>

Abychom nemuseli vytvářet funkci pro každé tlačítko zvlášť (protože na stránce může teoreticky být libovolný počet otázek), bude nutné vytvořit funkci, která bude přiřazena všem tlačítkům na stránce. Toho docílíme tak, že událost click přiřadíme všem objektům input, které mají vlastnost type nastavenou na hodnotu submit ($('input[type="submit"]').click(function() { ... });).

Při provádění této události bude nejprve zjištěno, zda bylo zadáno správné heslo. V našem případě se bude srovnávat, zda byl zadán text "heslo". Porovnání provede funkce if, která bude porovnávat hodnotu v textovém poli s řetězcem "heslo". K hodnotě v textovém poli přistoupíme tak, že budeme adresovat objekt input, který má nastaven parametr type na hodnotu text. Avšak, když bychom použili toto řešení, narazili bychom na problém. Takových objektů input máme na stránce více. Javascript by tedy nevěděl, ke kterému z nich přistoupit.Proto identifikace daného objektu bude obsahovat ještě jeden parametr. Tím bude parent('form'). Ten informuje javascript, že objekt, ke kterému chceme přistoupit, je součástí formuláře, který je nadřazen tlačítku, na které chceme kliknout. A abychom dostali samotný text, který dané textové pole obsahuje, použijeme funkci val(). Výsledná hlavička podmínky if tedy bude vypadat následovně: if ($('input[type="text"]',$(this).parent('form')).val() == "heslo"). Parametr this, který je zde použit, odkazuje na tlačítko, na které jsme klikli.

Pokud je podmínka if vyhodnocena jako pravdivá, tak se zobrazí odpověď. Ta je identifikována css třídou odpoved. Ale protože je na stránce takových objektů opět více, je nutné ji blíže identifikovat pomocí funkce parent. Tuto funkci použijeme hned dvakrát. Protože se potřebujeme dostat k bloku polozka, který je nadřazen formuláři, který je nadřazen našemu tlačítku. A v tomto bloku polozka se nachází blok odpoved, který chceme zobrazit. Příkaz, který jej provede bude tedy vypadat následovně: $('.odpoved',$(this).parent('form').parent('.polozka')).show();. Samozřejmě také potřebujeme skrýt formulář. Ten je nadřazen našemu tlačítku, takže na něj odkážeme následujícím způsobem: $(this).parent('form').hide();.

Poslední částí obsluhy kliknutí na tlačítko je řádek return false;. Ten pouze zajišťuje předání návratové hodnoty false, aby formulář nebyl předán ke zpracování na server a stránka nebyla obnovena do výchozí podoby tak, jak je běžné u tlačítek typu submit.

Praktický příklad

Vytvořme si skript, který ve fotogalerii po najetí na fotografii zobrazí zajímavým efektem její popis.

Nejdříve musíme vymyslet, jakým způsobem budou data zapsána. Je důležité dbát na možnost, že javascript nemusí být v každém prohlížeči funkční, či povolený. Proto bychom měli navrhnout takové řešení, které je schůdné pro obě varianty.

Struktura HTML kódu jedné fotografie

<div class="obrazek">
    <img src="images/Lighthouse.jpg" alt="Maják" />
    <div class="popisek">Maják a západ slunce</div>
</div>

Tato struktura nám umožňuje v případě vyplého javascriptu zobrazit obrázek a pod ním jeho popisek. Obrázek i popisek náleží do stejného prvku, takže je jasné, že tyto dva údaje patří k sobě.

Názvy tříd si můžeme pojmenovat libovolně. Vhodné je pojmenovat je tak, aby bylo jasné co obsahují. Hlavní div má tedy třídu "obrazek" - obsahuje obrázek a jeho popisek. Div uvnitř má třídu "popisek". Identifikátor nemá v tuto chvíli smysl použít, protože chceme udělat takový skript, který pracuje univerzálně pro libovolné množství obrázků.

Dalším krokem je přidání kaskádových stylů. Chceme mít popisek v našedlém poli dole pod obrázkem. Kód může vypadat například takto:

Kaskádové styly

<style type="text/css">
.obrazek{
            float: left;
            margin-left: 20px;
            }.popisek{
            background:  #333333;
            color: #FFFFFF;
            padding: 10px;
            height: 75px;
            }
</style>

Posledním krokem je oživení popisku pomocí javascriptu. Chceme, aby se po najetí myši nad obrázek zobrazil popisek a po odjetí myši zase zmizel. V dokumentaci jQuery s přehledem událostí můžeme najít hover(). Hover() je funkce, která umí obsloužit i najetí myši nad objekt i jeho opuštění. Je to tedy zřejmě to, co potřebujeme.

V dokumentaci můžeme najít také několik zajímavých efektů. Pro nás jsou zajímavé fadeTo(), který použijeme na zobrazení popisku i s možností nastavení průhlednosti, a fadeOut(), který použijeme zase ke skrytí popisku.

Výsledný javascript

<script type="application/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="application/javascript">
$(document).ready(function(){
	$('.popisek').hide();
	$('.popisek').css("position", "relative");
	$('.popisek').css("margin-top", "-95px");
	$('.obrazek').hover(
		function(){
			$('.popisek', this).fadeTo('slow', 0.8);
		},
		function(){
		   	$('.popisek', this).fadeOut();
		}
	);
});
</script>

Další čtení

Odkazy

Otázky

Jakým způsobem lze v jQuery vybrat nějaký prvek na stránce?
Jaké znáte javascriptové události?

webdesign, xhtml, css, php - Mgr. Michal Mikláš