JavaScript JS

1. Aplikativni softver Fakultet za poslovnu informatiku Univerzitet Singidunum www.fpi.singidunum.ac.yu JavaScriptJS 2007/2008. Violeta Tomašević Literatura Boško Nikolić, Internet programiranje: HTML, CSS, JavaScript, Panevropski univerzitet Apeiron za multidisciplinarne i virtuelne studije, Banja Luka, 2007.

2. JavaScript HTML kao ograničavajući faktor HTMLje platformski neutralan jezik koji omogućava efikasno prezentiranje željenog sadržaja na klijentskoj mašini. Glavni nedostatak HTML-a je u tome što ne podržava neposrednu komunikaciju sa korisnikom u smislu mogućnosti unosa podataka od strane korisnika i dinamičku obradu unetih podataka. HTML predstavlja ograničavajući faktor u aplikacijama koje zahtevaju dinamičku obradu unetih podataka, pa se javila potreba za uvođenjem novih tehnologija za realizaciju ovakvih aplikacija.

3. JavaScript CGI-Common Gateway Interface Prvi pokušaji rešavanja problema realizacije dinamičkih aplikacija bili su usmereni ka uvođenju novih serverskih komponenti. Najpopularnija među njima je bila CGI-Common Gateway Interface. CGI tehnologija je omogućila Web programerima obradu podataka koje je korisnik uneo i, u skladu sa njima, preduzimanje potrebnih akcija. Dobijena funkcionalnost je u početku bila dovoljna da se CGI tehnologija smatra zadovoljavajućim rešenjem. Međutim, kasnije se uvidelo da veliki problem može da predstavlja česta klijent-server komunikacija. Primer: Ako korisnik unese pogrešan podatak, najpre mora da sačeka da se podatak prenese na server, zatim da server obradi podatak i utvrdi da je pogrešan, nakon toga da dobije obaveštenje od servera da ponovo treba da unese podatak. Da bi se izbegla česta komunikacija sa serverom, javila se potreba za novim tehnologijama koje bi dale mogućnost obrade podataka na klijentskoj strani. To je dovelo do pojave JavaScript-a.

4. JavaScript Istorija JavaScript-a • Decembar 1995.godine – Netscape i Sun su predstavili jezik JavaScript 1.0, originalno nazvan LiveScript. Kod napisan u ovom jeziku je mogao da se izvršava u okviru web browser-a NetscapeNavigator 2. • Microsoft je na osnovu javne dokumentacije Netscape-a implementirao svoju, skoro identičnu, verziju jezika koju je nazvao JScript. Ova verzija je mogla da se izvršava u okviru InternetExplorer 3 web čitača. • Udruženje ECMA (European Computer Manufacturers Association) je usvojilo svoj standard za ovaj jezik i nazvalo ga ECMAScript 1.0, kasnije ISO/IEC 16262. Tako je JavaScript postao Netscape-ova implementacija ovog standarda, a JScrpitMicrosoft-ova.

5. JavaScript Šta je JavaScript? • JavaScriptje jezik koji omogućava postizanje značajne funkcionalnosti na klijentskoj strani. • Primer: Ako korisnik unese pogrešan podatak, JavaScript na klijentskoj strani odmah proverava podatak, ustanovljava grešku i o tome obaveštava korisnika, koji samo može biti iznenađen brzinom odziva. • Osobine JavaScript jezika: • Objektno zasnovan – koristi hijerarhiju ugrađenih objekata sa definisanim metodama i osobinama (što daje jednostavnost jeziku), ali ne podržava sve koncepte objektno-orijentisanih jezika (na pr. veoma je limitiran rad sa nasleđivanjem, važenjem i funkcionalnošću objekata) • Platfromski neutralan – kod se izvršava u okviru web čitača, bez obzira na hardversko i softversko okruženje; veličina programa se obično mala, pa se on može izvršavati i na mašinama sa lošijim performansama • Modularno programiranje – za čuvanje i izvršavanje koda se koriste posebni dokumenti sa .js ekstenzijom • Integrisanost sa HTML-om – u okviru jedne stranice moguće je na proizvoljan način kombinovati JS i HTML kod; takođe iz JS moguće je generisati HTML kod

