1. diel - Úvod do jQuery

Vitajte v on-line kurzu najrozšírenejší javascriptové knižnice - jQuery. Knižnica má jednoduchú syntax, výrazne zjednodušuje manipuláciu s obsahom stránky, reakciu na udalosti, animácie a používanie AJAXu. Jej najväčšia sila ale pravdepodobne spočíva v obrovskom množstve jQuery pluginov, ktoré môžeme pre svoje stránky stiahnuť a získame tak bez práce interaktívne galérie, Carousel, rozšírené formulárové prvky a podobne. Aj keď doba jej najväčší popularity už pominula, stále by mala patriť do základného povedomia frontendistů a je naďalej masovo užívaná najpopulárnejšími frameworky ako je napr. Samotný CSS framework Bootstrap. Konkurenciu jQuery v poslednej dobe predstavujú komplexnejšie viacvrstvovej frameworky ako je napr. Angular alebo React, naučiť sa ich však vyžaduje oveľa väčšie úsilie. Tento kurz predpokladá znalosť aspoň základov JavaScriptu.

Získanie jQuery

Knižnicu môžeme buď stiahnuť a umiestniť na svoje stránky alebo na nej môžeme linkovať. Často sa odkazuje na web Google, kde je táto knižnica nahraná. Má to značnú výhodu, pretože všetci, čo používajú Google (to je mimochodom veľa ľudí) majú túto knižnicu už načítanú v cache prehliadača (to je vyrovnávacia pamäť). Načítanie nášho webu bude teda rýchlejší a pre nás je to menej práce. Stačí do hlavičky našej HTML stránky vložiť nasledujúci kód:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Týmto sme knižnicu načítali a môžeme ju používať.

Kalkulačka

Pretože jQuery je vážne jednoduchá, začneme rovno príkladom. Naprogramujeme si kalkulačku, ktorá bude sčítať 2 čísla zadané do formulára.

Html

Najprv vytvorme jednoduchú HTML stránku, v ktorej bude v <head> skript pre pridanie odkazu jQuery z Google a v <body> budú 2 Input, kam budeme zadávať čísla. Tieto Input musia mať nastavená nejaká id, aby sme si ich potom mohli vybrať pomocou jQuery selektorov. Kód celej stránky by mohol vyzerať nejako takto:

<!DOCTYPE html>
<html lang="cs-cz">

    <head>
        <meta charset="UTF-8">
        <title>Jednoduchá webová kalkulačka</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="js/kalkulacka.js" type="text/javascript"></script>
    </head>

    <body>
        <h1>Vítejte v jednoduché kalkulačce!</h1>
        <input type="text" id="cislo1" size="5" /> + <input type="text" id="cislo2" size="5" /><br />
        <input type="button" id="tlacitko" value="Spočti!">
    </body>

</html>

HTML kód sa v prehliadači vykreslí takto:

Tvoja stránka

localhost

Už vieme, že JavaScript by sme mali vždy oddeľovať od HTML kódu. Všimnite si, že v hlavičke načítame súbor kalkulacka.js z priečinka js. Práve tam za okamih vložíme kód pre obslúženie formulára. Priečinok a súbor si vytvorte.

Javascript

Teraz napíšeme skript, ktorý zareaguje na udalosť kliknutie na tlačidlo, načíta hodnoty z políčok a vypíše výsledok. Pre prácu s jQuery používame znak dolára - $. Dolár je v skutočnosti názov funkcie zvolený tak, aby sme napísali čo najmenej kódu.

Document ready

Iste viete, že ako spustíme nejaký javascriptový kód, mali by sme počkať na načítanie HTML kódu stránky. jQuery na tento účel poskytuje udalosť Document Ready, ktorá zvyčajne tvorí základ každého skriptu. Nasledujúci kód vložíme do súboru js/kalkulacka.js:

$(document).ready(function() {
    // Tento kód se spustí až po načtení stránky
    // ...
});

Funkcia odovzdaná ako parameter metóde ready() sa spustí až po načítaní stránky. Samozrejme by sme mohli funkciu deklarovať vyššie a odovzdať len jej názov:

function nacteno() {
    // Tento kód se spustí až po načtení stránky
    // ...
}

$(document).ready(nacteno);

Keďže jQuery budeme odovzdávať niekam funkcie každú chvíľu, budeme ich deklarovať priamo v parametroch, pretože takýto zápis je kratšia.

