Internet programiranje JavaScript

1. Internet programiranje JavaScript

2. Uvod • (X)HTML u jednom trenutku postaje ograničavajući faktor • Potrebna je nova tehnologija za realizaciju dinamičkih delova aplikacije

3. Uvod • Decembar 1995.god, Netscape i Sun su predstavili JavaScript 1.0, originalno nazvan LiveScript • Microsoft prati sa jezikom JScript • ECMAScript 5.1, ili ISO/IEC 16262 standard • Danas Netscape, odnosno Mozilla, i Microsoft standardi su identični u preko 95% slučajeva

4. Reference • Trenutno je aktuelan Javascript 1.8, koji je opisan u standardu ECMAScript verzija 3, sa ekstenzijama. • www.w3schools.com • www.ecma-international.org • https://developer.mozilla.org/en/JavaScript • www.jquery.com • David Falangan, JavaScript: The Definitive Guide,O'Reilly Media, Inc., 6th edition, April 2011 • www uopšte

5. Osobine • Platformski neutralan • Modularno programiranje • Integrisanost sa (X)HTML-om • Nema velikih sličnosti sa Javom

6. Zašta se koristi JavaScript? • Omogućava dinamički (X)HTML sadržaj • Može da menja vrednosti (X)HTML elemenata i atributa • Koristi se za proveru ispravnosti popunjenih formulara • Reaguje na događaje tipa klika, slanja formulara itd. • Ostvaruje razne vremenske funkcije

7. 1. Osnove JavaScript-a • Tag • Komentari • Prikaz • Promenljive i njihovi tipovi • Operatori • Funkcije • Objekti

8. Izvršavanje koda • U okviru (X)HTML koda: <script type=“text/javascript"> ...JavaScript kod…; </script> • Ili u eksternom fajlu: <script type=“text/javascript" src=" jskod.js"> </script> • Ili nekad bez script taga • Naredba se završava tačka zarezom ;

9. Komentari • Za komentar jedne linije - oznaka „//” : // komentar u jednoj liniji ... • Za komentar više redova - „/*” za početak bloka pod komentarom i „*/” za kraj bloka pod komentarom: /* komentar u više redova... */

10. Prikaz - write • Primer: <scripttype=“text/javascript"> document.write(“<b>Prvi red</b><br /><i>Drugi red</i>”); </script> • Rezultat primera: Prvi red Drugi red

11. Promenljive • Sadrže vrednosti koje program smešta u okviru memorije računara • Da bi se koristile u okviru programa: • Napisati naredbu koja kreira promenljivu • Dodeliti joj željeno ime • Na kraju vrednost treba da se dodeli promenljivoj

12. Imena promenljivih • Ime koje se dodeljuje promenljivoj se naziva i identifikator • Pravila i konvencije pri imenovanju promenljivih: • Identifikator mora počinjati slovom, znakom dolar ($), ili donjom crtom ( _ ) • U okviru imena se mogu koristiti brojevi, ali ne kao prvikarakter • Ne mogu se koristiti prazna mesta u okviru imena • Ne mogu se koristiti rezervisane reči za identifikatore

13. var • U okviru JavaScript jezika, rezervisana rečvarse koristi za kreiranje promenljivih • Kreiranje promenljive se naziva i deklaracija promenljive • Da bi se dodelila određena vrednost ili da bi se inicijalizovala promenljiva koristi se sintaksa: var imePromenljive = vrednost; • Vrednost dodeljena promenljivoj može biti znakovna ili numerička vrednost

14. Tipovi podataka • Specifična kategorija informacija koje se sadrže u okviru promenljive • Pomaže da računar odredi koliko jeprostora potrebno da bi se smestila određena promenljiva • Tip podataka definiše i vrstu operacija koje se mogu izvršiti sa datom promenljivom

15. Deklaracija tipova • Striktni programski jezici • Zahtevaju da se deklariše tip podataka promenljive • Statički tip podataka • Tip podataka se ne menja nakon same deklaracije • Jednostavniji programski jezici - JavaScript • Ne zahtevaju da se deklariše tip podataka promenljive • Dinamički tip podataka • Tip podataka se može menjati nakon same deklaracije

16. Deklaracija tipova u JavaScript-u • JavaScript je jednostavniji programski jezik • Ne zahteva se, i nije dozvoljeno, deklarisati tip podataka promenljive • JavaScript interpreter • Automatski prepoznaje koji tip podataka je smešten u okviru promenljive • Dodeljuje tip podatka promenljivoj dinamički

17. Null vrednost • Vrednost null je • Tip podataka/vrednost koja se može dodeliti promenljivoj • Pokazuje da promenljiva ne sadrži nikakvu korisnu vrednost • Vrednost “null” se dodeljuje promenljivoj kada se želi definisati da promenljiva ne sadrži nikakav podatak