6. JavaScript Java i JavaScript Iako se često poistovećuju, Java i JavaScript su dva potpuno različita koncepta. JavaScript je jednostavan skript jezik, dok je Java složen potpuno objektno-orijentisan jezik. Uporedne karakteristike

7. JavaScript Osnove JavaScript jezika • JavaScript (JS) kod se u HTML stranicu može uključiti na dva načina: • direktnim pisanjem koda u okviru HTML stranice • Tag za definisanje JS koda je: • <SCRIPT [atribut]> JS kod </SCRIPT> • gde je atribut obično language, a njegova vrednost JavaScript. • pozivanjem posebnog dokumenta sa JS kodom (.js) u okviru HTML stranice • Tag za pozivanje dokumenta je: • <SCRIPT atributi> </SCRIPT> • gde se, osim atributa language (kao u prethodnom slučaju), navodi i atribut src koji definiše putanju i naziv .js dokumenta. Primer <SCRIPT language=“JavaScript” src=“JSkod.js”></SCRIPT>

8. JavaScript Komentari • Komentari u JS mogu se definisati na dva načina: • // - komentar u jednom redu Primer: // komentar u jednom redu • /* */ - komentar u više redova Primer: /* komentar u više redova */

9. JavaScript Ispisivanje teksta Za prikazivanje HTML teksta pomoću JS koda koristi se sledeći metod: document.write(Tekst) Argument metoda (Tekst) predstavlja string koji može biti proizvoljan HTML kod. Primer <SCRIPT language=“JavaScript”> document.write(“<b>Definisanje objekta</b><br><i>Kreiranje</i>”) </SCRIPT> Izgled na stranici Napomena: na kraju naredbe u JS nije obavezno korišćenje simbola ; , osim ukoliko je više naredbi u jednom redu Definisanje objekta Kreiranje

10. JavaScript Promenljive • Imena promenljivih ili identifikatori u JavaScript-u zavise od veličine slova (casesensitive). • Pravila za imenovanje promenljivih su: • Identifikator mora počinjatislovom, znakom $, ili donjom crtom (_). • U okviru imena se, osim slova, mogu koristiti i brojevi, ali ne na početku imena. • Ne mogu se ostavljati prazna mesta u okviru imena. • Rezervisane reči se ne mogu koristiti za identifikatore (na pr. for, if, class,...). Sintaksa za kreiranje (deklaraciju) promenljive i njenu inicijalizaciju je: var imePromenljive = vrednost

11. JavaScript Tipovi podataka (1) JavaScript ne podržava deklarisanje tipova podataka. JavaScript interpreter automatski prepoznaje koji tip podataka odgovara kojoj promenljivoj i dodeljuje joj taj tip dinamički.U JS-u je dozvoljeno da promenljiva ima različite tipove podataka u različito vreme izvršavanja programa. Tokom izvršavanja ovog koda, promenljiva a predstavlja broj 5, promenljiva b broj 8, a u poslednjoj naredbi potrebno je sabrati vrednost tipa String i broj, što je nemoguće uraditi bez konverzije obe vrednosti u isti tip. Kako tip String u JS ima prednost, broj 5 se konvertuje u String “5”, a zatim se izvršava spajanje dva stringa, tako da se na kraju u promenljivoj b nalazi String “broj5”. Primer: a = 5; b = 8; b = “broj” + a;

12. JavaScript Tipovi podataka (2) • Tipovi podataka koji su podržani u JS-u su: celi brojevi, realni brojevi, stringovi i logičke vrednosti. • Celi brojevi se mogu predstavljati u pozicionim brojnim sistemima sa osnovom 8 (moraju počinjati cifrom 0), 10 (ne smeju počinjati cifrom 0) i 16 (moraju počinjati sa 0x ili 0X). • Realni brojevi se mogu predstavljati pomoću decimalne tačke (3.14), ili u eksponencijalnoj prezentaciji (314e-2). • Stringovi predstavljaju proizvoljan niz karaktera između navodnika (“ “) ili apostrofa (‘ ’).U njima se mogu koristiti specijalni karakteri: • /b – jedno mesto levo (backspace) • /f – jedan red na dole (formfeed) • /n – početak novog reda (new line) • /r – return (carriage return) • /t – tabulator (tab) • Logički tip podataka dozvoljava vrednosti true (tačno) i false (netačno). Prilikom konverzije true se prevodi u 1, a false u 0.

