Va� prvi Javascript kod (Hello World)

Document Sample
Va� prvi Javascript kod (Hello World) Powered By Docstoc
					Vaš prvi Javascript kod (Hello World)

Da biste umetnuli Javascript u vaš HTML kod morate korisititi <script> tag.
Evo najjednostavnijeg primjera kako nešto napisati pomoću Javascripta.

Između <body> i </body> napišite sljedeće:


<script type="text/javascript">
document.write("Hello World!")
</script>


Pogađate, ovaj kod će na ekran ispisati Hello World!

Pa da pojasnimo sada dio po dio.
Kao što smo već rekli za umetanje javascripta u vaš HTML kod koristimo <script> tag. Znači
sa <script type="text/javascript"> i </script> govorimo browseru gdje počinje i gdje završava
Javascript.

Komanda document.write je standardna komanda za ispisivanje teksta na ekran. Dakle da bi
se nešto ispisalo na ekran morate napisati document.write i u zagradu pod navodnicima staviti
tekst koji želite da se ispiše.

Ako želite ispisati neki tekst ali da ga prethodno oblikujete nekim html tagom, to možete
učiniti ovako:


<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>




Gdje stavljati javascript na stranici

Postoje 3 mjesta na koje možete staviti vaš Javascript kod. Između <head> i </head>
elemenata, između <body> i </body> elemenata i kao eksternu skriptu.

Head dio
Kada skrite stavimo u između head elemenata onda znamo da će nam se skripte učitati prije
nego ih pozovemo. Dakle kada stavljate skriptu u Head element onda to radite na ovom
principu:


<html>
<head>
<script type="text/javascript">
....
</script>
</head>


Body dio
Ove skripte će se izvršiti kada se stranica učita. Takve skripte se upisuju na ovaj način:
<html>
<head>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>


Eksterni Javascript
Koristi se kada jednu skriptu trebate ispisati na više stranica, pa da ju ne pišete na svakoj,
napravite jednu eksternu i koristite ju za sve stranice. Kada napišete skriptu usnimite ju sa
ekstenzijom "*.js" (npr. skripta.js)Takve skripte se pozivaju na sljedeći način:

<html>
<head>
<script src="skripta.js">
</script>
</head>
<body>
</body>
</html>


Znači pod src="..." ide path do vaše skripte.




Varijable

Varijable se koriste da u sebi pohrane neki podatak. Evo za početak jednog primjera pa ćemo
ga postepeno objasniti.


<script type="text/javascript">
var stranica = "www.tutorijali.net"
document.write(stranica)
document.write("<h1>"+stranica+"</h1>")
</script>


Rezultat će biti ispisano prvo malim slovima www.tutorijali.net a zatim velikim slovima taj isti
tekst.

Kao što smo već govorili u prošlim tutorijalima, skriptu otvaramo tako da napišemo <script
type="text/javascript">

Zatim deklariramo varijablu. Varijablu smo nazvali stranica. Zatim smo stavili znak jednakosti
i u navodnike upisali vrijednost varijabli. U ovom slučaju je to "www.tutorijali.net".
Treći redak normalno ispisuje vrijednost varijable dok treći redak formatira tekst sa html
kodom (<h1>). Znači stavite navodnike pa html tag koji formatira tekst, stavite još jedne
navodnike i između pluseva upišete ime varijable.

Zatim zatvorite sve što ste otvorili (navodnike, html tag i opet navodnike)
Vrijednost varijable se tjekom izvršavanja skripte može promijeniti. Ne mora skroz ostati
jednaka.

Pravila za imenovanje varijabli
- Imena varijabli su case sensitive što znači osjetljiva na velika i mala slova, nije isto "var ime"
i "var Ime"
- Imena varijabli moraju počinjati sa slovom ili crticom dolje ( _ )


Varijablu možete deklarirati i bez početnog "var", dakle:

var ime = "neko ime" i ime = "neko ime"




If...Else petlja

Ovaj način se koristi kada želite izvršiti jedan dio koda ako je zadovoljen neki uvjet, a drugi
dio koda ako nije zadovoljen.

Npr. ako je ime Martina onda se ispiše rečenica "Dobar dan šefice!" u suprotnom se ispiše
"Dobar dan (ime u varijabli) " Pogledajmo primjer:

<script type="text/javascript">

ime = "Ivana"

if (ime=="Martina")
{
document.write("<b>Dobar dan sefice!</b>")
}
else
{
document.write("<b>Dobar dan "+ime+" !</b>")
}
</script>


