Ulehčete si JavaScript – používejte JQuery

Framework JQueryNedávno jsem dostal v práci naprogramovat trochu složitější a inteligentnější formulář. Nejprve jsem si myslel, že to nakóduji „z fleku“, ale protože jsem před nedávnem dočetl jednu velmi zajímavou knihu o JavaScriptu (John Resig: JavaScript a Ajax), kde se hodně psalo o různých javascriptových knihovnách, které ulehčují práci, rozhodl jsem se, že to také zkusím.

Po chvíli brouzdání na internetu padla volba na JQuery – tedy už před tím brouzdáním jsem měl na něj spadeno, neboť se mi velmi líbil způsob jeho zápisu. Podívejte se na pár ukázek.

Stylové selektory

Pomocí selektorů (jak je znáte z aplikování stylů) naleznete na stránce jakýkoliv element.

$("#myDiv").css("border","3px solid red");

Další operátory viz API reference – oddíl selektory

Řetězení

Jakmile najdete pomocí stylových selektorů objekt, se kterým chcete něco dělat, zavoláte všechny funkce z jednoho řádku:

$("a").addClass("test").show().html("foo");

Přidávání callback funkcí

Obsluha událostí není žádným problémem

$('#myform .textinput').bind("change keydown keypress keyup click", function(e){ ... });

Toto je jen zlomek, JQuery toho umí mnohem více – má funkce pro práci s DOM, Ajaxem, styly, efekty… ale hlavně má dobrou dokumentaci a spoustu pluginů, které dále rozšiřují množnosti knihovny.

Validace formuláře

Při své práci jsem s úspěchem použil plugin Validation pro kontrolu formuláře. Umožnil mi udělat naprosto vše, co jsem potřeboval, takže jsem měl validaci plně pod kontrolou.

Dále je uveden základní výčet, co plugin Validation umožňuje

  • validace navázaná na vlastních prvcích (nikoliv jen na SUBMIT tlačítku)
  • validování jen zvolených elementů
  • označení povinných políček a formátu vstupu v HTML kódu stránky pomocí css tříd
  • vlastní chybové hlášky (globální i pro jednotlivé položky a typy chyb)
  • již hotové validátory na datum, číslo, email, web url, číslo kreditní karty
  • není problém doplnit vlastní validátory (třeba na datum v určitém formátu)

Pokud s JavaScriptem občas pracujete, věnujte trochu času na prostudování knihovny JQuery, určitě se vám to v budoucnu několikanásobně vrátí.

Nikdy dříve jsem hotové javascriptové knihovny (frameworky) moc nepoužíval. Jak jste na tom vy? Co používáte?

Petr Václavek

Zobrazit příspěvky od Petr Václavek
Grafik na volné noze, kterého živí kreslení pro zahraniční microstock fotobanky, příležitostný fotograf, tvůrce dubánků, velký lenoch, čajopijec, a vášnivý čtenář.

12 Komentářů

  1. Pavel Šindelka
    21. 7. 2008

    Knihovnu JQuery už používám téměř dva roky a upřímně se divím, že v dnešní době interaktivních webových aplikací, kde je javascript přítomen na každém kroku, ještě někdo funguje bez pomoci javascriptových frameworků. Takový přístup je podle mě příšerným plýtváním vývojářským časem.

    Odpovědět
  2. Petr Václavek
    21. 7. 2008

    [1] No ono taky záleží jak často člověk dělá něco s JavaScriptem a jak komplikované skripty potřebuje vytvořit.

    Když potřebuji otestovat formulář se třemi políčky, kde jedno je povinné, pak je nějaký framework zbytečně „velkej kanón“ a z hlavně z fleku to mám naprogramovaný mnohem rychleji.

    Ale souhlasím s tím, že od určité velikosti / komplikovanosti skriptu jsou frameworky nezpochybnitelným ulehčením práce.

    Odpovědět
  3. Hellish
    21. 7. 2008

    Pro úplnost dodám, že autorem JQuery je ten samý John Resig jako autor zmiňované (mimochodem skutečně výborné) knihy. JQuery taktéž používám již nějakou dobu. Nejen, že rapidně usnadňuje práci s DOMem, ale také zastřešuje rozdílné implementace v browserech, takže programátor už na to nemusí myslet.

    Odpovědět
  4. Peter Hajduček
    21. 7. 2008

    Predtým než som našiel jQuery som si netrúfal na javascriptové záležitosti. Na otázku či ovládam javascript som vždy odpovedal že nie, dnes si vďaka jQuery trúfnem aj na náročné javascriptové a ajaxové aplikácie, má skvelé pluginy a zápis. Odporúčam každému, kto ešte nevyskúšal.

    Odpovědět
  5. Pavel Šindelka
    21. 7. 2008

    [2] Pravda, na jednoduché validace samotný javascript postačí. To, co jsem chtěl zdůraznit, je ten fakt, že současnost vyžaduje od tvůrců webů komplexní a složité skripty v JS čím dál tím častěji. A každý další jen trochu složitější projekt, který musím nakódovat svépomocí bez frameworku, mě stojí hrozně moc zbytečného úsilí a času. Práci s JS frameworky neodkládat! 🙂

    Odpovědět
  6. Borek
    21. 7. 2008

    Re 1, 2 a 5: Já bych lehký JS framework typu JQuery doporučil i u validace tří políček, protože opačný přístup je podle mě typická ukázka „předčasné optimalizace“ (JQuery šetří cykly mozku programátora, čistý JavaScript šetří cykly procesoru uživatelova počítače). Osobně nechci mít nic společného s něčím, co začíná „předčasná“ a končí „…ace“ 🙂

    Odpovědět
  7. zef
    22. 7. 2008

    Poznámka k ankete: myslím, že Prototype a Scriptaculous by mali byť v jednej položke, keďže to druhé je nadstavba prvého.

    Odpovědět
  8. podojkravu
    22. 7. 2008

    dokáže mi někdo fundovaně říct jestli je prototype objektivně horší/lepší než jquery a proč ? Osobně do toho vůbec nevidím a ty příklady co uvádíte myslím dokonce budou fungovat i pod ním

    Odpovědět
  9. Petr Václavek
    23. 7. 2008

    Malý dodatek: na Inervalu je o JQuery pěkný článek – JavaScript s jQuery – lehký úvod

    Odpovědět
  10. Hever
    29. 7. 2008

    [7] a [8] mi sebrali slova z jazyka (resp. prstů nad klávesnicí).

    [8] by mě zajímalo. Tipl bych taky, že globálně je prototype používanější.

    Odpovědět
  11. [2] Myslím, že je to jen otázka, než se s JQuery člověk naučí zacházet. Jakmile to již umí, je to s ní rychlejší než cokoliv psát ručně. Podobně to funguje i jiných technologií, třeba u ohřívání mléka v mikrovlnce vs. v hrnku na vařiči 🙂

    Odpovědět
  12. Makeš
    28. 2. 2010

    [11] – Plný souhlas i dobrý příklad.

    Odpovědět

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Skočit na začátek stránky