13. JavaScript Operatori • Operatori predstavljaju specijalne karaktere koji definišu operaciju koju treba izvršiti nad operandima. Operandi mogu biti promenljive, izrazi i konstante. • Operatori se mogu klasifikovati u sledeće grupe: • Aritmetički operatori • Operatori na nivou bita • Logički operatori • Operatori poređenja

14. JavaScript Atirmetički operatori (1) Aritmetički operatori se koriste za izvođenje matematičkih operacija. Pregled aritmetičkih operatora

15. JavaScript Atirmetički operatori (2) • Rad sa operandom tipaString: • kod sabiranja – operand koji nije tipa String se konvertuje u String i radi se konkatenacija (sabiranje, tj. spajanje stringova) • kod ostalih operacija – String se konvertuje u broj, a zatim se obavlja operacija; ako konverzija ne uspe, dobija se vrednost NaN (Not a Number) Primer koda a = 1+1; b = a*3; c = b / 4; d = b - a; e = -d; document.write(“a,b,c,d,e, su ”,a,””,b,””,c,””,d,””,e); Izgled ekrana nakon izvršenja koda a,b,c,d,e, su 2 6 1.5 4 -4

16. JavaScript Operatori na nivou bita (1) Operatori na nivou bita se koriste za izvođenje operacija nad celim brojevima razmatrajući svaki bit pojedinačno. Pregled operatora na nivou bita

17. JavaScript Operatori na nivou bita (2) Primer 1 15 & 9; rezultat je 9(logičko AND) 1111 & 1001 = 1001 Primer 2 15 I 9; rezultat je 15 (logičko OR) 1111 I 1001 = 1111 Primer 3 15 ^ 9; rezultat je 6 (logičko XOR) 1111 ^ 1001 = 01110

18. JavaScript Logički operatori (1) Logički operatori se koriste za izvođenje operacija nad operandimalogičkog tipa koji mogu imati samo vrednosti true (tačno) ili false (netačno). Rezultat operacije je takođe logičkog tipa. Pregled logičkih operatora

19. JavaScript Logički operatori (2) Primer koda Izgled ekrana nakon izvršenja koda a = true; b = false; c = a II b; d =a && b; f = (!a && b) II (a && !b); g = !a; document.write(“a = ” + a +,”<BR>”); document.write(“b = ” + b +,”<BR>”); document.write(“c = ” + c +,”<BR>”); document.write(“d = ” + d +,”<BR>”); document.write(“f = ” + f +,”<BR>”); document.write(“g = ” + g); a = true b = false c = true d = false f = true g = false

20. JavaScript Operatori poređenja (1) Operatori poređenja se koriste za poređenje dve vrednosti i kao rezutat vraćaju vrednost logičkog tipa (true ili false). Pregled operatora poređenja

21. JavaScript Operatori poređenja (2) Operatore == i != koriste svi dozvoljeni tipovi podataka (celi brojevi, racionalni brojevi, karakteri, stringovi, logički tip). Ukoliko su operandi različitog tipa, obavlja se konverzija podataka pre poređenja. Ostale operatore koriste samo numerički tipovi. Primer koda Izgled ekrana nakon izvršenja koda a = 4; b = 1; c = a < b; d = a == b; document.write(“c = ” + c +,”<BR>”); document.write(“d = ” + d); c = false d = false

22. JavaScript Promenljive i funkcije • U JavaScript-u se primenom rezervisane reči function deklariše funkcija sa zadatim parametrima koji mogu biti numeričkog tipa, stringovi ili objekti. Opšti oblik funkcije je: • function ime([parametar1] [,parametar2]…[,parametarN]) { • telo funkcije • } • U JavaScript-u koristi se rezervisana reč var za deklarisanje promenljive uz opcionu mogućnost njene inicijalizacije. Opšti oblik deklaracije promenljive je: • var imePromenljive[=vrednost]...[,imePromenljive1[=vrednost1] ]

