1 / 52

Primjena JavaScripta

Primjena JavaScripta. Vježbe iz kolegija "Mrežni servisi" Autor: Krunoslav Žubrinić krunoslav.zubrinic@unidu.hr Dubrovnik, prosinac 2005. Sadržaj. Matrice Datum i vrijeme Matematičke operacije Objektni model Dokument Forme Slike Linkovi. Matrice (Array).

clare-gilliam
Download Presentation

Primjena JavaScripta

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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!"

More Related