1. časť: Predstavujeme framework jQuery

jQuery.jpg V no­vom se­riá­li ve­no­va­nom ja­vas­crip­to­vé­mu fra­mewor­ku jQuery vás pos­tup­ne oboz­ná­mi­me s tým, ke­dy je vý­hod­né ho pou­žiť, akým spô­so­bom nám uľah­čí prá­cu a ako správ­ne vy­uží­vať je­ho jed­not­li­vé vlas­tnos­ti. Úvod­ná časť bu­de, po­cho­pi­teľ­ne, ve­no­va­ná hlav­ne kon­fi­gu­rá­cii a zá­kla­dom prá­ce s jQuery.

Čo by ste ma­li poz­nať, než sa za­čí­ta­te do toh­to se­riá­lu? Po­žia­dav­ky nie sú vy­so­ké, sta­čí zna­losť HTML, kas­ká­do­vých štý­lov CSS a Ja­vaS­crip­tu. To všet­ko na bež­nej prog­ra­má­tor­skej úrov­ni, nie sú ne­vyh­nut­né hl­bo­ké zna­los­ti, aké by mal mať napr. webo­vý di­zaj­nér.

Pre­čo jQuery?
Pr­vá otáz­ka, kto­rú by sme si ma­li pri im­ple­men­tá­cii no­vé­ho fra­mewor­ku do pro­jek­tu po­lo­žiť, by ma­la znieť: Pre­čo by sme ma­li no­vý fra­mework za­viesť a čo nám je­ho im­ple­men­tá­cia pri­ne­sie?

jQuery vkla­dá do vý­sled­nej strán­ky HTML (či už sta­tic­kej, ale­bo ge­ne­ro­va­nej skrip­tom na stra­ne server­a) ďal­šiu vrstvu, kto­rej cie­le sú nas­le­du­jú­ce:

1. Od­strá­niť zá­vis­losť ja­vas­crip­to­vé­ho kó­du od pou­ži­té­ho pre­hlia­da­ča, resp. nut­nosť im­ple­men­tá­cie jed­not­li­vých fun­kcio­na­lít pre kaž­dý pre­hlia­dač zvlášť. Vďa­ka to­mu bu­de­te mať v strán­kach len je­den ja­vas­crip­to­vý kód, kto­rý bu­de fun­go­vať vo všet­kých pre­hlia­da­čoch (ale­bo as­poň vo väč­ši­ne pou­ží­va­ných).
2. Zjed­no­du­šiť prís­tup k jed­not­li­vým ele­men­tom na strán­ke a umož­niť jed­no­du­chú ma­ni­pu­lá­ciu s ich ob­sa­hom.
3. Umož­niť jed­no­du­chú im­ple­men­tá­ciu rôz­nych ani­mač­ných efek­tov na strán­ke, prí­pad­ne zmien v kas­ká­do­vých (CSS) štý­loch a umož­niť tak dy­na­mic­ké zme­ny vzhľa­du strán­ky.
4. Zjed­no­du­šiť prog­ra­mo­vé ope­rá­cie, kto­ré sú pri pou­ži­tí Ja­vaS­crip­tu príl­iš zlo­ži­té a ich kód je nep­reh­ľad­ný.
5. Pos­kyt­núť jed­no­du­chú im­ple­men­tá­ciu pre bac­ken­do­vú ko­mu­ni­ká­ciu so server­om, umož­ňu­jú­cu vý­me­nu úda­jov s klien­tom a ak­tua­li­zá­ciu pr­vkov strán­ky bez nut­nos­ti opä­tov­né­ho na­čí­ta­nia ce­lej strán­ky – ten­to kon­cept je dnes po­mer­ne zná­my ako Ajax (Asyn­chro­nous Ja­vaS­cript and XML).
6. Roz­ší­ri­teľ­nosť – pre jQuery exis­tu­je dnes už mno­ho plu­gi­nov, kto­ré umož­ňu­jú pri­dá­va­nie no­vých fun­kcio­na­lít a roz­ši­ro­va­nie mož­nos­tí fra­mewor­ku.

Vý­hod, kto­ré pri­ná­ša jQuery, je dosť, ale priz­nám sa, že dô­vo­dy, pre­čo som si ten­to fra­mework tak ob­ľú­bil, sú naj­mä v pr­vých dvoch uve­de­ných bo­doch. V ča­se, keď ja­vas­crip­to­vé fra­mewor­ky neexis­to­va­li, bo­lo vcel­ku utr­pe­ním na­pí­sať ne­ja­ký funkč­ný ja­vas­crip­to­vý kód kom­plexnej­šie­ho roz­sa­hu. Naj­mä prob­lé­my spô­so­be­né ne­kom­pa­ti­bi­li­tou me­dzi rôz­ny­mi pre­hlia­dač­mi (ale­bo do­kon­ca me­dzi rôz­ny­mi ver­zia­mi to­ho is­té­ho pre­hlia­da­ča) bo­li prak­tic­ky na den­nom po­riad­ku. jQuery do­ká­že tie­to kla­sic­ké noč­né mo­ry kaž­dé­ho fron­ten­do­vé­ho vý­vo­já­ra spo­ľah­li­vo za­hnať.