Dakle u ovom slučaju će se ispisati Dobar dan Ivana jer je ime Ivana što ne zadovoljava prvi
uvjet nego se ispisuje rečenica Dobar dan i dodaje se sadržaj varijable (u ovom slučaju Ivana)
If...else if...else petlja

Ova petlja se koristi kada imate više mogućih uvjeta za zadovoljiti. Kao primjer napravit ćemo
jedan kod koji će provjeravati što piše u varijabli ime i na temelju toga će ispisivati svakom
drugačiju rečenicu. A na kraju ako nije niti jedno zadano ime onda će se ispisati rečenica
"Dobar dan (ime u varijabli)"

<script type="text/javascript">

ime = "Katarina"

if (ime=="Marina")
{
document.write("<b>Dobar dan sefice!</b>")
}

else if (ime=="Marina") {
document.write("<b> O mala, sta ima? </b>")
}

else if (ime=="Monika") {
document.write("<b>Dobar dan, kako ste danas Monika?</b>")
}

else
{
document.write("<b>Dobar dan "+ime+" !</b>")
}

</script>




                                           Switch
                Poverite cenu za svaki slucaj na http://www.faceyubook.com


Switch je vrlo slična stvar kao i If...elseif...else, isto se koristi kada imate više mogućih uvjeta
za zadovoljenje.

Koristit ćemo iste rečenice za ista imena kao iz prošlog tutorijala samo pomoću Switch načina.

<script type="text/javascript">

ime = "Katarina"

switch (ime)
{
case "Martina":
document.write("<b>Dobar dan sefice!</b>")
break

case "Marina":
document.write("<b> O mala, sta ima? </b>")
break

case "Monika":
document.write("<b>Dobar dan, kako ste danas Monika?</b>")
break

default:
document.write("<b>Dobar dan "+ime+" !</b>")
}
</script>


Primjetite da iza svakog Casea ide dvotočka ":" i da ime npr. Monika, Marina i sva ostala
moraju biti u navodnicima. Ako pišete Case 1: Case 2: itd. znači brojevima onda vam
navodnici ne trebaju.

default: se koristi za ispis ako niti jedan uvjet nije zadovoljen (slično kao Else kod prošlog
tutorijala).




Operatori

Operatori u javascriptu su slični sa svim ostalim operatorima u drugim programskim jezicima.

Matematički operatori

Operator Funkcija Primjer
+ zbrajanje 1 + 2
- oduzimanje 4 - 3
* množenje 5 * 6
/ djeljenje 8 / 2
% ostatak 25 % 10

Uspoređivajući operatori

-koriste se da bi provjerili odnos između varijabli i/ili vrijednosti. Imaju dva rezultata :true i
false:

Operator Značenje Primjer Rezultat
== jednako $a == $b false
!= nije jednako $a != $b true
< manje od $a < $b true
> veće od $a > $b false
<= manje ili jednako od $a <= $b true
>= veće ili jednako od $a >= $b false
Funkcije u Javascriptu

Ako već imate programerskog iskustva onda vam ovo neće predstavljati neku novost. Ako
nemate, onda pažljivo proučite ovaj tutorijal.

Što je funkcija?
Funkcija je dio koda koji neprimjetno čeka dok se ne pozove. Funkcije su jako dobra stvar kod
nekih zadataka koje stalno treba ponavljati.

Funkcija se ne izvršava pri učitavanju stranice zato svaka funkcija mora biti u <head> dijelu
stranice. Kreiranje funkcije je vrlo jednostavno i brzo. Pogledajmo primjer:

