Seriál, který tu chybí
Kdo chce začít používat jQuery, může zjistit, že toho tu k němu moc není, zejména ne uceleného a aktuálního. Je samozřejmě možnost vybrat si z nepřeberného množství materiálů v angličtině, ale našinec dá často raději přednost českým textům.
Tento seriál má za cíl právě vyplnit tuto „díru“ a poskytnout všem zájemcům ucelené informace o použití frameworku, včetně návodů, jak udělat to či ono. První část seriálu bude věnována základnímu jQuery, druhá část GUI rozšíření jQuery UI a třetí dotykově optimalizovanému jQuery Mobile.
Co je jQuery
Asi dnes už málokdo, kdo se zabývá tvorbou webů nebo dokonce vývojem webových aplikací, neví, o co se jedná. Webové aplikace pro klientskou stranu (běžící ve webovém prohlížeči) se nejčastěji píší v jazyce JavaScript. Ten je kvalitně podporován ve všech běžně používaných moderních prohlížečích a bývá také standardně zapnutý. Proto je jazykem první volby.
Jazyk sám o sobě ale samozřejmě nestačí. Je potřeba nějak interagovat s daty, která jsou prohlížečem zobrazována, načítat data ze serveru či je tam naopak odesílat. V prohlížečových implementacích JavaScriptu je k dispozici aplikační rozhraní, které to umožňuje. Lze přistupovat k objektovému modelu dokumentu (DOM), posílat požadavky na server, využívat různá specializovaná API prohlížečů atd.
Jsou tu ale dva problémy. Jednak je poskytované rozhraní jaksi „spartánské“. Například triviální úkol spočívající v posunu nějaké vizuální komponenty po stránce vyžaduje zavolat několik funkcí, testovat návratové hodnoty apod. Pokud je aplikace podobnými operacemi doslova protkaná, nebude nikoho bavit je implementovat přímo, proto si dříve či později napíše funkce, které to zjednoduší.
Druhým problémem je různorodost prohlížečů. Přestože existují určité standardy, ne vždy se jich tvůrci prohlížečů drží. A co hlavně, ne všechno je standardy upraveno. Chcete-li například z JavaScriptu poslat požadavek na server, v závislosti na prohlížeči a jeho verzi se bude postup mírně lišit. I tady je tedy potřeba – má-li aplikace fungovat všude – udělat abstrakční vrstvu, která proměnlivé věci ponechá dole a ve vlastní aplikaci se budou funkce volat vždy stejně.
Ovšem proč si vyvíjet vlastní řešení, když už tu takové existuje? Je jím například právě jQuery. Zjednodušuje rutinní operace a obaluje prohlížečově závislé části API, takže psaní aplikací (i těch nejjednodušších) je mnohem snazší.
Framework jQuery je svobodný software šířený pod permisivní licencí typu MIT, takže není problém ho využívat ani v proprietárních aplikacích. Jeho kód je datově velmi úsporný a navíc lze případně využít různé CDN, takže mohou aplikace sdílet jednou načtený soubor umístěný mimo server vlastní aplikace (je to možnost, ne nutnost – takže o bezpečnost a soukromí není třeba mít obavy).
Jak jQuery funguje
O jQuery se často hovoří jako o „nečistě“ navrženém frameworku, protože příliš nectí objektový model. To je samozřejmě pravda a mimo jiné i proto vznikla řada jiných javascriptových frameworků. Na druhou stranu je to právě použitý způsob práce, co přiblížilo jQuery mnoha vývojářům.
Syntaxe jQuery je jednoduchá a způsob psaní kódu úsporný, takže se „neupíšete k smrti“. V mnoha případech lze využít řetězení metod, tedy psát ještě méně kódu a současně ho učinit přehlednější a názornější.
Znáte CSS a práci se selektory? To je přesně ono. V jQuery je na nich založeno téměř vše. Stručně řečeno: pomocí selektorů si vyberete množinu objektů v DOM a provedete s nimi nějakou operaci, například přesun ve stromě DOM, změnu CSS stylu, úpravu obsahu, vložení nových objektů apod.
Další významnou vlastností jQuery je intenzivní práce s obsluhou událostí, a to jak těch vzniklých v prohlížeči, tak i řady dalších (například vrácení různých HTTP kódů v odpovědi na požadavek). S tím souvisí již zmíněné prohlížečově nezávislé a navíc snadno použitelné posílání HTTP požadavků.
Nelze zapomenout ani na různé utility (pro různé konverze dat, práci s textem atd.) a na modularitu jQuery. Chybí-li vám nějaká funkcionalita, můžete ji snadno dodat pomocí pluginů. Existuje jich mnoho již hotových (pod různými licencemi), není ale nic těžkého si vytvořit vlastní.
Tvoříme lepší GUI, aneb jQuery UI
Základní jQuery je nízkoúrovňový framework, který toho umí hodně, ale neřeší vyšší vrstvy, tedy například uživatelské rozhraní. Pro vylepšení GUI je tu nadstavba nazvaná jQuery UI. Chcete umožnit posouvání nějakého prvku myší? Žádný problém, je to v podstatě věc jediného zavolání funkce. Podobně třeba implementace animací nebo přidání bohatších widgetů (kalendář, dialog a řada dalších).
Snazší vývoj také pro mobily
Nejnovějším členem rodiny je jQuery Mobile. Je to opět nadstavba jQuery a přidává funkcionalitu vhodnou pro mobilní telefony a tablety. Do té patří například speciální „dotykové“ události, widgety, práce s tématy nebo responzivní rozložení prvků.
Základy práce
Příště už se podíváme na základy práce s jQuery – tedy jak vůbec začít (kde jQuery získat, jak zahrnout do dokumentu), jak používat selektory, jak volat objektové metody a jak zabránit případné kolizi s jinými frameworky.