Úvod
Ak ste oboznámení so svetom programovania, viete, aké dôležité sú programovacie jazyky. Medzi tie najdôležitejšie a najčastejšie používané patria HTML, CSS, a JavaScript. Zatiaľ čo HTML a CSS vám pomáhajú navrhnúť a štruktúrovať vašu webovú stránku, JavaScript vám umožňuje urobiť ju interaktívnou. Existuje množstvo JavaScript knižníc, ktoré môžete použiť na pridanie jedinečných funkcií do vášho webového projektu. Medzi ne patrí aj knižnica jQuery.
jQuery sám o sebe nie je programovací jazyk. Je to nástroj, ktorý môžete použiť na uľahčenie vývoja webu v JavaScripte. To pomáha zjednodušiť a sprehľadniť úlohy. Je známy tým, že je založený na koncepte „Napíš menej, urob viac“ (Write Less, Do More). Okrem uľahčenia vývoja webu vám jQuery prináša aj ďalšiu výhodu v podobe kompatibility medzi rôznymi prehliadačmi. To znamená, že kód sa dokáže správne vykresliť bez ohľadu na to, aký prehliadač sa použije na výstup.
Pre lepšiu predstavu o tom, ako jQuery robí veci stručnejšími, si uveďme príklad. Povedzme, že píšeme program „Hello, World!“. Takto by vyzeral v JavaScripte a jQuery:
|
1 2 |
JavaScript document.getElementById("demo").innerHTML = "Hello, World!"; |
|
1 2 |
jQuery $("#demo").html("Hello, World!"); |
Oba tieto riadky kódu prinesú rovnaký výsledok. Ako však vidíte, jQuery robí zápis stručnejším a výstižnejším.
V tomto návode sa dozviete všetko o základoch jQuery. Tento nástroj si môžete stiahnuť z tejto webovej stránky. Budeme postupovať tak, akoby ste boli úplný začiatočník bez akýchkoľvek znalostí o jQuery. Tento návod vás naučí, ako nainštalovať jQuery, a vysvetlí niektoré základné koncepty s ním spojené. Preskúmame niektoré z bežných selektorov, udalostí a efektov v jQuery. Potom sa prostredníctvom užitočných príkladov naučíte, ako testovať vývojárske koncepty ako API, DOM a CDN. Čítajte ďalej, aby ste sa zoznámili so svetom jQuery.
Skôr než začneme
Existujú určité veci, ktoré budú hrať vo váš prospech, ak ich budete vedieť vopred. Veľmi vám napríklad pomôže, ak budete mať základné vedomosti o tom, ako fungujú HTML a CSS. Tým sa v tomto návode nebudeme zaoberať. Budeme pracovať za predpokladu, že viete nastaviť aspoň jednoduchú webovú stránku. Mali by ste mať tiež základnú predstavu o tom, ako všeobecne funguje programovanie. To nutne neznamená, že musíte byť expertom na JavaScript, aby ste mohli pokračovať. Úplne stačí, ak sa orientujete v oblastiach, ako sú logika, premenné a dátové typy v programovaní.
Ako nastaviť jQuery vo vašom systéme
Najprv sa pozrime na to, ako môžete nastaviť jQuery vo vašom systéme. jQuery je k dispozícii ako súbor JavaScript, keďže ide o knižnicu JavaScriptu. Tento súbor musíte prepojiť v HTML kóde našej webovej stránky. Existujú dva spôsoby, ako to urobiť. Ako som už spomínal, jedným zo spôsobov je stiahnuť ho z tu. Okrem oficiálnej webovej stránky nájdete jQuery aj v Google Hosted Libraries priamo tu.
Ďalším spôsobom je použitie siete na doručovanie obsahu (Content Delivery Network) alebo CDN na prepojenie súboru. CDN pozostáva zo sady serverov, ktoré pomáhajú lokálne doručovať webový obsah. Hosťovanie súboru jQuery cez CDN umožňuje, aby sa obsah dostal k používateľovi oveľa rýchlejšie. Preto budeme od tohto momentu v tomto návode používať sieť na doručovanie obsahu (CDN).
V našom prvom príklade budeme vytvárať webový projekt. Tento malý projekt obsahuje style.css v css/ priečinku. script.js sa nachádza v js/ priečinku. Na záver, index.html sa nachádza v koreňovom adresári webového projektu:
Pre tento projekt vytvoríme kostru HTML. Následne ju uložíme ako index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> |
Tu prepojíme súbor jQuery. Ako som už spomínal, prepojíme ho prostredníctvom CDN. Odkaz na jQuery vložíte pred </body> značku. Potom môžete pridať svoj vlastný JavaScript súbor, ktorý bol script.js v našom príklade. Nezabudnite vždy umiestniť JavaScript súbor pod knižnicu jQuery, takto:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> |
Čo by ste robili, keby ste si namiesto toho stiahli lokálnu kópiu knižnice jQuery? V takom prípade musíte súbor jQuery uložiť do priečinka js/ . Potom ho môžete prepojiť ako js/jquery.min.js.
jQuery: Základy
Predtým, ako sa ponoríme do podrobností, prejdime si niektoré zo základov jQuery. Hlavnou úlohou jQuery je používať DOM na prepojenie HTML prvkov v prehliadači. DOM znamená Document Object Model. Je to metóda, ktorá umožňuje JavaScriptu interagovať s HTML v prehliadači. DOM si môžete vizualizovať tak, že kliknete pravým tlačidlom myši na svoju webovú stránku a vyberiete možnosť Preskúmať (Inspect). HTML, ktoré sa zobrazí v nástrojoch pre vývojárov, je DOM.
Uzol (node) je jednotlivý HTML prvok v DOM. JavaScript môže všetky tieto objekty alebo prvky upravovať. Usporiadanie týchto objektov si môžete predstaviť ako stromovú štruktúru. <html> leží v koreni, zatiaľ čo prvky sa ďalej vetvia.
Kliknutím pravým tlačidlom myši a výberom možnosti Zobraziť zdrojový kód stránky sa vám zobrazí čisté HTML webovej stránky. Pamätajte, že to nie je to isté ako DOM. Zatiaľ čo DOM sa dá meniť, zdrojový kód HTML je úplne statický. Akékoľvek zmeny, ktoré vykonáte v JavaScripte, neovplyvnia tento HTML súbor. Celý uzol <html> je obalený vo vonkajšej vrstve nazývanej objekt document.
Ďalej uvidíme, ako môžete manipulovať so svojou webovou stránkou a jej funkciami pomocou jQuery. Predtým sa však musíte uistiť, že stránka je pripravená.
Po vytvorení súboru script.js v adresári js/ zadajte nasledujúce:
|
1 2 3 4 5 |
$(document).ready(function() { // sem pôjde všetok vlastný jQuery kód }); |
Teraz bude akýkoľvek kód, ktorý napíšete, zabalený v tomto kóde. jQuery zistí pripravenosť kódu. Kód v tejto funkcii sa spustí až vtedy, keď bude DOM pripravený.
Vrátime sa k skriptu „Hello, World!“, o ktorom sme hovorili na začiatku návodu. Predpokladajme, že chceme tento skript spustiť. Ak chceme použiť jQuery na vypísanie tohto textu do prehliadača, musíme použiť ID demo na prázdny blokový odsek takto:
|
1 2 3 4 5 6 |
... <body> <p id="demo"></p> ... |
Na volanie jQuery musíme použiť $ symbol. Na prístup k DOM pomocou jQuery môžete použiť syntax a metódy CSS. Jednoduchý príklad je nasledujúci:
|
1 |
$("selector").method(); |
Toto je formát, ktorý budete používať s jQuery. Už vieme, že # symbol predstavuje ID v CSS. Preto môžete k ID demo pristupovať pomocou selektora #demo.html() . Táto metóda vám umožní zmeniť HTML prítomné v prvku.
Nasledujúci kód ukazuje umiestnenie programu „Hello, World“ do jQuery ready() wrapperu súboru script.js:
|
1 2 3 |
$(document).ready(function() { $("#demo").html("Hello, World!"); }); |
Tento riadok kódu musíte pridať do súboru script.js. Súbor uložte. Potom môžete otvoriť súbor index.html v prehliadači. Mali by ste vidieť výstup Hello, World!. Toto je tiež vhodný moment na kontrolu DOM pre lepšie pochopenie. Kliknite pravým tlačidlom myši na text „Hello, World!“. Vyberte Preskúmať prvok. DOM zobrazí <p id="demo">Hello, World!</p>. Kliknutie na Zobraziť zdrojový kód stránky na druhej strane zobrazí iba čisté HTML. V tomto prípade by to bolo <p id="demo"></p>.
Čo sú to selektory?
Teraz prejdeme k niektorým dôležitým funkciám v jQuery. Medzi ne patria selektory. Selektory jQuery hovoria programu, s ktorými prvkami chcete pracovať alebo ich „vybrať“. Sú veľmi podobné selektorom, ktoré môžete použiť v CSS. Tu je základný formát, ako pristupovať k selektoru v jQuery:
|
1 |
$("selector") |
Môžete použiť reťazce v jednoduchých alebo dvojitých úvodzovkách, hoci príručka štýlu jQuery preferuje tie druhé. Ak chcete, môžete si pozrieť úplný zoznam selektorov jQuery na tejto oficiálnej stránke. Pre vašu informáciu uvádzame niektoré z najčastejšie používaných selektorov:
-
$("*")
Toto je univerzálny selektor (Wildcard). Vyberie každý prvok na vašej stránke.
-
$(this)
Toto je aktuálny selektor (Current). Vyberá prvok, s ktorým momentálne pracujete pomocou funkcie.
-
$("p")
Toto je selektor značiek (Tag). Vyberie každú inštanciu značky <p>.
-
$(".example")
Toto je selektor triedy (Class). Vyberie každý jeden prvok, ktorý má aplikovanú triedu example.
-
$("#example")
Toto je selektor ID. Vyberie iba jednu inštanciu ID example.
-
$("[type='text']")
Toto je selektor atribútov (Attribute). Vyberie akýkoľvek daný prvok s hodnotou text priradenou k atribútu type.
-
$("p:first-of-type")
Toto je selektor pseudoprvkov (Pseudo Element). Pomáha vám vybrať prvý <p>.
Čo sú to udalosti?
Niektoré funkcie webovej stránky sa načítajú hneď po načítaní stránky. Predstavte si príklad „Hello, World“. V tomto prípade by sme mohli kód pridať priamo do zdrojového HTML. Čo sa však stane, keď načítanie funkcie vyžaduje interakciu používateľa? Práve vtedy sa jQuery stáva užitočným.
Povedzme, že chceme, aby sa po kliknutí používateľa na tlačidlo zobrazil nejaký text. Ak chcete pridať túto funkciu, musíte pridať prvok <button> do súboru index.html. Toto tlačidlo bude načúvať „udalosti“ kliknutia:
|
1 2 3 4 5 6 |
... <body> <button id="trigger">Click me</button> <p id="demo"></p> |
Akákoľvek interakcia používateľa s prehliadačom sa považuje za udalosť. Interakcia môže prebiehať prostredníctvom ukazovateľa myši alebo klávesnice. Vo vyššie uvedenom príklade je našou udalosťou kliknutie na tlačidlo. Preto sa nazýva udalosť kliknutia (click event).
Ďalej musíme zavolať funkciu, ktorá obsahuje kód „Hello, World“. Na to použijeme metódu click():
|
1 2 3 |
$(document).ready(function() { $("#trigger").click(); }); |
Ako môžete vidieť, ID nášho prvku <button> má názov trigger. Môžeme ho vybrať pomocou $(“#trigger"). Účelom pridania metódy click() je prinútiť program načúvať udalosti kliknutia. Ďalej do tejto metódy umiestnime funkciu s kódom pre text:
|
1 2 3 |
function() { $("#demo").html("Hello, World!"); } |
Náš kód bude na konci vyzerať približne takto:
|
1 2 3 4 5 |
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); }); |
Teraz môžete uložiť súbor script.js. Obnovte súbor index.html v prehliadači, aby ste aplikovali zmeny. Po kliknutí na tlačidlo sa zobrazí testovací výstup „Hello, World!“.
Okrem click existujú aj iné typy udalostí jQuery. Úplný zoznam týchto metód udalostí si môžete pozrieť na tomto oficiálnom dokumente. Tu sú niektoré z najčastejšie používaných, s ktorými sa môžete občas stretnúť:
-
click()
Udalosť click vykoná kód pri jednom kliknutí myšou.
-
hover()
Udalosť hover vykoná kód, keď ukazovateľ myši prejde nad prvok. Môžete tiež určiť, či sa kód spustí pri vstupe alebo odchode myši pomocou mouseenter() a mouseleave() v tomto poradí.
-
submit()
Odoslanie formulára spustí kód.
-
scroll()
Udalosťou, ktorá vykoná kód, bude posúvanie obrazovky nadol.
-
keydown()
Stlačenie klávesu nadol na klávesnici vykoná kód.
Čo sú to efekty?
jQuery efekty spolupracujú s udalosťami jQuery. Hlavným účelom efektov, ako vyplýva zo samotného názvu, je pridať na stránku animácie. Umožňujú vám manipulovať s prvkami a aplikovať rôzne druhy efektov. Tieto efekty môžu byť spustené určitými udalosťami.
Pre lepšie pochopenie si uveďme príklad. Povedzme, že chceme otvoriť a zatvoriť vyskakovacie prekrytie (popup overlay). Jedným zo spôsobov, ako to urobiť, by bolo použitie dvoch rôznych ID. Jedno by prekrytie otvorilo a druhé zatvorilo. Druhým spôsobom je použiť na to triedu (class). Výhodou použitia triedy je, že rovnaká funkcia dokáže prekrytie otvoriť aj zatvoriť.
Otvorte svoj index.html súbor. Potom vymažte <button> a <p> značky z body. Teraz pridajte do HTML nasledujúce riadky kódu:
|
1 2 3 4 5 6 7 8 9 10 |
... <body> <button class="trigger">Otvoriť</button> <section class="overlay"> <button class="trigger">Zatvoriť</button> </section> ... |
Pozrime sa teraz na náš style.css súbor. Naším cieľom je použiť minimálne CSS na skrytie prekrytia. Na to použijeme display: none a vycentrujeme ho takto:
|
1 2 3 4 5 6 7 8 9 10 |
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; } |
Ďalej použijeme metódu toggle(). Táto metóda nám umožní prepínať vlastnosť display medzi none a block. Prekrytie sa teda skryje a zobrazí vždy, keď klikneme. Pridajte tento kód do súboru script.js súbor:
|
1 2 3 4 5 |
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); }); }); |
Nakoniec obnovte index.html, aby ste aplikovali zmeny. Teraz budete môcť prepínať viditeľnosť modálneho okna. Stačí len kliknúť na tlačidlá. Existujú aj ďalšie efekty jQuery, ktoré môžete použiť v kombinácii s týmto. Môžete napríklad zmeniť jednoduché toggle() na slideToggle() alebo fadeToggle().
Nasleduje niekoľko bežne používaných metód efektov v jQuery:
-
toggle()
Táto metóda umožňuje zmeniť viditeľnosť prvku. Jednosmerné efekty s ňou spojené sú show() a hide().
-
fadeToggle()
Táto metóda vám umožní prepínať viditeľnosť a nepriehľadnosť prvku pomocou animácie. Jednosmerné efekty sú v tomto prípade fadeIn() a fadeOut().
-
slideToggle()
Táto metóda vám umožní použiť efekty posúvania (sliding) na prepínanie viditeľnosti prvku. Jednosmerné efekty sú v tomto prípade slideUp() a slideDown().
-
animate()
Táto metóda efektu vám umožňuje vykonávať vlastné efekty animácie. Používa CSS vlastnosť daného prvku.
Záver
Dúfame, že tento návod bol užitočný a poskytol vám dôkladný úvod do jQuery. Je to neuveriteľne užitočný nástroj, ktorý výrazne uľahčuje vývoj webu a písanie kódu. To platí najmä vtedy, ak ste vo svete programovania relatívne noví.
Preskúmali sme rôzne prvky, ktoré tvoria základy jQuery. Tiež sme sa naučili, ako môžete tieto prvky vyberať a upravovať a ako dobre využiť udalosti a efekty. Zvládnutie nástrojov ako jQuery vám môže pomôcť vytvárať webové stránky plné interaktívnych funkcií, ktoré sa postarajú o pútavý používateľský zážitok.
Pozrite si niekoľko zdrojov z nášho blogu ktoré vám pomôžu pri práci s JavaScriptom:
- Sprievodca pridaním JavaScriptu do HTML
- Práca s JavaScriptom: Ako fungujú triedy
- Práca s JavaScriptom: Ako fungujú prototypy a dedičnosť
Príjemné programovanie!
Komentáre
Zatiaľ žiadne komentáre. Buďte prvý.