23. JavaScript Kontrole toka (1) Kontrole toka omogućavaju tok programa željenom putanjom u skladu sa određenim uslovima. Osnovne kontrole toka u JavaScript-u su veoma slične osnovnim kontrolama toka u višim programskim jezicima. Osim njih, postoje i kontrole toka specifične samo za JavaScript jezik. Osnovne kontrole toka • Kontrola toka: if-else • omogućava izvršavanje određenog bloka instrukcija ako je zadati uslov ispunjen. Opšti oblik ove kontrole toka je: • if(logički izraz) blok1; • [else blok2;]

24. JavaScript Kontrole toka (2) • Kontrola toka: switch • predstavlja pregledan način za izvršavanje više ugnježdenih if-else kontrukcija. Opšti oblik ove kontrole toka je: • switch(izraz) { • case v1: blok1; [break;] • … • casevN: blokN; [break;] • [default: blok_def] • } • Kontrola toka: while • predstavlja petlju u kojoj se blok instrukcija izvršava sve dok je ispunjen uslov na ulasku u petlju. Opšti oblik ove kontrole toka je: • [inicijalizacija;] • while(uslov) { • blok_instrukcija; • }

25. JavaScript Kontrole toka (3) • Kontrola toka: do-while • predstavlja petlju u kojoj se blok instrukcija izvršava sve dok je ispunjen uslov na izlasku iz petlje. Opšti oblik ove kontrole toka je: • [inicijalizacija;] • do { • blok_instrukcija; • [iteracija;] • } while(uslov); • Kontrola toka: for • predstavlja petlju koja u zaglavlju ima inicijalizaciju, uslov završetka i iteraciju. Petlja izvršava blok instrukcija u iteracijama, sve dok je uslov ispunjen. Opšti oblik petlje je: • for (inicijalizacija; uslov; iteracija) { • blok_instrukcija; • }

26. JavaScript Kontrole toka (4) • Kontrola toka: break • predstavlja klauzulu koja se koristi za skok na kraj bloka, ili za skok na neku labelu. Labelu prati oznaka :. Primer: • labela: ... • labela1: { • blok_instrukcija; • break labela; • } Kontrola toka: return se koristi za povratak iz funkcije na mesto njenog poziva. Ukoliko funkcija vraća neku vrednost, return mora proslediti izraz kompatibilan sa tipom funkcije. Kontrola toka: continue se koristi za prelazak na sledeću iteraciju petlje, bez izvršavanja preostalog koda do kraja petlje.

27. JavaScript Kontrole toka (5) Kontrola toka specifična za JavaScript • Kontrola toka: for...in • izvršava iteraciju po specifičnoj promenljivoj za svaku osobinu (property) određenog objekta. • Primer: • function dump_properties(obj, objName) { • var result= “”; • for(var i in obj) { • result += objName + “.” + i + “ = “ + obj[i] + “<BR>”; • } • result += “<HR>”; • return result; • }

28. JavaScript Rad sa uzorcima (1) • JavaScript ima vrlo razvijenu podršku za razne vrste provera podataka na klijentskoj strani, tako da korisnik vrlo brzo može da dobije obeveštenje ako neki podatak nije unet u propisanom formatu. • Mehanizam provere radi na principu definisanja uzoraka i pozivanja odgovarajućih metoda koje podatke unete od strane korisnika upoređuju sa tim uzorcima. • Uzorak ili regularan izraz (regularexpression) se može definisati na dva načina: • var imeUzorka = new RegExp(Tekst1), gde je Tekst1 string sa znacima “ ” • var imeUzorka = /Tekst2/, gde je Tekst2 string bez znaka “ ” • U oba slučaja imeUzorka je ime objekta koji predstavlja uzorak. Uzorku odgovara svaki string koji u sebi sadrži podstring Tekst1, odnosno Tekst2. Primer var uPrimer = new RegExp(“HTML”) var uPrimer = /HTML/ U oba slučaja formira se objekat uzorka uPrimer kome odgovara svaki string koji u sebi sadrži podstring HTML.

29. JavaScript Rad sa uzorcima (2) Složeniji uzorci mogu se definisati korišćenjem specijalnih simbola sa posebnim značenjem. Neki od ovih simbola su navedeni u tabeli koja sledi. Način ispitivanja da li neki string odgovara uzorku može se dodatno definisati primenom atributa: i – izvršavanje case-insensitive ispitivanja g – izvršava globalno ispitivanje, tj. pronalazi sva pojavljivanja uzorka m – rad sa više linija

