Vezba 7 Uvod u jquery

Size: px

Start display at page:

Download "Vezba 7 Uvod u jquery"

Jacob Atkinson
6 years ago
Views:

1 Vezba 7 Uvod u jquery Cilj vežbe: Upoznavanje sa JavaScript bibliotekom jquery Razumevanje načina funkcionisanja biblioteke jquey Dodavanje animacija veb sajtu Rukovanje događajima na veb sajtu 1. jquery osnove JQuery je brza, jednostavna JavaScript biblioteka koja pojednostavljuje obilazak HTML dokumenta i omogućava rukovanje događajima (eventima), kreiranje animacija, Ajax interakciju i drugo. Zamišljena je da promeni način na koji pišete vaš JavaScript kod. Prednosti korišćenja ove biblioteke su: Dobro je dokumentovan i ima ogromnu podršku velikog broja programera okupljenih u jquery zajednicu koja piše blogove, tutorijale, knjige i aktivno se okuplja na brojnim forumima ili uživo na konferencijama i neformalnim sastancima; OpenSource što praktično znači da je besplatan i da se uklapa u filozofiju Web-a; Podržan od strane velikih igrača kao što su Google, Microsoft, IBM, Amazon, Dell, Netflix, NBC i drugi; Lako je proširiv zbog čega postoji ogromna baza plugin-ova; Lak je i jednostavan za učenje, čak i za one koji ne poznaju programiranje tako dobro jquery filozofija je "Write less, do More (piši manje, uradi više). Ova filozofija se može dalje razložiti u tri koncepta: Selektovanje nekog ili nekih elemenata (preko CSS selektora), i obavljanje neke funkcije nad njima (pomoću metoda jquery-ja); Ulančavanje (Chaining) više jquery metoda nad skupom elemenata; Korišćenje jquery omotača i implicitne iteracije. Detaljno razumevanje ova tri koncepta predstavlja osnovu za korišćenje jquery biblioteke i pisanje koda u njoj. Kako biste koristili jquery i sve što on pruža, morate prvo da uključite jquery biblioteku u vaš projekat. To možete uraditi na dva načina: 1. Tako što ćete iskoristiti biblioteku koja je hostovana na Google-u i uključiti je pomoću sledeće naredbe koju treba navesti u head elementu vaše veb stranice: <script type="text/javascript" src=" </script> 2. Ili tako što će te skinuti svoju verziju biblioteke sa sajta i postaviti je na svom serveru ili lokalnom fajl sistemu. A onda, slično kao u prethodnom slučaju, navesti sledeću naredbu u head elementu vaše veb strane: <script type='text/javascript' src='js/jquery js'></script> Kao što možemo da videmo, uključivanje ove biblioteke se vrši na isti način kao i uključivanje bilo kog drugog eksternog JavaScript fajla. Primetimo da smo u prvom slučaju naveli da preuzimamo umanjenu jquery biblioteku koja znatno otežava debagiranje koda. Zato se preporučuje da u toku razvoja programeri 1

