1 / 29

8. JavaScript

8. JavaScript. Uvod, varijable, naredbe, petlje. Što je JavaScript?. JavaScript je najpopularniji skriptni jezik na Internetu kojeg podržavaju svi poznatiji preglednici (Internet Explorer, Mozilla, Firefox, Netscape, Opera).

fay
Download Presentation

8. 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. 8. JavaScript Uvod, varijable, naredbe, petlje M. Zekić-Sušac

  2. Što je JavaScript? • JavaScript je najpopularniji skriptni jezik na Internetu kojeg podržavaju svi poznatiji preglednici (Internet Explorer, Mozilla, Firefox, Netscape, Opera). • Cilj kreiranja JavaScript jezika bio je dodati interaktivnost HTML stranicama • Skriptni jezici su programski jezici manjih mogućnosti, koji se sastoje od od izvršnog računalnog koda, obično ugrađenog u HTML stranice • JavaScript je interpreter, što znači da se skripta izvršava odmah naredbu po naredbu, bez prethodnog prevođenja (compiliranja) cijelog programa i kreiranja izvršne datoteke. • JavaScript je javno raspoloživ skriptni jezik (nije potrebna licenca za korištenje) M. Zekić-Sušac

  3. Razlika JavaScript vs. Java • JavaScript nije isto što i Java, to su dva potpuno različita jezika • JavaScript je samo skriptni jezik, čiji standard definira organizacija ECMA (www.ecma-international.org) • Java je pravi objektni programski jezik za izradu aplikacija, kreiran od strane tvrtke Sun Microsystems, u rangu s jezicima C, C++, C#, i dr. M. Zekić-Sušac

  4. Što sve omogućava JavaScript? • Programiranje u okviru HTML stranica • Pretvaranje dinamičkog teksta u HTML stranicu – npr. ako se neka varijabla pod nazivom “name” želi ispisati u okviru HTML stranice, može se napisati skriptna naredba: document.write("<h1>" + name + "</h1>") • Reagiranje na događaje – moguće je postaviti da se skripta izvršava kada se dogodi neki događaj, npr. kada se stranica učita, ili kada korisnik klikne na određeno dugme ili drugi HTML element • Čitanje i pisanje HTML elemenata - JavaScript može pročitati i promijeniti sadržaj nekog HTML elementa • Validiranje (provjeru ispravnosti i vjerodostojnosti) podataka - JavaScript može validirati podatke prije nego se pošalju na server, čime se server oslobađa dodatne obrade • Detektiranje preglednika kojeg korisnik upotrebljava – na osnovu tog prepoznavanja preglednika JavaScript može učitati drugačiju stranicu ovisno o pregledniku tako da se učita stranica koja je posebno dizajnirana za taj preglednik • Kreiranje “kolačića” (cookies) - JavaScript može pohraniti i učitati informacije o korisnikovom računalu M. Zekić-Sušac

  5. Povijest razvoja JavaScript-a • 1996. - Brendan Eich iz Netscape-a izmislio je jezik JavaScript za Netscape Navigator 2.0, i od te se godine pojavio u svim Netscape i Microsoft preglednicima • 1997. – nastaje prva inačica standarda za taj jezik razvijenog od strane ECMA. Standard je nazvan ECMA-262. • 1998. ECMA-262 standard za JavaScript odobren je od strane međunarodnog ISO (ISO/IEC 16262) standarda 1998. • Standard za ovaj jezik se i dalje razvija. M. Zekić-Sušac

  6. Umetanje JavaScript-e u HTML stranicu • Skripta mora započeti HTML oznakom (tagom) <script> • Primjer jednostavne Java skripte koja na stranici ispisuje poruku “Hello, world”: <html> <body> <script type="text/javascript"> document.write("Hello, World!"); </script> </body> </html> • Za pogled na primjer kliknite na P8_Primjer1.html • Za pogled na primjer u okviru W3C tutorial-a, kliknite na: http://www.w3schools.com/js/tryit.asp?filename=tryjs_text Tag kojim započinje Java skripta Naredba JavaScript-a koja ispisuje poruku “Hello, World” na ekranu M. Zekić-Sušac

  7. Naredba <script> • ključna riječ <script> označava da na tom mjestu u html stranici počinje skripta • atribut type=“attribute” definira koji skriptni jezik će se koristiti u toj skripti • Naredbe <script type="text/javascript"> .... </script> označavaju početak i kraj Java skripte. M. Zekić-Sušac

  8. Naredba za ispis teksta • Naredba: document.write(“neki tekst"); koristi se za ispis teksta na zaslonu (obavezno staviti znak “;” na kraju naredbe) • Kada bismo ovu naredbu napisali bez početnog <script> tag-a, ona se ne bi izvršila, nego bismo na stranici dobili ispis ove cijele naredbe. Isto će se dogoditi ako preglednik ne podržava JavaScript-e. • Kako bi se spriječio prikaz naredbi skripti kod preglednika koji ne podržavaju JavaScript, preporuča se u tom slučaju staviti naredbe skripte pod komentar, npr. <!-- document.write("Hello World!"); //--> Tako preglednik neće prikazati naredbe skripte. M. Zekić-Sušac

  9. Gdje postaviti JavaScript JavaScript se može postaviti u: • tijelo stranice (body) – tada će se skripta izvršiti odmah čim se stranica učita. Takve skripte generiraju neki dio sadržaja stranice. • zaglavlje stranice (head) – izvršit će se kad se pozove ili kad se izvrši neki događaj. U zaglavlje se obično smještaju neke funkcije koje se kasnije pozivaju iz tijela stranice. • vanjsku datoteku – koristi se kada više stranica trebaju koristiti jednu istu skriptu. Tada se skripta pohranjuje u neku datoteku s nastavkom .js, a poziva iz stranice na sljedeći način: <html> <head> <script src="xxx.js"></script> </head> Naziv datoteke u kojoj je skripta M. Zekić-Sušac

  10. Naredbe u JavaScript-u • Naredba ili izjava (eng. statement) u JavaScriptu je naredba pregledniku koja mu govori što treba raditi. • Npr. ova naredba govori pregledniku da treba ispisati poruku “Zdravo!” na web stranici: document.write(“Zdravo!"); • Točka-zarez na kraju naredbe nije obavezna ako svaku naredbu pišemo u novi red. Međutim, ako se piše više naredbi u istom redu, obavezno ih je odijeliti sa “;” • Naredbe se izvode slijedno kako su napisane. M. Zekić-Sušac

  11. Uređivanje teksta • Za uređivanje teksta koji će ispisati na stranici iz neke Java skripte, mogu se umetati html tagovi unutar zagrade u naredbi za ispis, npr. na sljedeći način: • <script type="text/javascript"> document.write("<h1>Moja prva stranica</h1>"); document.write("<p>Ovo je prvi odjeljak</p>"); document.write("<p>Ovo je drugi odjeljak</p>"); </script> M. Zekić-Sušac

  12. JavaScript blokovi • Blokovi su skupine naredbi koje se izvršavaju zajedno, te se stavljaju u vitičaste zagrade, npr.: <script type="text/javascript"> { document.write("<h1>Naslov</h1>"); document.write("<p>Prvi odjeljak</p>"); document.write("<p>Drugi odjeljak</p>"); } </script> • Upotreba blokova: kada se skupina naredbi treba izvršiti ako je ispunjen neki uvjet, ili u nekoj funkciji M. Zekić-Sušac

  13. Umetanje komentara • Komentari se koriste za različita objašnjenja unutar skripte • Moguće je koristiti komentare u jednoj liniji ili kroz više linija 1) Komentari u jednoj liniji - počinju znakom “//” i traju do kraja te linije: <script type="text/javascript"> // Ovdje dolazi naslov: document.write("<h1>Naslov</h1>"); // Ovdje dolaze dva odjeljka: document.write("<p>Ovo je prvi odjeljak</p>"); document.write("<p>Ovo je drugi odjeljak</p>"); </script> 2) Komentari kroz više linija – počinju znakom “/*” i traju do znaka “*/”: /* Ovaj komentar može trajati kroz više linija, sve dok se naiđe na znak */ M. Zekić-Sušac

  14. Varijable u JavaScriptu • Varijable su “kontejneri” (eng- containers” za pohranu informacija • Nazivi im mogu biti proizvoljni, prvi znak u nazivu varijable mora biti slovo (JavaScript je osjetljiv na velika i mala slova) • Varijabla može pohraniti neku vrijednost (tekstualnu ili numeričku), ili neki izraz, npr: • x=5;  duljina=x+15; ime=“Pero”; • Vrijednosti varijabli mogu se promijeniti za vrijeme izvođenja skripte • Varijable prije upotrebe treba deklarirati M. Zekić-Sušac

  15. Deklaracija varijabli • Da bismo deklarirali nešto kao varijablu, koristi se ključna riječ “var” na sljedeći način: var x; • Vrijednost varijabli može se dodijeliti u istoj liniji u kojoj se i deklarira varijabla: var x=5; • Ili u posebnoj liniji koda: var x; x=5; • Ako se varijabla na deklarira, nego joj se odmah dodijeli vrijednost, tada se ona automatski deklarira kao varijabla M. Zekić-Sušac

  16. Operatori u JavaScriptu • U JavaScriptu se najčešće koriste dvije vrste operatora: • Aritmetički operatori (+,-,*,/,%, ...) • operatori za pridruživanje vrijednosti (najčešće “=“) • Ostali operatori za pridruživanje mogu biti: • += - označava pridruživanje zbrajanja, npr. x+=y znači: x=x+y • *= - označava pridruživanje množenjem, npr. x*=y znači: x=x*y, itd. M. Zekić-Sušac

  17. Aritmetički operatori U JavaScript-u koriste se ovi aritmetički operatori: M. Zekić-Sušac

  18. Upotreba “+” operatora na tekstu • Operator “+” može se koristiti na tekstu za spajanje više tekstualnih nizova u jedan, npr. txt1="What a very "; txt2="nice day."; txt3=txt1+txt2; • Ili za umetanje praznih mjesta između teksta, npr. txt1="What a very"; txt2="nice day."; txt3=txt1+" "+txt2; • Nakon izvršavanja ovih naredbi dobiva se rezultat: What a very nice day. M. Zekić-Sušac

  19. Spajanje teksta i broja • Operator “+” može se koristiti i za spajanje tekstualnog niza i brojčane vrijednosti, npr. • x=5+5; document.write(x); Rezultat: 10 b) x=5+”5”; document.write(x); Rezultat: 55 Opće pravilo: ako se spaja broj i tekst (string), rezultat će biti tipa tekst (string). M. Zekić-Sušac

  20. Operatori uspoređivanja • Koriste se kako bismo napravili usporedbu vrijednosti i odredili koja će se akcija dogoditi ovisno o tome da li je izraz istinit ili lažan • Primjer: if (age<18) document.write(“Premlad"); M. Zekić-Sušac

  21. Logički operatori Koriste se za određivanje logike između izraza. Najčešći logički operatori su: • && - logičko “i” (and) • || - logičko “ili” (or) • ! – logičko “ne” (not) Primjeri: if (age < 18 && age > 70) document.write(“Nije za rad"); if (age==6 || age==7) document.write(“Dijete za školu"); M. Zekić-Sušac

  22. Petlja if • Ova petlja koristi za uvjetno izvršavanje jedne ili više naredbi (tj. ako je uvjet ispunjen izvršavaju se neke naredbe, a ako uvjet nije ispunjen, ne događa se ništa) • Sintaksa: if (uvjet) { naredbe koje će se izvršiti ako je uvjet ispunjen } Primjer: if (time<10) { document.write("<b>Good morning</b>"); } M. Zekić-Sušac

  23. Upotreba if petlje i funkcije za vrijeme i datum • U ovom primjeru najprije se u varijablu d sprema sistemski datum, zatim se u varijablu time sprema samo vrijeme iz tog datuma, a zatim se u petlji if ispisuje poruka “Dobro jutro!” ako je vrijeme manje od 10h: <script type="text/javascript"> var d=new Date(); var time=d.getHours(); if (time<10) { document.write("<b>Dobro jutro!</b>"); } </script> Spremanje sistemskog datuma u varijablu “d”, a vremena u varijablu “time” M. Zekić-Sušac

  24. Petlja if...else • Ova petlja koristi za uvjetno izvršavanje jedne ili više naredbi (tj. ako je uvjet ispunjen izvršavaju se neke naredbe, a ako uvjet nije ispunjen, izvršavaju se druge naredbe) • Sintaksa: if (uvjet) { naredbe koje će se izvršiti ako je uvjet ispunjen } else { naredbe koje će se izvršiti ako uvjet nije ispunjen } M. Zekić-Sušac

  25. Primjer if...else petlje <script type="text/javascript"> /*Ova skripta će ispisati poruku “Dobro jutro” ako je vrijeme manje od 10h, a u suprotnom će ispisati poruku “Dobar dan” */ var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("Good morning!"); } else { document.write("Good day!"); } </script> M. Zekić-Sušac

  26. Petlja if...else if ... else • Ova petlja koristi se u slučaju kada ako uvjet nije ispunjen treba provjeriti novi uvjet • Sintaksa: if (uvjet1) { naredbe koje će se izvršiti ako je uvjet ispunjen } else if (uvjet2) { naredbe koje će se izvršiti ako je uvjet2 ispunjen } else { naredbe koje će se izvršiti ako uvjet2 nije ispunjen } M. Zekić-Sušac

  27. Petlja switch • Ova petlja koristi se kada se želi provjeriti nekoliko vrijednosti varijabli ili izraza, te izvršiti jedan od nekoliko skupova naredbi • Sintaksa: switch(n) { case 1: naredbe iz bloka1 break; case 2: naredbe iz bloka2 break; default: naredbe koje će se izvršiti ako je n različit od 1 i 2 } Varijabla kojoj se ispituje vrijednost ovdje je nazvana “n” M. Zekić-Sušac

  28. Primjer upotrebe petlje switch script type="text/javascript"> // Skripta će ispisati različite poruke ovisno koji je dan u tjednu 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> M. Zekić-Sušac

  29. Literatura: • W3C, JavaScript Tutorial, http://www.w3schools.com/js/default.asp, 11.04.08. M. Zekić-Sušac

More Related