18. Tipovi podataka u JavaScript-u • JavaScript je “case sensitive” jezik. • Tipovi podataka koji su podržani su celobrojni brojevi, racionalni brojevi, stringovi i logički tip. • Celobrojni brojevi se mogu koristiti sa brojnom osnovom 10, 8 ili 16. • Racionalni brojevi - 3.14, 314E-2 ili 314e-2. • String predstavlja proizvoljan niz karaktera između navodnika (“neki tekst”) ili apostrofa (‘neki tekst’).

19. Operatori • Aritmetički • Na nivou bita • Relacionalni • Logički

20. Aritmetički operatori

21. Aritmetički operatori 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); • Nakon izvršavanja prethodnog primera dobija se sledeći tekst na ekranu: a, b, c, d, e, su 2 6 1.5 4 -4

22. Na nivou bita

23. Na nivou bita • 15 & 9 rezulat 9 (1111 & 1001 = 1001) • 15 | 9 rezulat 15 (1111 | 1001 = 1111) • 15 ^ 9 rezulat 6 (1111 ^ 1001 = 0110)

24. Logički operatori

25. Logički a = true; b = false; c = a || b; d = a && b; f = (!a && b) || (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); • Rezultat izvršavanja prethodnog primera je: a = true b = false c = true d = false f = true g = false

26. Operatori poređenja

27. Operatori poređenja a = 4; b = 1; c = a < b; d = a == b; document.write( “ c = “ + c + “<br />“ ); document.write ( “ d = “ + d ); • Rezultat izvršavanja prethodnog primera je c = false d = false

28. Funkcije • Funkcije predstavljaju grupu naredbi koja se može izvršiti kao pojedinačna jedinica • Funkcije su korisne jer čine program preglednijimi lakšim za ažuriranje • Kao i bilo koji drugi JavaScript kod, funkcije se moraju definisati u okviru<script> elementa • Funkcija se sastoji iz deklaracije funkcije i njenog poziva

29. Deklaracijafunkcija • Deklaracije funkcije se može naći u zaglavlju i telu (X)HTML koda, ali preporučivo je da se smesti u zaglavlje (X)HTML koda. • Sintaksa za definisanje funkcije je : functionimeFunkcije(parametri) { naredbe; }

30. Pozivanjefunkcije • Da bi se izvršila funkcijapotrebno ju je pozvati sa određenog mesta u okviru programa • Funkcija se poziva njenim imenom i specifikacijom argumenata u okviru zagrada • Vrednosti argumenata se prosleđuju odgovarajućim parametrima funkcije u skladu sa deklaracijom funkcije

31. Naredbareturn • Služi da bi se vratio rezultat funkcije pozvanoj naredbi • Dodeljuje pozvanoj naredbi vrednost određene promenljive return 8; return p*m;

32. Opseg važenja promenljive • Prema opsegu važenja promenljive se dele na globalne ili lokalne. • Globalne promenljive se deklarišu izvan funkcije, i može im se pristupiti iz bilo kog dela programa. • Lokalne promenljive se deklarišu u okviru funkcije i jedino su dostupne u okviru funkcije u kojoj su deklarisane. • Parametri su takođe lokalne promenljive.

33. Ugrađene funkcije • Na primer: • eval(string) tretira string kao naredbu • string(objekat) pretvara objekat u string • number(objekat) pretvara objekat u broj • parseInt(string[, osnova]) pretvara string u celobrojnu vrednost sa specificiranom osnovom • parseFloat(string) pretvara string u realni broj • itd.

34. Primer • Primer deklaracije funkcije: function calculate(a,b,c) { d = (a+b) * c; return d; } • Primer poziva funkcije: var x = calculate(4,5,9); document.write("x je ", x, "<br/>"); var y = calculate((x/3),3,5); document.write("y je ", y); • Rezultat primera: x je 81 y je 150

35. Objekti • JavaScript podržavaju objekte kao strukture podataka • Objekti se definišu pomoću funkcija • Za svaki objekat su vezane osobine i metode • Osobine su promenljive kojima se dodaju određene vrednosti • Metode su funkcije u okviru objekata kojima mogu da se menjaju njihove osobine

36. Kreiranje klase i instance objekta • Klasa objekta ili prototip se definiše funkcijom čija je sintaksa function mojObjekat(p1,p2,…){ this.osobina1=f1(p1,p2,…); this.osobina2=f2(p1,p2,…); …} • Instanca objekta se definiše pomoću naredbe new mojaInstanca=new mojObjekat(c1,c2,…) • Klasa mojObjekat ne mora biti definisana da bi bila instancirana; klasa ne mora da ima parametre; f1,f2… mogu biti konstantne funkcije; ne moraju sve osobine klase biti definisane.

37. Rad sa osobinama objekata • Vrednost osobine instance objekta se može koristiti na sledeći način: imePromenljive=mojaInstanca.Osobina1; • Vrednost osobine instance objektase može promeniti ili naknadno definisati ukoliko nije bila ranije: mojaInstanca.Osobina1=vrednost1; • Vrednost osobine klase objekta se može naknadno definisati ukoliko nije bila ranije: mojObjekat.prototype.Osobina1=vrednost1;

