8. JavaScript Uvod, varijable, naredbe, petlje M. Zekić-Sušac 1 Š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 2 1
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 3 Š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 4 2
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 5 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!"); </body> </html> Tag kojim započinje Java skripta Naredba JavaScript-a koja ispisuje poruku Hello, World na ekranu 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 M. Zekić-Sušac 6 3
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">... označavaju početak i kraj Java skripte. M. Zekić-Sušac 7 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 8 4
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"> </head> Naziv datoteke u kojoj je skripta M. Zekić-Sušac 9 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 10 5
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>"); M. Zekić-Sušac 11 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>"); Upotreba blokova: kada se skupina naredbi treba izvršiti ako je ispunjen neki uvjet, ili u nekoj funkciji M. Zekić-Sušac 12 6
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>"); 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 13 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 14 7
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 15 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 16 8
Aritmetički operatori U JavaScript-u koriste se ovi aritmetički operatori: + - * / % ++ -- Operator Opis Zbrajanje Oduzimanje Množenje Dijeljenje Ostatak dijeljenja Postupno povećavanje Postupno oduzimanje M. Zekić-Sušac 17 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 18 9
Spajanje teksta i broja Operator + može se koristiti i za spajanje tekstualnog niza i brojčane vrijednosti, npr. a) 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 19 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"); Operator == ===!= > < <= >= jednako Potpuno jednako (i tip varijable i vrijednost) Različito Veće Manje Opis Manje ili jednako Veće ili jednako M. Zekić-Sušac 20 10
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 21 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 22 11
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>"); Spremanje sistemskog datuma u varijablu d, a vremena u varijablu time M. Zekić-Sušac 23 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 24 12
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!"); M. Zekić-Sušac 25 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 26 13
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 27 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!"); M. Zekić-Sušac 28 14
Literatura: W3C, JavaScript Tutorial, http://www.w3schools.com/js/default.a sp, 11.04.08. M. Zekić-Sušac 29 15