jQuery je sexy - javascriptová knihovna pro AJAX, DOM a animace

25. July 2007

O jQuery jsem již stručně psal. Teď bych jej chtěl představit podrobněji.

Moje cesta k AJAXu

Měl bych napsat, že jsem až do nedávna AJAXovou módní vlnu odmítal. Důvody byly následující:

  • nefunkčnost při vypnutém javascriptu
  • složité ladění AJAXových skriptu pro funkčnost ve všech prohlížečích
  • nepřívětivost pro vyhledavače (nebookmarkova­telné)
  • zatahování javascriptového kódu pro XHTML stránek
  • uživatelé nejsou na AJAX navyklý, a tak mohou problémy s používáním stránky

Dnes už vím, že ani v jednom z uvedených bodů jsem neměl pravdu.

Dobře udělaná stránka, která používá AJAX by měla stejnou funkčnost poskytovat i při vypnutém javascriptu. Lze toho dosáhnout tak, že se jednoduše místo AJAX requestu vykoná požadavek klasickou cestou (klepnutí na odkaz, odeslání formuláře) a server na něj korektně odpoví.

Když používáte low-level API nevyhnete se ve vašem AJAXovém skriptu následující konstrukci:

var xhr = null;
try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
catch(e) { xhr = new XMLHttpRequest() }

Dalším těžkopádným výrazům se nevyhnete při manulaci a DOM elementy. IE se často chová nestandardně, a tak je nutné psát zvlášť kód pro něj a ostatní prohlížeče.

Pokud mluvíme o bookmarkova­telnosti je nutné si uvědomit, k čemu vlastně AJAX má sloužit, resp. jeho vhodné využití. Pokud například tvořím web, na kterém publikuji články, není zřejmě rozumné udělat jejich zobrazování pomocí AJAXu. Pokud má být takový web přívětivý pro vyhledavače, musí mít každý článek permalink a navigace mezi články musí být zaindexovatelná pro vyhledavače. Toto by šlo samozřejmě obejít – zajistit funkčnosti pro vyhledávače tím, že zajistíme funkčnosti i při vypnutém javascriptu. Naopak rozumné příklady použítí AJAXu jsou podlé mého například:

  • chat
  • stránka pro zapomenuté heslo (odeslání požadavku a zobrazení odpovědi na téže stránce)
  • v detailu článku funkce Doporučit článek
  • vložení nového dotazu/odpovědi do diskuse

Všechny příklady mají jedno společné – stránka, která na je nakonci use casu (všechny use casy mají pouze dva kroky) nemusejí být bookmarkovatelné. Ve druhém a třetím příkladu se použitím AJAXu vyhneme tomu, abychom přešli na jinou stránku, a tím částečně ztratili kontext (nad čteným článkem, nad threadem, do kterého přidáváme novou odpověď). Když už jsem zmínil přidávání nové odpovědi – pokud je to obluhováno AJAXem měl by uživatel po odeslání formuláře (stránka zůstává původní) vidět na patričném místě svoji odpověď – jednoduše by měl vidět stejnou stránku, jako kdyby došlo k obnovení celé stránky.

Nemám rád javascriptový kód embednutý přímo v XHML stránce. Tolerovat se to dá snad jen v případě Google AdSense, Google Analytics a podobných služeb. Javascriptový kód patří do samostatného souboru (výhoda kešování, provádění úprav na jednom místě apod.). Podobně se mi nelíbí takovéto výrazy (navíc když se dají elegantně nahradit):

function foo() {
     alert('Hello World!');
}

// ugly kód
< a href="#" id="link" onclick="foo();">Pozdrav</a>

// elegantní náhrada
< a href="#" id="link">Pozdrav</a>

document.getElementById('link').onclick = foo; // voláno při window.onload

Možná si řeknete, že ta moje elegantní náhrada není až tak elegatní – a budete mít pravdu, ale docílíte naprosté separade javascriptotého kódu do samostatného souboru.

Představení jQuery

jQuery je javascriptový framework, který slouží pro práci s AJAXem, manipulaci s XHML stránkou (DOM), práci s CSS a obsahuje i funkce pro provádění animací. Další zajímavá fakta o tomto frameworku:

je malý
Zkomprimovaná verze má pouze 20 kB (nezkomprimovaná pak 61 kB). Ke klientu se navíc přenáší pouze jednou a při dalších požadavcích se bere z keše prohlížeče.
podpora všech prohlížečů
Píšete jeden kód bez ohledu na prohlížeč. jQuery se postará o to, aby fungoval ve všech prohlížečích.
velká komunita a aktivní vývoj nových verzí
Zabývám se jQuery asi dva měsíce a za tu dobu vyšlo několik nových verzí.

bohaté zdroje o jQuery na internetu
- jQuery má velmi dobrou dokumentaci. Na webu lze nalézt i spoustu tutoriálů.

Co vše vám tedy jQuery může nabídnout:

Jádro jQuery

Jádro jQuery tvoří několik základní funkcí a funkce pro manipulaci s obsahem stránky. Mám na mysli: -

  • přístup k elementům stránky a jejich vytváření za běhu
  • procházení kolekce elementů?
  • spuštění kódu po načtení stránky (v momentě, kdy je DOM dokumentu připraven), tedy dříve než nastane událost onload

Pár příkladů:

// připojení kódu na konec stránky
$("<div><p>Hello</p></div>").appendTo("body");

// skrytí všech prvků ve formuláří s id 'myForm'
$(myForm.elements).hide();

// příklad vlastního rozšíření
jQuery.fn.extend({
   check: function() {
     return this.each(function() { this.checked = true; });
   },
   uncheck: function() {
     return this.each(function() { this.checked = false; });
   }
 });
 $("input[@type=checkbox]").check();
 $("input[@type=radio]").uncheck();

Všechny výše uvedené příklady jsou převzaty ze stránky jQuery – API/1.1.2/Core a tam vás také odkazuji k dalšímu studiu.

Selektory

Selektory v jQuery jsou kombinací CSS 1–3, XPath dotazů a dalších funkcí.

Pokud jste seznámeni s CSS, XML, XPath, tak tuto část knihovny zvládnete doslova za pár minut. Opět pár příkladů:

// zobrazení skrytých DIVů
$("div:hidden").show();

// kolekce prvních čtyř odstavců
$("p:lt(5)")

// první, poslední, třetí odstavec
$("p:first");
$("p:last");
$("p:eq(3)");

// kolekce všech objektů typu input z daného formuláře
$("#myForm :input");

Atributy

