Embed Size (px)
DESCRIPTION
World Wide Web (Web) je svjetska mreža računala s izvorima (engl. resources) digitalne informacije. S obzirom na raznolikost digitalne informacije: tekst, slika, zvuk, video, program i dr. govorimo općenito o izvoru informacije ili WEB dokumentu. WEB programiranje se oslanja na tri mehanizma koja čine ove izvore dostupnima najširoj svjetskoj javnosti: 1. Jedinstvena shema imena za traženje (lociranje) izvora na mreži. 2. Protokoli za pristup informaciji preko WEB-a, kao što je npr. HTTP protokol. Protokoli su skup standardizirane informacije za prijenos digitalnog sadržaja preko mreže. 3. Hipertekst (engl. Hypertext) za jednostavnu navigaciju između informacijskih izvora, kao što je na primjer HTML (hypertext markup language). Svaki izvor informacije na WEB-u (HTML ili XML dokument, slika, video, program i sl.) ima jednoznačnu adresu koja se dekodira preko URI-a (Universal Resource Identifier). URI se sastoji od tri dijela: 1. Protokola pristupa izvoru (npr. http, ftp, mailto i sl.) 2. Imena stroja na kojem se izvor informacije nalazi (npr. www.fsb.hr). 3. Punog imena izvora zadanog stazom (engl. path). URI ima različite uloge: povezivanje mjesta unutar istog dokumenta, povezivanje različitih dokumenata, dohvaćenje slika, objekat
Citation preview
Web programiranje i primjene
jQuery
Deveto predavanje4. svibnja 2010.
jQuery – osnovna svojstva
• jQuery - zbirka JavaScript funkcija - funkcije iz jQuery-a olakšavaju JavaScript programiranje - funkcije iz jQuery-a pružaju nove mogućnosti u JavaScript programiranju
• osnovne mogućnosti funkcija iz jQuery knjižnice:– selekcija i upravljanje HTML elementima– upravljanje CSS-om– upravljenje događajima– JavaScript efekti i animacije
jQuery – uključivanje u HTMl dokument
• jquery.js - jQuery zbirka JavaScript funkcija je samostalan JavaScript dokument
• uključivanje u HTML dokument :
– obavezno unutar zaglavlja HTML dokumenta
<head><script type="text/javascript" src="jquery.js"></script></head>
jQuery – sintaksa• jQuery sintaksa – u svojoj osnovi omogućuje odabir HTML elementa i
vršenje određene aktivnosti nad odabranim elementom• osnovna sintaksa:
$(selektor).aktivnost()– $ - služi za otvaranje (definiranje) jQuery-a– (selektor) – služi za traženje HTML elementa– aktivnost() – jQuery naredba za aktivnost koja će se izvršiti nad
odabranim HTML elementom
• primjeri: $(this).hide() – skriva HTML element$("p").hide() – skriva sve paragrafe u HTML dokumentu$("p.test").hide() – skriva sve paragrafe koji pripadaju klasi “test”$("#test").hide() – skriva sve elemente s atributom id="test“
http://www.w3schools.com/jquery/jquery_syntax.asp
jQuery – (document).ready funkcija
• sve jQuery funkcije iz predhodnih primjera nalaze se unutar (document).ready funkcije:
<head> <script type="text/javascript" src="jquery.js“/> <script type="text/javascript">
$(document).ready(function(){jQuery funkcije}); </script>
</head>
• (document).ready funkcija - onemogućava izvršavanje jQuery koda prije nego što je web stranica u potpunosti učitana (osobito korisno npr. za upravljanje veličinom slike)
jQuery – selektori• jQuery selektori
– služe za upravljanje pojedinim HTML elementima ili grupom HTML elemenata
– omogućuju odabir/dohvaćanje HTML elemenata pomoću imena elementa, atributa ili sadržaja elementa
• jQuery selektori prema imenu HTML elementa:– $("p")
služi za odabir svih <p> elemenata– $("p.intro")
služi za odabir svih <p> elemenata koji pripadaju klasi “intro” (class=“intro“)
– $("p#demo") služi za odabir svih <p> elemenata s atributom id="demo"
jQuery – selektori
• jQuery selektori prema atributu HTML elementa:– $("[href]")
služi za odabir svih HTML elemenata s href atributom– $("[href='#']")
služi za odabir svih HTML elemenata s href atributiom kojemu je pridružena vrijednost “#” (tj. href=“#”)
– $("[href!='#']")služi za odabir svih HTML elemenata s atributom href čija je pridružena vrijednost različita od “#”
– $("[href$='.jpg']") služi za odabir svih HTML elemenata s href atributom čija vrijednost sasrži ekstenziju “.jpg”
• primjer:http://www.w3schools.com/jquery/jquery_selectors.asp
jQuery – događaji
• “event handling functions” – funkcije čije je izvršavanje usko vezano uz realizaciju određenog događaja
• primjer: <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });
}); </script></head>
jQuery – događaji• $(document).ready(function() {...neki kod...} )
– sve funkcije za upravljanje dokađajima definiraju se unutar (document).ready funkcije
• $("button").click(function() {...neki kod... } )– funkcija “click()” je definirana tako da se izvrši kada korisnik “klikne” mišem
na gumb• $("p").hide();
– kod unutar “click” funkcije skriva sve paragrafe u HTML dokumentu• primjer: http://www.w3schools.com/jquery/jquery_events.asp• samostalni jQuery dokument:
<head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="my_jquery.js"></script></head>
jQuery – događaji• $(document).ready(function)
– izvršava se tek kad je HTML dokument u potpunosti učitan u web preglednik
• $(selector).click(function)– izvršava se klikom miša na odabrani HTML element
• $(selector).dblclick(function)– izvršava se dvostrukim klikom miša na odabrani HTML element
• $(selector).focus(function)– izvršava se kad je odabrani HTML element u fokusu (tj. aktivan)
• $(selector).mouseover(function)– izvršava se prlaskom pokazivača miša preko odabranog HTML elementa
• primjer:http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_p
jQuery – efektihide(), show()
• hide() i show() imaju dva neobavezna parametra – speed i callback$(selector).hide(speed,callback)$(selector).show(speed,callback)
• speed parametar – može imati vrijednost "slow", "fast", "normal“ ili mu se vrijednost može preciznije definirati u milisekundama
• callback parametar – ime funkcije koja će biti izvršena nakon što se izvrši funkcija hide() ili
show()– o callback parametru će više riječi biti kod jQuery animacija
• primjeri:http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_showhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow
jQuery – efektitoggle()
• toggle()– objedinjuje djelovanje funkcija hide() i show()– skriva vidljive elemente i prikazuje skrivene elemente
• sintaksa: $(selector).toggle(speed,callback)
• primjer:http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle
jQuery – efektislide funkcije: slideDown(), slideUp(), slideToggle()
• sintaksa i primjeri
– $(selector).slideDown(speed,callback)http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_down
– $(selector).slideUp(speed,callback)http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_up
– $(selector).slideToggle(speed,callback)http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle
jQuery – efektifade funkcije: fadeIn(), fadeOut(), fadeTo()
• sintaksa i primjeri
– $(selector).fadeIn(speed,callback)– $(selector).fadeOut(speed,callback)http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout_slow
– $(selector).fadeto(speed,opacity,callback)http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeto
parametar “opacity” – omogućuje izbljeđivanje do zadane prozirnosti
jQuery – animacije
• sintaksa za funkciju kojom definiramo jQuery animacije:$(selector).animate(
{params},[duration])
• parametar {params} – lista svojstava HTML elementa koja će sudjelovati u animaciji (tj. biti animirana)
• parametar [duration]– definira vrijeme trajanja animacije– prima vrijednosti “fast", "slow", "normal“ ili mu je vrijednost precizno
definirana u milisekindama• primjeri: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animationhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2
jQuery – animacijecallback funkcija• callback funkcija – funkcija koja se poziva i izvršava kada je animacija u
potpunosti završena• primjer sintakse: $(selector).hide(speed,callback)• parametar callback – ime funkcije koja se izvršava nakon završetka
animacije
• primjeri:– animacija bez upotrebe callback funkcije:http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow_wrong
– animacija s upotrebom callback funkcije:http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow_right
Literatura
W3Schools
http://www.w3schools.com/jquery/default.asp
![IX Predavanje - ucg.ac.me predavanje... · IX Predavanje ,]UDGDWRSRJUDIVNHSRGORJH 7RSRJUDIVNLNOMXþ 9HUWLNDOQD predstava terena. Interpolacija izohipsi. Digitalni model terena. Geodetske](https://img.pdfslide.tips/doc/110x75/5e03323cd9e2ea2f204234e6/ix-predavanje-ucgacme-predavanje-ix-predavanje-udgdwrsrjudivnhsrgorjh.jpg)