<html>
<head>
<script type="text/javascript">
<!--
function popup() {
alert("Pozdrav od Tutorijali.Net tima!")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="popup()" value="Klikni"> </body>
</html>


Stvar je vrlo jednostavna. Kažete browseru da pravite funkciju sa function i dajete neko ime
funkciji, u ovom slučaju popup(). Zatim dalje pišete normalan Javascript kod. Pripazite na to
da ne izostavite vitičaste zagrade { i } prije i poslje koda.

U sljdećem tutorijalu ćemo naučiti nešto više o aleritma odnosno popup prozorima.




Alerti

Alert box može biti veoma koristan kod raznih formulara kod kojih provjerimo da li su sva
polja popunjena, ako nisu onda iskoči prozorčić (alert) i obavijesti korisnika da nisu sva polja
popunjena.

U predhodnom tutorijalu kod funkcija ste naučili ako napraviti jednostavan alert, a ovdje ćemo
se malo više pozabaviti s njima.

Evo primjera kako napraviti alert box sa više redova:

<html>
<head>
<script type="text/javascript">
function popup()
{
alert("Pozdrav svima. Kako ste, sta se radi?" + '\n' + "Evo ovo pisem u novi
redak")
}
</script>
</head>

<body>

<form>
<input type="button" onclick="popup()" value="Klikni ovdje">
</form>

</body>
</html>


Da pojasnimo. Pravite normalno alert box i onda sa + i + odvajate kod i u jednostruke
navodnike pišete \n što označava novi redak.

Confirm box
Ovdje će iskočiti alert box gdje možete birati između tipke OK i Cancel:

<html>
<head>
<script type="text/javascript">
function popup()
{
var ime=confirm("Pritisnite tipku")
if (ime==true)
{
document.write("Pritisnuli ste tipku OK")
}
else
{
document.write("Pritisnuli ste tipku Cancel")
}
}
</script>
</head>
<body>

<form>
<input type="button" onclick="popup()" value="Klikni ovdje">
</form>

</body>
</html>


Pogledajte ovdje, definirate varijablu ime sa: var ime=confirm("Pritisnite tipku") i pridodajete
joj vrijednost confirm alerta, i onda sa if (ime==true) provjeravate da li je korisnik kliknio na
OK tipku, ako je ispisuje rečenicu da ste pritisnuli OK, ako nije, kod: else {
document.write("Pritisnuli ste tipku Cancel") } ispisuje da ste kliknuli na Cancel. Vjerujem da
vam je sve jasno.

Prompt box
Prompt box vam je prozorčić gdje trebate nešto upisati. Evo primjera:
<html>
<head>
<script type="text/javascript">
function popup()
{
var ime=prompt("Unesite vase ime")
if (ime!=null && ime!="")
{
document.write("Pozdrav " + ime )
}
}
</script>
</head>

<body>
<form>
<input type="button" onclick="popup()" value="Klikni ovdje">
</form>
</body>

</html>


Dakle isto kao i kod confirm boxa i ovdje definirate varijablu ime sa: var ime=prompt("Unesite
vase ime") samo što ovdje prije zagrade piše prompt a ne confirm. Zatim sa: if (ime!=null &&
ime!="") provjeravate ako je ime upisano i ako ime nije prazno neka se ispiše rečenica.

Eto to bi bilo to, nadam se da vam je sve jasno. Ako nije pitajte :)




For Loop

For Loop se kao i u ostalim programskim jezicima koristi za ponavljanje nekog koda. U ovom
tutorijalu ćemo imati primjer ponavljanja jedne rečenice uz promjenu broja za svaki novi
redak.

Evo primjera:

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


A sada da objasnimo sve što smo napisali.
Dakle pišemo:

for (i = 0;
što znači ispisuj i, početna vrijednost slova i = 0
<= 5;
ispisuj sve dok je i manji od 5

i++
povećavaj i za jedan broj

zatim pišemo vitičastu zagradu i unutra rečenicu pomoću document.write. Sa navodnicima i
znakom + na kraju odvajamo tekst od varijable i, i ispisujemo. Document.write("<br />")
pogađate, ispisuje novi red. Zatvaramo vitičastu zagradu i zatvaramo kod sa </script> .




While Loop

While Loop je vrlo sličan For Loop načinu. Isto se koristi za ponavljanje ispisa dok se ne
zadovolji neki uvjet.

Evo primjera:

<script type="text/javascript">
i = 0
while (i <= 10)
{
document.write("The number is " + i)
document.write("<br />")
i++
}
</script>


Pa da objasnimo.

Sa
i=0


Definiramo varijablu "i" i dodajemo joj vrijednost 0.

Zatim sa
while (i <= 10)


kažemo kodu da radi "neku radnju" dok je vrijednost varijable "i" manji ili jednak broju 10.

Zatim otvaramo vitičastu zagradu { i unutra naređujemo ispis rečenice koja će se ispisivati
kao "neka radnja" iz prošlog koraka. Naravno pazite kod ispisa da varijablu "i" stavite iza
navodnika u zagradi. Ispod se ispisuje i <br /> što označava novi red.

Zatim pišemo
i++
Što govori kodu da poslje svakog ispisanog broja poveća vrijednost varijable "i" za jedan broj.
Zatim zatvaramo vitičastu zagradu } koja označava kraj onoga što je u While Loop petlji.




Do...While Loop

Do...While Loop je jedna vrsta while loop. Kod ovog ponavljanja kod će se izvršiti jednom i
ponavljat će se toliko dugo dok je određeni uvjet istinit.

Evo primjera:

<html>
<body>
<script type="text/javascript">
var i=0
do
{
document.write("Broj " + i)
document.write("<br />")
i=i+1
}
while (i<9)
</script>
</body>
</html>


Dakle, ovako bismo čitali ovaj kod: Varijabla i je 0, ispisuj Broj i dodaj vrijednost varijable i, s
tim da se kod svakog ispisa varijabla "i" poveća za 1.
Prekidanje i nastavak Loopova (Break - Continue)

U Loopovima koristimo Break i Continue da bismo prekinuli i nastavili izvršavati Loop.

Break

Naredbu Break ćemo iskoristiti da prekinemo Loop kada dođe do određenog uvjeta.
Evo primjera:


<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){break}
document.write("Broj " + i)
document.write("<br />")
}
</script>