Len pripomeniem, že počkať na načítanie stránky je dôležité z toho dôvodu, aby sme mohli pracovať s jej elementy. Keby sme náš kód spustili skôr, než sú tieto elementy v stránke vôbec prítomné, nefungoval by.

Selektory a udalosti

Postupy ďalej a pridajme kód na obsluhu formulára. Hneď si ho aj vysvetlíme.

$(document).ready(function() {
    $("#tlacitko").click(function() {
        var cislo1 = $("#cislo1").val();
        var cislo2 = $("#cislo2").val();
        var vysledek = cislo1 + cislo2;
        alert(vysledek);
    });
});

Ako vidíte, použili sme jQuery selektor $("#tlacitko"), ktorý nám hovorí: "vyber element s id tlacitko ". Na ňom odchytávajú udalosť click(), čo je kliknutie. Tejto udalosti potom odovzdávame obslužnú funkciu, ktorá sa má volať, keď sa na tlačidlo klikne. Vnútri vytvoríme 2 premenné, do ktorých podobných spôsobom nahráme obsah políčok formulára. Selektor opäť vyberie element podľa id. Metóda val() nám vráti obsah tohto elementu, teda text, čo je v ňom zapísaný. Funkciu alert() určite už poznáte, vypíše zadaný text ako hlášku.

Skúška

Aplikáciu si vyskúšajte u seba alebo nižšie na živé ukážke:

Tvoja stránka

localhost

Iste ste prišli na to, že kalkulačka v skutočnosti čísla nesčíta, ale iba spája ako text. Je to dané tým, že nám prišla od užívateľa z políčka ako text a nie ako čísla. Musíme si ich teda na čísla previesť. K tomu slúži funkcia parseInt(), ktorá berie ako parameter text a vracia jeho číselnú podobu. Upravte si teda riadok s výpočtom výsledku nasledujúcim spôsobom:

var vysledek = parseInt(cislo1) + parseInt(cislo2);

Všetko už funguje ako má:

Tvoja stránka

localhost

Gratulujem, vytvorili ste svoju prvú webovú aplikáciu v jQuery!

Ďalšie udalosti

Začíname zisťovať, že jQuery sa točí aj okolo udalostí. Okrem hlavnej Document Ready, ktorá sa dá skrátene zapísať aj len ako $(), poznáme teda ešte udalosť click(), o ktorej sme si však nepovedali všetko. Poďme si spomenúť aj niekoľko ďalších:

click() - Vyvolá sa pri kliknutí myšou a to nielen na tlačidlo, ale na ľubovoľný element (napr. obrázok).
dblclick() - Vyvolá sa pri dvojkliku.
change() - Vyvolá sa, ak sa zmenil obsah nejakého formulárového prvku.

Príklad udalosti change():

$(".policko").change(function(){
    // reakce na změnu, např. kontrola, zda jsou zadané povolené znaky
    // pro přístup k elementu, který událost vyvolal, použijeme $(this)
});

focus() - Vyvolá sa, keď sa na formulárové pole klikne (zaktivní sa).
blur() - Vyvolá sa, keď sa formulárové pole opustí.

Udalosti myšou

mouseenter() - Vyvolá sa vo chvíli, keď na element prejdeme myšou.
mouseleave() - Vyvolá sa vo chvíli, keď kurzor element opustí.

Udalosti klávesnicou

keydown() - Vyvolá sa vo chvíli stlačenie klávesu.
keypress() - Vyvoláva sa keď kláves držíme.
keyup() - Vyvolá sa vo chvíli pustenie klávesy.

Udalosti okná

resize() - Vyvolá sa pri zmene veľkosti okna prehliadača.
scroll() - Vyvolá sa pri scrollovanie stránkou v prehliadači.

Všetky vyššie zmienené metódy sú vlastne skrátené zápisy a vnútorne volajú metódu bind(), ktoré odovzdávajú názov udalosti a callback ako parametre. Udalosť možno teda deklarovať aj takto:

$(#id_elementu).bind("click", function() { /* ... */ });

Zápis vyššie je vhodné použiť v prípade, keď počas zápisu neviete, na akú udalosť budete reagovať, pretože sa zadáva ako textový reťazec.

Kompletný zoznam udalostí nájdete na https://api.jquery.com/...gory/events/. Počas kurzu si jednotlivé udalosti vyskúšame.

V budúcej lekcii, Vkladanie obsahu v jQuery (DOM) , si ukážeme, ako možno cez jQuery meniť obsah webovej stránky, teda manipuláciu s DOM.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 1177x (1.47 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

2 hlasov

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity