NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 1 - Úvod do jQuery

Další

Vítejte v on-line kurzu nejrozšířenější javascriptové knihovny - jQuery. Knihovna má jednoduchou syntaxi, výrazně zjednodušuje manipulaci s obsahem stránky, reakci na události, animace a používání AJAXu. Její největší síla ale pravděpodobně spočívá v obrovském množství jQuery pluginů, které můžeme pro své stránky stáhnout a získáme tak bez práce interaktivní galerie, carousely, rozšířené formulářové prvky a podobně. I když doba její největší popularity již pominula, stále by měla patřit do základního povědomí frontendistů a je nadále masově užívána nejpopulárnějšími frameworky jako je např. samotný CSS framework Bootstrap. Konkurenci jQuery v poslední době představují komplexnější vícevrstvé frameworky jako je např. Angular nebo React, naučit se je ovšem vyžaduje mnohem větší úsilí. Tento kurz předpokládá znalost alespoň základů JavaScriptu.

Získání jQuery

Knihovnu můžeme buď stáhnout a umístit na své stránky nebo na ní můžeme linkovat. Často se odkazuje na web Google, kde je tato knihovna nahrána. Má to značnou výhodu, protože všichni, co používají Google (to je mimochodem hodně lidí) mají tuto knihovnu již načtenou v cache prohlížeče (to je vyrovnávací paměť). Načtení našeho webu bude tedy rychlejší a pro nás je to méně práce. Stačí do hlavičky naší HTML stránky vložit následující kód:

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

Tímto jsme knihovnu načetli a můžeme ji používat.

Kalkulačka

Protože jQuery je vážně jednoduchá, začneme rovnou příkladem. Naprogramujeme si kalkulačku, která bude sčítat 2 čísla zadaná do formuláře.

HTML

Prvně vytvořme jednoduchou HTML stránku, ve které bude v <head> skript pro nalinkování jQuery z Google a v <body> budou 2 inputy, kam budeme zadávat čísla. Tyto inputy musí mít nastavená nějaká id, abychom si je poté mohli vybrat pomocí jQuery selektorů. Kód celé stránky by mohl vypadat nějak 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 se v prohlížeči vykreslí takto:

Tvoje stránka
localhost

Již víme, že JavaScript bychom měli vždy oddělovat od HTML kódu. Všimněte si, že v hlavičce načítáme soubor kalkulacka.js ze složky js. Právě tam za okamžik vložíme kód pro obsloužení formuláře. Složku a soubor si vytvořte.

JavaScript

Nyní napíšeme skript, který zareaguje na událost kliknutí na tlačítko, načte hodnoty z políček a vypíše výsledek. Pro práci s jQuery používáme znak dolaru - $. Dolar je ve skutečnosti název funkce zvolený tak, abychom napsali co nejméně kódu.

Document ready

Jistě víte, že než spustíme nějaký javascriptový kód, měli bychom počkat na načtení HTML kódu stránky. jQuery k tomuto účelu poskytuje událost Document Ready, která obvykle tvoří základ každého skriptu. Následující kód vložíme do souboru js/kalkulacka.js:

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

Funkce předaná jako parametr metodě ready() se spustí až po načtení stránky. Samozřejmě bychom mohli funkci deklarovat výše a předat jen její název:

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

$(document).ready(nacteno);

Jelikož jQuery budeme předávat někam funkce každou chvíli, budeme je deklarovat přímo v parametrech, protože takový zápis je kratší.

Jen připomenu, že počkat na načtení stránky je důležité z toho důvodu, abychom mohli pracovat s jejími elementy. Kdybychom náš kód spustili dříve, než jsou tyto elementy ve stránce vůbec přítomny, nefungoval by.

Selektory a události

Postupme dále a přidejme kód k obsluze formuláře. Hned si jej i vysvětlíme.

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

Jak vidíte, použili jsme jQuery selektor $("#tlacitko"), který nám říká: "vyber element s id tlacitko". Na něm odchytáváme událost click(), což je kliknutí. Této události potom předáváme obslužnou funkci, která se má volat, když se na tlačítko klikne. Uvnitř vytvoříme 2 proměnné, do kterých podobných způsobem nahrajeme obsah políček formuláře. Selektor opět vybere element podle id. Metoda val() nám vrátí obsah tohoto elementu, tedy text, co je v něm zapsaný. Funkci alert() určitě již znáte, vypíše zadaný text jako hlášku.

Zkouška

Aplikaci si vyzkoušejte u sebe nebo níže na živé ukázce:

Tvoje stránka
localhost

Jistě jste přišli na to, že kalkulačka ve skutečnosti čísla nesčítá, ale pouze spojuje jako text. Je to dáno tím, že nám přišla od uživatele z políčka jako text a ne jako čísla. Musíme si je tedy na čísla převést. K tomu slouží funkce parseInt(), která bere jako parametr text a vrací jeho číselnou podobu. Upravte si tedy řádek s výpočtem výsledku následujícím způsobem:

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

Vše již funguje jak má:

Tvoje stránka
localhost

Gratuluji, vytvořili jste svou první webovou aplikaci v jQuery!

Další události

Začínáme zjišťovat, že jQuery se točí i okolo událostí. Kromě stěžejní Document Ready, která se dá zkráceně zapsat i jen jako $(), známe tedy ještě událost click(), o které jsme si ale neřekli vše. Pojďme si zmínit i několik dalších:

  • click() - Vyvolá se při kliknutí myší a to nejen na tlačítko, ale na libovolný element (např. obrázek).
  • dblclick() - Vyvolá se při dvojkliku.
  • change() - Vyvolá se, pokud se změnil obsah nějakého formulářového prvku.

Příklad události 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á se, když se na formulářové pole klikne (zaktivní se).
  • blur() - Vyvolá se, když se formulářové pole opustí.

Události myší

  • mouseenter() - Vyvolá se ve chvíli, kdy na element najedeme myší.
  • mouseleave() - Vyvolá se ve chvíli, kdy kurzor element opustí.

Události klávesnicí

  • keydown() - Vyvolá se ve chvíli stisknutí klávesy.
  • keypress() - Vyvolává se když klávesu držíme.
  • keyup() - Vyvolá se ve chvíli puštění klávesy.

Události okna

  • resize() - Vyvolá se při změně velikosti okna prohlížeče.
  • scroll() - Vyvolá se při scrollování stránkou v prohlížeči.

Všechny výše zmíněné metody jsou vlastně zkrácené zápisy a vnitřně volají metodu on(), které předávají název události a callback jako parametry. Událost lze tedy deklarovat i takto:

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

Zápis výše je vhodné použít v případě, kdy během zápisu nevíte, na jakou událost budete reagovat, protože se zadává jako textový řetězec.

Kompletní seznam událostí naleznete na https://api.jquery.com/…gory/events/. Během kurzu si jednotlivé události vyzkoušíme.

V příští lekci, Vkládání obsahu v jQuery (DOM), si ukážeme, jak lze přes jQuery měnit obsah webové stránky, tedy manipulaci s DOM.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 1195x (1.47 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Všechny články v sekci
jQuery - Dynamické doplňky webu snadno a rychle
Přeskočit článek
(nedoporučujeme)
Vkládání obsahu v jQuery (DOM)
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
195 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity