1. díl - Úvod do jQuery

JavaScript jQuery Úvod do jQuery

JQuery je nejrozšířenější JavaScriptová knihovna s jednoduchou syntaxí. Sama si řeší nekompatibilitu mezi prohlížeči a my se tedy nemusíme o nic starat a náš kód funguje všude stejně dobře. Kromě toho nám velmi ulehčuje manipulaci s obsahem webu. Používá tzv. CSS selectory, to jsou podle názvu ty samé selektory, jako se používají v CSS. Můžeme tedy takto jednoduše vybírat, s čím chceme pracovat.

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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Tímto jsme knihovnu načetli a můžeme ji používat. Abychom zbytečně dnešní tutoriál nepřetěžovali, zkusíme si udělat jednoduchou kalkulačku, která bude sčítat 2 čísla. Podrobněji se na jQuery vrhneme příště.

Mějme jednoduchou HTML stránku, ve které bude v hlavičce 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 potom mohli vybrat pomocí jQuery selektorů. Kód celé stránky by mohl vypadat nějak takto:

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

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
        <title>Jednoduchá webová kalkulačka</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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>

Nyní musíme napsat script, který zareaguje na událost stisknutí tlačítka, načte hodnoty z políček a vypíše výsledek. Při práci s jQuery používáme znak dolaru - $ (co to přesně dělá si vysvětlíme příště). Na konec BODY vložíme element script (jak jsme byli zvyklí doposud) a do něj napíšeme následující kód:

var kliknuti = function()
{
        var cislo1 = $("#cislo1").val();
        var cislo2 = $("#cislo2").val();
        var vysledek = cislo1 + cislo2;
        alert(vysledek);
};

$("#tlacitko").click(kliknuti);

Popíšeme si, co jsme to vlastně provedli. Vytvořili jsme si funkci kliknuti, kterou zavoláme při kliknutí na tlačítko. Jak vidíte, použili jsme selektor $("#tlacitko"), který nám říká: "vyber element s id tlacitko". Na něm odchytátáme událost click, což je kliknutí. Této události potom předáváme naši proměnnou s funkcí, která se má volat, když se na tlačítko klikne. Ve funkci si vytvoříme 2 proměnné, do kterých podobných způsobem nahrajeme obsah políček. Selektor opět vybere element podle id. Metoda val() nám vrátí obsah tohoto elementu, tedy text, co je v něm zapsaný. Nová je funkce alert, která vypíše zadaný text jako hlášku.

Vyzkoušejte si to. 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 řádku s výpočtem výsledku následujícím způsobem:

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

Gratuluji, vytvořili jste svou první webovou aplikaci! Příště si posvítíme na jQuery podrobně, uvidíte, že toho umí opravdu, ale opravdu hodně. Vytvoříme si spoustu doplňků a nebude to složité :) Dále se naučíme lépe zapisovat JavaScript tak, aby se nemíchal s HTML.


 

Stáhnout

Staženo 638x (832 B)
Aplikace je včetně zdrojových kódů v jazyce javascript

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
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 se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (21 hlasů) :
4.809534.809534.809534.809534.80953


 


Miniatura
Všechny články v sekci
Základy jQuery

 

 

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

Avatar
VFXMatous
Člen
Avatar
VFXMatous:

Nenapsal jsi náhodou místo alert(vysledek); document.write(vys­ledek);?

 
Odpovědět 27.8.2013 17:51
Avatar
Jiří Jeřábek (thechorcheecz):

Zdravím mám tu problém, že při kliknutí na tlačítko spočti se nic nestane? kód mám správně, ale nemohl by někdo říct jestli je to správně napsané tady? nevím co mám za chybu

 
Odpovědět 30.10.2013 21:07
Avatar
Odpovídá na Jiří Jeřábek (thechorcheecz)
Jiří Jeřábek (thechorcheecz):

už jsem chybu našel jen jsem někde četl že <script> se může dávat jen do hlavičky a ona může zřejmě kdekoliv - tak to byla ta chyba, pardon!

 
Odpovědět 30.10.2013 21:13
Avatar
tomajstr
Neregistrovaný
Avatar
tomajstr:

mě to nefunguje, přesně jsem to okopčil a nejde to ani v chromu ani v IE

 
Odpovědět 3.3.2014 20:27
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na tomajstr
David Čápka:

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
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
david1976
Člen
Avatar
david1976:

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:

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

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

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:

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. března 12:07
 
Odpovědět 4. března 12:05
Avatar
David Hanč
Člen
Avatar
David Hanč:

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. listopadu 18:14
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 35. Zobrazit vše