Download
primjena javascripta n.
Skip this Video
Loading SlideShow in 5 Seconds..
Primjena JavaScripta PowerPoint Presentation
Download Presentation
Primjena JavaScripta

Primjena JavaScripta

160 Views Download Presentation
Download Presentation

Primjena JavaScripta

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Primjena JavaScripta Vježbe iz kolegija "Mrežni servisi" Autor: Krunoslav Žubrinić krunoslav.zubrinic@unidu.hr Dubrovnik, prosinac 2005.

  2. Sadržaj • Matrice • Datum i vrijeme • Matematičke operacije • Objektni model • Dokument • Forme • Slike • Linkovi

  3. Matrice (Array) • Kako prikazati niz podataka koji se ponavljaju više puta (npr. dani u tjednu)? • bez matrice – više varijabli od kojih svaka ima jednu vrijednost • d1="Ponedjeljak"; d2="Utorak"; ... d7="Nedjelja" • s matricama – jedna varijabla koja ima više vrijednosti • d=new Array("Ponedjeljak", "Utorak", "Srijeda", "Četvrtak", "Petak", "Subota", "Nedjelja");

  4. Matrice (Array) • deklariranje matrice • varijabla=new Array(broj_elemenata); • npr. tjedan = new Array(7); tjedan[0] = "Ponedjeljak"; tjedan[1] = "Utorak"; • kod deklariranja matricu možemo odmah popuniti s elementima • npr. tjedan= new Array ("Ponedjeljak","Utorak","Srijeda", "Četvrtak", "Petak", "Subota", "Nedjelja"); • određenom elementu matrice pristupa se pomoću indeksa • indeks kreće od 0 (tjedan[0] ="ponedjeljak"); • npr.danas=tjedan[3];

  5. Primjer 1 <html><head><title>Matrica</title></head> <body> <h2>Obojani stringovi</h2> <script type="text/javascript"> var boje = new Array("red","green","blue","purple"); for(var i=0;i<=3;i++){ document.write("<font color='"+boje[i]+"'>"); document.write("boja[" + i + "] = "+ boje[i] + "<br />"); } </script> </body> </html>

  6. Izgled u pregledniku

  7. abc.length=3 matrica abc abc.length=4 indeks 0 1 2 podaci c a b abc.push("d") indeks 0 1 2 3 podaci c a b d dodajemo novi element abc.sort() indeks 0 1 2 3 podaci a b c d sortiramo matricu Matrice (Array) • metode matrica: • push(novi_element) – dodaje novi element u matricu • sort() – sortira matricu • length() – broj elemenata matrice

  8. Primjer 2 <script type="text/javascript"> var boje = new Array("red", "green", "blue", "purple"); // dodajemo novi element u matricu boje.push("orange"); for(var i=0;i<=3;i++){ document.write("<font color='"+boje[i]+"'>"); document.write("boja[" + i + "] = "+ boje[i] + "<br />"); } document.write("<br />"); // sortiramo matricu boje.sort(); for(var i=0;i<=3;i++){ document.write("<font color='"+boje[i]+"'>"); document.write("boja[" + i + "] = "+ boje[i] + "<br />"); } </script>

  9. Izgled u pregledniku

  10. Preračun jedinica vremena Jedinice vremena Milisekunde Izračun 1 sekunda 1000  1000 1 minuta sekunde * 60 (1000 * 60) 1 sat minute * 60 (1000 * 60 * 60) 1 dan sati * 24 (1000 * 60 * 60 * 24 ) Datum i vrijeme (Date) • objekt Date() služi za pristupanje podacima o trenutnom datumu i vremenu na računalu klijentu (računalu s preglednikom) • bez parametara vraća trenutno vrijeme i datum u UNIX formatu (npr. Sun Dec 18 16:13:33 UTC+0100 2005) varijabla = new Date(); npr. tekuci_datum = new Date(); • može se predati vrijednost određenog datuma u formatu • mjesec-dan-godina npr. bozic = new Date("12-25-2005"); • čuva podatak o vremenu u milisekundama

  11. Datum i vrijeme (Date) • Metode • getFullYear() – vraća tekuću godinu s 4 znamenke • getMonth() – vraća mjesec (0-11 –0 je siječanj,...) • getDate() – vraća dan tekućeg mjeseca (1-31) • getHours() – vraća tekući sat (0-23) • getMinutes() – vraća tekuće minute (0-59) • getSeconds() – vraća tekuće sekunde (0-59) • getTime() – vraća oznaku datuma u milisekundama (broj milisekundi od 01.01.1970 do datuma)

  12. Primjer 3 <html> <head><title>Datum i vrijeme</title></head> <body><h2>Datum i vrijeme</h2> <script type="text/JavaScript"> var sada = new Date(); document.write("<b>Trenutni datum i vrijeme je:</b> " + sada + "<br />"); var sati = sada.getHours(); var minute = sada.getMinutes(); var sekunde = sada.getSeconds(); var godina = sada.getFullYear(); var mjesec = sada.getMonth(); var dan = sada.getDate(); document.write("<b>Datum je:</b> " + dan + "/" + mjesec + "/" + godina +"<br />"); document.write("<b>Vrijeme je:</b> " + sati + ":" + minute + ":" + sekunde); </script> </body> </html>

  13. Izgled u pregledniku

  14. Matematičke operacije (Math) • Math.abs(broj) – apsolutna vrijednost (modulo) broja • Math.floor(broj) – zaokružuje na niži broj (npr 3,75 – zaokružuje na 3) • Math.round(broj) – zaokružuje (npr 3,75 – zaokružuje na 4, a 3,25 na 3) • Math.random() – generira slučajni broj u intervalu između 0 i 1

  15. Primjer 4 <html><head><title>Odbrojavanje do kraja godine</title></head> <body> <h2> <script type="text/JavaScript"> var danas = new Date(); var godina = danas.getFullYear(); var krajg = new Date("12-31-"+ godina); // Računa razliku između 2 datuma u milisekundama var razlika = krajg.getTime() - danas.getTime(); // Pretvaranje milisekundi u dane var dana = Math.floor(razlika / (1000 * 60 * 60 * 24 )); document.write("Još <u>" + dana + "</u> dana do kraja godine!"); </script> </h2> </body> </html>

  16. Izgled u pregledniku

  17. Objektni model • objekti (objects) imaju odgovarajuća svojstva (properties) s određenim vrijednostima (values) • svojstva opisuju objekt (npr. boja teksta – vrijednost svojstva boja je npr. crvena boja) • metode izvršavaju određene akcije nad objektima (npr. promjena boje teksta) • objekti reagiraju na događaje (events) • npr. korisnik je kliknuo na tekst i promjenio mu boju iz crvene u zelenu

  18. dokument slike[] forme[] linkovi[] forma 1 forma 2 input 1 input 2 value type id Objektni model • objektima i svojstvima stabla pristupa se pomoću tzv. "dot" sintakse vrijednost = document.forms[1].input1.value

  19. Dokument (document) • document je osnovni objekt HTML dokumenta • Svojstva • URL – adresa HTML stranice • title – naslov dokumenta (sadržaj <title> elementa) • bgColor – boja pozadine dokumenta (atribut <body> elementa) • fgColor – boja teksta dokumenta (atribut <body> elementa) • lastModified – datum i vrijeme zadnje izmjene dokumenta

  20. Dokument (document) • Metode • write(tekst) – ispisuje tekst u tijelu dokumenta • Događaji • onClick() – nakon klika na određeni objekt • onDblClick() - nakon dvoklika na određeni objekt • onFocus() – nakon što se postavi fokus na određeni objekt • onMouseOver() – kada se pokazivač miša postavi iznad objekta • onMouseOut() – kada se pokazivač miša ukloni iznad objekta

  21. title URL fgColor (crna) bgColor (bijela) Dokument (document)

  22. Primjer 5 <html> <head> <title>Svojstva dokumenta</title> </head> <body> <script type="text/javascript"> function prikaz() { alert("Kliknuli ste na h1 element!"); } var lokacija = document.URL; var bojap = document.bgColor; var bojaf = document.fgColor; var naslov = document.title; document.write("Lokacija: " + lokacija + "<br />Boja pozadine " + bojap + "<br /> Boja fontova: " + bojaf + "<br /> Naslov: " + naslov); document.title="Novi naslov - primjer 5"; </script> <h1 onDblClick="prikaz()">Ovo je h1 element</h1> </body> </html>

  23. Izgled u pregledniku

  24. Forme (forms) • podređene su document objektu • sve forme navedene su u matrici formi dokumenta • document.forms[0] • document.forms[1] • ... • Ako su forme imenovane atributom name pristupa im se pomoću imena • document.forma_trazilica • document.slanje_maila • ...

  25. Forme (forms) • Svojstva • id – id forme • name – naziv forme • Metode forme • submit() – slanje forme na obradu • reset() – čisti polja forme • Događaji • onSubmit – odrađuje se prilikom klika na tipku "submit" • onReset – odrađuje se prilikom klika na tipku "reset"

  26. Primjer 6 <html> <head><title>Primjer forme</title></head> <body> Prva forma<br /> <form name="trazi"> <input type="text" name="polje_t" /> <input type="submit" value="Traži" name="trazis" /> </form> Druga forma<br /> <form name="mail"> <input type="text" name="email" /> <input type="submit" value="Pošalji" name="salji_mail" /> </form> <br /><br /> <script type="text/javascript"> var ime1 = document.forms[0].name; var ime2 = document.forms[1].name; document.write("Prva forma zove se " + ime1 + ". Druga forma zove se " + ime2 + "."); </script> </body> </html>

  27. Izgled u pregledniku

  28. Elementi forme • Elementi forme • button – element tipa button • checkbox – element tipa checkbox • password – element tipa password • radio – element tipa radio • select – element tipa select • text – element tipa text • textarea – element tipa textbox

  29. Elementi forme • Svojstva elemenata forme • form – naziv forme kojoj element pripada • type – tip elementa (text, button, submit,...) • name – naziv elementa • value – vrijednost elementa • id – id elementa • maxlength – maksimalna duljina sadržaja u polju

  30. Elementi forme • Metode • click() – simulira klik miša • focus() – postavlja polje u fokus • blur() – uklanja polje iz fokusa • Događaji • onClick – odrađuje se prilikom klika na tipku • onChange – odrađuje se kod promjene sadržaja polja • onBlur – odrađuje se prilikom izlaska iz polja • onFocus – odrađuje se kada polje dođe u fokus

  31. Primjer 7 <html> <head> <title>Primjer forme</title> <script type="text/javascript"> function vrati() { var ime = document.email.adresa.name; var vrij = document.email.adresa.value; alert("Naziv polja je " + ime + ". \n Vrijednost polja je " + vrij + "."); } </script> </head> <body> <form method = "post" name = "email" onSubmit = "return vrati()"> <input type = "text" name = "adresa" /> <input type = "submit" value = "Pošalji" name = "salji" /> </form> <br /><br /> </body> </html>

  32. Izgled u pregledniku

  33. Provjera polja forme • po završetku obrade svih polja • koristi se onClick ili onSubmit događaj (odrađuje se prilikom klika na odgovarajuću tipku (tipa button ili submit) • u realnom vremenu (po završetku akcije na svakom polju vrši se provjera) • koristi se onBlur događaj (odrađuje se prilikom uklanjaja fokusa s objekta)

  34. Primjer 8 <html> <head><title>Provjera polja forme - 1</title> <script type="text/JavaScript"> function provjeri() { if (document.forma1.mail.value == "" || document.forma1.mail.value == null){ alert("Morate unijeti e-mail adresu."); return false; } } </script> </head> <body> <form name="forma1" method="post" onSubmit="return provjeri()"> E-mail adresa: <br /> <input type="text" size="30" name="mail" /> <br /> Text: <br /> <textarea name="tekst" rows="10" cols="40"></textarea> <br /> <input type="submit" value="Pošalji" /> <input type="reset" value="Očisti" /> </form> </body> </html>

  35. Izgled u pregledniku

  36. Primjer 9 <html> <head> <title>Provjera polja forme - 1</title> <script type="text/JavaScript"> function provjeri() { if ( document.forma1.mail.value== "" || document.forma1.mail.value == null){ alert("Morate unijeti e-mail adresu!"); document.forma1.mail.focus(); return false; } } </script> </head> <body> <form name="forma1" method="post"> E-mail adresa: <br /> <input type="text" size="30" name="mail" onBlur="return provjeri()" /> <br /> Text: <br /> <textarea name="tekst" rows="10" cols="40"></textarea> <br /> <input type="button" value="Pošalji" /> </form> </body> </html>

  37. Izgled u pregledniku

  38. Provjera ispravnosti e-mail adrese • provjeravamo ima li unesena e-mail adresa znak @ • metoda indexOf('znak') – vraća poziciju određenog znaka u nizu znakova • ako znak ne postoji u nizu vraća -1

  39. Primjer 10 <html> <head><title>Provjera e-mail adrese</title> <script type="text/JavaScript"> function provjerimail() { varimali =document.forma1.mail.value.indexOf("@"); if (imali== -1) { alert("E-mail adresa nije ispravna!"); return false; } } </script> </head> <body> <form name="forma1" method="post" onSubmit="return provjerimail()"> E-mail adresa: <br /> <input type="text" size="30" name="mail"/> <br /> Text: <br /> <textarea name="tekst" rows="10" cols="40"></textarea> <br /> <input type="submit" value="Pošalji" /> </form> </body> </html>

  40. Izgled u pregledniku

  41. Slike (images) • sve slike navedene su u matrici slika dokumenta • document.images[0] • document.images[1] • ... • Atributi • height – visina slike (u pikselima) • width – širina slike (u pikselima) • src – "izvor" slike (naziv i putanja datoteke) • name – naziv slike

  42. Primjer 11 <html> <head><title>Zamjena slika</title> <script type="text/JavaScript"> slike=new Array("slika1.jpg","slika2.jpg","slika3.jpg","slika4.jpg"); i=0; function zamjeni(){ i++; if (i < slike.length){ document.images[0].src = slike[i]; } else{ i=0; document.images[0].src = slike[i]; } } </script> </head> <body> <img width="90%" height="90%" src="slika1.jpg" /><br /> <a href="javascript:zamjeni()">Slijedeća</a> </body> </html>

  43. Izgled u pregledniku

  44. Linkovi (links) • svi linkovi navedeni su u matrici linkova dokumenta • document.links[0] • document.links[1] • ... • Atributi • href - link • Događaji • onClick() – nakon klika na određeni objekt • onDblClick() - nakon dvoklika na određeni objekt • onMouseOver() – kada se pokazivač miša postavi iznad objekta • onMouseOut() – kada se pokazivač miša ukloni iznad objekta

  45. Primjer 12 <html><head><title>Primjer linkova</title></head> <body> <a href="http://www.google.com">Google tražilica</a><br /> <a href="http://www.unidu.hr" >Sveučilište u Dubrovniku</a><br /><br /> <script type = "text/JavaScript"> document.write("U dokumentu ima " + document.links.length + " linkova.<br />"); for (i = 0; i < document.links.length; i++){ document.write(document.links[i].href +"<br />"); } </script> </body> </html>

  46. Izgled u pregledniku

  47. Literatura • JavaScript priručnici • http://www.w3schools.com/js/default.asp • http://www.comptechdoc.org/independent/web/cgi/javamanual/ • http://www.1osb.ims.hr/skola/javascript/ • JavaScript reference • http://docs.rinet.ru/ClientGuideJS13/ • http://docs.rinet.ru/ClientReferenceJS13/ • HTML DOM • http://www.w3schools.com/htmldom/default.asp • Biblioteke gotovih JavaScript programa • http://javascript.internet.com/ • http://www.javascript.com/

  48. Zadatak 1 • Napravite JS program koji će nakon klika na tipku u alert prozorčiću prikazati: • adresu HTML stranice (URL) dokumenta • naslov stranice (title) • podatke o zadnjem ažuriranju stranice (datumu i vremenu)

  49. Zadatak 2 • Napravite JS provjeru unosa u polje forme koja će kontrolirati • da je polje popunjeno • da se u polje korisničkog imena forme nije unio podatak dulji od 10 znakova • Provjera se treba odraditi prilikom slanja forme na obradu (submit)

  50. Zadatak 3 • Napravite JS program koji će nakon klika na tipku forme promijeniti njezin tekst iz "Pritisni me" u "Jesam!"