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?

Komentáře

1
21 červenec 2008, 16:35

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.

 
2
21 červenec 2008, 16:40

[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.

 
3
21 červenec 2008, 16:43

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.

 
4
21 červenec 2008, 17:27

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.

 
5
21 červenec 2008, 17:43

[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! :)

 
6
21 červenec 2008, 18:01

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“ :)

 
7
zef
22 červenec 2008, 14:24

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.

 
8
podojkravu
22 červenec 2008, 23:12

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

 
9
23 červenec 2008, 14:48

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

 
10
Hever
29 červenec 2008, 13:03

[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ší.

 
11
5 srpen 2008, 23:21

[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 :-)

 
12
28 únor 2010, 17:06

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

 

Přidej komentář

Pište prosím slušně, s diakritikou a k věci. Dodržujte pravidla a využijte možnosti formátování uvedená pod formulářem.

Email nebude zveřejněn

Pravidla a možnosti formátování

  • Nepoužívejte HTML značky, blog podporuje formátování texy. Nový odstavec získáte 2x odřádkováním, odkaz: "text odkazu":odkaz, **tučně**, *kurzíva*
  • Adresy začínající na http:// budou automaticky převedeny na odkazy
  • Jediné dvě povinné položky formuláře jsou Jméno a zpráva
  • Na předchozí komentáře odkazujte zápisem [2]

 

Sekce