1 / 157

Internet programiranje JavaScript

Internet programiranje JavaScript. Uvod. (X) HTML u jednom trenutku postaje ograničavajući faktor P otrebna je nova tehnologija za realizaciju dinamičkih delova aplikacije. Uvod. D ecemb a r 1995.god, Netscape i Sun su predstavili JavaScript 1.0, originalno nazvan LiveScript

wood
Télécharger la présentation

Internet programiranje JavaScript

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. 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 ”; }

More Related