JQuery framework
Obsah
Úvod do jQuery
jQuery je framework pre objektovo orientovaný skriptovací jazyk JavaScript. Kladie dôraz na interakciu medzi JavaScriptom a HTML. Jeho syntax je navrhnutá pre jednoduchšiu navigáciu dokumentu, výber DOM elementov, vytváranie animácií, spracovanie udalostí, a vývoj AJAX aplikácií. jQuery taktiež poskytuje možnosti pre vývojárov na vytváranie pluginov postavených na jazyku JavaScript.
Základ jQuery tvorí súbor jquery.js, ktorý je voľne k stiahnutiu na oficiálnej stránke http://jquery.com/. Súbor po stiahnutí uložíme do adresára s webovým obsahom a k HTML stránke ho nalinkujeme príkazom:
<script language="javascript" type="text/javascript" src="/jscripts/jquery.js"></script>
Hodnota parametra src deklaruje umiestnenie súboru jquery.js. Po stiahnutí a nalikovaní súboru je jQuery pripravený pre použitie. Všetky javaskript akcie je najlepšie vykonávať až po načítaní celej HTML stránky. jQuery to umožňuje nasledovne pomocou funkcie:
$(document).ready(function(){
nas kod
});
Do tela funkcie (nas kod) píšeme, ktoré sa vykonajú až bude celá stránka načítaná.
Výber prvkov
Výber prvkov v HTML stránke pomocou jQuery je jednoduchý. Odborne sa nazývajú selektory. Je to spôsob akým vyberieme na stránke určitý objekt, napríklad odkaz, alebo odstavec. Následne s ním môžeme ďalej pracovať, napríklad ho necháme pomaly zmiznúť alebo zobraziť. Samozrejme pomocou jQuery môžeme s prvkami robiť omnoho viac.
Odstavec v HTML tagu zapíšeme nasledovne:
<p id="odstavec">Výber prvkov v jQuery</p>
kde odstavec je identifikátor objektu p, ktorý v jQurey identifikujeme zápisom #odstavec. Symbol # (mriežka) je pred názvom identifikátora povinný. Zápis v jQuery bude nasledovný:
$(document).ready(function(){
$("#odstavec").hide(1000);
});
Metóda hide() slúži pre skrytie objektu, ktorú pripojíme za selektor pomocou bodky. Do zátvoriek metódy zadáme hodnotu, ktorá reprezentuje čas trvania miznutia napr. jednu sekundu (t.j., 1000 milisekund.). Na zobrazenie objektu slúži metódu show(), ktorú použijeme obdobne ako metódu hide().
Hodnota parametra ID prvku v HTML stránke môže podľa pravidiel obsahovať bodku alebo aj hranaté zátvorky. Zápis takého ID sa vykoná nasledovne:
$("#moj\.odstavec")
funguje teda pre výber prvku s id = "moj.odstavec". Pred hranaté zátvorky alebo bodky je potrebné písať lomítko.
Na výber viacerých prvkov, ktoré majú rovnakú triedu vzhľadom k tomu, že javaskript neobsahuje príkaz getElementByClassName by sme museli vytvoriť svoju vlastnú funkciu. jQuery rieši daný problém nasledovne.
Zápis prvkov v HTML kóde:
<p class="vsetky_odstavce">Prvý odstavec</p>
<p class="vsetky_odstavce">Druhý odstavec</p>
<p id=“moj_odstavec“>Tretí odstavec</p>
Zápisom v jQuery, uvedeným nižšie, zmiznú všetky odstavce triedy vsetky_odstavce. V našom prípade je to prvý a druhý odstavec.
$(".vsetky_odstavce").hide(1000);
Nasledujúcim zápisom zmiznú všetky odstavce (aj tretí odstavec) objektu p na stránke bez ohľadu nato akú mali triedu alebo ID:
$("p").hide(1000);
V jQuery je niekoľko spôsobov výberu prvkov, ktoré možeme použiť. Výber viacerých prvkov oddelených pomocou čiarky je nasledovný:
$("p, a, div, #moj_odstavec").hide(1000);
Pri výbere prvku z iného prvku použijeme nasledujúci zápis, ktorý skryje všetky spany v odstavci:
$("#moj_odstavec span").hide(1000);
Pri výbere prvého prvku v inom prvku napr. prvý riadok v tabuľke alebo prvý span v odstavci. K spanu pridáme dvojbodku a za ňou napíšeme, že nás zaujíma iba prvý span. Samozrejme je možné vybrať aj posledný alebo napr. párny:
$("#moj_odstavec span:first").hide(1000);
Ak sa chceme získať hodnotu niektorej položky v <select> použijeme metódu val(), ktorá nám vráti hodnotu danej položky.
var CoJeVybrane = $("#moj_select option:selected").val();
Metódy a efekty
Výber prvkov v HTML sme si ukázali v predchádzajúcej časti s použitím metódy hide(), ktorá nám prvok vyberie a schová. jQuery pomocou metódy fadeOut() dokáže prvok aj rozplynúť. Zobrazenie takého prvku vykonáme pomocou metódy fadeIn(). Do zátvoriek môžeme vpísať hodnotu v milisekundách a nechať tak rozplynutie alebo zobrazenie predĺžiť. Do tretice spomenieme spôsob, ako prvok schovať alebo zobraziť pomocou metód slideDown() a slideUp().
Prepínanie
To, že jQuery nám naozaj šetrí prácu, nám predvedie aj nasledujúca sada metód. Situácia pri ktorej je potrebné niečo schovať a zobraziť kliknutím na rovnaký prvok. Za normálnych podmienok musíme zistiť, či to čo chceme schovať alebo zobraziť je zobrazené alebo schované. jQuery to urobí za nás, stačí použiť metódu toggle(). Metóda schová alebo zobrazí podľa toho v akom stave sa prvok nachádza.
Metódy pre manipuláciu s obsahom
Pozrieme sa na metódy, ktorými manipulujeme s obsahom v HTML stránke. Napríklad chceme pridať do niektorého odstavca text alebo zistiť text, ktorý príslušný odstavec obsahuje. Metódou text() zistíme obsah prvku (ktorý text obsahuje) a môžeme si ho uložiť do premennej:
var obsah = $("#moj_odstavec").text();
Text do prvku moj_odstavec2 vložíme pomocou metódy text(), ktorý stačí napísať do zátvoriek:
$("#moj_odstavec2").text("Nový obsah odstavca");
Takto môžeme napríklad skopírovať obsah jedného odstavca do druhého:
var obsah = $("#moj_odstavec").text();
$("#moj_odstavec2").text(obsah);
Rovnakým spôsobom môžeme manipulovať aj s HTML stránkou, a to použitím metódy html(). Rozdiel medzi metódami text() a html() je v tom, že metóda html() prenesie text aj HTML tagom a metóde text() iba čistý text.
Pokiaľ je už v cieľovom odstavci text a chceme pripojiť ďalší text použijeme metódy append() (text sa pripojí na koniec) alebo prepend() (text sa pripojí na začiatok):
$("#moj_odstavec").append("Text sa pripojí na koniec odstavca");
$("#moj_odstavec").prepend("Text sa pripojí na začiatok odstavca");
Udalosti
Udalosťou sa rozumie každá akcia, ktorá sa na HTML stránke stane. Typickou udalosťou je kliknutie myšou na HTML odkaz, stlačenie klávesy alebo pohyb myši ponad objekt stránky. Na všetky udalosti môžeme naprogramovať akcie, ktoré sa vykonajú ak daná udalosť nastane, napr. zvýraznenie textu pri pohybe myši ponad odstavec.
Ošetrenie udalosti pomocou jQuery je nasledovné:
$(objekt).Udalosť(function(){
akcia();
});
kde objekt je ID HTML objektu, ktorého udalosť chceme ošetriť. Objekt od udalosti sa oddeľuje bodkou. Udalosť môže byť click pre kliknutie myšou, mouseover pre pohyb myšou a pod. Samotná akcia, ktorá sa má vykonať sa píše do zložených zátvoriek metódy function(){}, napr. Pre zobrazenie a skrytie textu použijeme metódu toggle().
Ukážkový kód pre zobrazenie alebo skrývanie textu po kliknutí myšou:
$("#ZobrazAleboSkry").click(function(){
$("#skryvany_odstavec").toggle();
});
Na zvýraznenie textu pri pohybe myši ponad odstavec ošetríme udalosť mouseover, ktorá zavolá metódu css(). Použitie css metódy je jednoduché, do zátvoriek sa uvedie kaskádový štýl, ktorý sa vykoná ak daná udalosť nastane.
$("#ZvyraznenyText").mouseover(function(){
$(this).css('background','yellow');
`
$("#ZvyraznenyText").mouseout(function(){
$(this).css('background','none');
});
Kľúčové slovo this nahrádza ID objektu, ktorého udalosť ošetrujeme. Na Obr. 1 je znázornené zvýrazňovanie textu pri pohybe kurzorom ponad text.
Ďalším typickým príkladom udalosti je stlačenie klávesy používateľom. Stlačenie klávesy systém zaregistruje a vykoná naprogramovanú akciu. Pre ošetrenie tejto udalosti stačí do HTML stránky napísať kód:
$(document).keyup(function(event){
if (event.keyCode == 27) {
alert("Stlačenie klávesy ESCAPE");
}
});
V tomto prípade ošetrujeme udalosť keyup (obdobne funguje aj udalosť keydown). Kľúčové slovo event slúži na zistenie, ktorá klávesa bola práve stlačená. V uvedenom príklade sa vykoná príkaz alert (zobrazenie okna s upozornením), ak používateľ stlačí klávesu escape (kód klávesy 27), Obr. 2.
AJAX a jQuery
Asynchronous JavaScript and XML je spojením niekoľkých webových technológií do jedného celku: XML, JavaScript, HTTP, HTML a XHTML. AJAX umožňuje získanie dát zo servera bez toho, aby sa stránka opätovne načítala. Všetko sa deje na pozadí, používateľ má k dispozícii nové údaje zo servera. Dobrým príkladom využitia technológie AJAX je internetový vyhľadávač Google. Pri písaní hľadaného výrazu je text priebežne odosielaný na server a naspäť vráti skupinu slov, ktoré môže používateľ zadať do vyhľadávacieho políčka.
S využitím AJAXu sa urýchli práca a znižuje sa dátový tok, pretože AJAX posiela iba dôležité údaje a nie je potrebné pri každej zmene obsahu opakovane načítať stránku.
jQuery vie pracovať aj s protokolom AJAX. S jQeury je písanie kódu oveľa jednoduchšie ako iba so samotným AJAXom. Ukážkový kód:
$("#odstavec").load("/webova.stranka.html");
načíta obsah stránky webova.stranka.html do odstavca s ID odstavec.
Na zasielanie údajov sa používa metóda get(), ktorá dokáže údaje odoslať na požadovanú stránku a tiež prijať dáta zo servera. Kód:
$.get("jQuery.php", { meno: "Jožko", priezvisko: "Mrkvička",
mail: "jozko@mrkvicka.eu" } );
odošle na stránku jQuery.php premenné meno, priezvisko a mail na spracovanie, napr. registračné údaje používateľa. Pre načítanie údajov zo servera použijeme kód:
$.get("jQuery.php", function(dopyt){
alert("Údaje zo servera: " + dopyt);
});
Metóda get() zavolá súbor jQuery.php, ak súbor obsahuje nejaké dáta, metóda function() ich uloží do premennej dopyt. Metóda alert() vypíše obsah premennej do nového okna. Premennú môžeme vypísať aj iným spôsobom, napr. nový odstavec na stránke. Nasledovný zápis kódu:
$.getJSON("jQuery.php", function(dopyt){
alert( "Meno: " + dopyt.meno + " Priezvisko: " + dopyt.priezvisko
+ „e-mail: „ + dopyt.mail );
});
získa zo stránky jQuery.php dáta z rôznych premenných, v našom prípade meno, priezvisko a mail, s ktorými môže programátor ďalej pracovať.
Tvorba fotogaléria
Súbor jquery.js obsahuje základnú knižnicu pre prácu s jQuery. Pridaním rôznych doplnkov získame ďalšie možnosti a zaujímavé efekty pri tvorbe HTML stránok pomocou tohto frameworku. Množstvo rozširujúcich doplnkov je zadarmo k stiahnutiu na stránke: http://plugins.jquery.com/.
Jedným s rozširujúcich doplnkov je jQuery lightBox plugin, ktorý s obyčajnej fotogalérie urobí efektnú a zaujímavú pre každého návštevníka stránok.
Súbor po stiahnutí rozbalíme a skopírujeme do adresára s webovým obsahom. Plugin nevyžaduje dodatočnú inštaláciu a môžeme ho okamžite použiť. Obsahuje vlastný kaskádový štýl a jeho súčasťou je aj ukážková fotogaléria, podľa ktorej nie je problém vytvoriť vlastnú galériu fotografií.
Po kliknutí na miniatúru fotografie jQuery lightBox plugin efektne načíta fotografiu a zobrazí ju v popredí. Návštevník stránky môže prechádzať celú fotogalériu kliknutím na tlačidlo „Ďalej“ alebo „Späť“, alebo ukončiť prezeranie galérie kliknutím na „Zatvoriť“.
Záver
jQuery dokáže toho oveľa viac, záleží iba na programátorovi HTML stránok, ktoré metódy použije a akým spôsobom. jQuery sa stále vyvíja a prináša ďalšie nové vylepšenia. K dispozícii je množstvo rozširujúcich pluginov, ktoré sa špecializujú na určitú oblasť tvorby HTML stránok.
Uvedené príklady ilustrujú jednoduchosť použitia jQuery v praxi. Komplexné riešenia spolu s príkladmi sú opísané v nápovede na domovskej stránke jQuery.