30. JavaScript Rad sa uzorcima (3) Primeri var uKraj = new RegExp(“s$”) ili var uKraj = /s$/ Promenljiva uKraj je uzorak koji odgovara bilo kom stringu koji se završava na s. /[abc]/ - uzorak označava jedno pojavljivanje karaktera a, jedno pojavljivanje karaktera b ili jedno pojavljivanje karaktera c - uzorak označava karakter koji nije a, ni b ni c /[^abc]/ - uzorak označava broj od 5 cifara /\d\d\d\d\d/ ili /\d{5}/

31. JavaScript Rad sa uzorcima (4) • Nakon definisanja uzorka, može se pristupiti uparivanju zadatog stringa sa uzorkom. To se može raditi na dva načina: • pomoću metoda koje poziva string koji se uparuje • pomoću metoda koje poziva definisani uzorak Metode objekta tipa String omogućavaju uparivanje stringa i uzorka, kao i zamenu jednog dela stringa drugim stringom. Dve od metoda su: search Ovaj metod ispituje da li u okviru stringa postoji definisani uzorak. Kao rezultat vraća poziciju njegovog prvog pojavljivanja, ili –1 ako uzorak nije pronađen. x = /script/ Rezultat: y=4, ispitivanje je case-insensitive y = “JavaScript”.search(x,i) replace Ovaj metod ispituje da li u okviru stringa postoji definisani uzorak, i ako postoji zamenjuje ga nekom drugom vrednošću. text = “JAVascriPT” Rezultat: text=“JavaScript” text.replace(/javascript/gi,“JavaScript”)

32. JavaScript Rad sa uzorcima (5) Metode objekta tipa RegExp koji odgovara uzorku omogućavaju ispitivanje stringa i uzorka. Ove metode su: exec Ovaj metod je opšteg tipa. Rezultat izvršavanja ovog metoda je niz koji sadrži rezultate ispitivanja zavisno od načina definicije uzorka. test Ovaj metod ispituje da li string odgovara definisanom uzorku. Kao rezultat vraća true ako je uzorak pronađen u okviru stringa. var pattern = /java/i;Rezultat: true pattern.test(“JavaScript”);

33. JavaScript Rad sa formama (1) JavaScript je stekao veliku popularnost zahvaljujući mogućnosti da pristupa elementima forme, čita njihove vrednosti, obrađuje ih i postavlja nove vrednosti elemenata. Ove mogućnosti se koriste u kombinaciji sa osobinom HTML-a da prepozna korisnikovu akciju i reaguje na nju. Svaki HTML objekat ima listu događaja koji su povezani sa tim objektom. Događaji predstavljaju neku akciju korisnika nad datim objektom. Na primer, tekstualno polje prepoznaje kada korisnik promeni tekst u polju, slika prepoznaje kada se miš nalazi na njenoj površini, dugme prepoznaje kada korisnik mišem klikne na njega, itd. U narednoj tabeli su navedeni najvažniji događaji koji se mogu desiti, objekti na koje se oni odnose i način njihovog pozivanja u okviru taga koji definiše određeni objekat.

34. JavaScript Rad sa formama (2)

35. JavaScript Rad sa formama (3) Način na koji treba reagovati u slučaju kada se desi neki događaj, može se definisati pozivom odgovarajuće JavaScript funkcije u okviru taga elementa forme na koji se događaj odnosi. Ta JavaScript funkcija mora biti definisana u okviru JavaScript koda na datoj stranici. Primer <HTML> <HEAD> <SCRIPT language=“JavaScript”> function proveri() {… } </SCRIPT> </HEAD> <BODY> <FORM name=“imeForme”> <INPUT type=“button” value=“Poslati”name=“dugme”onClick=“proveri()”> </FORM></BODY> </HTML>

