Získání jQuery
Existuje několik možností, jak framework jQuery získat. Každá má své výhody a nevýhody.
Ruční stažení a umístění na server
V mnoha případech stačí navštívit web projektu a odtamtud si stáhnout buď nejnovější verzi, nebo nějakou, která splňuje určité požadavky. Vždy se jedná o jeden jediný soubor. Existují ovšem dvě varianty: komprimovaná (pro ostrý provoz) a nekomprimovaná (pro vývoj a ladění).
Použít nejnovější verzi či zůstat u nějaké starší? Pokud má aplikace fungovat i v Internet Exploreru verzí starších než 9 (tedy na Windows XP), je potřeba použít řadu 1. V moderních prohlížečích poběží verze řady 2 rychleji.
O aktualizace se musíte trvale starat ručně (případně si nějak automatizovat ve vlastní režii). Současně ale máte tento proces pod kontrolou, nemůže tedy přijít žádné překvapení.
Instalace pomocí nástroje Bower
Nástroj Bower umožňuje poměrně snadno a komplexně řešit správu webových aplikací, včetně vyhodnocování závislostí. Použijete-li ho pro svůj projekt, jen uvedete tento framework mezi závislosti a Bower se sám postará o instalaci a pozdější aktualizace.
Je jasné, že pro jednodušší případy je to „kanon na vrabce“, protože jen příprava balíčku pro Bower může zabrat více času než ruční instalace jQuery po celou dobu existence webu. Místo Boweru můžete použít také podobný nástroj Composer nebo některé další.
Využití CDN
Asi úplně nejjednodušší je jQuery odnikud nezískávat – s tím, že se prostě přímo stáhne odněkud odjinud. To „odjinud“ zde znamená nějakou síť pro doručování obsahu (Content Delivery Network, CDN), která disponuje servery rozmístěnými po světě a poskytující potřebný soubor.
Soubory jQuery lze získat z celé řady CDN, z těch nejpoužívanějších například jQuery CDN (běží na MaxCDN; tuto síť doporučují tvůrci jQuery), Google, Microsoft nebo jsDelivr. Místo lokálního souboru prostě v dokumentu použijete absolutní URL.
CDN má výhodu v tom, že není potřeba nic instalovat/aktualizovat, navíc pokud se využívá tentýž soubor (se stejným URL) ve více aplikacích, stačí ho přenést do prohlížeče jen jednou. Znamená to ale spoléhat se na cizí službu, kde nemáte obsah pod kontrolou (může být i změněn/podvržen) a do určité míry to také narušuje soukromí.
Vložení do dokumentu
Aby framework fungoval, je potřeba jeho soubor vložit do (X)HTML dokumentu, kde se bude používat, a to vždy před javascriptový soubor, kde se bude využívat. Zda to bude na začátku nebo na konci, není z funkčního hlediska až tak podstatné. Je ale obecně lepší vkládat javascriptové soubory na začátek, protože se tím urychlí jejich načtení (může probíhat paralelně s dokumentem).
Jakékoli operace by se měly dělat nejdříve po úplném načtení dokumentu (bude o tom ještě řeč). Při používání cizích skriptů je někdy lepší dát je na konec (to se ale jQuery netýká); případně lze využívat atributy async a defer, ale to už přesahuje rámec článku.
Typicky může začátek dokumentu vypadat například takto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="/js/jquery.js" type="text/javascript"></script> <script src="/js/app.js" type="text/javascript"></script>
Tento kus kódu vloží do dokumentu soubor pro jQuery umístěný na serveru v adresáři js a ze stejného místa pak i aplikační javascriptový soubor. Pro variantu s CDN by to vypadalo takto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script> <script src="/js/app.js" type="text/javascript"></script>
Bude se vkládat komprimovaná verze 2.1.3. Vyjde-li aktualizace, stačí změnit URL.
Základy práce s jQuery, volání metod
Po vložení jQuery do dokumentu s ním lze začít pracovat. Asi nejlepší bude ukázat si to na jednoduchém příkladu:
$(document).ready(function() {
$('.clickable').click(function() {
alert('Klik');
}
});
Příklad ukazuje hned několik důležitých věcí. Především je to symbol dolaru ($), který symbolizuje objektovou třídu jQuery. Používá se, protože je to jeden znak a je dobře odlišitelný od všeho ostatního. Místo něj lze použít i přímo jQuery, ale kromě zvláštních případů (viz dále) je to zbytečné.
Dále je to vytvoření instance třídy jQuery pro nějaký objekt dokumentu, v tomto případě pro dokument samotný (document). V konstruktoru lze použít nejen přímo objekt, ale také selektor, jak je tomu zde v případě CSS třídy .clickable (o selektorech bude řeč později).
Práce s jQuery spočívá především ve volání objektových metod – tady je to vidět na metodách ready() a click(). V obou případech jsou to metody nastavující obsluhu událostí (událostem bude věnován samostatný díl seriálu). Metodou ready() se nastaví funkce volaná v okamžiku, kdy je daný objekt, tedy zde dokument, plně připraven fungovat. Právě toto je dobrá praxe při používání JavaScriptu nad dokumentem, protože zaručuje, že je kompletně načtený a zpracovaný prohlížečem. Metoda click() nastavuje obsluhu kliknutí myší – v příkladu se po kliknutí zobrazí informativní zpráva.
V některých případech se volají metody nikoli na instanci třídy jQuery, nýbrž přímo na této třídě. To je třeba případem různých obecně použitelných utilit:
var s = $.trim($('#test').text());
Tento kus kódu získá text z dokumentového objektu vybraného podle CSS identifikátoru test a odstraní z jeho začátku a konce „bílé znaky“ (mezery, konce řádků apod.).
Selektory a jejich použití
S jQuery se pracuje obvykle tak, že se nějak vyberou objekty dokumentu a zavolá se pro ně nějaká metoda, která něco dělá. Pro výběr lze použít buď přímo daný objekt (pokud je k dispozici), nebo častěji tzv. selektory. Ty známe především z CSS, kde se jimi určuje, na co se budou vztahovat definice stylů.
Tady je to velmi podobné jako v CSS, odlišností je jen málo. Opět nejlépe napoví příklad:
var jq = $('*');
var jq = $('a');
var jq = $('.abc');
var jq = $('#xyz');
var jq = $('#a, #b');
var jq = $('input:enabled');
Všechny řádky přiřadí proměnné jq instanci třídy jQuery, která bude aplikovat operace na množinu dokumentových objektů vybraných daným selektorem. První řádek vybere úplně všechno. Druhý vybere všechny elementy a, tedy hypertextové odkazy. Ve třetím se vybírají elementy CSS třídy abc, ve čtvrtém s CSS identifikátorem xyz.
Pátý řádek ukazuje vícenásobný výběr (položky seznamu se oddělují čárkou), zde opět s identifikátory. A konečně poslední využívá pseudotřídu enabled, tedy povolené (nezakázané) elementy input.
Při používání selektorů je potřeba si uvědomit několik věcí. Jednak ne všechny metody jQuery mohou pracovat s více objekty (pak se metoda použije jen na první z nich). Dále ne všechny selektory pro výběr téhož jsou stejně efektivní – některé jsou výrazně rychlejší než jiné, ty by se měly preferovat. A konečně by výběr měl být vždy co nejužší, protože při zbytečně širokém výběru se mohou do množiny dostat i nechtěné objekty a způsobit nesprávnou funkci, o výkonnostních dopadech nemluvě.
Pokud je například potřeba vybrat jen odstavce s třídou centered, je vhodnější použít selektor p.centered, než jen .centered, byť se třída jinde nepoužívá. Později totiž může být takové použití zavedeno (a bude mít logiku), což povede k provádění operací i nad objekty, kde se provádět nemají.
Příště se na selektory podíváme z praktičtější stránky, a to právě včetně různých záludností a úskalí.
Řešení kolizí
Občas je potřeba používat více frameworků najednou – například z historických důvodů nebo proto, že pro každý z nich je k dispozici nějaké hotové řešení, které je vhodné použít. A problém spočívá v tom, že se některé věci vyskytují ve více frameworcích a mohou vzájemně kolidovat.
Typicky se tento problém týká identifikátoru třídy jQuery, tedy znaku dolaru – používají ho i další frameworky, takže když se zkombinují, je výsledkem nepředvídatelné chování, často naprosté selhání aplikace. Jak z toho ven?
První možností je místo dolaru používat dlouhý název, tedy jQuery. To lze v podstatě vždycky, znamená to ale více psaní a nutnost upravovat existující kód. Mnohdy je to ale metoda volby.
Druhou možností je vrácení kontroly nad symbolem původnímu určení. Tady jsou dva příklady:
$.noConflict();
$.noConflict();
jQuery(document).ready(function($) {
…
});
První příklad pouze uvolní dolar k původnímu použití, kdy už nelze dále používat pro účely jQuery. Ve druhém příkladu se navíc dolar nadefinuje lokálně (uvnitř funkce volané při připravenosti dokumentu), aniž by se to dotklo globální úrovně. Dalších možností je celá řada, najdete je v dokumentaci.
Selektory v praxi
To by bylo k úplným základům všechno. Příště se podíváme na různé praktické příklady použití selektorů, včetně možných úskalí, která se zde objevují.