Nedá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?
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.
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.
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.
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.
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! 🙂
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“ 🙂
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.
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
23. 7. 2008
Malý dodatek: na Inervalu je o JQuery pěkný článek – JavaScript s jQuery – lehký úvod
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ší.
5. 8. 2008
[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 🙂
28. 2. 2010
[11] – Plný souhlas i dobrý příklad.