Dakle, normalno pravimo For Loop tako da zadamo varijablu i=0 i napravimo da se varijabli i
dodaje jedan broj sve dok ne dođe do broja 10.

Ali pomoću If naredbe kažemo kodu da prekine izvršavanje koda ukoliko je varijabla i=3.

if (i==3){break}

Primjetite da je break napisano u vitičastim zagradama.

Rezultat će naravno biti:

Broj 0
Broj 1
Broj 2


Continue

Continue naredba će prekinuti odnosno preskočiti ispis kada dođe do određenog uvjeta i
nastaviti dalje. Continue naredba sama prekida pa kada koristite continue nema potrebe da
stavljate Break.
Evo primjera:

<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){continue}
document.write("Broj " + i)
document.write("<br />")
}
</script>


Sada smo u vitičaste zagrade stavili continue umjesto break što će rezultirati preskakanjem
broja 3.

Dakle rezultat će biti:
Broj   0
Broj   1
Broj   2
Broj   4
Broj   5
Broj   6
Broj   7
Broj   8
Broj   9
Broj   10




Arrays

Što su Arrays? Arrays je zapravo skup podataka sačuvan u jednoj varijabli. Npr. Ako imate
firmu sa 10 zaposlenika u jednoj varijabli ih možete imati ovako:

zaposlenik[0] = "Petar"
zaposlenik[1] = "Marko"
zaposlenik[2] = "Ivana"
...
itd.

Evo cijelog primjera:

<script type="text/javascript">

var zaposlenik = new Array()
zaposlenik[0] = "Petar"
zaposlenik[1] = "Marko"
zaposlenik[2] = "Ivana"

{
document.write(zaposlenik[1])
}
</script>


To će, pretpostavljate, ispisati na ekran "Marko".

Array možete napraviti na još jedan način:
<script type="text/javascript">

var zaposlenik = new Array("Petar", "Marko", "Ivana")

{
document.write(zaposlenik[1])
}
</script>


Ovo će također na ekran ispisati "Marko", jer je uvijek prvi podatak u arrayu nulti.




Nasumičan odabir slike

Siguran sam da ste često vidjeli, željeli ili tražili skripte čiji su poslovi nasumično izabrati
komad koda i prikazati ga, bile to slike ili nešto drugo. Takvih skripta ima na tone na internetu
a u ovom tutorijali ću vam pokazati kako napraviti svoju skriptu i objasniti svaki korak. U biti,
nema koraka nego objašnjenje uz svaku liniju koda.


<script language="JavaScript">

/*U sljedeću varijablu unesite broj koji će predstavljati broj slika koje
želite nasumično prikazati */
var broj=3;

/* Deklaracija varijable u kojoj se pomoću funkcije nasumičnog odabira kod
svakog učitavanja pridružuje nasumičan broj od 0 do vrijednosti varijable
'broj' */
var nasumicno=Math.floor(Math.random()*broj);

/* Sad dolazi dio koda u kojem upisujete kodove za vaše slike. */
if(nasumicno==0){
document.write("Ovdje unesite HTML kod za vašu prvu sliku"); }

else if(nasumicno==1){
document.write("Ovdje unesite HTML kod za vašu drugu sliku"); }

else if(nasumicno==2){
document.write("Ovdje unesite HTML kod za vašu treću sliku"); }

//Kraj skripte
</script>
To je to. Sada se sigurno pitate što ako imam više od 3 slike? Odgovor je sljedeći. Prvi korak
je promijeniti vrijednost varijable 'broj'. U nju upišite ukupan broj slika od kojih želite jednu
nasumično prikazati. Zatim, prepišite kod za ispis vaših slika za svaku dodatnu sliku i
izmijenite kod sa odgovarajućim. Također, VAŽNO je da promijenite broj u zagradi. Za svaku
sljedeću sliku broj se povećava za 1. Npr. (nasumicno==3) u (nasumicno==4) za sljedeću
sliku pa onda u (nasumicno==5) za još jednu sliku itd.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:4
posted:9/12/2012
language:Croatian
pages:16