jQuery mě nadchlo, jak je jednoduché a líbí se mi, že člověk ani nemusí tolik vidět do JavaScriptu a přesto s ním může pracovat. Chtěl bych napsat tedy několik návodů pro ty, co o něm ještě nemají ani páru (jako já před asi dvěma lety) a ukázat jim, jak moc času vám jQuery může ušetřit.
Stejně jako návod na AJAX pro začátečníky, bude tohle opravdu pro začátečníky, a to i pro takové, co o JavaScript jenom občas šmrncnou.
Co je jQuery
Je to framework pro javascript, čili něco, co vám usnadňuje psaní věcí v javascriptu, hlavně takových, které se často opakují (uf, kolikrát už jsem si psal funkci pro schování a zobrazení divu nebo něčeho). Používá se velmi jednoduše:
- Stáhnete si jeden
.jssoubor (to je ten framework, celé hezky v jednom souboru). - Nahrajete si ho ke svému webu tam, kam nahráváte externí javascripty. Ke stáhnutí je na jQuery.com. Osobně doporučuji dávat si všechny externí javascripty do nějakého podadresáře, uvidíte, jak se vám to bude hodit, až se vám namnoží.
- V HTML stránce, kde budete chtít jQuery využít ho nalinkujete. To jistě víte jak:
Tady vidíte, že jsem si jquery.js nahrál do složky jscripts, kam si nahrávám veškeré javascripty.
Nyní máme framework jQuery připraven k použití. Co ale dál, kam psát vlastní javascript a tak dále? Nejlepší je psát všechny vlastní javascripty do externího souboru s příponou .js. Uděláme si tedy vlastní soubor, který pojmenujeme například zkouska.js a nahrajeme si ho také do složky jscripts. Nezapomeneme ho nalinkovat do HTML souboru stejně, jako jsme nalinkovali jQuery:
<script language="javascript" type="text/javascript" src="/jscripts/zkouska.js"></script>
Nyní můžeme začít. Už je známo, že všechny javascriptové akce na HTML stránce je nejlépe začít provádět, až je stránka celá načtená. To umí jQuery skvěle zařídit, proto veškerý svůj kód, který budeme psát, umístíme do takovéto funkce:
$(document).ready(function(){
// nas kod
});
Tam, kde je // nas kod si už můžeme psát věci, které potřebujeme a máme jistotu, že se vykonají až bude celá stránka načtená. jQuery to zařídí za nás. Už jednou jsem zkoušel zjišťovat po svém úplné načtení stránky a věřte mi, je to hrůza, v každém prohlížeči je to jinak a výsledný kód není nic pěkného. To všechno už mohu zapomenout.
Tohle je naprostý začátek. Příště bych rád pokračoval tzv. selectory. Jinak řečeno způsoby, jak vybrat nějaký prvek v HTML stránce a s ním něco udělat. Od vás by mě zajímalo, jestli takové návody uvítáte a jestli jste zatím v obraze.
Komentáře
Hermit
Ja bych k pouzivani frameworku (dale jen FRW) mel drobnou poznamku. Dle meho jsou vhodne spise pro vetsi projekty (rozumnej iternetove/intraneto aplikace), kde se JS vyuziva pomerne casto a to predevsim pro zlepseni uzivatelske privetivosti.
Pokud koder/programator pouzije FRW na 1 akci na celem webu, typu „otevrit/zavrit DIV“ ci na neco „slozitejsiho“ treba na fotogalerii (zobraz vetsi nahledove foto + pridej sipky dozadu+dopredu), tak mi to prijde jako nepricetne pouziti.
VfB
Hermit [1]: já myslím, že se to hodí i pro malé věci
jinak já se všemi deseti přimlouvám za pokračování
Jarda
Začátek jsem zvládnul :o) takže vzhůru na „Hello world!“
Martin
Také se přimlouvám za pokračování a už se těším na další díl(y).
smain
Rozhodně hlasuji pro pokračování… 😉
bzuK
Přimlouvám se za pokračování, je na čase se něčemu takovému přiučit. Díky moc!
Tomáš Gluchman
Hermit [1]: Máte a nemáte pravdu. jQuery je realatívne malý framework, obsahuje síce mnoho metód, ale ak nepridávate pluginy, tak na všetko vám stačí len jeden súbor (+ vlastný s vlastným skriptom). Dnes, vďaka jednému modrému prehliadaču už si takmer musíte robiť 2 varianty JS kódu na to, aby ste taký DIV otvorili/zatvorili. Samozrejme, takýto príklad je prehnaný, pretože zväčša je tých riadkov na webe viac.
A o takom vlastnom lightboxe pre fotogalériu už nehovorím. Ak chceme zoskenovať HTML elementy, prípadne si vyžiadať cez XHR URL ďalšieho obrázka, k tomu nejaký príjemný prechod, tak vytvárať kvôli tomu vlastné optimalizované procedúry (ak sa samozrejme nejedná o väčšiu webvývojársku spoločnosť) mi príde zbytočné. Zvlášť, ak existuje jednoduché, rýchle a hotové riešenie.
Martin Hassman
Hermit [1]: Ano, na jednoučelové úkoly, např. fotogalerie se vyplatí použít jednoúčelové JS knihovny (zrovna na fotky bychom nějaké našly), které nemusí obsahovat celý framework.
BlackSUN
Jen bych doplnil, že občas může být výhodnější pro sledování načtení dokumentu použít $(window).load(), protože to čeká i na načtení obrázků atd.. protože třeba zjišťovat výšku obrázku, který nemá zadané atributy width a height, v DOM se už vytvořil, ale ještě nenačetl, občas v některých prohlížečích (Opera) může být dost problematické až nefuknční například pomocí funkce $(‚img‘).height().
Roman
určitě pokračovat, tohle mě zajímá
medhi
Děkuji za podnětné komentáře a taky za výzvy k pokračování, další díl určitě udělám.
Hermit [1]: na tomto javascriptovém frameworku je právě pěkné, že je možné ho použít i na velmi jednoduchou věc. Není to totiž žádný kolos, který by někde něco zpomaloval nebo někde obtěžoval. Poprvé se načte do keše a podruhé už si nikdo nevšimne ničeho.
Petr Václavek
Také jsem nedávno JQuery objevil a byl jsem nadšen – napsal jsem o tom něco málo na svůj blog – Ulehčete si JavaScript – používejte JQuery, ale je to čtení spíše pro pokročilejší uživatele, neboť jsem to vzal trochu rychleji a rovnou ukázal ty pěkné vychytávky a konstrukce, které umí.
Nicméně na validování formulářů na straně klienta se velmi dobře osvědčil (ještě s jedním speciálním pluginem). A neváhal bych jej použít i pro menší projekty, přece jen velikost pod 100KB je v dnešní době docela v pohodě.
bradka
pokracovat, pokracovat.. javascripty ac moc neovladam, me zajimaji..
František Kocúrik
len tak ďalej pokračujete.
Ako často to bude vychádzať?
medhi
Tak vzhledem k tomu, že o pokračování je zájem větší než jsem čekal, pokračování určitě bude. Další díl je už připraven, bude o výběru prvků ve stránce. Jak často to bude nevím, pokusím se o určitou pravidelnost, ale znáte to 🙂
Mavater
Náhodou sem se podíval na weblogy…a tohle mě zaujalo, přidávám do rss. Určitě pokračuj 🙂
Roman Pištěk
jQuery je vynikající framework, který u mě osobně přetavil původní antipatie k JavaScriptu na vřelé sympatie. Třešničkou na dortu je povedená dokumentace.
Hermit
medhi [11]:
No kolos to rozhodně není, cca 30kilo zapakovaný cca 100kilo nezapakovaný.
Samozřejmě pokud nemáš potřebu řešit třebas 10.000 uniqe host denně a peníze za zbytečně přenesená data ve střednědobém horizontu, tak asi bez problému. A to, že to nezpomaluje, tak samozřejmě zpomaluje, ale v dnešní době to uživatel tolik nepostřehne.
Ale je rozdil použít cca 0,7kilo (nezapakovano) oproti 30kilo + 1kilo (otevření/schování divu + uložení cookies) nebo cca 1,2kilo (nezapakovano) na galerii cca 30kilo + 2kilo.
Jinak příspěvek byl spíše doplnění. Osobně preferuji 2 JS FRW, již zmiňované jQuery a nebo YUI. Akorat šáhnutí po frameworku je vždy na zvážení.
Hermit
medhi [11]:
No kolos to rozhodně není, cca 30kilo zapakovaný cca 100kilo nezapakovaný.
Samozřejmě pokud nemáš potřebu řešit třebas 10.000 uniqe host denně a peníze za zbytečně přenesená data ve střednědobém horizontu, tak asi bez problému. A to, že to nezpomaluje, tak samozřejmě zpomaluje, ale v dnešní době to uživatel tolik nepostřehne.
Ale je rozdil použít cca 0,7kilo (nezapakovano) oproti 30kilo + 1kilo (otevření/schování divu + uložení cookies) nebo cca 1,2kilo (nezapakovano) na galerii cca 30kilo + 2kilo.
Jinak příspěvek byl spíše doplnění. Osobně preferuji 2 JS FRW, již zmiňované jQuery a nebo YUI. Akorat šáhnutí po frameworku je vždy na zvážení.
Langi
Zájem rozhodně mám, piš piš piš 😉 (a díky)
David Lengyel
Jsem též pro pokračování. JS byl můj nepřítel, jQuery vypadá sympaticky a už delší dobu se k němu snažím dokopat, takže budu určitě sledovat 🙂
pmg
Google nejznámější knihovny hostuje. jQuery tedy můžete vkládat přímo z externího serveru ? je to výhodnější, než se zdá:
1) Obejdete tím limit počtu požadavků na jeden server (nastavení prohlížeče), takže se knihovna může stahovat paralelně s obrázky a stylopisy.
2) Googlí servery jsou pověstné svou rychlostí, a kód navíc přenáší v komprimované podobě.
3) Při linkování z více serverů se může použít týž soubor v keši a knihovna se znovu nemusí stahovat.
Pro větší věci také doporučuji zkusit MooTools. Mají pěknou implementaci objektů.
Michal Marek
něco takového na CZ internetu chybí, rozhodně pokračovat 🙂
knedle
Taky přidám jeden link:
Smashing Magazine – jQuery and JavaScript Coding: Examples and Best Practices
bo se chci take na jquery prave vrhnout
Zykki
fakt super, predtym som nemal ani paru o jquerry a toto je clanok ktory je pisany tak zrozumytelne ze este aj ja chapem:D
Tomáš Gažůr
Určitě budu rád za pokračování. S jQuery se setkávám skoro pořád a už dlouhou dobu se nutím do toho že bych se ho měl lépe naučit. Neexistuje česká kniha o jQuery? Pokud by byla dobrá, rád bych si jí zakoupil. Děkuji.
Matěj
česká kniha je ? jQuery ? Kuchařka programátora
luk a šíp
hhh, líbí se mi, co řiká tomáš
manakmichal
Tomáš Gažůr: česká kniha myslím není, ale jsou dobré anglické a samotné jQuery má slušnou dokumentaci s příklady, kde je vše hezky vysvětleno. Není to ani tak dávno, co zveřejňovali zdarma skvělou knihu právě pro tvorbu s jQuery pro začátečníky. Osobně bych doporučoval nějakou zahraniční literaturu nebo webovky ? o jQuery jich je hromada.
sara
Hezke clanky o Jquery? Mel bych zajem o pokracovani 🙂 Dekuji