In­šta­lá­cia jQuery
In­šta­lá­cia jQuery je po­mer­ne jed­no­du­chá zá­le­ži­tosť. Pr­vý krok je nav­ští­ve­nie strán­ky http://jquery.com/, kto­rá je do­mov­skou strán­kou jQuery Co­re (jad­ra jQuery). Hlav­nou strán­kou, kto­rá zdru­žu­je pro­jek­ty jQuery, je http://jquery.org/, ale my si v tom­to se­riá­li za­tiaľ vy­sta­čí­me s jad­rom kniž­ni­ce.

Na strán­ke jQuery.com si te­da stiah­ne­me ak­tuál­nu ver­ziu jad­ra jQuery (v ča­se pí­sa­nia toh­to člán­ku bo­la ak­tuál­na ver­zia 1.5). K dis­po­zí­cii sú dve mož­nos­ti – stiah­nu­tie pro­duk­čnej ale­bo vý­vo­jár­skej ver­zie kniž­ni­ce. Pro­duk­čná ver­zia je mi­ni­ma­li­zo­va­ná, čo zna­me­ná, že sú z nej od­strá­ne­né všet­ky zby­toč­né zna­ky – ko­men­tá­re a práz­dne zna­ky (te­da me­dze­ry, ta­bu­lá­to­ry a no­vé riad­ky). Tá­to ver­zia bu­de pre­to ťaž­ko či­ta­teľ­ná, má­lo preh­ľad­ná, keď­že vše­tok kód v nej je skom­pri­mo­va­ný na je­den ria­dok bez zby­toč­ných me­dzier. Jej vý­ho­da je však v tom, že je asi 7-krát men­šia než tá vý­vo­jár­ska, čo zna­me­ná rých­lej­šie stiah­nu­tie a na­čí­ta­nie v pre­hlia­da­či. Je na vás, pre kto­rú ver­ziu sa roz­hod­ne­te. Na na­še úče­ly pos­ta­čí tá pro­duk­čná, ale v prí­pa­de, že bu­de­te pot­re­bo­vať kro­ko­vať zdro­jo­vý kód jQuery, mô­že­te ke­dy­koľ­vek prep­núť do vý­vo­jár­skej ver­zie. Dis­tri­bú­cia po­zos­tá­va z je­di­né­ho ja­vas­crip­to­vé­ho sú­bo­ru (jquery-1.5.min.js pre pro­duk­čnú ver­ziu ale­bo jquery-1.5.js pre vý­vo­jár­sku ver­ziu). Ten­to sú­bor mu­sí­me umies­tniť do ad­re­sá­ra, kam má prís­tup webo­vá ap­li­ká­cia, do kto­rej chce­me jQuery za­kom­po­no­vať. Ideál­ne na to pos­lú­ži po­dad­re­sár js (ale­bo ja­vas­cript) vy­tvo­re­ný v ko­re­ňo­vom ad­re­sá­ri na­šej webo­vej ap­li­ká­cie.

Kon­fi­gu­rá­cia strán­ky na pod­po­ru jQuery
Aby strán­ka moh­la vy­uží­vať jQuery, mu­sí­me do jej hla­vič­ky vlo­žiť nas­le­du­jú­ci kód (sa­moz­rej­me, to­to nie je pod­mien­ka, mož­no ho vlo­žiť i do te­la strán­ky):

<html>
<head>
<tit­le>Pr­vá strán­ka vy­uží­va­jú­ca jQuery</tit­le>
<script src="js/jquery-1.5.min.js" ty­pe="text/ja­vas­cript"> </script>
</head>

Tým­to pril­in­ku­je­me kniž­ni­cu jQuery do na­šej strán­ky, kto­rá je tak prip­ra­ve­ná pou­ží­vať jQuery fra­mework.

Pr­vá strán­ka zlep­še­ná o jQuery
Te­raz ko­neč­ne mô­že­me za­čať vy­tvá­rať pr­vú strán­ku pou­ží­va­jú­cu jQuery. Vstup­ným bo­dom zvy­čaj­ne bý­va fun­kcia $(do­cu­ment).rea­dy(), kto­rá je vy­ko­na­ná hneď po na­čí­ta­ní strán­ky, pre­to väč­ši­nou bu­de­te mať niek­de na strán­ke, kto­rá vy­uží­va jQuery, vlo­že­ný nas­le­du­jú­ci kód:

<script ty­pe="text/ja­vas­cript">
$(do­cu­ment).rea­dy(fun­ction() {
  // sem prí­de kód pou­ží­va­ný v strán­ke
});
</script>

Ako som už uvie­dol, tá­to fun­kcia bu­de väč­ši­nou pred­sta­vo­vať vstup­nú brá­nu do ja­vas­crip­to­vej vrstvy na­šej ap­li­ká­cie. Znak $ na za­čiat­ku uvá­dza vo­la­nie fun­kcie kniž­ni­ce jQuery. V prí­pa­de, že na strán­ke pou­ží­va­me už iný ja­vas­crip­to­vý fra­mework, kto­rý si ten­to znak re­zer­vo­val, mož­no pou­ží­vať i zá­pis nah­ra­dzu­jú­ci znak do­lá­ra re­ťaz­com jQuery, te­da jQuery(do­cu­ment).rea­dy(...). Vďa­ka to­mu nás jQuery neob­me­dzu­je tým, že by neu­mož­ňo­val pou­ži­tie žiad­ne­ho iné­ho ja­vas­crip­to­vé­ho fra­mewor­ku. Ten­to sce­nár však nie je bež­ný a aj pre ús­po­ru mies­ta bu­de­me v tom­to se­riá­li pou­ží­vať len skrá­te­ný zá­pis, uve­de­ný v prík­la­de. Te­raz nas­tal čas uká­zať as­poň ma­lič­kú časť to­ho, čo jQuery do­ká­že. Poz­ri­me sa pre­to na nas­le­du­jú­ci prík­lad (kto­rý pri­dá­me k uve­de­nej hla­vič­ke):

<bo­dy>
<script ty­pe="text/ja­vas­cript">
$(do­cu­ment).rea­dy(fun­ction() {
  $("#btn").click(fun­ction() {
    $("#text").hi­de();
  });
});
</script>
<div id="text">
To­to je skrý­va­jú­ci sa text.
</div><br/>
<in­put ty­pe="but­ton" va­lue="Klik­ni" id="btn" />
</bo­dy>

Fun­kcio­na­li­ta toh­to kó­du je po­mer­ne jed­no­du­chá – po klik­nu­tí na tla­čid­lo "Klik­ni" sa skry­je text uve­de­ný v ta­gu <div>. Za pov­šim­nu­tie však sto­jí pár iných de­tai­lov. V pr­vom ra­de ide o spô­sob re­fe­ren­co­va­nia jed­not­li­vých ele­men­tov (ale­bo ob­jek­tov) na strán­ke, či už ide o od­sek, ale­bo tla­čid­lo. Všim­ni­me si, že kaž­dý z uve­de­ných ob­jek­tov má pri­ra­de­ný iden­ti­fi­ká­tor (tla­čid­lo "btn" a od­sek "text"). Ak ste už nie­ke­dy prog­ra­mo­va­li v Ja­vaS­crip­te, po­tom vie­te, že na zís­ka­nie od­ka­zu na ob­jekt (napr. to­to na­še tla­čid­lo) ste väč­ši­nou mu­se­li na­pí­sať kód, kto­rý by vy­ze­ral asi tak­to:

do­cu­ment.ge­tE­le­men­tById("btn")...

Ako vi­dí­me, jQuery nám umož­ňu­je ten­to zá­pis zme­niť tak, že je ove­ľa krat­ší, zro­zu­mi­teľ­nej­ší a preh­ľad­nej­ší:

$("#btn")...

To­to je jed­na z vý­hod (kon­krét­ne tá dru­há), kto­ré bo­li spo­me­nu­té na za­čiat­ku toh­to člán­ku. Na­vy­še si mô­že­me byť is­tí, že ten­to kód bu­de fun­go­vať prak­tic­ky vo všet­kých dnes vy­uží­va­ných pre­hlia­da­čoch. O prís­tu­pe k ele­men­tom v strán­ke bu­de reč v ďal­šom pok­ra­čo­va­ní náš­ho se­riá­lu. Ďal­šia vlas­tnosť jQuery, kto­rú mož­no z toh­to krát­ke­ho prík­la­du od­po­zo­ro­vať, je pou­ži­tie uda­los­tné­ho mo­de­lu. Ako vi­dí­me, po zís­ka­ní od­ka­zu na tla­čid­lo "btn" vo­lá­me je­ho me­tó­du click(). Tá­to me­tó­da je z ka­te­gó­rie tzv. skrá­te­ných vo­la­ní – to­mu­to kon­cep­tu sa bu­de­me ve­no­vať v niek­to­rej z ďal­ších čas­tí.