2 koriste neumanjenu verzije eksternih skripti, a da se, kada se izvrši postavljanje sajtova, svi eksterni fajlovi minimizuju radi smanjenja veličine fajlova, a samim tim i povećanja performansi. Pri korišćenju jquery funkcija potreban je način da učitamo sve DOM elemente stranice u potpunosti pre nego što primenimo bilo koju operaciju nad njima, jer bi u suprotnom moglo da se desi da primenjujemo operaciju nad elementom koji još uvek nije učitan i samim tim trenutno ne postoji. Hendler za ceo prozor onload se obično koristi kako bi omogućio izvršavanje naredbi tek nakon što se stranica u potpunosti učita. Sintaksa naredbe je obično sledeća: jquery(document).ready(function() { $("div.hidethis").hide(); Primer 1.1: Pokažimo to na sledećem primeru u kome klikom na dugme treba da prikažemo dijalog sa nekom porukom. <body> <input type="button" id="btnouch" value="click"/> <script> jquery(document).ready(function() { $("#btnouch").click(function(){ alert("ouch! That hurt."); </script> </body> 2. Selectori i jquery omotač Ako ste ikada pokušavali da dodate dinamičku funkcionalnost svoji stranama, primetili ste da uvek radite iste stvari. Selektujete element ili grupu elemenata i izvršite neku operaciju nad njima. Te operacije obično obuhvataju sakrivanje ili prikaz elementa, dodavanje CSS klasa, animiranje elemenata ili proveru i menjanje njihovih atributa. Korišćenje sirovog JavaScripta za ostvarenje bilo kog od ovih zadataka rezultiralo bi desetinama linija koda. Kreatori jquery-ja su posebno stvorili ovu biblioteku da bi ove uobičajene zadatke učinili jednostavnim. Na primer, svako ko se bavio radio-dugmićima u JavaScriptu zna da je prava muka pronaći koji je element neke radio-grupe trenutno aktivan, a zatim i dobaviti vrednost njegovog value atributa. Radio-grupu treba prvo locirati, a zatim niz radio-dugmića iz grupe treba pregledati, jedan po jedan, da bismo saznali koji element ima postavljen svoj checked atribut. Vrednost ovog atributa se onda može pribaviti. Primer 1.2: Takav kod se može implementirati na sledeći način: var checkedvalue; var elements = document.getelementsbytagname('input'); for (var n = 0; n < elements.length; n++) { if (elements[n].type == 'radio' && elements[n].name == 'someradiogroup' && elements[n].checked) { checkedvalue = elements[n].value; } } Uporedimo sada prethodni kod sa implementacijom u jquery-ju (ceo kod možete videti u fajlu Primer1.2_radio.html): var checkedvalue = $('[name="someradiogroup"]:checked').val(); 2

3 Kada je CSS predstavljen kao veb tehnologija koja treba da odvoji dizajn od sadržaja, bilo je neophodno pronaći način za referenciranje grupa elemenata stranice od spolja. Razvijen je metod selektora, koji sažeto predstavljaju elemente na osnovu njihovih vrsta, atributa ili položaja u okviru HTML dokumenta. Na primer, selektor p a se odnosi na grupu svih linkova ( <a> elemenata ) koji su ugnježdeni unutar <p> elementa. jquery koristi iste selektore kao i CSS, ali i neke koji još uvek nisu u potpunosti implementirani od strane svih čitača, uključujući i neke od moćnijih selektora definisanih u CSS3 tehnologiji. Da biste referencirali grupu elemenata pomoću jquery-ja, potrebno je proslediti selektor kao parametar jquery funkciji na sledeći način: $(selector) ili jquery(selector) Primer 1.3: Na primer, da referenciramo i grupu linkova ugneždenih unutar bilo kog <p> elementa, možemo koristiti sledeću sintaksu $("p a"). Ukoliko želimo da sakrijemo sve h2 elemente možemo da otkucamo sledeći kod: <body> <h2 id="clickme1">click me!</h2> <h2 id="clickme2">click me!</h2> <h2 id="clickme3">click me!</h2> <script> $("h2").click(function(){ $( h2 ).hide("slow"); </script> </body> Oznaka $(), alias za jquery() funkciju, je funkcija koja daje poseban JavaScript objekat. On sadrži niz DOM elemenata, po redosledu po kome su definisani u dokumentu, koji odgovaraju prosleđenom selektoru. Ovaj objekat poseduje veliki broj korisnih unapred definisanih metoda koje mogu da se primene na referenciranoj grupi elemenata. U programerskom rečniku strukture ovog tipa se nazivaju omotači (wrapper), jer obavijaju prikupljene elemenate objektom koji ima proširene, dodatne funkcionalnosti. U ovoj vežbi ćemo koristiti termin jquery omotač ili jquery wrapper za označavanje ovog niza referenciranih elemenata nad kojima se mogu obavljati operacije odnosno primenjivati metode jquery biblioteke. Kao što smo videli, jquery() funkcija se može koristiti: Za selektovanje i obavijanje DOM elemenata nad kojima treba izvršiti neku operaciju; Kao imenski prostor za korišćenje globalnih funkcija; Za kreiranje DOM elemenata u HTML jeziku; Kako bi se omogućilo izvršavanje koda tek nakon što se DOM stablo učita. Primeri naprednih selektora $("*") Selektuj sve elemente $(this) $("#someid") $("p.intro") $("p:first") Selektuj trenutni HTML element Selecktuj element kod koga je id = someid Selektuj sve <p> elemente koji imaju klasu "intro" Selektuj prvi <p> element 3

4 $("ul li:first") $("ul li:first-child") $("[href]") $("a[target!='_blank']") $(":button") $("tr:even") Selektuj prvi <li> element u okviru prvog <ul> elemnta Selektuj prvi <li> element svakog <ul> elementa Selektuj sve elemente sa href atributom Selektuj sve <a> elementa kod kojih je atribut target različit od "_blank" Selektuj sve <button> elemente i <input> elemente koji imaju type="button" Selektuj sve parne <tr> elemente 3. Ulančavanje metoda (chaining) Posebna karakteristika velikog broja ovih metoda, koje mi često nazivamo jquery wrapper metode, jeste da kada završe sa svojim izvršavanjem (kao hide funkcija), kao povratnu vrednost vrate istu grupu elemenata nad kojima se funkcija izvršavala. Na taj način moguće je odmah nadovezati drugu funkiju koja treba da se izvrši nad istom grupom elemenata. Na primer, ukoliko želimo da dodamo novu klasu removed svakom od elemenata, pored toga što ćemo ih sakriti, napisali bismo sledeće: $("div.notlongforthisworld").hide().addclass("removed").removeclass("active"); Ovi jquery lanci se mogu nastaviti u nedogled. Nije neuobičajeno naći primere u kojima se nadovezuje i po desetak metoda, a pošto se svaki metod primenjuje na sve elemente iz grupe, koji odgovaraju originalnom selektoru, programer nema potrebe da primenjuje petlju za prolazak kroz grupu elemenata. Sve se za nas implementira iza scene. Ukoliko skup selektovanih elemenata bude promenjen u toku ulančavanja, jquery pruža metod $.fn.end kojim ćete se vratiti na prethodni skup selektovanih elemenata. Primer 2: U primeru se selektuju sva h3 deca HTML elementa sa id-jem content. Zatim se selektuje i menja tekst za treći h3 element, selekcija se vraća na prethodnu grupu selektovanih elemenata i onda se selektuje i menja tekst prvog h3 elementa. $('.klasa').find('h3').eq(2).html("novi tekst za treci h3!").end() // vraća selekciju na sve h3 elemente koji su deca #content elementa.eq(0).html('novi tekst za prvi h3!'); Iako selektovana grupa objekata predstavlja visoko sofisticirani JavaScript objekat, možemo ga tretirati i kao da je to tipičan niz elemenata. Usled toga, sledeće dve izjave daju identične rezultate: $("#someelement").html("i have added some text to an element"); $("#someelement")[0].innerhtml ="I have added some text to an element"; 4

5 4. jquery Efekti: Slide, Fade i Animate jquery poseduje više CSS animiranih efekata. Neki od primera su pomeranje elemenata gore, dole, levo ili desno, fade in i out, i druge tipove animacija. Pokažimo primer sa pomeranjem (klizanjem ) jquery ima tri funkcije za klizanje (slide) elemenata i njihova imena prilično jasno oslikavaju šta ove funkcije rade slideup postepeno uklanja element, slidedown postepeno prikazuje element i slidetoggle naizmenično menja uklanjanje i prikaz elementa. Za animaciju je moguće proslediti parametar slow koji je jednak trajanju animacije od 600ms, parameter fast koji je jednak 200ms i ukoliko ne bude parametara podrazumevano trajanje animacije će biti 400ms. Takođe je moguće ui proslediti proizvoljni integer broj koji predstavlja dužinu trajanja animacije u milisekundama. Primer 3: Pogledajte sledeći primer (kompletan kod možete pogledati u fajlu Primer3_slide.html): $('#btnslideup').click(function() { $('#slideme').slideup('slow'); $('#btnslidedown').click(function() { $('#slideme').slidedown(); $('#btnslidetoggle').click(function() { $('#slideme').slidetoggle('fast'); Primer 4: Funkcija animate vam omogućava da animirate promenu skoro bilo kog CSS atributa. Pozovite ovu funkciju na bilo kom jquery objektu i kao parametar prosledite objekat sa CSS parovima atributa, ključ i vrednost. Funkcija će animirati od već postojećih vrednosti do onih koje ste prosledili. Za animaciju boja morate da koristite jquery Color plugin. U ovom primeru mi ćemo animirati pomeranje div elementa. Kompletan kod pogledajte u fajlu Primer4_animate.html. $('#btnanimate').click(function() { $('#animateme').animate({ 'left': '300px', 'top': '200px', 'border-width': '8px' }, 1000); $('#btnanimateback').click(function() { $('#animateme').animate({ 'left': '0', 'top': '0', 'border-width': '1px' }, 1000); 5

6 5. Događaji u jquery-ju jquery ima grupu predefinisanih metoda koje se pozivaju kada se određeni događaji dese. Primer ovih metoda je click(), dblclick(), hover(), mouseover(), mouseout(), i mnoge druge. Primer 5: Verovatno najkorišćeniji događaj je klik levim tasterom miša. Metoda click() Vam omogućava da dodate šta treba da se izvrši kada se klikne na određeni html element. Jednom kada se click handler metoda zakači za neki html element Vaš kod će se izvršiti svaki put kada se na taj element klikne. Pokažimo to na sledećem primeru gde će svaki klik na div element dodati neki tekst u taj element. Ceo kod možete pogledati u fajlu Primer5.html. //e is the event variable, can prevent the default behavior //of the event or stop it from propagating up to the element's parent elements $('div#clickme').click(function(e) { var oldtext = $(this).text(); $(this).text(oldtext + 'Click added some text!'); Primer 6: Još jedna metoda koja se jako često koristi je metoda hover(). Ova metoda zapravo koristi dva događaja. Prvi se poziva kada miš pređe preko nekog html elementa (mouseenter). Drugi se poziva kada miš izađe i više se ne nalazi preko nekog html elementa (mouseleave). Metoda hover kombinuje ova dva događaja u jedan. Kao parametri ove metode se prosleđuju dve funkcije, prva se poziva na mouseenter, a druga na mousleave. Ilustrujmo to na sledećem primeru (ceo kod se nalazi u fajlu Primer6.html: //this first function inide the hover method //is for when the mouse enters the element $('div#hoverdiv').hover(function() { //set multiple CSS properties at once $(this).css({ 'background-color': 'blue', 'color': 'pink' }, function() { //set multiple CSS properties at once $(this).css({ 'background-color': 'red', 'color': 'white' 6

7 Samostalan rad studenta Zadatak 1: Postoje dve jquery funkcije za fejdovanje elemenata: fadein(), i fadeout(). Kada jquery fejduje element on u stvari menja opacity tog elementa od maksimalne do minimalne vrednosti i zatim ga sakrije (hide) kako bi ostali elementi mogli da se repozicioniraju. FadeIn predstavlja obrnuti proces. U fajlu zad1.html vam je dat kod koji treba da dopunite. Potrebno je da na klik dugmeta Fade Out ukloni paragraph brzinom slow, dok klik na dugme Fade In prikazuje paragraph brzinom 800ms. Dopunite kod koji nedostaje i napišite ga ispod. $(' ').click(function() { Zadatak 2: U zadatku kreirati 4 div i 4 dugmeta koji će biti veličine 100 x 100 piksela. Klikom na prvo dugme prvi kvadrat treba da se sakrije. Klikom na drugo dugme drugi kvadrat treba da nastane sa fade out efektom. Klikom na treće dugme boja trećeg kvadrata treba da se promeni. Klikom na četvrto dugme četvrti kvadrat treba da se pomeri za 250 piksela u desno. Napisati samo javascript kod: Zadatak 3: Prepraviti kod u primeru 6 tako da se na ekranu prikaže na kom mestu (koordinatama) je miš ušao preko div elementa, a na kom mestu je miš izašao i više se ne nalazi preko div elementa. Na ekranu ispisati i trenutnu poziciju miša dok se on nalazi preko elementa div. Napišite JavaScript kod. Kao pomoć iskoristite sledeći link: 7

8 Zadatak 4: Kreirati dropdown meni koristeći jquery događaj hover. jquery UI je od skoro implementirao menu widget koji takođe može koristiti na vašem veb sajtu. Nekad je ipak zgodnije napraviti svoj navigacioni meni ii prilagoditi ga Vašim potrebama što je upravo sada Vaš zadatak. Prvi zadatak je napisati markup strukturu za vaš meni. Div će slušiti kao kontejner u okviru koga će se naći nuređene liste sa stavkama menija. Linkovi u okviru stavki će sadržati odgovarajuće hiper linkove. Izmenite sledeći kod tako da odgovara strukturi menija za Vaš veb sajt. Primer Vam je dat u fajlu zad4_meni.html. HTML Code  <div id="menudemo2"> <ul> <li id="homemenu"><a href="#menuhome">home</a> </li> <li><a href="#">pages</a> <ul> <li><a href="#menupagesone">page Number One</a></li> <li><a href="#menupagestwo">page Number Two</a></li> <li><a href="#menupagesthree">page Number Three</a></li> </ul> </li> <li><a href="#">links</a> <ul> <li><a href="#linknumber1">link Number 1</a></li> <li><a href="#linknumber2">link Number 2</a></li> <li><a href="#linknumber3">link Number 3</a></li> </ul> </li> </ul> </div> Zadatak 5: Ovaj drop down meni je jednostavna implementacija HTML/CSS drop down menija. Koristeći jquery možemo dodati neke naprednije efekte. Hajde da dodamo slide down i slide up efekte ovom meniju. Dodajmo i hover efekat nad stavkama u meniju kao i fade out efekat kada korisnik napusti meni. $('div#menudemo2 > ul > li').hover(function() { //Efekat kada korisnik predje preko elementa //prvo sakrje html elemet, a onda ga slajduje na dole }, function() { //efekat kada korisnik napusti trenutni element - fade out ); } Zadatak 6: Šta selektuju sledeći jquery selektori a. $("tr:odd") b. $("a[target='_blank']") c. $("div > p") d. $("[href$='.jpg']") 8

9 Zadatak 7: Šta je sve potrebno da uradimo kako bi naš sajt mogao da koristi jquery funkcije? Zadatak 8: Zašto koristimo $(document).ready funkciju? Zadatak 9: Šta označava $ u jquery notaciji? Zadatak 10: Šta je ulančavanje metoda? Zadatak 11: Da li je moguće grupu selektovanih jquery objekata tretirati kao niz? Dati primer: Zadatak 12: Pronađi greške u sledećem jquery kodu $(#hide).click( $(".hide").hide("medium"); $("#hide").hide("medium"); ); $("#fade").click(function() { $("#now").html = "Mis je na koordinatama: X:" +e.pagex + " Y:" + e.pagey; Student Overava 6. LITERATURA:

Programiranje III razred

Tehnička škola 9. maj Bačka Palanka Programiranje III razred Naredbe ciklusa for petlja Naredbe ciklusa Veoma često se ukazuje potreba za ponavljanjem nekih naredbi više puta tj. za ponavljanjem nekog