V této části nalezneme funkce, které slouží pro přístup k textu (html) objektů a také k nastavování vlastností objektů. Šikovné funkce jQuery napříkald umožňují přístup k html kódu objektů pomocí příkazu $(‚#myObject‘)­.html(); a jeho nastavení pomocí příkazu $(‚#myObject‘)­.html(‚<p>Můj nový obsah</p>‘);. Alternativní funkce jsou $(„#myObject“)­.text(); pro přístup k textu objektu a $(‚#myObject‘)­.val(); pro přístup k hodnotě formulářového pole.

Procházení elementů

Tato částo obsahuje funkce, které slouží pro procházení DOM dokumentu. Typicky je tímto dokumentem buď samotná XHTML stránka nebo XML soubor, který dostanete od odpověď serveru na AJAX požadavek, který jste pomocí jQuery vykonali.

Uvádění příkladů je myslím zbytečné, a tak čtenáře odkazují na dokumentaci k této části frameworku.

Manipulace s obsahem dokumentu

Tato část jQuery obsahuje funkce pro přidávání obsahu na určité místo vybraného objektu (typicky na začátek, konec). Opět odkazuji na bohatou dokumentaci.

Práce s CSS

Malá skupinka funkcí usnadňující práci s CSS. Obsahuje několikrát přetíženou funkci css(), která slouží k nastavení CSS direktiv danému objektu. Dále jsou zde funkce height a width pro čtení a nastavování výšky/šířky objektu.

Události

V této části nalezneme důležitou část funkcí, která slouží k práci s událostmi (události klávesnice, myši atd…).

// zobrazení varovného okna při kliknutí na jakýkoliv odstavec v dokumentu
$(document).ready(function() {
     $("p").click( function() { alert("Hello"); } );
}

Efekty (animace)

V samostatné části jsou fukce umožňující animace a práci s viditelností objektů. Podobné volovinky nemám rád, ale když jsem po otestování zjistil, že výsledný kód skutečně funguje ve všech majoritních prohlížech (IE6, Opera, Firefox, IE7), přestal jsem se jich bát. Například střízlivě použité pomalé zobrazení určitého objektu může oživit jinak nudnou stránku.

Funkce pro AJAX

V tomto balíku jsou funkce, které slouží pro vykonávání asynchronních (případně synchronních) požadavků na server.

$.post("backend.php",
      { firstname: "Vlastimil", lastname: "Vávrů" },
      function(data){
          alert("Odpověď serveru: " + data);
      }
);

Uvedný kód vykoná asynchronní požadavek a pošle proměnné firstname a lastname. Po přijetí odpovědi od serveru bude vykonán callback a zobrazí se alert.

Další funkce opět uvádět nebudu a odkážu na dokumentaci.

Pomocné funkce

Funkce $.browser slouží pro identifikaci prohlížečů (dozeznává prohlížeče safari, opera, msie, mozilla). Funkce $.each slouží pro iterování kolekcí objektů. Funkce $.extend slouží použijte pokud chcete aby objekt B dědil vlastnosti z objektu A. Funkce $.grep slouží pro filtraci prvků v kolekci podle zadané funkce. Funkce $.map slouží pro modifikaci prvků v kolekci podle zadané funkce. Funkce $.merge slouží pro spojování dvou polí. Funkce $.trim slouží k odtranění bílých znaků z řetězce.

To je o jQuery vše. Jistě by šlo napsat mnohem delší a obsažnější článek, ale jak jsem již několikrát naznačil – bylo by to zbytečné. Stací prostudovat originální dokumentaci.

Pluginy

Do jQuery je možné psát pluginy (rozšíření). Počet již hotových pluginů je obrovský. Pluginy mohou sloužit pro zobrazování obrázků (známý lightbox), práci se záložkami, atd. Vypadá to, že existuje plugin snad úplně na všechno. Rozhodně doporučuju k prostudování než se pustíte do psaní něčeho vlastního.

Nakonec bych se chtěl zmínit o chatu, který jsem pomocí jQuery vytvořil.

Real world příklad – vChat

Příklady jsem v článku šetřil. Mělo to svůj důvod. Raději než několik útržkovitých fragmentů kódu je, myslím, lepší ukázat fungující aplikaci. Tou aplikací je vChat – chat postavený na jQuery s PHP jako backendem.

Závěr

Na jQuery se mi líbí její jednoduchost. Je až s podivem kolik funkčnosti se dá namačkat do tak krátkého kódu (platí jak o kódu samotné knihovny, tak o vašem programu, který pomocí jQuery budete vytvářet).

Odkazy:

Článek patří do kategorie: Ajax

17 Komentářů Přidat komentář

  • 1. Jarda Jirava  |  7. August 2007 v 7.52

    Ahoj,
    jenom se zepám, jaký máš názor na častou vydávanost jednotlivých verzí a jak jsou jednotlivé verze kompatibilní. Jde spíše o zlepšování funkcionality se zachováním stejného rozhraní, případně pouze rozšíření. Nebo je to podobné, jako třeba u ZF?
    Podle mě, příliš časté změny interface nejsou vůbec vhodné a raději bych oželel četnost aktualizací před zachováním a vybudováním vhodného interface. Je to však spíše pohled člověka z neOS sféry.

    Díky
    -- J.

  • 2. Vlasta  |  7. August 2007 v 8.15

    [1] Abych se přiznal v případě jQuery jsem kompatibilnost jednotlivých verzí nezkoumal – zpočátku jsem si s knihovnou jenom „hrál“ a když přišlo na psaní produkčního kódu sáhl jsem jednoduše po nejnovější verzi.

    Trochu jsem zapátral po webu a přečetl si changelog – http://dev.jqu­ery.com/…hange­Log.txt.

    Jsou tam mírné změny v API, ale důležitější je podstatné zrychlení některých částí jQuery (selektor engine) a fixnutí řady bugů.

    A co se týče ZF – tam byly změny v API brutální. Od verze 0.1 do 0.7 jsem držel krok. Pak jsem to vzdal a jednoduše používal verzi 0.7. Teď už je releasnutý ZF 1.0.1, taže přejdu.

  • 3. ondrakub  |  3. September 2007 v 22.01

    Jquery se mi taky velice zalíbilo. Ale docela si lámu hlavu s jednou fintou. Mám input typu checkbox a input typu submit, který je disabled a potřebuji, když zaškrtnu checkbox, aby se disabled na submitu zrušil a naopak při odškrtnutí, aby se zase aktivoval. Moc díky za radu.

  • 4. Vlasta  |  3. September 2007 v 22.18

    [3] Zde je reseni:

    JS:

    $('#send').attr('disabled', true);
    $('#chb').click(function() {
            $('#send').attr('disabled', $(this).attr('checked') != true);
    });

    HTML:

    <input type="checkbox" id="chb"/>checkbox
    <input type="submit" id="send" value="Odeslat"/>
  • 5. ondrakub  |  3. September 2007 v 22.34

    JJ funguje, moc díky. ;-) Zas o něco chytřejší.

  • 6. ondrakub  |  3. November 2007 v 12.37

    Poradil bys mi ještě jednu věcičku? potřebuju udělat kontrolu síly hesla, mám:

    $(‚input#heslo­‘).keypress(fun­ction(){
    var n = $(„input#heslo­“).length;
    if(n = 6 && n

    ale pořád to vypisuje jen „slabé“

  • 7. ondrakub  |  4. November 2007 v 13.47

    jej, opravička

    $(‚input#heslo­‘).keypress(fun­ction(){
    var n = $(„input#heslo­“).length;
    if(n = 6 && n

    předem dík za radu :-)

  • 8. pep  |  12. November 2007 v 9.14

    mozna by to slo takhle

    var n = $(„input#heslo­“).val().length;

  • 9. ondrakub  |  13. November 2007 v 22.58

    to pep:
    jo díky za radu, funguje to :-)

  • 10. Pavka  |  14. January 2008 v 0.33

    Loader pro FCKeditor

    Poslední dny se snažím proniknout do tajů jQuery. Mám plno nápadů na řešení, ale jeden je zakledtý a nedaří se mi jej vyřešit. Chtěl bych na stránky, ve kterých používám FCKeditor implementovat ukazatel načítání tohoto javascriptového elementu. Konkrétně by to měla být obdoba ajaxloaderu pro skripty nebo lightboxu pro náhled obrázku.
    Vaše řešení s vděkem přivítám. Díky

  • 11. Libor Fikr  |  6. April 2008 v 10.50

    Dobrý den,

    nejsem v jQuery příliš ostřílený borec a touto cestou bych Vás chtěl požádat o radu. Chci do svých stránek vkládat flash hry a chtěl bych pro ně pomocí jQuery vytvořit preloader, něco na způsob lightboxu. Můžete mi, prosím, poradit jak na to? Děkuji. Můžete psát i na libor.fikr (at) gma­il.com

  • 12. Vlasta  |  6. April 2008 v 11.44

    [12]Já myslím, že pro flashové hry je potřeba udělat preloader zase pouze a jedině ve flashi. Sice je možná komunikace mezi javascriptem (jQuery) a flashovou hrou (swf)…ale to by znamenalo udělat úpravu ve všech flashových hrách

    Obecně bývají preloadery již součástí flashové animace.

  • 13. Libor Fikr  |  19. April 2008 v 12.24

    Dobrý den,

    možná jsem to špatně napsal. Měl jsem na mysli to, že JQuery natáhne swf soubor a až bude stáhnutý, tak ho zobrazí. Mezitím poběží nějaká animace či reklama. Nevadí, když se nebude zobrazovat, kolik procent je již stáhnutých. Díky

  • 14. pl4nt  |  1. June 2008 v 5.41

    díky za super motivaci :-) ne važně díky tomuto článku začnu používat nějakej javascriptovej framework :p už mě nebaví věčné onclick=„…“

  • 15. nishkam  |  10. July 2008 v 18.34

    Diky za nakopnuti a lehky uvod do problematiky. Pomohlo mi to rozuzlit situaci po 5 hod. patrani. Jeden radek to vyresil :)
    $input.focus(re­setPosition);

  • 16. Bobík  |  7. November 2008 v 13.08

    [6] Doporučuju se kouknout do Drupalu, modul User. Tam je to vyřešeno doceela pěkně. A navíc, proč znovu objevovat kolo?

  • 17. 2symptoms&hellip  |  12. January 2022 v 22.17

    3delineate…

Přidat komentář

Povinné

Povinné, skryté

Security Image Povinné
Opište text z obrázku

Povolené HTML značky:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Odkazovat na tento článek  |  Přihlásit se k odběru těchto komentářů přes RSS Feed


Kalendář

March 2024
M T W T F S S
« Jan    
 123
45678910
11121314151617
18192021222324
25262728293031

Poslední články

Locations of visitors to this page