Vo­la­nie me­tó­dy click() mô­že mať dva rôz­ne efek­ty pod­ľa to­ho, či ju vo­lá­me s pa­ra­met­rom ale­bo bez pa­ra­met­ra. V na­šom prík­la­de jej ako pa­ra­me­ter od­ov­zdá­va­me im­ple­men­tá­ciu fun­kcie, a pre­to tá­to fun­kcia bu­de vo­la­ná v prí­pa­de vy­vo­la­nia uda­los­ti klik­nu­tia na tla­čid­lo. Ke­by sme me­tó­du za­vo­la­li bez pa­ra­met­ra, te­da jed­no­du­cho $("#btn").click(), šlo by o prog­ra­mo­vé vy­vo­la­nie uda­los­ti klik­nu­tia na tla­čid­lo a vy­ko­nal by sa tak kód, kto­rý by v tom mo­men­te bol pri­ra­de­ný tej­to uda­los­ti. To zna­me­ná, že pa­ra­met­ric­ké vo­la­nie má cha­rak­ter nas­ta­ve­nia, resp. zá­pi­su (ale­bo aj set), za­tiaľ čo bez­pa­ra­met­ric­ké vo­la­nie má spúš­ťa­cí ale­bo čí­ta­cí (ale­bo aj get) cha­rak­ter. To­to nie je v jQuery ni­ja­ká vý­nim­ka a s po­dob­ným kon­cep­tom sa stret­ne­me v ďal­ších čas­tiach se­riá­lu eš­te pri mno­hých me­tó­dach.

Na zá­ver eš­te prík­lad troš­ku up­ra­ví­me tak, aby klik­nu­tie na tla­čid­lo umož­ňo­va­lo skrý­va­nie i zob­ra­zo­va­nie textu pod­ľa to­ho, či je prá­ve zob­ra­ze­ný ale­bo skry­tý. Na to nám pos­lú­ži me­tó­da togg­le() (opäť jed­no zo skrá­te­ných vo­la­ní):

$("#btn").click(fun­ction() {
  $("#text").togg­le();
});

Po spus­te­ní prík­la­du nám ne­bu­de tla­čid­lo už slú­žiť len na skrý­va­nie textu, ale i na je­ho opa­ko­va­né zob­ra­ze­nie. Tá­to fun­kcio­na­li­ta sa dá vy­užiť nap­rík­lad vte­dy, keď má­me na strán­ke dl­hý text v skrá­te­nej for­me a je­ho úpl­nú for­mu chce­me zob­ra­ziť len v prí­pa­de, že si to pou­ží­va­teľ že­lá (klik­ne na tla­čid­lo).

Zá­ver
V úvod­nej čas­ti sme sa oboz­ná­mi­li so zá­klad­ný­mi kon­cep­tmi fra­mewor­ku jQuery. Pred­sta­vi­li sme je­ho vý­ho­dy a dô­vo­dy, pre­čo je vhod­né im­ple­men­to­vať ho v pro­jek­te, a uvied­li sme pr­vý jed­no­du­chý prík­lad. V nas­le­du­jú­cej čas­ti uká­že­me pok­ro­či­lej­šie spô­so­by na prís­tup k ele­men­tom (ob­jek­tom) strán­ky, pre­to­že sa bu­de­me ve­no­vať tzv. se­lek­to­rom.

Ďal­šie čas­ti >>

Zdroj: Infoware 4/2011



Ohodnoťte článok:
   
 

24 hodín

týždeň

mesiac

Najnovšie články

3. časť: Po­kro­či­lé se­lek­to­ry
Model DOM predstavuje abstraktný strom reprezentujúci v pamäti štruktúru dokumentu XML (resp. HTML). čítať »
 
2. časť: Zá­klad­né se­lek­to­ry
V predchádzajúcej časti seriálu o programovaní interaktívnych stránok pomocou frameworku jQuery sme sa oboznámili so základnými vlastnosťami a výhodami použitia tohto frameworku a uviedli sme jednoduchý príklad demonštrujúci spomínané aspekty. čítať »
 
1. časť: Pred­sta­vu­je­me fra­mework jQuery
V novom seriáli venovanom javascriptovému frameworku jQuery vás postupne oboznámime s tým, kedy je výhodné ho použiť, akým spôsobom nám uľahčí prácu čítať »
 
 
 
  Zdieľaj cez Facebook Zdieľaj cez Google+ Zdieľaj cez Twitter Zdieľaj cez LinkedIn Správy z RSS Správy na smartfóne Správy cez newsletter