1 / 92

JavaS c ript osnove

JavaS c ript osnove. Internet programiranje. Uv o d. Java je veoma moćan i kompleksan programski jezik visokog nivoa. JavaScript je skript jezik koji omogu ćava web developerima/dizajnerima da naprave mnogo funkcionalnije i dinamičnije web sajtove. Java vs. JavaScript. JavaScript.

gage
Download Presentation

JavaS c ript osnove

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. 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>

More Related