přejít na obsah přejít na navigaci

Linux E X P R E S, jQuery (2) – získání, první kroky, selektory, řešení kolizí

jQuery (2) – získání, první kroky, selektory, řešení kolizí

jquery.png

Ve druhém díle seriálu se podíváme na to, kde jQuery získat, jak s ním začít pracovat, k čemu slouží selektory a jak řešit případné kolize s jinými frameworky.


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()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í.

Nahoru

Příspěvky

jQuery (2) – získání, první kroky, selektory, řešení kolizí
w359 5. 01. 2015, 21:31:23
Odpovědět  Odkaz 
Vďaka za článok. Pre začiatočníka s jQuery je to super. Želám veľa pokračovaní ;-)
jQuery (2) – získání, první kroky, selektory, řešení kolizí
Martin 6. 01. 2015, 14:05:49
Odpovědět  Odkaz 
Vďaka za Vašu snahu. Seriál mi určite dopomôže usporiadať doterajšie skúsenosti s JQ.
jQuery (2) – získání, první kroky, selektory, řešení kolizí
Pavel Šimerda 6. 01. 2015, 17:30:27
Odpovědět  Odkaz 
[CDN] Kdyby se používaly URI s nějakým hashem, nebyl by tu ten problém s podvržením obsahu.
jQuery (2) – získání, první kroky, selektory, řešení kolizí
Pavel Šimerda 6. 01. 2015, 17:36:28
Odpovědět  Odkaz 
Jinak hezký úvod, na web se už hodně dlouho nespecializuju a ani předtím jsem moc nejavaskriptoval, je hezké si takhle rychle přiblížit, jak to as bude fungovat.
jQuery (2) – získání, první kroky, selektory, řešení kolizí
Vlastimil Ott 7. 01. 2015, 19:46:31
Odpovědět  Odkaz 
Díky za seriálek.

Pro případ WordPressu:

Nedoporučuje se volat externí jQuery, vše je připraveno, stačí to zavolat:
http://codex.wordpress.org/Function_Reference/wp_enqueue_script

WP je případ toho frameworku, takže je třeba používat "jQuery", nikoliv $ (toto je zlatá rada! :-D)

Obecně ke skriptům vkládaným z CDN - líbí se mi trik, kdy se neuvádí protokol a URI je jen //domena.org/script.js - nevzniká problém s http(s) a případným křikem prohlížeče.

Těším se na další díly...
Lukáš Jelínek Re: jQuery (2) – získání, první kroky, selektory, řešení kolizí
Lukáš Jelínek 7. 01. 2015, 22:08:43
Odpovědět  Odkaz 
Díky za doplnění ;-)
Vojtěch Trefný Re: jQuery (2) – získání, první kroky, selektory, řešení kolizí
Vojtěch Trefný 7. 01. 2015, 22:48:35
Odpovědět  Odkaz 
Doplním, že i můj oblíbený (a samozřejmě ten nejlepší!) CMS má také jQuery v základní instalaci -- https://www.drupal.org/node/171213
jQuery (2) – získání, první kroky, selektory, řešení kolizí
Tomáš Jurman 8. 01. 2015, 10:21:22
Odpovědět  Odkaz 
Řekl bych, že následující tvrzení je chybné:

"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)."

JS se většinou dává do patičky. Při vložení JS do hlavičky se nejprve načítá JS a až potom html BODY. Aby mohl být JS stahován paralelně musel by se přidat atribut asinc (). A stím jsou spojené další problémy a nekompatibility.

Tomáš
Lukáš Jelínek Re: jQuery (2) – získání, první kroky, selektory, řešení kolizí
Lukáš Jelínek 8. 01. 2015, 14:07:53
Odpovědět  Odkaz 
Záleží na prohlížeči. Například Chrome/Chromium pracuje tak, že sice při načítání skriptu pozastaví parsing HTML, ale načítá ho dál a parsuje ho zjednodušeně, aby mohl paralelně načíst další obsah. Čili čeká se jen s plnohodnotným parsingem a vytvořením DOM. Reálné dopady umístění skriptu na začátek a na konec na rychlost celkového načtení stránky tedy závisí hlavně na relaci mezi rychlostí sítě (internetového připojení) a rychlostí počítače (CPU, paměť...). Firefox tohle neřeší vůbec a načítá skripty i všechno ostatní až po načtení celé stránky, ať už je to umístěné kdekoliv.
Re: Re: jQuery (2) – získání, první kroky, selektory, řešení kolizí
milan 8. 01. 2015, 14:56:16
Odpovědět  Odkaz 
...Firefox tohle neřeší vůbec a načítá skripty i všechno ostatní až po načtení celé stránky, ať už je to umístěné kdekoliv...

