| .:. | svg - revolucija 2D grafike | .:. | N|vu - web dizajn: novi pogled |
| .:. | JavaScript biblioteke | .:. | firefox - vatren i lukav |
| .:. | jQuery biblioteka | .:. | inkscape - svg editor |
jQuery je jedna od najpopularnijih JavaScript biblioteka, koja je u relativno kratkom roku postala jako popularna zbog lakog korištenja i malog zauzeća resursa na računalu. Više o razlozima i izboru baš jQuery biblioteke možete pročitati u tekstu JavaScript biblioteke, a u ovom tekstu ću malo detaljnije opisati kako i početnici mogu koristiti jQuery na svojim stranicama.
.:. DOM pristup i manipulacija
.:. olakšavanje i ubrzavanje programiranja
.:. proširivanje funkcionalnosti pomoću gotovih komponenti
S obzirom na osnovne namjene, i koncept ovog vodiča će pratiti ove tri točke, s time da se o proširivanju funkcionalnosti pomoću gotovih komponenti (plugins) nema što previše pisati. Navest ću neke popularne i korisne pluginove, dok se upute za primjenu svakoga razlikuju i sadržane su u paketu kod downloada plugina.
Za početak, najvažnije je postaviti reference na samu biblioteku i skriptu koju pišemo. Ako još niste, jQuery skinite s ovog linka i snimite u jedan testni direktorij. U svakom trenutku možete pogledati izvorni kod moje stranice da bi vidjeli kako to izgleda na stvarnim stranicama (u Firefoxu View>Page Source).
Referenca na jQuery se postavlja u head dijelu html dokumenta, nakon referenci na css datoteku sa stilovima a prije JavaScript datoteke u kojoj ćemo pisati skriptu:
<link href="../dizajn/css.css" rel="stylesheet" type="text/css" media="screen" /> <script src="../dizajn/jquery.js" type="text/javascript"></script> <script src="../dizajn/js.js" type="text/javascript"></script>
Da bi kod koji napišemo bio procesiran i izvršen moramo internet pregledniku reći da ga procesira, i to na način da ono što želimo izvršiti postavimo unutar ovih linija:
$(document).ready(function(){
...naša skripta koja će se automatski izvršiti kod učitavanja
stranice se nalazi između ovih vitičastih zagrada...
});
Na ovoj stranici jquery.js je već učitan i aktivan, pa možemo odmah prikazati neke korisne primjene jQuery biblioteke na stranici. Za početak ćemo prikazati primjere dodavanja, dohvaćanja i manipulacije DOM elemenata (dijelova stranice).
Svaka operacija u JavaScriptu počinje dohvatom (odabirom) elementa na koji se odnosi. Zbog toga svi browseri web stranicu učitavaju u memoriju kao skup objekata koji su međusbno povezani nekim pravilima, i takav pristup se zove DOM. Dakle, pristup objektu je osnova bilo kakve operacije nad njim. Zbog toga i samo ime biblioteke jQuery govori o prioritetima njezinih tvoraca. Riječ query, u nazivu jasno govori o tome. A ono preostalo slovo j označava JavaScript.
Za početak ćemo stvoriti jedan novi dio stranice na kojem ćemo prikazati neke od mogućnosti jQuery-a. Ako bi se za to koristili običnim JavaScriptom susreli bi se sa nekoliko problema oko stvaranja DOM elementa, kojeg je potrebno deklarirati, definirati njegova svojstva i zatim definirati mjesto na koje ga umećemo. Najprije kod kojim jQuery stvara novi element sa identifikacijskim atributom "test" ( <div id="test">test test test</div> ) i umeće ga ispred ovog odjeljka teksta:
$(this).parent().before('<div id="test">test test test</div>');
Nakon dodavanja testnog elementa malo ćemo mu promijeniti svojstva prikaza da bi bio pogodniji za primjere koji tek dolaze:
$("#test").css({color:"#000",background:"#CCC",border:"1px dotted #666"});
Pomaknut ćemo ga u lijevo da bude lakše uočljiv i smanjit ćemo mu širinu tako da stane u slobodan prostor lijevo od teksta, ali nećemo to učiniti odjednom nego koristeći animaciju. Da bi ga mogli pomaknuti bez utjecaja na pozicioniranje ostatka teksta moramo mu prije promijeniti position property. Ovdje je demonstrirana još jedna prednost jQuery-a: kad jednom dohvatite određeni element nad njim možete izvršiti više operacija odjednom povezujući naredbe točkom (to svojstvo se u dokumentaciji zove chainability). Prednost ovog pristupa je u tome što ne morate svaku naredbu upisivati u novi red i svaki put ponavljati referencu na željeni element, nego samo postavite naredbe u lanac. Osim toga, na taj način naredbe se brže izvršavaju jer se procedura nalaženja i odabira željenog elementa ne ponavlja za svaku naredbu.
$("#test").css("position","relative").animate({left:-368,width:350});
S obzirom na to da je ovaj tekst prilično dug i razlomljen primjerima, brzo će nam se dogoditi da ne možemo istodobno vidjeti i tekst sa slijedećim korakom i sam element sa primjerom kojim manipuliramo. Zato ćemo mu još jednom promijeniti position property da bi nam stalno ostao u vidljivom okviru. Mogli bismo ga opet pomaknuti koristeći animaciju, ali za promjenu ćemo to obaviti bez šminkerskih efekata i brzo.
$("#test").css({position:"fixed", top:"10px", left:"10px"});
Još jednom ćemo promijeniti stil elementa, ovaj put na drugi način koji je prikladniji kad mijenjamo samo jedno svojstvo. Obratite pažnju na promijenjenu sintaksu u zagradama (koje služe da upišemo parametre css() metode). Umjesto prijašnje sintakse .css({ imeSvojstva: "vrijednostSvojstva", imeSvojstva2: "vrijednostSvojstva2"}) u kojoj CSS parove ime: vrijednost odvajamo zarezom, ovdje ćemo koristiti .css( "imeSvojstva", "vrijednostSvojstva").
$("#test").css("height","250px");
Do sada smo stvorili testni element i mijenjali neka od njegovih svojstava, ali sadržaj je ostao onaj isti koji je bio i na početku. Naravno, mogli smo stvoriti i prazan element kojeg uopće ne bismo vidjeli. Ili element koji sadržava drugačiji tekst i eventualno sliku i ostale sadržaje koji se mogu naći na jednoj web stranici. Zato ćemo sada promijeniti sadržaj elementa test i to na način da ćemo ga zamijeniti sadržajem prvog odjeljka ove stranice.
$("#test").text($("p:first").text());
Možemo testni okvir lako sakriti, ponovo prikazati, ili sakriti/prikazati koristeći različite animacije (brojevi u zagradama kod animacija su trajanje animacije u milisekundama, ako ih ne navedemo koristi se predefinirano trajanje). Probajte ih naizmjence kombinirati:
$("#test").hide();$("#test").show();$("#test").fadeOut(750);$("#test").slideDown();
Često je potrebno pomoću jedne kontrole naizmjence koristiti dvije suprotne operacije (prikaži/sakrij uz eventualnu animaciju). Da ne bismo morali u JavaScriptu svaki put očitavati stanje elementa i programirati odgovarajuće akcije, moguće je koristiti gotove kombinacije:
$("#test").toggle();
$("#test").slideToggle(600);
Još ćemo se malo pozabaviti funkcijom .animate(), jer je ona posebno zanimljiva početnicima. Ona je koncipirana na način da joj zadate CSS svojstvo koje želite animirati (uz napomenu da se složenice ne upisuju odvojene crticom, nego se koristi tzv. camel case: umjesto padding-left pišete paddingLeft ) i vrijeme trajanja animacije.
$("#test").animate({height:300},"normal");
$("#test").animate({opacity:"toggle"},"slow");
Svi dosadašnji primjeri (osim prvog) su se svodili na dohvat DOM elementa i njegovu manipulaciju, što i jest najčešća operacija. Ali naravno da ovo nisu jedine mogućnosti manipulacije, sa osnovnim poznavanjem engleskog jezika možete u dokumentaciji jQuery-a pronaći još mogućnosti i kombinacija. Kombinacijama samo ovdje navedenih mogućnosti moguće je napraviti ogroman broj efekata, pogotovo ako se pozabavite metodom .css() ili za animacije koristite .animate() u kojem mijenjate svojstva prikaza.
Za dohvat bilo kojeg elementa koristi se sintaksa $("traženiIZRAZ"), pri čemu traženi izraz može biti bilo koji oblik CSS selektora. Npr. okvir ovog teksta se nalazi u div elementu koji ima id "sadrzaj", dakle u HTML kodu cijeli ovaj tekst se nalazi unutar tagova:
<div id="sadrzaj"> ... sadržaj teksta (bez okvira, izbornika i sl... </div>
Taj div element bismo dohvatili pomoću $("div#sadrzaj") izraza. Napisat ću samo osnovne izraze za odabir elemenata, a cijelu listu i objašnjenja možete naći na stranici jQuery selectors unutar dokumentacije.
element ..................... svi elementi navedenog tipa #id ................... jedan element navedenog id-a .class ..................... svi elementi navedenog class-a * .................. svi elementi SELEKTOR1, SELEKTOR2, SELEKTOR3 ... višestruki selektor
Sada kad smo vidjeli kako jQuery omogućava izvođenje relativno složenih operacija uz vrlo malo komplikacija u odnosu na obični JavScript, vrijeme je da pokažemo drugu važnu stvar koju jQuery još više pojednostavljuje. Radi se o eventima kao što su klik na neki element stranice, prelazak mišem preko njega, odabira polja formulara i slično. Programiranje evenata je u JavaScriptu složen problem koji može izazvati dosta nepredviđenih problema, i zato je pomoć jQuery-a u ovome vrlo značajna. Ovo je najčešći način kako se programira ponašanje elemenata na stranici (i jedini koji se preporuča u ozbiljnoj upotrebi). Pri učitavanju stranice se obave sve potrebne operacije i zatim se ponašanje stranice prepusti programiranim eventima. Primjer na ovoj stranici je glavni izbornik koji reagira na mouseover event na način da se otvori podizbornik, a zatim na mouseout event tako da se zatvori.
U ovom vodiču je tako iskorišten click event za aktiviranje gumba sa naredbama. Akcija koja će se izvršiti nije programirana za svaki gumb zasebno (iako se to često radi), nego je definiran click event za sve gumbe odjednom koji će izvršiti naredbu koja se nalazi neposredno iza gumba koji je kliknut:
$("#sadrzaj pre>input").click(function(){
eval($(this).parent().text());
});
Objašnjenje ovog naizgled kompliciranog koda: dohvatili smo sve gumbe na stranici pomoću $("#sadrzaj pre>input") i zatim smo im dodali click event pomoću .click(function(){...} . Dakle, kad kliknemo na bilo koji od gumba na ovoj stranici izvršit će se kod između vitičastih zagrada koji kaže eval($(this).parent.text()); . To bi, prevedeno na hrvatski, značilo ovo: dohvati tekstualni sadržaj elementa u kojem se nalazi gumb i izvrši ga.
Na isti način mogli smo dodati bilo koji event. Za primjer ćemo dodati istu funkciju gumbu, ali vezano na mouseover event. To znači da će umjesto klika na gumb biti dovoljno doći iznad njega mišem da bi se izvršila vezana naredba. Probajte se vratiti na gumbe koji su pokazivali i skrivali testni okvir da vidite kako to funkcionira.
$("#sadrzaj pre>input").mouseover(function(){
eval($(this).parent().text());})
Da ne bi ostalo na tome, uklonit ćemo ovakav način ponašanja jer on nije tipičan za gumbe, korisnici su navikli na to da gumb treba kliknuti da bi ga se aktiviralo. Event se uklanja naredbom .unbind() a parametar u zagradama se odnosi na vrstu eventa koji uklanjamo.
$("#sadrzaj pre>input").unbind("mouseover");
Osim standardnih evenata koji su definirani od strane W3C-a, koji je tijelo zaduženo za standardizaciju svih stvari vezanih uz internet, jQuery nudi još neke korisne "evente". Dobar primjer je .hover() koji glumi dva različita, a često zajedno korištena eventa: mouseover i mouse out. Pomoću ovog eventa je napravljen i glavni izbornik na ovoj stranici. Za demonstraciju ćemo pokazati kako promijeniti ponašanje svakog drugog odjeljka teksta kad pokazivač miša dođe iznad njega koristeći .hover() event:
$("#sadrzaj p:odd").hover(
function(){ // prva funkcija definira mouseover
$(this).animate({width:333})},
function(){ // druga funkcija definira mouseout
$(this).animate({width:412})
});$("#sadrzaj p:odd").unbind();
Obratite pažnju na to da ovaj put kod uklanjanja eventa funkciji .unbind() nije dan nikakav parametar. To znači da ne uklanjamo samo hover event, nego sve evente koji su povezani sa neparnim odjeljcima teksta na stranici (moglo ih je biti više i svi bi bili ukonjeni).
Usput ćemo objasniti i selektor koji nam je omogućio da odaberemo samo svaki drugi odjeljak: $("ELEMENT:odd") - filter :odd znači da biramo samo neparne elemente od onih koji odgovaraju upitu prije filtera. Zapravo, ako baš budete analizirali, ustanovit ćete da :odd bira parne a :even neparne što na prvi pogled nema logike. Ali ako znate da u JavScriptu svako brojanje počinje od nultog umjesto od prvog elementa, onda je sve jasno.
S ovim vodičem smo samo zagrebli površinu mogućnosti koje se otvaraju korištenjem jQuery biblioteke. Jedna od također važnih stvari, a koja ne spada u tekstove za početnike je AJAX. Ova biblioteka podržava AJAX i omogućava napredno i jednostavno korištenje ove tehnologije. jQuery i tu nudi mnogo više, ali to će oni koji žele znati više lako otkriti.
Uz jQuery je moguće koristiti i gotove komponente (plugins) koje mogu drastično proširiti funkcionalnost. Na ovim stranicama se koriste jQuery.LightBox za prikaz slika u fotogaleriji i jQuery.jMaps za kontrolu Google karte. Ovakve gotove komponente imaju gotovo neograničene mogućnosti, npr. ako želite tablicama na svojoj stranici dodati napredne mogućnosti sortiranja ili razne druge operacije s tablicama potražite jQuery.InGRID. Za crtanje grafikona iz podataka sa stranice (ili živih podataka sa drugih stranica dohvaćenih AJAX-om) možete koristiti odličan plugin jQuery.jQchart. Nekima može biti koristan plugin koji provjerava ispravnost podataka unesenih u formular na web stranici, live form validation jQuery plug in. Popis je ogroman, pogledajte sami na jquery.com/plugins/.
Zapravo ne postoji određeni profil korisnika za koje bi se moglo reći da je najviše njima namjenjen. Koriste ga giganti poput Nokie i Googlea, napredni programeri, ali i početnici u JavaScriptu. Često ga koriste čak i dizajneri web stranica koji uopće ne znaju JavaScript, zato što je jako jednostavno naučiti osnovne stvari, a za sve kompliciranije je moguće pronaći kvalitetan plugin. Pogledajte popis stranica koje koriste jQuery, uz napomenu da su ovdje navedene samo stranice koje su autori prijavili. Pravi popis bi sigurno bio mnogo duži, ja sam mjesecima koristio jQuery a da nisam ni znao da popis postoji.
Zapravo je jedini preduvjet (iako ni taj nije nezaobilazan) da znate barem osnove engleskog jezika, iz razloga što je dokumentacija i ogroman broj primjera i vodiča na engleskom jeziku. Ali ako malo dublje proanalizirate kako smo ga koristili u ovom vodiču, i tu prepreku je moguće preskočiti. Najvažnije je pridržavati se sintakse, jer jedan zarez ili točka nekad mogu onesposobiti učitavanje cijele stranice.
Ukratko, mogli bismo reći da je jQuery namjenjen svima koji žele koristiti napredne mogućnosti na svojim web stranicama, uz malo truda jer je krivulja učenja vrlo blaga. Nadam se da je ovaj tekst bio zanimljiv i koristan.