Předvánoční Black Friday Předvánoční Black Friday
Až 80% zdarma! Předvánoční BLACK FRIDAY akce. Více informací

Lekce 1 - Úvod do jQuery

JavaScript jQuery Úvod do jQuery American English version English version

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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:

Your page
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:

Your page
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á:

Your page
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 bind(), které předávají název události a callback jako parametry. Událost lze tedy deklarovat i takto:

$(#id_elementu).bind("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.


 

Stáhnout

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

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
33 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Všechny články v sekci
Základy jQuery
Miniatura
Následující článek
Vkládání obsahu v jQuery (DOM)
Aktivity (4)

 

 

Komentáře
Zobrazit starší komentáře (29)

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:21.3.2014 18:37

Příklad funguje, něco jsi udělal špatně. Přiložil jsem k článku zdrojový kód, stáhni si ho a najdi s chybu.

Odpovědět 21.3.2014 18:37
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
david1976
Člen
Avatar
david1976:14.4.2014 11:13

ahoj,

prosím, poradíte někdo, jak vypsat výsledek do textového imputu, místo pomocí alertu?

dík

 
Odpovědět 14.4.2014 11:13
Avatar
jan.muksch
Člen
Avatar
Odpovídá na david1976
jan.muksch:14.4.2014 11:27

$("#idInputu")­.val(vysledek)

 
Odpovědět 14.4.2014 11:27
Avatar
Tad.MJ12
Člen
Avatar
Tad.MJ12:17.8.2014 3:45

jak by prosím vypadal tento vzor s podmínkou na podchycení toho nezadaného parametru?

function f(a, b)
{
document.write("a=" + a);
document.write("b=" + b);
}

f(5);
f(1, 2);

něco jsem zkoušel, ale nepodařilo se mi to... předem díkes

 
Odpovědět 17.8.2014 3:45
Avatar
Cyborg
Člen
Avatar
Odpovídá na david1976
Cyborg:4.3.2016 12:05

Zdravím, nevím jestli je to zrovna to co jsi chtěl ty .Každopádně přikládám program, který výsledek nevypisuje pomocí alertu, ale rovnou jako text pod pole. Jestli jsi to myslel takhle tak zde přikládám kod :)

----------html-------
<h1>Jednoducha webova kalkulacka</h1>
        <input type="text" id="cislo1"></input>
        <input type="text" id="cislo2"></input>
        <input type="button" value="Secti" onclick="secti('cislo1', 'cislo2')"></input>
        <h1 id="vysledek"></h1>
------javascript--------
function secti (cislo1, cislo2)
        {
        var a = document.getElementById("cislo1").value;
        var b = document.getElementById("cislo2").value;
        var c = Number(a) + Number(b);
        console.log(c);
        document.getElementById("vysledek").innerHTML = c;
}

PS: Není to řešeno pomocí knihovny jquery. To samozřejmě neznamená, že to s ní nejde :). Ovšem
PPS: Můžeš si to zkusit sám udělat pomocí jquery aspoň se procvičíš :)

Editováno 4.3.2016 12:07
 
Odpovědět 4.3.2016 12:05
Avatar
David Hanč
Člen
Avatar
David Hanč:3.11.2016 18:14

Má tohle nějaký význam charset=windows-1250" ?
Není lepší UTF-8? Když jsem tam měl windows-1250 tak se mi na stránce ani správně nevypsali znaky jako č,ř,á, atd. Tak se jen prám proč to tam je :)

 
Odpovědět 3.11.2016 18:14
Avatar
Martin Míka
Člen
Avatar
Martin Míka:21.9.2017 22:00

dobrý

 
Odpovědět 21.9.2017 22:00
Avatar
dus30
Člen
Avatar
dus30:25. ledna 15:20
<html>
 <head>
  <title>ahoj</title>
 </head>
 <body>
  <p>ahoj</p>
 </body>
</html>
 
Odpovědět 25. ledna 15:20
Avatar
dus30
Člen
Avatar
dus30:25. ledna 15:22

ahoj

Editováno 25. ledna 15:23
 
Odpovědět 25. ledna 15:22
Avatar
nickname01
Člen
Avatar
nickname01:18. května 13:25

všichni, co používají Google (to je mimochodem hodně lidí)

Jen bych chtěl přihodit odkaz na statistiky, jako že je to fakt hodně lidí:
http://gs.statcounter.com/…market-share

 
Odpovědět  +1 18. května 13:25
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 39. Zobrazit vše