38. Primer rada sa objektima <html><body> <script type=“text/javascript”> function osoba(ime,prezime,godine){ this.ime=ime; this.prezime=prezime; this.godine=godine;} mojOtac=new osoba(“Jovan”,”Simić”,50); document.write(mojOtac.ime + “ “ + mojOtac.prezime + “ je “ + mojOtac.godine + “ godina star.”); </script></body></html> • Rezultat Jovan Simić je 50 godina star.

39. Primer rada sa objektima <html><body> <script type=“text/javascript”> function osoba(ime,prezime,godine){ this.ime=ime; this.prezime=prezime; this.godine=godine;} mojOtac=new osoba(“Jovan”,”Simić”,50); mojOtac.ime=“Petar”; document.write(mojOtac.ime + “ “ + mojOtac.prezime + “ je “ + mojOtac.godine + “ godina star.”); </script></body></html> • Rezultat Petar Simić je 50 godina star.

40. Primer rada sa objektima <html><body> <script type=“text/javascript”> function osoba(prezime,godine){ this.prezime=prezime; this.godine=godine;} mojOtac=new osoba(”Simić”,50); mojOtac.ime=“Ivan”; document.write(mojOtac.ime + “ “ + mojOtac.prezime + “ je “ + mojOtac.godine + “ godina star.”); </script></body></html> • Rezultat Ivan Simić je 50 godina star.

41. Kreiranje objekta sa metodom • Primer metodaobjekta: function mojkrug(x,y,r) { this.xkord = x; this.ykord = y; this.radius = r; this.povrsina = izrPovrsinu; this.obim = function () { return ( Math.PI * this.radius * 2 ); }; this.pomeri = pomeriKrug; } function izrPovrsinu() { return ( Math.PI * this.radius * this.radius ); } function pomeriKrug(xPom,yPom) { this.xkord += xPom; this.ykord += yPom; }

42. Kreiranje objekta sa metodom • Alternativni primer kreiranja metoda objekta: function mojkrug(x,y,r) { this.xkord = x; this.ykord = y; this.radius = r; } mojkrug.prototype.povrsina = function () { return ( Math.PI * this.radius * this.radius );} mojkrug.prototype.obim = function () { return ( Math.PI * this.radius * 2 ); }; mojkrug.prototype.pomeri = function (xPom,yPom) { this.xkord += xPom; this.ykord += yPom; };

43. Korišćenje metoda • Primer korišćenja metoda iz prethodnog primera: var testkrug = new mojkrug(3,4,5); testkrug.pomeri(2,3); document.write( ‘Površina kruga je ' + testkrug.povrsina() ); document.write( ‘<br />Obim kruga je ' + testkrug.obim() ); • Rezultat prethodnih komandi je: Površina kruga je 78.53981633974483 Obim kruga je 31.41592653589793

44. Ugrađeni objekti • Array - niz • RegExp – uzorci za pretraživanje • String - znakovni niz • Date – vreme • Event – objekti koje generišu događaji • Boolean – logička promenljiva • Math - Matematički objekt • DOM – (X)HTML i JavaScript objekti

45. 2. Kontrola toka • Ternarni operator • If-else naredba • Switch naredba • Petlje • For petlja • While petlja • Izlazi iz blokova • Break • Continue • With naredba

46. Ternarni operator • Sintaksa: logIzraz ? izraz1 : izraz2 • gde je izraz log_izraz bilo koji izraz čiji rezultat je vrednost logičkog tipa. Ako je rezultat izraza true, onda se izvršava izraz1, u suprotnom izraz2. • Primer: kolicnik = (imenioc ==0 ? 0 : brojioc/ imenioc)

47. Kontrole toka - if • Sintaksa: if (logIzraz) {naredbe1;} [else {naredbe2;}] • Primer: if (x == 8) {                    y=x; } else {                z=x; y=y*x; }

48. Kontrola toka - if • Još jedan primer: if (mesec == 1) ime_meseca = “Januar”; else if (mesec == 2) ime_meseca = “Februar”; else if (mesec == 3) ime_meseca = “Mart”; else if (mesec == 4) ime_meseca = “Maj”; else .... else if (mesec == 12) ime_meseca = “Decembar”;

49. Kontrola toka - switch • Sintaksa switch (izraz) { case vr1: naredbe1; [break;] ... case vrN: naredbeN; [break;] [default: naredbeDef;] }

50. Kontrola toka - switch • Primer: switch(mesec) { case 1: ime_meseca = “Januar”; break; case 3: ime_meseca = “ Mart”; break; case 5: ime_meseca = “Maj”; break; case 7: ime_meseca = “Jul”; break; case 8: ime_meseca = “Avgust”; break; case 10: ime_meseca = “Oktobar”; break; case 12: ime_meseca = “Decembar”; break; case 4: ime_meseca = “ April ”; break; case 6: ime_meseca = “Jun”; break; case 9: ime_meseca = “Septembar”; break; case 11: ime_meseca = “Novembar”; break; case 2: ime_meseca = “ Februar ”; }