Což je samozřejmě lepší.
Re: Re: jQuery (2) – získání, první kroky, selektory, řešení kolizí
Tomáš Jurman 12. 01. 2015, 09:40:18
Odpovědět  Odkaz 
Můžete prosím uvést verze Chrome/Chromium a Firefoxu, + nějaký zdroj Vašeho tvrzení?

Samotný developer.mozilla.org o tom píše:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages

Je sice možné, že v nějaké hodně nové verzi se již nějaký browser chová tak jak píšete, nicméně jak si můžete přečíst zatím stále platí, že JS je lepší dávat do patičky.

Tomáš
Lukáš Jelínek Re: Re: Re: jQuery (2) – získání, první kroky, selektory, řešení kolizí
Lukáš Jelínek 12. 01. 2015, 18:38:11
Odpovědět  Odkaz 
Zdroj informací pro Chrome se mi teď nedaří najít. Byl to článek psaný přímo jedním z vývojářů, takže jsem neměl důvod mu nevěřit. U Firefoxu (verze 34.0.5) jde o vlastní měření na webech z praxe (kdy se co načítá), a to jak pomocí Developer Tools, tak i bez nich se záznamem pomocí nástroje tcpdump.

Mimochodem ten odkazovaný návod pro FF doporučuje omezit inline skripty, zatímco jiné návody včetně tohoto (https://developers.google.com/speed/docs/insights/BlockingJS) doporučují krátké skripty vložit jako inline. Možná to není v rozporu a jde jen o různé pohledy na totéž (že krátké skripty je lepší přímo vložit, delší mít samostatně).

Asi by to bylo zajímavé téma pro článek - udělat pro různé weby (vždy tentýž s umístěním JS na začátku a na konci, případně ještě s přímým vložením) měření pro různé prohlížeče a nejlépe ještě na různě rychlých linkách.
jQuery (2) – získání, první kroky, selektory, řešení kolizí
Tomáš Jurman 13. 01. 2015, 09:26:02
Odpovědět  Odkaz 
Možná někde existuje nějaký výrok někoho. Každopádně pokud umístíte JS do hlavičky dojde k zablokování parseru stránky a tom se zde celou dobu bavíme. Částečně je to možné řešit novým HTML5 atributem asinc, případně starým defer.

Pokud by platilo to co tvrdíte prohlížeč by nedodržoval specifikaci:
https://html.spec.whatwg.org/multipage/scripting.html#script

Tomáš Jurman
jQuery (2) – získání, první kroky, selektory, řešení kolizí
programátor webů 13. 01. 2015, 18:28:09
Odpovědět  Odkaz 
Nikdo nemůže vědět všechno, ani šéfredaktor.

Odpovědět

Nejsou podporovány žádné značky, komentáře jsou jen čistě textové. Více o diskuzích a pravidlech najdete v nápovědě.
Diskuzi můžete sledovat pomocí RSS kanálu rss



 
 

Top články z OpenOffice.cz

Lukáš Jelínek

Lukáš Jelínek

Dlouholetý člen autorského týmu LinuxEXPRESu a OpenOffice.cz. Vystudoval FEL ČVUT v oboru Výpočetní technika. Žije v Kutné Hoře, podniká v oblasti IT a zároveň pracuje v týmu projektu Turris. Ve volném čase rád fotografuje, natáčí a stříhá video, občas se věnuje powerkitingu a na prahu čtyřicítky začal hrát tenis.


  • Distribuce: Debian, Kubuntu, Linux Mint
  • Grafické prostředí: KDE

| proč linux | blog