36. JavaScript Rad sa formama (4) JavaScript omogućava čitanje vrednosti proizvoljnog elementa forme na sledeći način: document.imeForme.imeElementa.value gde je document službena reč, imeForme naziv forme u kojoj se nalazi element, imeElementa naziv elementa i value službena reč. Vrednost elementa se može pridružiti promenljivoj x pomoću: x = document.imeForme.imeElementa.value Analogno, u element forme se može upisati vrednost promenljive x pomoću: document.imeForme.imeElementa.value = x <FORM name=“PrimerForme”> INPUT type=“text” name=“TekstPolje”> </FORM> Primer Pristup polju u okviru JS koda: document.PrimerForme.TekstPolje.value

37. Unesite prvi broj: Unesite drugi broj: SABERI Zbir brojeva je: JavaScript Rad sa formama (5) Primer <FORM method=“post” name=“mojaForma”> Unesite prvi broj: &nbsp; &nbsp; <INPUT type=“text” name=“broj1” size=5><br> Unesite drugi broj: &nbsp; <INPUT type=“text” name=“broj2” size=5><br> <INPUT type=“button” value=“SABERI” name=“dugme” onClick=“Saberi()”><br> Zbir brojeva je: &nbsp; &nbsp; &nbsp; <INPUT type=“text” name=“zbir” size=5> </FORM> Izgled forme

38. JavaScript Rad sa formama (6) Kod JavaScript funkcije <SCRIPT language="JavaScript"> function Saberi() { var br1 = document.mojaForma.broj1.value - 0; var br2 = document.mojaForma.broj2.value - 0; var ukupno = br1 + br2; document.mojaForma.zbir.value = ukupno; } </SCRIPT>

39. JavaScript Cookies (1) Zbog veće bezbednosti, Internet aplikacije imaju izvesna ograničenja, kao što je zabranjen pristup lokalnom fajl sistemu na klijentskoj mašini. Naime, zabranjeno je čitanje, pisanje i brisanje datoteka na sistemu na kome se aplikacija izvršava. Jedini izuzetak predstavljaju cookies. Cookies su tekstualni fajlovi koji se mogu zapamtiti na klijentskoj mašini. Da se i dalje ne bi ugrozila bezbednost sistema, ovi fajlovi imaju tačno definisan format: ime=vrednost[;EXPIRES=datum][;DOMAIN=imeDomena][;PATH=putanja] [;SECURE] gde su: ime - ime koje definiše upisani cookie vrednost - informacija koja se želi zapamtiti datum - datum koji definiše do kada cookie ostaje upisan na klijentskoj mašini imeDomena - definiše jedini domen sa kog cookie može da se čita i da mu se menja vrednost putanja - definiše jedinu putanju sa koje cookie može da se čita i da mu se menja vrednost SECURE - upis i čitanje cookie-ja se izvršava preko posebnih, bezbednijih linija Redosled opcija EXPIRES, DOMAIN, PATH i SECURE nije bitan.

40. JavaScript Cookies (2) Cookie fajl se predstavlja objektom kome se pristupa kao objektu u okviru document objekta. Primer čitanja cookie-ja: var citamCookie=document.cookie U promenljivoj citamCookie upisani su svi cookie-ji koji postoje na datoj klijentskoj mašini. Sve informacije su zapamćene u obliku teksta. Da bi se pročitao određeni cookie, tekst se mora parsirati i pronaći deo koji počinje imenom cookie-ja koji se traži. Primer upisa vrednosti u cookie: document.cookie=“primerCookie=“+vrednostKojaSePamti+”;secure” Nakon izvršenja ove naredbe, na klijentsku mašinu je upisan cookie pod imenom primerCookie. Njegova vrednost je sadržana u promenljivoj vrednostKojaSePamti.

41. Cookie 1 Postavljanje i pregled cookie Upisi ime Prikazi cookie JavaScript Cookies (3) <html> <head> <script language=“JavaScript"> function postavljanjeCookie(){ document.cookie = 'Cookie ='+document.forma1.imeCookie.value; } function prikazCookie(){ alert(document.cookie); } </script> </head> <body> <h1>Cookie 1</h1> <h2>Postavljanje i pregled cookie</h2> <form name="forma1"> <p><input name=“imeCookie" type="text" size="20"></p> <p><input type="button" value=“Upisi ime" name="B1" onClick=“postavljanjeCookie()"> <input type="button" value=“Prikazi cookie" name="B2" onClick=“prikazCookie()"></p> </form> </body> </html>