JavaS c ript osnove - PowerPoint PPT Presentation

javas c ript osnove n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
JavaS c ript osnove PowerPoint Presentation
Download Presentation
JavaS c ript osnove

play fullscreen
1 / 92
JavaS c ript osnove
171 Views
Download Presentation
gage
Download Presentation

JavaS c ript osnove

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

  1. JavaScriptosnove Internet programiranje

  2. Uvod Javaje veoma moćan i kompleksan programski jezik visokog nivoa. JavaScript je skriptjezikkojiomogućava web developerima/dizajnerima da naprave mnogo funkcionalnije i dinamičnije web sajtove. Java vs. JavaScript

  3. JavaScript • JavaScript dodaje interaktivnost web stranama. • JavaScript se izvršava na klijentskoj strani. • JavaScript je interpreterski jezik – izvršava se bez prethodnog kompajliranja. • Šta je potrebno za kreiranje koda u JavaScript jeziku? • Proveriti da li je u browser-u čekirana opcija JavaScript Enabled.

  4. Šta sve može JavaScript? • Ubacuje dinamički tekst u HTML stranu • Reaguje na događaje (events) • Čita i menja sadržaj HTML elemenata • Prikazuje poruke upozorenja (alert messages) • Prikazuje pop-up prozore • Kreira dinamičke drop-down menije • Omogućava validaciju formi • Detektuje korisnikov browser • Koristi cookie-je

  5. JavaScript istorijat • Zvanično ime je ECMAScript. • Izumeo ga je Brandan Eich u Netscape-u (sa Navigatorom 2.0) . • ECMA organizacija je razvila ECMA-262 koji je postao standard. • Od 1996. godine podržavaju ga svi browseri. • Još uvek je u fazi razvoja.

  6. Kako... u JavaScript-u? HTML tag <script> se koristi za ubacivanje JavaScript koda u HTML kod Primer: <html><body><script type="text/javascript">document.write("Hello World!");</script></body></html>

  7. Šta je sa browserima koji ne podržavaju JavaScript? Oni će prikazati skript kao sadržaj stranice, a da bi se to izbeglo potrebno je napisati sledeći kod: <html><body><script type="text/javascript"><!--document.write("Hello World!");//--></script></body></html>

  8. JavaScript gde…? U zavisnosti kad hoćete da se izvrši JavaScript kod možete ga postaviti: • Prilikom učitavanja strane – tag <body> • Kada se izvrši neki događaj – tag <head> • Neki skript prilikom učitavanja strane, a neki kad korisnik izvrši na neki događaj • Kada želimo da se isti JavaScript kod izvrši na nekoliko strana – u poseban fajl

  9. JavaScript gde…? Ako se skript postavi u odeljak body – izvršiće se prilikom učitavanja strane i generisaće sadržaj stranice. <html><head></head><body><script type="text/javascript">document.write("This message is written by JavaScript");</script></body></html>

  10. JavaScript gde…? Ako se skript postavi u odeljak head – izvršiće se onda kada se pozove ili kada ga pozove neki događaj <html><head><script type="text/javascript">function message(){alert("This alert box was called with the onload event");}</script></head><body onload="message()"></body></html>

  11. JavaScript gde…? Može se postaviti neograničen broj skriptova u dokument, tako da se može koristiti i body i head odeljak. <html><head><script type="text/javascript">....</script></head><body><script type="text/javascript">....</script></body>

  12. JavaScript gde…? Da se ne bi skriptovi pisali na svakoj strani, a koriste se isti, potrebno ih je zapisati u poseban fajl koji ima ekstenziju .js i pozivati ga po potrebi. <html><head><script type="text/javascript" src=“mojskript.js"></script></head><body></body></html> U eksternom fajlu ne sme se pojavljivati tag <script> samo JavaScript kod.

  13. JavaScript code • JavaScript naredbe se izvršavaju u browseru. • Svaka JavaScript naredba se završava sa ; • JavaScript naredbe mogu biti grupisane u blokove naredbi i tada se stavljaju u zagrade { }. • JavaScript – case sensitive. • JavaScript komentari: • // - komentar za jednu liniju koda • /* komentar za više linija koda*/ Komentari se koriste za blokiranje izvršavanja naredbi (u slučaju da browser ne podržava JS)

  14. JavaScript code • JavaScript promenljive se mogu, a i ne moraju deklarisati. • Deklaracija promenljivih se vrši ključnom rečju var iza koje se navodi ime promenljive. • Dodela vrednosti promenljivoj može da se izvrši odmah nakon deklaracije, a može i kasnije. • Tip podatka koje će imati promenljiva se ne navode. var x=5;varcarname="Volvo"; x=5;carname="Volvo";

  15. JavaScript code • Aritmetički operatori + Addition x=y+2 x=7 - Subtraction x=y-2 x=3 * Multiplication x=y*2 x=10 / Division x=y/2 x=2.5 % Modulus x=y%2 x=1 ++ Increment x=++y x=6 -- Decrement x=--y x=4 Ako je y=5

  16. JavaScript code • Operatori za dodelu vrednosti = x=y   x=5 += x+=y x=x+y x=15 -= x-=y x=x-y x=5 *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 Ako je x=10 i y=5

  17. JavaScript code • Operatori poređenja == is equal to x==8 is false === is exactly equal tox===5 is truex==="5" is false != is not equal x!=8 is true > is greater than x>8 is false < is less than x<8 is true >= is greater than or equal to x>=8 is false <= is less than or equal to x<=8 is true Ako je x=5

  18. JavaScript code • Logički operatori && and (x < 10 && y > 1) is true || or (x==5 || y==5) is false ! not !(x==y) is true • Uslovni operatorvariablename=(condition)? value1:value2  Ako je x=6 i y=3

  19. JavaScript code • + operator se koristi nad stringovima za konkatenacijux=5+5;document.write(x);x="5"+"5";document.write(x);x=5+"5";document.write(x);x="5"+5;document.write(x); Ako saberete broj i string rezultat će biti string

  20. JavaScript - uslovne naredbe • Pružaju mogućnost izmene toka izvršavanja programa, u zavisnosti od konkretne logičke vrednosti izraza. • Varijante uslovnih naredbi: • if statement • if...else statement • switch statement

  21. Primer if naredbe <script type="text/javascript">var d=new Date();var time=d.getHours();if (time<10)  {  document.write("<b>Good morning</b>");  }</script>

  22. Primer if...else naredbe <script type="text/javascript">var d = new Date();var time = d.getHours();if (time < 10)  {document.write("Good morning!");  }else  {  document.write("Good day!");  }</script>

  23. Primer ugnežđene if...else naredbe <script type="text/javascript">var d = new Date()var time = d.getHours()if (time<10)  {document.write("<b>Good morning</b>");  }else if (time>=10 && time<16)  {document.write("<b>Good day</b>");  }else  {document.write("<b>Hello World!</b>");  }</script>

  24. Primer switch naredbe <script type="text/javascript">var d=new Date();theDay=d.getDay();switch (theDay){case 5:  document.write("Finally Friday");  break;case 6:  document.write("Super Saturday");  break;case 0:  document.write("Sleepy Sunday");  break;default:  document.write("I'm looking forward to this weekend!");}</script>

  25. JavaScript - petlje • Omogućavaju da se određeni delovi koda više puta izvršavaju (poznat broj puta, dok je uslov zadovoljen...). • Kod se izvršava kroz iteracije. • Postoje: • for loops • while loops • do..while loops

  26. Primer for petlje <html><body><script type="text/javascript">var i=0;for (i=0;i<=5;i++){document.write("The number is " + i);document.write("<br />");}</script></body></html>

  27. Primer while petlje <html><body><script type="text/javascript">var i=0;while (i<=5)  {  document.write("The number is " + i);  document.write("<br />");  i++;  }</script></body></html>

  28. Primer do...while petlje <html><body><script type="text/javascript">var i=0;do  {  document.write("The number is " + i);  document.write("<br />");  i++;  }while (i<=5);</script></body></html>

  29. Primer break naredbe <html><body> <script type="text/javascript">var i=0;for (i=0;i<=10;i++)  {  if (i==3) {    break;    }  document.write("The number is " + i);  document.write("<br />");  }</script></body></html>

  30. Primer continue naredbe <html><body><script type="text/javascript">var i=0for (i=0;i<=10;i++)  {  if (i==3) {    continue;    }  document.write("The number is " + i);  document.write("<br />");  }</script></body></html>

  31. JavaScript funkcije • Funkcijama se nazivajublokovinaredbikoji se pozivajuiizvršavajukaocelina. • Podacineophodnizanjihovoizvršavanjemoguim se prosleditikaoparametri. • Funkcijemogudavraćajuvrednosti, ali to se odnjih ne zahtevauvek. • Funkcije moraju biti definisane, pre nego što se mogu koristiti . • Definicijafunkcije se, obično, smešta u zaglavlje HTML dokumenta, iakotakavpostupaknijeobavezan.

  32. Sintaksa definisanja funkcije je sledeća: function ime_funkcije(p1, p2, ..., pn) { naredbe } • Ključna reč function mora se pisati malim slovima. • Funkcija će se izvršiti kada se desi neki događaj ili kada se pozove. • Funkcija se može pozvati bilo gde unutar strane. • Funkcije koje treba da vrate neku vrednost moraju koristiti naredbu return. • Promenljive koje se deklarišu u funkciji – lokalne promenljive. Primer Primer

  33. Primer funkcije koja vraća vrednost <html> <head> <script type="text/javascript"> function product(a,b) {return a*b;} </script> </head> <body> <script type="text/javascript"> document.write(product(4,3)); </script> </body> </html>

  34. <HTML> <HEAD> <TITLE>Global and Local Variables</TITLE> <SCRIPT LANGUAGE="JavaScript"> function displaySquared(y) {var x = y * y; document.write(x+"<BR>") } </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> for(x=0;x<10;++x) displaySquared(x) </SCRIPT> </BODY> </HTML>

  35. JavaScript Pop-up prozori JavaScript ima tri vrste pop-up prozora: • Alert box, • Confirm box, • Prompt box.

  36. Alert pop-up prozor • Koristimo ga kada želimo da budemo sigurni da je informacija prosleđena korisniku. • Kada se pojavi alert box, korisnik treba da klikne na "OK" da bi nastavio dalji rad. • Sintaksa alert("sometext");

  37. Primer Alert Box <html><head><script type="text/javascript">function show_alert(){alert("I am an alert box!");}</script></head><body><input type="button" onclick="show_alert()" value="Show alert box" /></body></html>

  38. Confirm pop-up prozor • Koristimo kada korisnik treba da verifikuje ili prihvati nešto. • Kada se pojavi confirm box, korisnik treba da klikne ili na “OK” ili na “Cancel” da bi nastavio rad. • Ako izabere “OK”, confirm box vraća vrednost true. Ako klikne na “Cancel”, vraća false. • Sintaksa confirm("sometext");

  39. Primer Confirm Box <body> <input type="button" onclick="show_confirm()" value="Show confirm box" /> </body></html> <html><head><script type="text/javascript">function show_confirm(){var r=confirm("Press a button");if (r==true)  {  document.write("You pressed OK!");  }else  { document.write("You pressed Cancel!");  }}</script></head>

  40. Prompt pop-up prozor • Koristimo kada želimo da korisnik unese vrednost pre nego što pristupi strani. • Kada se pojavi prompt box, korisnik treba da unese vrednost, a zatim da klikne na "OK" ili "Cancel" da bi nastavio sa radom. • Ako korisnik klikne na "OK" prompt box vraća unetu vrednost, a ako klikne na "Cancel" vraća null. • Sintaksa prompt("sometext","defaultvalue");

  41. Primer Confirm Box <body><input type="button" onclick="show_prompt()" value="Show prompt box" /></body></html> <html><head><script type="text/javascript">function show_prompt(){var name=prompt("Please enter your name","Harry Potter");if (name!=null && name!="")  {  document.write("Hello " + name + "! How are you today?");  }}</script></head>

  42. JavaScript Objects • JavaScript je objektno orijentisan jezik. • Omogućava da se definišu sopstveni objekti i kreiraju novi tipovi podataka. • Objekat je specijalan tip podataka koji ima svoje properties (osobine) i metode. • Properties opisuju osobine objekta i svaka osobina ima neku vrednost. • Metode su akcije koje objekat može da primeni.

  43. JavaScript Objects Primer (osobina): var txt="Hello world!";document.write(txt.length); Primer (metoda): var txt="Hello world!";document.write(txt.toUpperCase()); 12 HELLO WORLD!

  44. JavaScript Objects • Objekti i njegove osobine(metode) se obično referenciraju korišćenjem tačke između objekta i njegove osobine(metode). document.write("This is a test.") • Postoji i druga notacija document ["write"] ("This is a test.")

  45. Postoje dva glavna tipa JavaScriptobjekata: • Language Objects –objekti na nivou JavaScript jezika i nezavisni su od drugih objekata. • NavigatorObjects– objekti na strani klijentskog browsera. • Primer: • alert("An error occurred!"); • window.alert("An error occurred!"); • this.alert("An error occurred!"); • Osim gore pomenutih postoje i objekti kreirani od strane programera.

  46. Generalno objekti se kreiraju sledećom sintaksom: • name = new Object(); • Primer: • ratings = new Array(6,9,8,4,5,7,8,10); • var home = new String("Residence"); • var futdate = new Date(); • var num1 = new Number(); • var string = "This is a test.“;

  47. JavaScript Array Object Array objekatse koristi da uskladišti više vrednosti u jednu promenljivu. Array objekat se može definisati na 3 načina: 1: var myCars=new Array(); myCars[0]=“Audi";       myCars[1]="Volvo";myCars[2]="BMW"; 2: var myCars=new Array(“Audi","Volvo","BMW"); 3: var myCars=[“Audi","Volvo","BMW"]; Ako se kao vrednosti u nizu odrede brojevi ili true/false vrednosti,tip nizovne promenljive će biti Number ili Boolean, umesto String

  48. Pristup pojedinim elementima niza vrši se navođenjem imena niza i indeksa. Broj indeksa počinje od O. document.write(myCars[O]); myCars[O]="Opel"; document.write(myCars[O]); Audi Opel

  49. <html> <body> <script type="text/javascript"> var mycars = new Array(); mycars[0] = “Audi"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (i=0;i<mycars.length;i++) { document.write(mycars[i] + "<br />"); } </script> </body> </html>