8. javascript

M. Zekić-Sušac 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. 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 linija1) 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

Operator Opis

+ Zbrajanje

- Oduzimanje

* Množenje

/ Dijeljenje

% Ostatak dijeljenja

++ Postupno povećavanje

-- Postupno oduzimanje

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.

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 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");

Operator Opis

== jednako

=== Potpuno jednako (i tip varijable i vrijednost)

!= Različito

> Veće

< Manje

<= Manje ili jednako

>= Veće ili jednako

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 bloka2break;

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 switchscript type="text/javascript"> // Skripta će ispisati različite poruke ovisno koji je dan u tjednuvar 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.

8. javascript

Documents