JavaScript Osnove

Java Script osnove

Ukoliko ste novi u ovoj oblasti, preporučujemo da prvo prodjete naša četiri kursa Registracija Domena, Hosting, HTML i CSS. U slučaju da vam je sve nabrojano već poznato, nastavite…

Java Script je scripting jezik, što znači da ga je moguće izvršavati unutar neke aplikacije. Nema kompajliranja i sličnih kompleksnosti. Java Script se koristi za kreiranje dinamičkih web strana pisanih u HTML-u i CSS-u.

Da bi plastično objasnili šta znači dinamički, uzećemo jedan jednostavan HTML file, u njega staviti Java Script kod i izvršiti ga.

NAPOMENA: Prethodno treba instalirati Firefox, Firebug kao njegovu ekstenziju dok editor može biti bilo koji na koji ste navikli, pa čak i Windows Notepad.

<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<p>Ovo je jednostavna HTML stranica u okviru koje ce, kada se ucita u pretrazivac, iskociti tzv. pop up prozor sa ispisom “Pozdrav!”</p>
<script>
alert(‘Pozdrav!’);
</script>
</body>
</html>
 

Ako otvorite ovu stranu u pretraživaču, videćete da se pojavljuje pop up prozor u okviru koga je ispisano: “Pozdrav!”. To se dešava jer smo definisali Java Script komandu

alert(‘Pozdrav!’);

NAPOMENA: Java Script je case-sensitive! To znači da obraća pažnju na mala i velika slova i posmatra ih različito.

1-java-script-popup-prozor

Naravno, postavljanje komande alert je takvo da se jasno odvoji od HTML koda. Za tu namenu koristimo otvarajući i zatvarajući tag <script>

Ono sto primećujemo je sledeće: Java Script kod moguće je ubaciti u body HTML dokumenta.

Drugo što možemo primetiti je da, za slučaj da smo <script> blok stavili pre paragrafa, paragraph bi bio ispisan tek nakon što kliknemo na OK dugme popup prozora, što znači da, ovako napisan, kod se izvršava u momentu kada se na njega naidje u okviru HTML dokumenta. Da smo kojim slučajem kod stavili pre <p> taga, on bi se prikazao tek nakon što kliknemo na OK i zatvorimo prozor.

 
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<script>
alert(‘Pozdrav!’);
</script>
<p>Ovo je jednostavna HTML stranica u okviru koje ce, kada se ucita u pretrazivac, iskociti tzv. pop up prozor sa ispisom “Pozdrav!”</p>
</body>
</html>

2-java-script-popup-prozor

Ono što još primećujemo je da se popup prozor otvorio bez ikakve intervencije sa naše strane (bez klika na odredjeni element, itd.) Ovo se dešava iz razloga što njegovo izvršenje nismo uslovili ni sa čim. Naravno, moguće je usloviti otvaranje iskačućeg prozora, kao i sve ostale akcije koje se mogu izvršiti kodiranjem JavaScripta.
 

Komentarisanje Java Script koda

Komentari su prilično bitna stvar unutar svakog koda jer osobi koja ispravlja kod govore o čemu se u kodu radi ili šta se kodom želi postići. Ako komentar zauzima jednu liniju, sintaksa je //

// Komentar

U slučaju da komentar zauzima više od jedne linije, moguće je ili svaku liniju započeti znacima // ili početi sa /* a završiti sa */

Primer:

// Ovo je komentar u jednom redu

/* Ovo je komentar

Koji se pise u vise

Redova

*/

Gde staviti Java Script kod?

Teorijski, Java Script kod može biti umetnut bilo gde na HTML strani. U našem jednostavnom slučaju, Java Script kod mora biti umetnut na mestu na kome zelimo da se izvrši. Nasuprot tome, u većini slučajeva, Java script kod stavićemo odmah iznad zatvarajućeg body taga iz prostog razloga što ne želimo da usporimo učitavanje web strane. Moguće ga je umetnuti i u header delu strane kao i u body sekciju na mestu na kome nam zatreba.

U kompleksnim HTML dokumentima, sa nekoliko stotina redova koda, mnogo je bolje kod staviti u nezavisan fajl i pozvati ga po potrebi. Na taj način, HTML dokument je pregledniji ali i Java Script kod koji stavljamo u nezavisan fajl. Sintaksa kojom učitavamo Java Script kod u HTML stranu izgleda ovako:

<script src=”neki_kod.js”></script>

Nije neophodno da fajl ima ekstenziju .js mada je preporučljivo. Zašto? Samo ime taga script govori da ono što sledi jeste Java Script. Davno, kada je postojalo više scripting jezika koji su se koristili u okviru HTML dokumenata bilo je neophodno navesti i tip scripta, tj. korišćen jezik. U slučaju Java Scripta to je izgledalo ovako:

<script type=”text/javascript” src=”neki_kod.js”></script>

U HTML verziji 5 ovo više nije potrebno jer je Java Script de facto jezik koji pretraživač koristi.
 

PROMENLJIVE

Promenljiva je jasno definisan prostor u memoriji čiju vrednost program po potrebi koristi. Promenljive se u Java Script-u definišu kao:

var ime;

Moguće je ujedno dodeliti joj i vrednost:

var ime=20;

Ovim izrazom smo definisali promenljivu ime i dodelili joj početnu vrednost 20. Ova vrednost se u toku izvršenja programa može menjati. Zbog toga se i naziva promenljiva.

Moguće je više promenljivih definisati i dodeliti im vrednost u okviru jednog izraza. To pišemo kao:

Var ime=’Bratimir’, prezime=’Timotijevic’, godiste=1974;

 

TIPOVI PROMENLJIVIH

U Java Script jeziku, tipovi promenljive se ne definišu eksplicitno. U zavisnosti od toga koju vrednost dodelite promenljivoj, Java Script će je posmatrati kao broj, tekst ili Boolean, niz ili objekat.

Nekoliko primera brojeva:

var broj1=200;
var broj2=200.34;

Nekoliko primera tekstualne promenljive (string):

var ime1=’Neki tekst’;
var ime2=’Milan’;

NAPOMENA: Primećujete da se mogu koristiti jednostruki i dvostruki navodnici, svejedno je.

Boolean promenljive mogu imati samo dve vrednosti: true ili false. Ove dve reči se pišu malim slovima i posmatraju kao službene reči. Ako ih napišete pod navodnicima, Java Script će ih posmatrati kao tekstualnu promenljivu, na primer:

var text1=’true’;

nije Boolean tip već tekstualni.
 

USLOVI ZA IZVRŠENJE KODA

Ukoliko želimo da se odredjeni blok koda (jedan ili više izraza) izvrši u slučaju da je neki uslov ispunjen, to ćemo uraditi na sledeći način:

if (uslov){
// izvrsi ovaj kod
}

Šta ovo znači? Ukoliko je uslov ispunjen, što JavaScript tumači kao true ili false, izvrši kod koji se nalazi u okviru velikih zagrada {}. Ukoliko nije, preskoči ovaj kod.

Postoji mogućnost ispitivanja više uslova, i tada kod izgleda:

if (uslov){
// izvrsi ovaj kod
} else{
// izvrsi ovaj drugi kod
}

Prevedeno, ovo znači: ukoliko je uslov unutar zagrada () ispunjen izvrši kod unutar velikih zagrada, u suprotnom, izvrši kod unutar zagrada koje slede posle reči else.

Primer:

var x=200;
if(x>200){
alert(‘x je vece od 200!’);
}else{
alert(‘x je manje ili jednako 200’);
}
 

OSNOVNE MATEMATIČKE OPERACIJE

Slično matematici, u Java Scriptu za operacije sabiranja, oduzima, množenja i deljenja koristimo simbole +,-,* i /.

U slučaju da nekoj početnoj vrednosti promenljive želimo da dodamo neki broj, to zapisujemo kao:

var x=50;
x=x+50;

Ovo možemo zapisati i skraćeno, kao

x +=50;

i imaće isto značenje.

Ovo možemo primeniti i na ostale aritmetičke operacije:

var x=100;

x -=50;   // daće rezultat 50

x*=2;     // daće rezultat 100

x /=3;   //daće rezultat 33.333
 

POREDJENJE PROMENLJIVIH

Ukoliko želimo da ispitamo odnos izmedju dve promenljive, za to koristimo sledeće znakove

==          //da li su isti po vrednosti?

===        //da li su isti i po tipu i po vrednosti?

!=          //da li nisu jednaki po vrednosti?

!==         //da li nisu jednaki i po tipu i po vrednosti?

<=           //da li je vrednost prve promenljive manja ili jednaka vrednosti druge promenljive

>=           //da li je vrednost prve promenljive veća ili jednaka vrednosti druge promenljive

 

NAPOMENA: Najcešća greška pri korišćenju ovih operatera je pri poredjenju da li su dve vrednosti jednake. Daćemo primer:

var x=20;
var y=50;

if(x==y){
alert(‘x je jednako y’);
}

Ukoliko, slučajno napišemo:

var x=20;
var y=50;
if(x=y){
alert(‘x je jednako y’);
}

Ovaj izraz će uvek biti tačan jer mi ustvari sa jednim znakom jednako ne ispitujemo da li je x jednako y već promenljivoj x dodeljujemo vrednost koju ima promenljiva y. Takav izraz je u programiranju uvek tačan, pa se ovakvih grešaka treba kloniti.

Treba pojasniti koja je razlika izmedju znaka == i === (isto vazi i za != i !==)

Uzmimo na primer sledeći slučaj:

x=5;
y=’5’;

U ovom slučaju, Java Script će promenljivu x posmatrati kao broj a promenljivu y kao tekst.

Ukoliko bi poredjenje izveli sa znakom == , tj.

if(x==y){
alert(‘x je jednako y’);
}

program bi ovaj izraz smatrao istinitim. Ukoliko bi ispitivanje izvršili sa ===, dobili bi da izraz nije istinit jer tip promenljive nije isti (x je broj a y tekst)

Moja preporuka je da uvek koristite === jer time izbegavate greške koje se mogu pojaviti.
 

VIŠESTRUKI USLOVI

Ukoliko izraz treba da zadovolji više izraza, koristimo operatere && i ||

Na primer:

a=5;
b=10;
c=12;
d=3;

Izraz bi mogli napisati:

if( a<b && c>d){
alert(‘a je manje od b i c je vece od d’)
}

Ovde je uslov ispunjen samo ako su oba izraza tačna.

Drugi izraz:

if( a<b || c>d){
alert(‘a je manje od b ili je c je vece od d’)
}

Postoji još jedan operater koji se koristi i naziva se modulus a predstavlja kao %. Sličan je deljenju (u smislu da deli dva broja) ali je razlika u odnosu na deljenje što je rezultat takvog izraza broj koji ostaje kada se od celog broja oduzme ostatak.

Primer:

a=5;
b=4;
a%b //daće rezultat 1 jer je 5 podeljenjo sa 4 jedan ceo i 1 koji predstavlja ostatak.

Evo i dodatnih primera

10%3 //daće rezultat 1

12%3 //daće rezultat 0 jer je rezultat ceo broj bez ostatka

8%5 //daće rezultat 3 jer se 5 sadrzi u osam jednom i ostatak je 3

Postoji još jedna vrsta kombinovanja matematičkih aritmetičkih operatera + i – a to je kada ih pišemo udvojeno (++ ili –)

Ako želimo da vrednost promenljive povećamo ili smanjimo za jedan, napisaćemo to kao

var x=1;
x++;
alert(x);       //daće izlaz 2 jer smo sa x++ vrednost promenljivex sa 1 povećali na 2

Slično bi se desilo i sa oduzimanjem:

var x=5;
x–;
alert(x);           //daće izlaz 4 jer smo sa x++ vrednost promenljive x sa 5 smanjili na 4

Ovaj način zapisivanja je ustvari identičan izrazima

x=x+1 ili x=x-1

koje smo ranije rekli da mogu biti prikazani kao x+=; ili x-=;

Ovaj način zapisivanja, x++ ili x– je specijalan slučaj povećavanja ili smanjivanja za jedan i često se koristi u petljama o kojima ćemo kasnije pričati.

Tercijarni operater

Ovaj način zapisivanja izgleda ovako:

var a=5;
var b=7;
(a>b)?alert(‘b je vece od a’):alert(‘b je manje od a’);

Da bi razumeli, ovo je skraćen izraz izraza:

var a=5;
var b=7;
if(a>b){
alert(‘b je vece od a’);
}else{
alert(‘b je manje od a’);
}

Znači, dobija se isto ali se sam kod piše znatno kraće. Ukoliko nam posle ovog ispitivanja treba i da uskladištimo rezultat, na primer u slučaju:

var skor_prvog_igraca=5;
var skor_drugog_igraca=7;
if(skor_prvog_igraca > skor_drugog_igraca){
var najveci_skor=skor_prvog_igraca;
}else{
var najveci_skor=skor_drugog_igraca;
}

onda ćemo to zapisati kao:

var najveci_skor = (skor_prvog_igraca > skor_drugog_igraca)? skor_prvog_igraca : skor_drugog_igraca;

U ovom slučaju, promenljivoj najveci_skor dodeljujemo koja god da je veća vrednost, da li prvog ili drugog igraca. Prevedeno, znači:

ukoliko je skor prvog igrača veći od skora drugog igraca, promenljivoj najveci_skor pridruži vrednost promenljive skor_prvog_igraca, u suprotnom joj dodeli vrednost_drugog_igraca

 

PETLJE (LOOPS)

U velikom broju slučajeva, imaćemo potrebu da odredjeni kod izvršimo nekoliko puta. U tom slučaju koristimo tzv. petlje. Petlje su programske celine koje izvršavaju blok koda odredjeni broj puta.

U Java Script-u postoji nekoliko vrsti petlji: for, while, foreach.

WHILE petlja

While petlja se izvršava dogod je uslov ispunjen, tj. istinit. Pogledajmo primer:

var a=1;
while(a<5){
// izvrsi neki kod
a++;
}

Ovde prvo vrednost promenljive a definišemo kao vrednost 1 i postavljamo uslov da se kod ponavlja dogod je vrednost promenljive a manja od broja 5. Svaki put kada se kod izvrši, mi vrednost promenljive a povećamo za jedan. To postižemo kroz a++; komandu.

Prevedeno: ukoliko je vrednost a manja od pet, izvrši kod. Pošto je na početku vrednost promenljive 1, kod ce biti izvršen. Vrednost promenljive povećavamo na 2 i ponovo ispitujemo uslov, ali ovoga puta da li je 2 manje od 5. Takodje ispunjen i kod će se ponovo izvršiti. Sada je vrednost promenljive 3. Opet je uslov ispunjen i može se izvršiti kod. To će se desiti jos jednom, kada vrednost promenljive povećamo na 4 a u poslednjoj iteraciji kod više neće biti izvršavan jer je vrednost sada 5 i uslov nije ispunjen. Ovo je ujedno i trenutak kada se while petlja završava i izvršavanje koda koji je ispod nje, počinje.

FOR petlja

Ova petlja služi istoj svrsi kao i WHILE. Razlika je u sintaksi. Pogledajmo primer:

for(i=1 ; i<10 ; i++){
// izvrši blok koda
}

Prevedeno, mi u okviru izraza postavljamo vrednost promenljive i, proveravamo da li je uslov ispunjen i govorimo kako će se menjati vrednost koju ispitujemo. U ovom primeru:

promenljiva i je postavljena na vrednost 1 i dogod je manja od 10 kod će se izvršavati a njena vrednost će se povećavati za jedan u svakom prolasku kroz petlju.

Vrednost promenljive ne mora da se povećava ili smanjuje za jedan (i++ ili i–) već to može biti proizvoljna vrednost. Na primer, ukoliko želimo da se vrednost promenljive menja tako što će se povećavati u svakom prolasku za 4, napisaćemo i +=4 ili ukoliko želimo da se povećava duplo, napisaćemo i *=2. Primer:

 

var i;
for(i=1;i<35;i *=2){
alert(i);
}
 

Komanda BREAK

Ova komanda nas izbacuje iz petlje, tj. nakon nje prestaje izvršavanje, čak i pod uslovom da uslov definisan u petlji i dalje važi. Primer:

for(i=1; i <10; i++){
if(i==5){break;}
alert(i);
}

U ovom primeru, biće ispisane vrednosti 1,2,3,4 i nakon što vrednost promenljive i dodje na vrednost 5 izvršenje petlje se zaustavlja i nasilno prekida. U slučaju da želimo da nastavimo sa izvršenjem petlje, sem u slučaju da je vrednost promenljive i=5 koristićemo komandu continue; pa će kod izgledati ovako:

for(i=1; i <10; i++){
if(i==5){continue;}
alert(i);
}

Znači, biće ispisane vrednosti 1,2,3,4,6,7,8 i 9. Jedino broj 5 neće biti ispisan.

Dašemo jos jedan primer. U njemu ne želimo da ispisujemo nijedan broj koji je deljiv sa 5. To ćemo postići korišćenjem modulo operatera %:

for(i=1; i <100; i++){
if(i%5==0){continue;}
alert(i);
}

a ukoliko ne želimo ni brojeve deljive sa 2, modifikovaćemo ga kao:

for(i=1; i <100; i++){
if(i%5==0 && i%2==0){continue;}
alert(i);
}

 

FUNKCIJE

Šta su funkcije?

Ako želimo da jedan blok koda izvršavamo po potrebi na mnogim mestima , zapisaćemo taj kod i daćemo mu ime. To ime će biti ime funkcije. Sintaksa

function ispis(){
alert(‘Ovo je funkcija’);
}

Onda ćemo je pozvati , gde god nam u kodu zatreba sa navodjenjem njenog imena, u obliku:

ispis();

Ovo je najprostiji oblik funkcije. Zašto? U primeru iznad funkcija nema nikakve argumente koje joj prosledjujemo. Argumenti se navode unutar zagrada koje se nalaze posle imena funkcije. U našem slucaju, ako želimo da ispišemo vrednost promenljive u okviru web strane, napisaćemo:

function ispis(){
alert(‘Ovo je funkcija’);
}

Drugi primer koji ćemo pogledati je primer u kome funkciji prosledjujemo parametre. Pogledajmo kod:

function mnozenje(x,y){
alert x*y;
}

Ovoj funkciji prosledjujemo argumente nad kojima vršimo odredjene manipulacije unutar funkcije, u ovom slučaju operaciju množenja.

Iz programa je pozivamo navodjenjem vrednosti parametara x i y. U ovom slučaju, x i y nije potrebno prethodno deklarisati kao promenljive već je dovoljno napisati sledeće:

mnozenje(2,5);

Ovim će funkciji množenje za parameter x biti pridružena vrednost 2 a parametru y vrednost 5

Rezultat izvršenja ove funkcije biće popup prozor sa ispisanim brojem 10.

Šta ako ne želimo da ispišemo vrednost u okviru popup prozora, tj. želimo da vrednost dobijenu izvršenjem funkcije upotrebimo za neka dalja izračunavanja? U tom slučaju, u samoj funkciji dodaćemo službenu reč return ispred izraza x*y a vrednost funkcije uskladištiti u promenljivu pri pozivanju. Sama funkcija izgledaće ovako:

function mnozenje(x,y){
return x*y;
}

A pozivanje i smeštanje u promenljivu rezultat biće napisano kao:

var rezultat=mnozenje(2,5);

Šta se dešava u slučaju da funkciji prosledjujemo različit broj parametara od onog koji ona pretpostavlja? Na primer, šta ako funkciju definišemo sa 2 ulazne promenljive a pozovemo je sa navodjenjem 3?

function mnozenje(x,y){
return x*y;
}

pozivanje i smeštanje u promenljivu rezultat biće napisano kao:

var rezultat=mnozenje(2,5,7);

U slučaju Java Scripta, treća vrednost 7 ce biti ignorisana, tj. funkcija će prvu vrednost asocirati uz x, drugu uz y a treću ignorisati.

Postoji i druga opcija a to je, šta ako prosledimo manje parametara funkciji od broja parametara koje ona očekuje?

Nedostajuće vrednosti biće setovane kao undefined i za slučaj da ta opcija nije predvidjena u funkciji, doći ce do greške u izvršavanju. Ovaj scenario bi izgledao ovako:

function mnozenje(x,y){
return x*y;
}
var rezultat=mnozenje(2);

U ovom slučaju, vrednost promenljive x će biti 2 dok će promenljiva y biti nedefinisana – NaN. Ove situacije naravno treba izbegavati.

 

OPSEG PROMENLJIVIH UNUTAR FUNKCIJE

Promenljiva koju definišemo u okviru funkcije lokalnog je karaktera što znaci da njeno direktno pozivanje van funkcije neće imati smisla, tj. doći ce do greške. Ukoliko želimo da promenljiva bude vidljiva, tj. upotrebljiva i van funkcije, onda ćemo je eksplicitno definisati van funkcije. Primer kada je promenljiva vidljiva samo unutar funkcije:

function opseg(){
var x=500;
alert(x);
}

Kao što pretpostavljate, pozivanje ove funkcije izbaciće popup prozor sa ispisom 500. Ukoliko, van tela funkcije pokušamo sledeće:

alert(x);

nećemo uspeti, tj. dobićemo grešku da promenljiva nije definisana.

Ukoliko ipak želimo da promenljiva x i njena vrednost budu dostupne i kodu izvan funkcije onda ćemo promenljivu x definisati izvan funkcije a unutar funkcije izostaviti službenu reč var:

var x;
function opseg(){
x=500;
}
 

Sada, ako izvan funkcije pokušamo da je pozovemo sa alert(x); ipak ce doći do greške jer je nismo prethodno pozvali tj. definisali izvršenjem funkcije. Tako da ono što moramo uraditi izvan funkcije svodi se na dve stvari:

Prvo pozovemo funkciju:

opseg();
 

a zatim koristimo promenljivu iz funkcije:

alert(x);

NIZOVI

Nizovi su promenljive koje u sebi sadrže više vrednosti. Da bi ovo pojasnili pogledaćemo primer definisanja obicne promenljive.

var x;

x=500;

Prvo smo definisali promenljivu x a zatim joj dodelili vrednost. Mi možemo naknadno da joj promenimo vrednost ali u datom momentu promenljiva može da uskladišti samo jednu vrednost!
 

Sada pogledajmo kako se definiše niz:

var x =[];

Sa otvorenom i zatvorenom zagradom mi saopštavamo Java Scriptu da želimo da kreiramo promenljivu koja će sadržati više od jedne vrednosti.

Kako dodeljujemo vrednosti promenljivoj?

var x=[];
x[0]=54;
x[1]=33;
x[2]=’Milan’;
x[3]=66;

Ovim smo kreirali promenljivu koja sadrži četiri vrednosti. 0,1,2 i 3 unutar zagrada govore na kojoj poziciji unutar promenljive se nalazi neka vrednost.

NAPOMENA: Pozicije za skladištenje u okviru promenljive tipa niz počinju od nule, ne od broja jedan!

Kako pozivamo vrednost unutar niza? Takodje, navodjenjem imena promenljive/niza i navodjenjem pozicije unutar nje:

alert (x[2]);          //daće kao izlaz Milan

Kako menjamo neku od vrednosti unutar niza? Takodje, navodjenjem imena niza i pozicije i dodeljivanjem nove vrednosti, baš kao i u slučaju obične promenljive.

x[2]=’Zoran’;

alert (x[2]);          //daće kao izlaz Zoran ovog puta, tj. Milan više ne postoji kao element niza.

 

Postoji brži način definisanja članova niza od prikazanog. Tako više članova možemo zapisati kao:

var x=[54,33,’Milan’,66];

Ovim će automatski 54 biti na poziciji x[0] a 66 na poziciji x[3].
 

Ono što je zanimljivo za nizove je da su oni ustvari specijalni tipovi promenljivih, tzv. objekti. Objekti su promenljive koje imaju svojstva i metode kojima se manipuliše nad njima.

Recimo na primer da želimo da utvrdimo koliko neki niz ima članova, tj. vrednosti. To ćemo postići iskazom:

x=[10,20,30,40,50];

alert (x.length);                 //daće izlaz 5

U ovom slučaju, svojstvo length daje podatak o tome koliko članova predmetni niz sadrži.

Druga stvar koju smo pominjali su metode. Metode su ustvari funkcije koje se mogu primenjivati nad objektima, u ovom člucaju nizovima. Daćemo primer metode reverse()

NAPOMENA: Za razliku od svojstava, metode iza imena obavezno imaju otvorenu i zatvorenu zagradu ()

x=[10,20,30,40,50];
var obrnuto=x.reverse();
alert (obrnuto);

Ovim ćemo dobiti ispis na ekranu 50,40,30,20,10
 

Takodje, možemo sortirati niz pomoću metode sort(). Uzmimo za primer niz definisan kao:

x=[20,30,15,50,65,22,70];
alert(x.sort);

Ovim dobijamo izlaz u obliku 15,20,22,30,50,65,70 gde vidimo da su članovi preuredjeni od najmanjeg ka najvećem.

Još jedna metoda koju ćemo obraditi je join(). Ova metoda niz iz forme niza prebacuje u najobičniji tekst razdvojen zarezima.
 

x=[15,22,3,44,53,12];
alert(x.join());

Neka vas ne zbunjuje činjenica da ce korišćenjem komande alrt() prikaz biti identičan kao i u prethodnim primerima, članovi niza razdvojeni zarezima.

Najbolje ćemo videti razliku ako metodi join kažemo da kao parameter koji služi za razdvajanje članova umesto zareza, pri konvertovanju u string koristi neki drugi znak, na primer *

x=[15,22,3,44,53,12];
alert(x.join(‘*’));
 

OBJEKTI ZA MANIPULISANJE PROMENLJIVIH

OBJEKAT VEZAN ZA BROJEVE – Math

Često ćemo pri korišćenju brojeva imati potrebu za njihovom modifikacijom. Jedna od mogućnosti je ugradjen objekat Math. Daćemo nekoliko primera kako bi videli o Čemu se radi:

Ukoliko želimo da zaokružimo neki broj, napisaćemo sledeći izraz:

x=200.6;
var zaokruzen=Math.round(x);

U ovom primeru izlaz će biti 201, iz razloga što metoda round objekta Math svaki broj čiji je decimalni deo veći ili jednak 0.5 vrednost decimalnog broja zaokružuje na veću vrednost a sve brojeve sa manjim decimalnim ostatkom od 0.5 zaokružuje na manju vrednost.

za slučaj da je x=200.45 izlaz bi bio 200.

Još neke komande koje ćemo često sretati su:

var niz=[20,30,55];
var najveci=Math.max(niz);           //daće izlaz 55
var najveci=Math.min(niz);            //daće izlaz 20

var nasumicna=Math.random();   //daće kao izlaz slucajni broj u opsegu od 0 do 1

var kvadratni_koren=Math.sqrt(5);      //daće kao izlaz kvadratni koren od 5
 

MANIPULACIJA NAD PROMENLJIVIM TIPA TEKST (STRINGS)

Prvo na šta bi skrenuo pažnju kod stringova je kako unutar navodnika postaviti navodnike? Na primer:

var tekst=’Ovo je bila ‘najludja’ noc koju “mozete” da zamislite.’;

Za ovu namenu koristimo tzv. escape karaktere koji govore Java Scriptu da ih ne posmatra kao deo sintakse, pa bi prethodni primer trebalo napisati kao:

var tekst=’Ovo je bila \‘najludja\’ noc koju \“mozete\” da zamislite.’;

 

 

Obzirom da je string ugradjeni objekat u Java Scriptu taj objekat ima svoja svojstva kao i metode manipulacije nad njim.

Jedno od svojstava predstavlja odredjivanje dužine stringa:

var nekitekst=’Ovo je jedna prosta recenica.';
var duzina=nekitekst.length;
alert(duzina);      //daće kao izlaz 29 jer se računaju i blank-ovi
 

Po pitanju tekstualnih promenljivih, postoji veliki broj metoda za njihovu manipulaciju. Neke od njih:

var neki_tekst=’Ovo je jedna prosta recenica.';
var sve_velika_slova=neki_tekst.toUpperCase();
alert(sve_velika_slova);                 //daće kao izlaz OVO JE JEDNA PROSTA RECENICA

 

var neki_tekst=’Ovo je jedna prosta recenica.';
var sve_velika_slova=neki_tekst.toLowerCase();
alert(sve_velika_slova);                 //daće kao izlaz ovo je jedna prosta recenica

 

Ukoliko želimo da našu rečenicu pretvorimo u niz čiji će svaki član imati po jednu reč:

var neki_tekst=’Ovo je jedna prosta recenica.';
var sve_velika_slova=neki_tekst.split(“ ”);

alert(sve_velika_slova);                 //daće kao izlaz niz koji ce imati 5 članova (Ovo, je,jedna,prosta,recenica)

NAPOMENA: Ovde je kreiran niz na ovaj način jer smo mu rekli da članove niza razdvaja na svim mestima gde naidje na prazninu (blank space)

Ukoliko želimo da saznamo na kojoj poziciji unutar stringa počinje neka reč, kreiraćemo kod:

var neki_tekst=’Ovo je jedna prosta recenica.';
var pozicija=neki_tekst.indexOf(‘jedna’);
alert(pozicija);                   //daće kao izlaz 7 (jer brojanje počinje od nule, tj. prvo slovo je na poziciji 0)
 

U prethodnom primeru, ukoliko reč koju tražimo ne postoji, vrednost koju će nam vratiti je -1. Ukoliko postoji više puta pomenuta reč, vratiće nam kao izlaz poziciju prve.
 

Za vise informacija o svim raspoloživim metodama:

http://developer.mozillla.org/en.JavaScript/Reference

 

RAD SA DATUMIMA

U okviru Java Scripta postoji objekat pod imenom Date(). Ovaj objekat se koristi za prikazivanje datuma i vremena kao i za manipulaciju istih.

Sintaksa za kreiranje novog objekta koji će naslediti sve metode i svojstva ovog objekta je

var datum = new Date();

Ovako napisano daće izlaz:

Sun Sep 21 2014 08:52:59 GMT+0200 (Central Europe Standard Time)

Ukoliko ne želimo da smestimo vrednost današnjeg datuma u promenljivu datum, već nekog u prošlosti ili budućnosti, to možemo definisati unutar zagrada nakon službene reči Date navodjenjem ukupno šest parametara tako da dodjemo do tačnosti od 1 sekunde. Parametri su redom: godina, mesec, dan (u mesecu), sat, minut i sekund.

NAPOMENA: Mesec izražen brojem kao i sat počinju od vrednosti 0. Pa je Januar 0 a Decembar 11

var datum = new Date(2014,5,15,3,43,12);

 

U promenljivu datum biće uskladištena informacija o datumu 15. jun 2014, 3h 43min 12sec.

Ono što je zanimljivo je da će biti korišćen default format koji izgleda kao u prethodnom primeru:

Sun Jun 15 2014 03:43:12 GMT+0200 (Central Europe Standard Time)
 

Obzirom da ćemo objekat Date() uglavnom koristiti za razne vrste preračunavanja, tipa koliko je prošlo od nekog datuma da danas i slično, ovakav format datuma nam to neće omogućiti. Razlog za to je što obicna poredjenja aritmetičkim operatorima <,>,<=,>=, !== ne razumeju strukturu datuma ovako napisanog. Za to će nam koristiti jedna od metoda ovog objekta. Pre nego damo primer treba naglasiti da postoje dve grupe metoda ovog objekta, grupa koja počinje rečju get i druga koja počinje rečju set.

Neke od get metoda:

getMonth()          //daje izlaz u vidu broja od 0-11

getFullYear()       //daje izlaz u vidu četvorocifrenog broja godine YYYY

getDate()             // daje izlaz dana u mesecu 0-31

getDay()               // daje izlaz u vidu broja 0-6 gde je 0 nedelja

getTime()             //daje izlaz u milisekundama i koristi se za poredjenje datuma
 

Kako ih koristimo?

Ako zelimo da za vrednost neke promenljive kreirane od objekta Date postavimo mesec u kome smo trenutno (septembar), to ćemo zapisati kao:

var datum = new Date();

alert(datum.getDay());

Izlaz će biti vrednost 0 što znači da je dan nedelja.

Ukoliko bi to želeli da prikažemo kao ime dana, kreiraćemo niz koji ce vrednosti od 0-6 da pridruži imenima dana u nedelji:

var datum = new Date();
var dan_kao_broj = datum.getDay();
var sedmica = [
‘Nedelja’,
‘Ponedeljak’,
‘Utorak’,
‘Sreda’,
‘Cetvrtak’,
‘Petak’,
‘Subota’,
]
alert(sedmica[dan_kao_broj]);
 

Sada će izlaz biti: Nedelja

U drugom primeru ćemo izračunati koliko je dana proteklo od 14. septembra 2010-e godine?

var tada = new Date(2010,8,14); //postavljamo datum u prošlosti

var sad= new Date();                                      //postavljamo današnji dan
 

tada=tada.getTime();                                     //pretvaramo tadasnji datum u milisekunde

sad=sad.getTime();                                         //pretvaramo današnji datum u milisekunde
 

var broj_sekundi=sad-tada;                          //dobijamo rezultat u milisekundama

 

var broj_dana = broj_sekundi/1000/60/60/24;       //prevodimo u broj dana
 

broj_dana = Math.floor(broj_dana);                         //svodimo na ceo manji broj

 

alert(broj_dana);                                                           // kao rezultat dobijamo 1468

 

Treba primetiti da ćemo često samo vršiti poredjenje dva datuma. Tada takodje moramo da prevedemo datume u format koji JavaScript može da poredi, a to postižemo ranije pomenutom metodom objekta Date – getTime();

 

OBJEKTI u Java Script jeziku

 

Do sada smo koristili neke od ugradjenih objekata kao što su Array, Date, itd. Videli smo da ti objekti mogu imati ugradjena svojstva i metode. Na primer, svojstvo objekta Array je length i prikazujemo ga kao:

 

var niz = new Array();
niz[0]=’Milan’;
niz[1]=’Dragan’;
niz[2]=’Milica’;
niz[3]=’Zorica’;
alert(niz.length); //daje izlaz 4

 

Takodje, u prethodnom primeru imali smo objekat Date() i koristili njegovu metodu getTime kako bi ga predstavili u milisekundama, lako za poredjenje.

Ako bi morali da definišemo objekat u JavaScriptu onda bi to bilo:

Objekat predstavlja grupu promenljivih i funkcija. Znači, objekat predstavlja skup promenljivih i funkcija koje se mogu vršiti nad promenljivima unutar objekta.

 

Sintaksa kreiranja objekta je sledeća:

var korisnik=new Object;

ili

var korisnik={};

Pored toga što definišemo promenljivu kao tip objekat, tu promenljivu istovremeno mozemo popuniti i svojstvima i metodama.

 

var korisnik = {
ime: ‘Bratimir’,
prezime: ‘Timotijevic’,
godiste: ‘1974’,
mesto_rodjenja: ‘Beograd’,
ispisi: function () {
alert(this.ime + ‘ ‘ + this.prezime + ‘ je rodjen ‘ + this.godiste + ‘-e godine u ‘+this.mesto_rodjenja+’u.’);
}
}
 

Sada možemo pozvati neka od svojstava kao i funkciju ispisi() na sledeći način:
 

alert(korisnik.ime);
alert(korisnik.prezime);
 

ili metodu koja će ispisati sve podatke:
 

korisnik.ispisi();
 

Prethodnim kodom kreirali smo objekat koji ima svoje promenljive i funkcije (u ovom slučaju jednu).

Ako bi želeli da jednu funkciju koristi više objekata, napisali bi:
 

var korisnik1 = {
ime: ‘Bratimir’,
prezime: ‘Timotijevic’,
godiste: ‘1974’,
mesto_rodjenja: ‘Beograd’
}

var korisnik2 = {
ime: ‘Djordje’,
prezime: ‘Mitrovic’,
godiste: ‘1988’,
mesto_rodjenja: ‘Zrenjanin’
}
 

function ispisi () {
alert(this.ime + ‘ ‘ + this.prezime + ‘ je rodjen ‘ + this.godiste + ‘-e godine u ‘+this.mesto_rodjenja+’u.’);
}

 
korisnik1.ispisi=ispisi;
korisnik2.ispisi=ispisi;

 
korisnik1.ispis();
korisnik2.ispis();

 

Ovo treba malo objasniti. Šta smo mi ovde uradili?

Prvo smo definisali dva objekta korisnik1 i korisnik2 sa pridruženim svojstvima. Metod smo izbacili, kreirajući funkciju ispisi koja radi isti posao kao u prethodnom primeru ali nije vezana ni za jedan od objekata.

Dalje imamo kod:

korisnik1.ispisi=ispisi;
korisnik2.ispisi=ispisi;
 

Ovim kodom smo svakom kreiranom objektu ( u ovom slučaju objektima korisnik1 i korisnik2) definisali metodu ispisi koja će funkciju ispisi pridružiti objektu kao njegovu metodu.

Na kraju smo štampali obe metode u obliku popup prozora.
 

Dva najvažnija objekta u Java Script jeziku su document i window o kojima će biti reči malo kasnije.

 

PROTOTYPE konstruktor

 

U Java Scriptu ne postoji klasična klasa (poznata onima koji su izučavali OOP nekog drugog jezika). Nešto što na to podseća može se podvesti pod prototip. Prototip se definiše kao prototip funkcija kojom definišemo metode objekta koji kreiramo.
 

Daćemo jedan primer.

Prvo kreiramo funkciju koja će “izigravati klasu”. U nju smeštamo sva svojstva koja objekti, iz nje nastali, treba da imaju.

function Igrac(svojstvo1, svojstvo2, svojstvo3,…){
this.svojstvo1 = s1;
this.svojstvo2 = s2;
this.svojstvo3 = s3;

}

Zatim, da bi kreirali metode tog objekta, koristimo sledeću sintaksu:
 

Igrac.prototype.ispis = function(){
// metode objekta Igrac
};

Ovim smo kreirali metodu ispis i ključnom reči prototype je vezali za funkciju Igrac, čime smo simulirali kreiranje klase, tj. omogućili da svi objekti kreirani od objekta Igrac sadrže svojstva i metode te funkcije (objekta u ovom slučaju)

Nakon toga, kreiramo objekte koji će sadržati sva svojstva i metode definisane u prototip funkciji Igrac.
 

var Dragan = new Igrac(svojstvo1, svojstvo2, svojstvo3,…);
Milan = new Igrac(svojstvo1, svojstvo2, svojstvo3,…);
….
 

Sada ćemo napisati konkretan primer:

Prvo kreiramo funkciju Ucenici sa svojstvima:

 

function Ucenici(ime, prezime, godiste){
               this.ime = ime;
               this.prezime = prezime;
               this.godiste = godiste;
}
 

Zatim definišemo metodu ključnom reči prototype i povezivanjem sa funkcijom Igrac

 

Ucenici.prototype.ispis = function (){
alert(‘Ime ucenika : ‘ + this.ime + ‘\n\rPrezime ucenika: ‘ + this.prezime + ‘\n\rGodiste: ‘ + this.godiste );}
 

Zatim definišemo dva objekta ‘klase’ Ucenici:

var Milan = new Ucenici(‘Milan’, ‘Petrovic’, 1975);
var Dragan = new Ucenici(‘Dragan’, ‘Stojkovic’, 1975);
 
 

I na kraju pozivamo metodu ispis na oba objekta:

 

Milan.ispis();
Dragan.ispis();

DOM – Document Object Model

DOM predstavlja dogovoren način pristupanja elementima web strane.

DOM svaki element na stranici posmatra kao node i omogućava (u ovom slučaju Java Scriptu) da tom elementu pristupi u cilju njegove modifikacije. U ovom modelu postoji i hijerarhija pa je moguće utvrditi šta je nekom elementu “roditelj” ili “dete”. Možda će biti lakše da pogledamo primer HTML koda jedne web strane (levo) i slikovit prikaz tog istog dokumenta u strukturi DOM-a (desno):

3-java-script-dom-model

Na levoj strani je jednostavna html strana. Na desnoj je njena hijerarhijska predstava. Svi elementi predstavljeni u hijerarhiji nazivaju se nodovi i svaki od njih poseduje podatke o tome ko mu je roditelj a ko dete. Na primer, roditelj element za BODY node je HTML node dok su mu deca H1, P i UL.

Čemu nam ovo služi?

Pa, putem poznavanja DOM strukture HTML web strane, moguće je izvršiti razne akcije nad elementima te iste strane. Neki od primera šta je moguće uraditi:

  • saznati tekst title taga
  • uzeti drugi paragraf <p>
  • uzeti treći link u meniju i sakriti ga sa display:none;
  • promeniti pozadinsku sliku svih paragrafa sa klasom “vazan”
  • uzeti sve li elemente u poslednjoj neuredjenoj listi
  • pronaći sliku sa id-jem logo i pomeriti je 40px levo
  • promeniti neki link tako da inicira java script funkciju kada se na njega klikne
  • kreirati novo neuredjenu listu i staviti je izmedju drugog i trećeg paragrafa

U DOM-u postoji preko 10 tipova nodova ali oni koji su nama od najvećeg značaju su: ELEMENT, ATRIBUT i TEXT.

Kako bi stvari bile jasnije, atribut i tekst su “podelementi” noda ELEMENT. Daćemo primer sva tri tipa noda kroz jedan primer:

<a href=’http://www.google.com’ alt=’Sajt Google-a’>Idi na Google</a>

U ovom primeru ELEMENT node je sam <a> tag, a njegovi “podnodovi” su :

ATRIBUT nodovi – href=’http://www.google.com’ I alt=’Sajt Google-a’

TEXT nod je sam tekst ispisan u ekranu pretraživača – “Idi na Google

Drugi primer prikazan je na slici ispod:

4-java-script-dom-model-nodovi

Ovde imamo ELEMENT nod UL koji sadrži ATRIBUT node id ali ne i text node. Zašto? Zato što u okviru UL taga tekst nije ni predvidjen.

Dalje imamo stavke neuredjene liste <li> koje same za sebe predstavljaju ELEMENT nodove, sa svojim TEXT nodovima. Oni, za razliku od ul ELEMENT noda u ovom slučaju nemaju ATRIBUT nod, mada je teorijski moguće.
 

Kako dolazimo do elementa na kome želimo da radimo?

Prvo pitanje koje sebi postavljamo je da li je element jedinstven po nečemu? U slučaju primera iznad, vidimo da je UL element jedinstven po atributu id. Ukoliko, kao u ovom slučaju, imamo id koji možemo da iskoristimo za targetiranje, sintaksa će izgledati ovako:

document.getElementById(‘optionList’);

Ovde treba objasniti službenu reč document. Ona predstavlja najviši element u DOM hijerarhiji web stranice, tj. možemo je posmatrati kao root element ili koreni element DOM-a.

Da li nam je gornji izraz dovoljan za manipulaciju? Odgovor je-ne. Ono što radimo je da kreiramo promenljivu i u nju smeštamo sadržaj gornjeg izraza

var lista = document.getElementById(‘optionList’);

Iako kreiramo promenljivu, ovako kreirana promenljiva ne sadrži odredjenu “vrednost” već pre predstavlja pointer ka specifičnom mestu u HTML dokumentu čiji je sadržaj ili atribute moguće menjati kao i njegove roditelj ili dete elemente.

Šta kada element nije jedinstven?

U slučaju da html element nema pridružen id, moguće je pristupiti elementima preko imena tagova. Tada sintaksa izgleda ovako:

document.getElementsByTagName(‘<p>’);

i ako kao i u prethodnom primeru ovaj izraz pridružimo “promenljivoj” :

var niz_paragrafa= document.getElementsByTagName(‘<p>’);

promenljiva niz_paragrafa će ustvari biti Array (niz) čiji će prvi p tag koji se nalazi u dokumentu biti pridružen kao prvi član niza – niz_paragrafa[0], drugi p tag kao drugi član niza – niz_paragrafa[1], itd.

 

NAPOMENA: Nije obavezno koristiti samo document kako bi došli hijerarhijski do traženog elementa. Moguće je doći do roditelja elementa koji tražimo. Primer na slici:

5-java-script-dom-model-nodovi-primer

Želimo da pristupimo svim li elementima koji se nalaze u okviru neuredjene liste sa id-jem abc. To možemo uraditi na sledeći način:

Prvo “uhvatimo” tu listu pa zatim zatražimo sve njene podelemente:

var lista=document.getElementById(‘abc’);

var clanovi_liste=lista.getElementsByTagName(‘li’);

Ovako napisano, dolazimo do traženih elemenata bez uzimanja elemenata li iz uredjene liste (ol).

 

Kako čitamo atribute elementa?

Ako pogledamo jednostavan primer:

<img src=”slika.jpg” alt=”Neka slika” style=”color:red;background-color:blue;”>

čitanje vrednosti atributa izvršićemo sledećom komandom:

getAttribute(‘alt’);

Ukoliko želimo da postavimo vrednost nekog atributa koristimo:

setAttribute(‘alt’,’Neki drugi opis’);

Pogledajmo konkretan html kod:

<html>
<head>
<title>Java Script DOM</title>
</head>
<body>
<h1 id=’prvi_naslov’>Java Script DOM model</h1>
<p id=”prvi”>Ovde cemo pojasniti sta i kako</p>
       <img id=”logo” src=”js_logo.png” alt=”Ovo je logo PHP-a” width=”300″ height=”246″>
<ul>
<li>Prva stavka</li>
<li>Druga stavka</li>
<li>Treca stavka</li>
</ul>
</body>
</html>

Kako dodajemo atribut elementu img?

document.getElementById(‘logo’).setAttribute(‘align’,’right’);

Ovim smo dodali atribut align sa vrednošću right (align=”right”) u okviru img taga i time sliku poravnali sa desnom stranom .

 

Ako hoćemo da pročitamo sadržaj alt taga slike js_logo.png, to ćemo uraditi kao:

alert(document.getElementById(‘logo’).getAttribute(‘alt’));

ili ako bi želeli da sa tom vrednošću nešto uradimo, smestili bi je u promenljivu:

var opis_slike=document.getElementById(‘logo’).getAttribute(‘alt’);

Kako menjamo tekst unutar taga?

Uzećemo primer iz gornjeg html dokumenta:

<p id=”prvi”>Ovde cemo pojasniti sta i kako</p>

Ovde želimo da umesto teksta “Ovde cemo pojasniti sta i kako” stoji tekst “Tesko da cemo uspeti”. To radimo sledećom komandom:

 

document.getElementById(‘prvi’).innerHTML=’Tesko da cemo uspeti';

Kako promeniti tekst elementa unutar niza?

Daćemo jednostavan primer:

<ul id=”lista”>
         <li>Prva stavka</li>
         <li>Druga stavka</li>
<li>Treca stavka</li>
       </ul>

Sadržaj unutar druge stavke liste promenićemo kao:

var stavke=document.getElementsByTagName(‘li’);
stavke[‘1′].innerHTML=’Druga ali izmenjena stavka';

Za slučaj da na strani postoje i druge liste, a mi želimo da promenimo samo stavku liste sa id-jem lista, onda bi to uradili kao:

var lista=document.getElementById(‘lista’);
var stavke=lista.getElementsByTagName(‘li’);
stavke[‘1′].innerHTML=”Druga ali izmenjena stavka”;

Kako u okviru DOM-a kreirati elemente, njihov sadržaj i umetnuti ih na mesto na koje želimo?

Uzećemo primer liste iz prethodnog primera:

<ul id=”lista”>
         <li>Prva stavka</li>
<li>Druga stavka</li>
<li>Treca stavka</li>
<!– ovde želimo da umetnemo četvrtu stavku liste –>
</ul>
 

Procedura je sledeća:

  1. Prvo kreiramo novi element koji će se nalaziti u okviru dokumenta, tj. web strane ali ga ne vezujemo za listu. Stavljamo ga u promenljivu koju ćemo kasnije upotrebiti za pridruživanje teksta koji će se nalaziti unutar novog li taga. Kod je sledeći:

var novi_element=document.createElement(“li”);

  1. Zatim kreiramo njegov sadržaj korišćenjem komande za kreiranje text node-a – ne innerHTML! Novi tekstualni nod stavljamo u promenljivu koju ćemo kasnije upotrebiti za pridruživanje “roditelju” koji je u ovom slučaju li tag.

var tekst_novog_elementa=document.createTextNode(“Sadrzaj cetvrte dodate stavke”);

  1. U sledećem koraku pridružujemo novoformirani text node novoformiranog roditelju elementu li (tekst se u DOM-u i posmatra kao dete elementa u okviru koga se nalazi)

novi_element.appendChild(tekst_novog_elementa);

  1. U poslednjem koraku “grabimo” element kome će novi element biti pridružen i dodeljujemo mu ga kao dete

document.getElementById(“lista”).appendChild(novi_element);

Kako da ga umetnemo na odredjeno mesto a ne kao poslednjeg u nizu?

Ako pogledamo prethodni primer, videćemo da nismo imali bas previše kontrole nad tim gde tačno umećemo novokreirani element. U slučaju da imamo potrebu da element stavimo na tačno odredjeno mesto, u pomoć nam dolazi komanda insertBefore.

U našem slucaju, hoćemo da ga stavimo tako da novi element bude na drugoj poziciji.

Postupak je u delu kreiranja elementa isti:

var novi_element=document.createElement(“li”);
var tekst_novog_elementa=document.createTextNode(“Sadrzaj cetvrte dodate stavke”);
novi_element.appendChild(tekst_novog_elementa);
 

Postupak umetanja je drugačiji u smislu što prvo moramo da definišemo mesto ispred koga umećemo element a onda to i uradimo. U ovom slučaju, prvo ćemo pronaći sve li elemente i smestiti ih u promenljivu:

Prvo kreiramo pointer ka listi koja nas zanima, u ovom slučaju lista sa id-jem lista. Kreiramo promenljivu sa istim imenom.

var lista=document.getElementById(‘lista’);

Zatim izaberemo stavku ispred koje hoćemo da umetnemo novu. [1] na kraju izraza govori da hoćemo samo element li na drugoj poziciji:

var stavka=lista.getElementsByTagName(‘li’)[1];

Na kraju, sintaksa za umetanje govori da u listu sa id-jem lista, ispred elementa definisanog kao promenljiva stavke ubacimo element koji se zove novi_element.

lista.insertBefore(novi_element,stavke);

DOGADJAJI I AKCIJE (Events/Event handlers)

Pod dogadjajima na web strani podrazumeva se svaka akcija korisnika ili akcija u procesu učitavanja stranice. Web developeri ne pišu dogadjaje (events) jer su dogadjaji već definisani u Java Scriptu. Znači, klik mišem na link ili na sliku je dogadjaj koji JavaScript podvodi pod onclick dogadjaj. Takodje, pretraživač tu akciju odlično razume. Na nama je da vidimo koji su, od mnogobrojnih, već definisanih dogadjaja, nama interesantnih. Prostije rečeno, koji od dogadjaja možemo da iskoristimo kako bi ostvarili efekat koji želimo da postignemo.

Postoji nekoliko metoda pisanja event handler-a.

Prvi je pisanjem direktno unutar taga. Primer:

<button onclick=alert(‘Dobar dan!’)>Klikni</button>

Ovaj metod nije preporučljiv jer se kod ne može koristiti na drugim mestima (ovaj primer nije reprezentativan već je dat samo radi primera sintakse). Drugi razlog je mešanje HTML-a i JavaScripta. Treći je što u slučaju da Java Script nije omogućen u okviru pretraživača, nemamo načina u slučaju ovakvog pisanja da se sa tim izborimo.

Drugi način koristi metod pod imenom addEventListener.

document.addEventListener(‘ime_dogadjaja’,’ime_funkcije’, false);

Problem ovog načina je što je njegova primena različita do jednog do drugog pretraživača, tj. nije cross-browser kompatibilna pa se kod piše “duplo” a i greške koje se pojave teže je rešiti.

Treći metod je preferiran i onaj koji ćemo učiti. Sintaksa ovog načina reakcije na odredjene evente je sledeća:

ime_elementa.ime_dogadjaja = function(){

// java script kod koji će se izvršiti

};

U sintaksi primećujete da iza imena function ne stoji ime funkcije kao što smo do sada radili. Takva vrsta funkcije u programiranju se naziva anonimna funkcija. Zašto je koristimo? Kao i u prethodnim slučajevima, da odredjeni kod stavimo na jedno mesto i izvršavamo ga kao celinu. Zbog čega nam nije potrebno imenovanje funkcije? Iz prostog razloga što deo koji se nalazi ispred znaka jednako tačno govori nad kojim elementom i kada ovaj kod treba da se izvrši.

Na primer:

mojElement.onclick=function(){

alert(‘Kliknuli ste na moj element!’);

}

NAPOMENA: Na kraju, iza zatvaranja vitičaste zagrade stoji znak ; Ovaj znak nije namenjen funkciji već završetku Java Script iskaza.
 

ONCLICK

Ovaj dogadjaj se izvršava kada kliknemo mišem unutar web strane na definisani element, kao što smo već rekli. Ono što je zanimljivo je da element može da bude i ceo document, tj. klik mišem bilo gde unutar stranice proizvešće dogadjaj onclick. Daćemo primer:

document.onclick=function(){
alert(‘Kliknuli ste negde unutar strane!’);
};

Ako na primer, imamo sliku nutar strane sa id-jem neka_slika, i želimo da izvršimo akciju u momentu kada korisnik klikne iznad nje, napisaćemo:

var slika=document.getElementById(‘neka_slika’);
slika.onclick=function(){
alert(‘Kliknuli ste na sliku!’);
};

Sada će se ovaj kod izvršavati svaki put kada kliknete u okvir u kome se nalazi slika. Ako ovaj kod ostane na strani zajedno sa prethodnim, nakon što kliknete na sliku i zatvorite iskačući prozor, pojaviće se i drugi prozor. Zašto? Pored klika na sliku, ispunjen je I uslov klika bilo gde u okviru dokumenta.

Postoji jedna bitna stvar u ovom primeru koju nismo pomenuli. Ukoliko ovaj Java Script kod stavimo na početak dokumenta, postoji velika šansa da se on ne izvrši. Zašto? Mi u kodu pozivamo elemente koji se još nisu učitali na primer sliku, pa JavaScript u momentu kada se poziva nema element nad kojim treba da izvrši odredjenu akciju.

Iz tog razloga, dobra praksa je da se sav JavaScript kod uslovi završetkom učitavanja kompletne stranice pre izvršenja. To se postiže dogadjajem onload koji govori Java Scriptu da sačeka sa učitavanjem celokupnog html koda pre nego što se učita. Kod kojim se ovo postiže je:

window.onload=function(){
// sav JS kod koji zelimo da se izvrsi
}

Otkud element window?

window je element koji nismo pominjali u DOM hijerarhiji. On se nalazi iznad elementa document I obuhvata, pored prozora pretrazivaca koji obuhvata document element, celokupan pretrazivac, ukljucujuci statusnu liniju, scrollbar-ove I sve sto obuhvata prozor aplikacije.

NAPOMENA: Treba biti prilicno oprezan sa pozivanjem window.onload() u smislu da, ukoliko postoji vise window.onload blokova koda na stranici, izvrsice se samo poslednji koji se poziva.

 

ONFOCUS I ONBLUR

Ove dve funkcije su komplementarne I izuzetno se koriste u formama.

ONFOCUS dogadjaj predstavlja momenat kada kliknemo unutar input taga, tj. ukoliko kliknemo unutar polja u koje se unose neki podaci, na primer ime ili broj telefona. Pored klika misem, ovaj dogadjaj se inicira I ako u polje dodjemo putem pritiska TAB koji nas iz prethodnog polja dovodi u njega.

ONBLUR dogadjaj je dogadjaj koji se inicira kada izadjemo iz polja, tj. ili kliknemo negde unutar strane ili predjemo na sledece polje klikom misa ili pritiskanjem taster TAB. Da bi malo pojasnili pokazacemo na primeru. U ovom primeru zelimo da kada je korisnik van polja ime, u njemu bude prikazan tekst “Molimo vas unesite svoje ime” a kada korisnik klikne na njega taj tekst nestane. Takodje, ukoliko korisnik nakon sto je usao u njega, izadje bez popunjavanja podatak, taj tekst ponovo bude prikazan.

HTML kod polja nad kojim izvrsavamo ove akcije :

Ime: <input name=”ime” id=”ime” value=”Molimo vas unesite svoje ime”>

Java Script ce izgledati:

 

var polje_ime=document.getElementById(‘ime’);

 

polje_ime.onfocus=function(){

if(polje_ime.value == “Molimo vas unesite svoje ime”){

polje_ime.value=””;

}

};

 

polje_ime.onblur=function(){

if(polje_ime.value == “”){

polje_ime.value=” Molimo vas unesite svoje ime”;

}

};

Sta ovaj kod govori. Ukoliko je pri ulasku u polje (onfocus) vrednost u polju “Molimo vas unesite svoje ime” isprazni ga. Druga funkcija kaze: ukoliko korisnik izadje iz polja (onblur) I ne ukuca nista, promeni njegovu vrednost na “Molimo vas unesite svoje ime”.

Naravno, ne zaboravite da ovo ubacite unutar window.onload dogadjaja.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

TAJMERI

Postoje dogadjaji koji nisu direktno inicirani korisnickim akcijama, vec su definisani u odnosu na neki vremenski interval. Na primer, zelite slideshow u kome ce se na svakih 5 sekundi menjati slika. Ili zelite da, nakon sto se document ucita I protekne 5 sekundi, iskoci popup prozor sa reklamom.

Postoji dosta komandi koje se bave ovom vrstom dogadjaja ali su nama od znacaja dve:

setTimeout – izvrsava kod odredjene funkcije nakon isteka vremena koje definisemo. Na primer:

 

function reklama(){

alert(‘Ovo je reklama’);

}

setTimeout(reklama,5000);

 

Ovaj kod ce se izvrsiti 5 sekundi (5000 jer komanda prihvata milisekunde) nakon ucitavanja dokumenta, tj. 5 sekundi nakon ucitavanja stranice iskocice prozor sa porukom Ovo je reklama.

 

setInterval –je dogadjaj koji se ponavlja u odredjenom vremenskom interval, slicno izvrsavanju petlje sa definisanim kasnjenjem. Pogledacemo primer u kome zelimo da kreiramo slideshow, tj. zelimo da se na jednom mestu unutar dokumenta slike dinamicki menjaju na svakih 5 sekundi. HTML kod nad kojim se ovo izvrsava je slika:

<!DOCTYPE html>

<head>

<title></title>

</head>

<body>

<img src=”images/slika1.png” id=”slika”>

<script>

var slika= document.getElementById(‘slika’);

var sve_slike=[‘images/slika2.png’, ‘images/slika3.png’, ‘images/slika4.png’, ‘images/slika5.png’, ‘images/slika1.png’];

i=0;

function promeni(){

slika.setAttribute(‘src’,sve_slike[i]);

i++;

if(i==sve_slike.length){

i=0;}

}

setInterval(promeni,’5000′);

</script>

 

</body>

</html>

 

Hajde da objasnimo kod. Pocnimo od prvog reda:

 

<img src=”images/slika1.png” id=”slika”>

Ovde postavljamo prvu sliku koja ce se prikazati pri ucitavanju dokumenta.

 

Zatim kreiramo pointer ka img nodu koji nam treba.

var slika= document.getElementById(‘slika’);

 

Zatim definisemo niz sa elementima koji predstavljaju putanje ka ostalim slikama koje ce se prikazivati. Ovde treba primetiti da je poslednji clan niza slika1 koja se pojavljuje na pocetku. Bez toga, slik1 bi se samo prikazala jednom, pri ucitavanju strane a kasnije bi bila izostavljena.

var sve_slike=[‘images/slika2.png’, ‘images/slika3.png’, ‘images/slika4.png’, ‘images/slika5.png’, ‘images/slika1.png’];

 

Sada postavljamo brojac na nulu. Brojac cemo koristiti za pozivanje sledeceg elementa niza sve_slike.

i=0;

function promeni(){

slika.setAttribute(‘src’,sve_slike[i]);

i++;

if(i==sve_slike.length){

i=0;}

}

setInterval(promeni,’5000′);

</script>

U funkciji promeni() u prvom redu setujemo atribut src nultom clanu niza, tj slici slika2.png. I odmah zatim ga povecavamo za 1. Pre kraja funkcije, svaki put ispitujemo da li je brojac manji od broja elemenata niza. Broj elemenata niza dobijamo sa sve_slike.length. Ako jeste dostigao poslednji clan niza, setuj I na nulu, tj. prikazi ponovo prvu sliku.

 

Na kraju, najbitniji deo je samo pozivanje funkcije na svakih 5 sekundi:

setInterval(promeni,’5000′);

 

 

 

clearInterval, clearTimeout

Ove dve komande su pandam komande prethodno navedenim (setInterval I setTimeout). To su komande koje iniciraju prekidanje prethodno kreiranih dogadjaja. Kljucno kod obe komande je staviti red u kome se definise timeout I interval u promenljivu (pointer) kako bi se znalo na koji od njih se prekid odnosi.

 

clearTimeout – obustavlja izvrsenje setTimeout funkcije pre nego se ista izvrsi.

 

function reklama(){

alert(‘Ovo je reklama’);

}

var iskoci = setTimeout(reklama,5000);

 

 

if(neki_uslov_ispunjen){ clearTimeout(iskoci);}

 

Poslednji red prouzrokovace da se promenljiva iskoci, tj. komanda setTimeout nikada ne izvrsi. Naravno, ovo ima smisla ako je prethodno ispunjen neki uslov pa je stavljamo unutar if iskaza.

 

clearInterval – obustavlja izvrsavanje setInterval komande ukoliko dodje do ispunjenja nekog uslova. Ako uzmemo primer u kome smo kreirali slideshow, uslov za stopiranje daljeg izvrsenja bi mogao da bude klik korisnika na sliku.

Zbog preglednosti iskopiracemo ceo primer I ubaciti dodatni kod za zaustavljanje:

 

<!DOCTYPE html>

<head>

<title></title>

</head>

<body>

<img src=”images/slika1.png” id=”slika”>

<script>

var slika= document.getElementById(‘slika’);

var sve_slike=[‘images/slika2.png’, ‘images/slika3.png’, ‘images/slika4.png’, ‘images/slika5.png’, ‘images/slika1.png’];

i=0;

function promeni(){

slika.setAttribute(‘src’,sve_slike[i]);

i++;

if(i==sve_slike.length){

i=0;}

}

 

var slideshow = setInterval(promeni,’5000′);

slika.onclick = function(){

clearInterval(slideshow);

};

 

</script>

 

</body>

</html>

 

Ako pogledamo kod:

var slideshow = setInterval(promeni,’5000′);

slika.onclick = function(){

clearInterval(slideshow);

};

 

Videcemo da smo setInterval stavili u promenljivu kako bi mogli da manipulisemo tim izrazom. Dalje smo definisali da ako korisnik klikne unutar elementa slika, setInterval izraz prestane sa izvrsavanjem.

NAPOMENA: Ne zaboravite da ceo kod stavite unutar window.onload izraza.

 

Kompletan kod sada izgleda:

 

<!DOCTYPE html>

<head>

<title></title>

</head>

<body>

<img src=”images/slika1.png” id=”slika”>

<script>

window.onload = function(){

var slika= document.getElementById(‘slika’);

var sve_slike=[‘images/slika2.png’, ‘images/slika3.png’, ‘images/slika4.png’, ‘images/slika5.png’, ‘images/slika1.png’];

i=0;

function promeni(){

slika.setAttribute(‘src’,sve_slike[i]);

i++;

if(i==sve_slike.length){

 

i=0;}

}

 

var slideshow = setInterval(promeni,’5000′);

slika.onclick = function(){

clearInterval(slideshow);

};

}

 

</script>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Java Script i CSS

 

Kako upravljati inline CSS-om?

CSS koji je potrebno izmeniti nakon ucitavanja stranice i koji nije moguce jednostavno izmeniti izmenom u samom HTML-u, koristi sluzbenu rec style i ime atributa koji se menja. Ako pogledamo primer:

<p style=”color:red;background-color:white;font-size:14px;font-family:Arial;”

>Neka recenica…</p>

videcemo da nismo ucili nacin kako da unutar style atributa citamo, menjamo ili brisemo odredjene CSS stilove.

Sintaksa se ne razlikuje mnogo. Kao i u prethodnim primerima dodjemo do pointera elementa i stil menjamo na sledeci nacin:

element_koji_se_menja.style.css_svojstvo=’nova_vrednost’;

U nasem primeru zelimo da promenimo parametar color, i pozadinsku boju paragrafa. To izvodimo sledecim kodom:

p.style.color=”white”;

p.style.backgroundColor=”blue”;

 

Ovde primecujemo jednu nedoslednost. Ona se definise kao:

ukoliko CSS atribut ima srednju crtu u svom nazivu ona se izbacuje a rec posle nje pise velikim slovom.

U nasem primeru vidimo da se background-color menja u backgroundColor. Slicno bi uradili i sa font-size koje bi preslo u fontSize i font-family u fontFamily. Razlog za ovo je sto u Java Scriptu, srednja crta oznacava aritmeticku operaciju pa bi doslo do pogresnog tumacenja koda.

 

Jos jedna stvar. Ukoliko Java Scriptom zelimo da postavimo klasu nekom elementu, sintaksa za to ce biti:

document.getElementById(‘neki_id’).className=’ime_nove_klase’;

 

Ovde cemo samo naglasiti da ovaj kod mora stajati unutar koda koji govori da se njegovo izvrsavanje odlaze do god kompletan html dokument nije ucitan u prozor pretrazivaca.

window.onload(){

document.getElementById(‘neki_id’).className=’ime_nove_klase’;

 

Sada cemo pogledati jedan primer u kome cemo, ukoliko korisnik klikne negde unutar div-a sa tekstom, div menjati CSS svojstva.

<!DOCTYPE html>

<head>

<title>Izmena klase nad elementom putem Java Scripta</title>

</head>

 

<style>

.crvena{color:red;background-color:grey;}

</style>

<body>

<div id=”izmena”>

<h1>Naslov strane</h1>

<p>Nakon sto korisnik klikne unutar diva sa id-jem izmena, boja teksta paragrafa i naslova koji se nalaze unutar njega bice izmenjena u crvenu. Sledeci put kada korisnik klikne, CSS klasa ce biti uklonjena, tj. tekst ce dobiti default crnu boju</p>

</div>

 

<script>

window.onload = function(){

document.getElementById(‘izmena’).onclick = function(){

               if(document.getElementById(‘izmena’).className ==’crvena’){

                              document.getElementById(‘izmena’).className =”;

               }else{

                              document.getElementById(‘izmena’).className =’crvena';

               }

};

}

</script>

 

</body>

</html>

 

 

Kako promeniti CSS inline?

U prethodnom primeru menjali smo CSS svojstva koja su definisana ili kao interna a mogu biti primenjena I za slucaj da je CSS definisan u eksternom fajlu. Sada cemo pogledati primer kako da menjamo CSS svojstva kada su napisana inline, na primer:

<p style=’color:blue;background-color:red;’>Ovde menjamo boju teksta I pozadine stila koji je definisan inline.</p>

Celokupan kod izgledace:

<!DOCTYPE html>

<head>

<title>Izmena klase nad elementom putem Java Scripta</title>

</head>

<body>

<p id=”paragraf” style=’color:white;background-color:blue;’>Ovde menjamo boju teksta I pozadine stila koji je definisan inline.</p>

 

<script>

window.onload = function(){

var paragraf_za_izmenu=document.getElementById(‘paragraf’);

paragraf_za_izmenu.onclick = function(){

document.getElementById(‘paragraf’).style.backgroundColor = “grey”;

document.getElementById(‘paragraf’).style.color = “red”;

};

}

</script>

 

</body>

</html>

 

 

 

Sve zajedno ili “Putting it all together!”

Sada cemo, pomocu onoga sto smo do sada naucili pokusati da kreiramo box koji se nakon ucitavanja stranice krece sa leve strane ekrana na desnu I u momentu kada se pomeri za neku vrednost – stane.

Kompletan kod izgleda ovako:

<!DOCTYPE html>

<head>

<title>Izmena klase nad elementom putem Java Scripta</title>

</head>

<style>

div#setnja{background-color:grey;color:white;width:250px;height:200px;font-size:12px;}

</style>

<body>

<div id=”setnja”>

<h1>Naslov ce takodje ici levo</h1>

<p>Ovo ce se kretati ulevo za 200px u roku od 5 sekundi i onda stati.</p>

</div>

<script>

var trenutna_pozicija=0;

window.onload = function(){

 

document.getElementById(‘setnja’).style.position=”absolute”;

document.getElementById(‘setnja’).style.left=”50px”;

document.getElementById(‘setnja’).style.top=”50px”;

 

function animacija(){

if(trenutna_pozicija<900){

trenutna_pozicija +=50;

document.getElementById(‘setnja’).style.left = trenutna_pozicija+”px”;

}else{

clearInterval(setanje);

}

}

var setanje= setInterval(animacija,50);

}

</script>

</body>

</html>

 

Sada cemo pojasniti elemente koji se ticu Java Scripta.

Prvi red postavlja promenljivu trenutna_pozicija na vrednost 0 kako bi je bez problema kasnije pozivali u programu.

var trenutna_pozicija=0;

 

U okviru window.onload dogadjaja sprecicemo izvrsavanje koda pre nego se svi elementi html strane ucitaju.

window.onload = function(){

}

 

U naredna tri reda putem Java Script-a postavljamo pocetnu poziciju div-a. Ovo ne moramo da radimo, ali cisto zbog vezbe J

document.getElementById(‘setnja’).style.position=”absolute”;

document.getElementById(‘setnja’).style.left=”50px”;

document.getElementById(‘setnja’).style.top=”50px”;

 

Pre nego objasnimo funkciju animacija, komentarisacemo red

var setanje= setInterval(animacija,50);

 

setInterval funkcija ce pozivati funkciju animacija svakih 50 milisekundi. Smestamo je u promenljivu setanje da bi mogli da ispitamo da li je dostignuta odredjena vrednost pomeranja kako bi mogli da je zaustavimo komandom clearInterval. U slucaju da to ne uradimo, box bi se pomerao beskonacno, izasao van ekrana I nikada se izvrsavanje ne bi zaustavilo. A ono sto mi zelimo je da se box pomeri za 900px I onda stane.

 

Sada mozemo da pojasnimo sta radi funkcija animacija. If iskaz ispituje svaki put da li je trenutna_pozicija veca od 900px, tj. ovaj iskaz nam upravo omogucava da u jednom trenutku izvrsavanje prekinemo.

 

Pri svakom pozivanju funkcije animate povecava vrednost atributa left I na taj nacin animira kretanje box-a. Ovo se desava u dva reda definisana kao:

trenutna_pozicija +=50;

document.getElementById(‘setnja’).style.left = trenutna_pozicija+”px”;

 

Na kraju, ukoliko trenutna_pozicija ima vrednost od 900px, zaustavi box. To postizemo redom:

 

clearInterval(setanje);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Ispitivanje HTML formi

 

U prethodnim zadacima bavili smo se time kako postaviti i uzeti tekstualnu vrednost nekog taga. Za to smo koristili innerHTML.

U formama, gde uglavnom imamo input polja, nas ne interesuje tekst koji se nalazi unutar otvarajuceg I zatvarajuceg taga, vec vrednost koju korisnik unese. Ekvivalent innerHTML komandi kod input polja je – value.

Vazan dogadjaj kod ispitivanja formi je I dogadjaj onsubmit koji se odigrava u momentu kada zelimo da posaljemo formu, u principu to je dugme koje se uglavnom nalazi na samom dnu forme. To je trenutak kada mi zelimo da ispitamo da li su polja popunjena pravilno ili ne I ispisemo poruku o gresci. Pogledacemo jedan jednostavan slucaj forme u kome korisnik treba samo da unese svoju mail adresu. Ovde necemo proveravati ispravnost sintakse vec samo cinjeniu da li je korisnik nesto uneo ili nije.

 

Kompletan kod:

 

<!DOCTYPE html>

<head>

<title>Izmena klase nad elementom putem Java Scripta</title>

</head>

<body>

<h1>Forma</h1>

<form id=”forma” method=”post” action=” procesiraj.php “>

Email adresa: <input id=”mail_adresa” type=”email” name=”mail” >

<p id=”greska” style=”color:red”></p>

<input type=”submit” value=”POSALJI”>

</form>

<script>

window.onload = function(){

document.getElementById(‘forma’).onsubmit = function(){

if(document.getElementById(‘mail_adresa’).value == “”){

document.getElementById(‘greska’).innerHTML = ‘Molimo unesite email adresu';

return false;

}else{

return true;

}

};

}

</script>

</body>

</html>

 

U samom HTML-u nema nista neobicno, forma sa dodeljenim id-jem, koji je dodeljen I input tagu. Jedino sto imamo je prazan p tag sa id-jem greska koji ce biti popunjen u slucaju da korisnik ne unese neku vrednost. Za ostale problem u sintaksi pobrinuce se tip input taga email koji e proveriti bar elementarnu sintaksu. Znaci, hajde da razjasnimo JS kod.

 

U prvom redu definisemo onsubmit dogadjaj koji ce se desiti kada korisnik klikne na element sa id-jem forma, tacnije njeno input polje tipa submit.

 

document.getElementById(‘forma’).onsubmit = function(){

 

Drugi red proverava da li je polje sa id-jem mail_adresa prazno i ako jeste, u p tag unosi poruku o gresci.

if(document.getElementById(‘mail_adresa’).value == “”){

document.getElementById(‘greska’).innerHTML = ‘Molimo unesite email adresu';

return false;

}else{

return true;

}

 

Ono sto je ovde izuzetno bitno su dva reda:

return false;

Ovaj red ustvari ne dozvoljava formi da se posalje serveru, tacnije fajlu procesiraj.php vec vraca formu sa ispisom greske.

 

Nasuprot tome, red koji se izvrsava ukoliko uslov nije ispunjen (polje email je popunjeno):

return true;

znaci da forma nastavi sa cime god je krenula, u ovom slucaju slanje na server podataka koje je korisnik ispunio.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

VALIDIRANJE NAPISANOG KODA

 

Jedan od najboljih alata koji proverava sintaksu naziva se Google Closure Compiler i moze ukazati na mnoge nepravilnosti u kodu.

 

MINIFIKACIJA KODA

 

Minifikacija koda je smanjivanje velicine gotovog Java Script koda u momentu kada je spreman za produkciju. Razlog je jednostavan – smanjenje velicine fajla koji pretrazivac treba da ucita.

Ono sto i sami mozete uraditi je uklanjanje komentara, praznina kao i nizanje koda tako da sve bude deo jedne linije. Alat koji to moze uraditi za vas je JSlint na adresi jslint.com

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

jQuery

 

jQUery predstavlja najpopularniju Java Script biblioteku. Ako me pitate sta je jQuery konkretno, to je jedan veliki JavaScript dokument koji ucitavate na vasu web stranu na kojoj zelite da koristite jQuery sintaksu. Drugacije postavljeno, jQuery je slup vec napisanih Java Script rutina (malih programa) koji vam omogucavaju da brze pisete JavaScript kod. Njegova najveca prednost sa funkcionalne strane je da je potpuno cross-browser kompatibilan, tj. jednako ga ispravno tumace i Internet Explorer i Mozzilla kao i Chrome pa je bojazan od gresaka znacajno umanjen.

 

Kako jQuery postavljate na web stranu?

 

  1. Odete na jquery.com izaberete Download sekciju ili dugme na strani (ako postoji)
  2. Nakon toga izaberete trenutno aktuelnu produkcionu verziju (u momentu pisanja to je 1.11.1) Ukoliko ste sigurni da vas kod nece biti ucitan u IE 6,7 ili 8, slobodno skinite aktuelnu verziju 2.x
  3. Nakon sto kliknete na neku od verzija, otvorice vam se minifikov jQuery kod u vidu ispisane web strane. Njen sadrzaj iskopirajte i snimite pod nekim imenom (najbolje pod imenom ponudjenim u address baru pretrazivaca, jquery-1.11.1.min.js

6-java-script-jquery-u-prozoru-pretrazivaca

 

  1. Sledece sto treba da uradite je da u okviru vaseg html fajla u kome cete ga koristiti, postavite sledeci kod (najbolje pri dnu, pred zatvaranje body taga:

<script src=” jquery-1.11.1.min.js”></script>

  1. Nakon ovoga mozete da koristite komande i sintaksu jQuery JavaScript-a

 

 

Drugi nacin koji se sve vise koristi je da jQuery kod skinete se CDN-a, tj. distribuirane mreze servera po svetu. Najlaksi i najsigurniji nacin je koriscenjem Google usluge. Prednosti ovoga su : veca brzina, veci bandwidth i mogucnost da pretrazujuci vise strana, jQury kod ucitate samo jednom a kasnije koristite kesiranu verziju pri pregledu drugih strana sajta ili drugih web sajtova.

 

Ovo radite tako sto umesto da download-ujete file kod sebe i pozovete ga sintaksom

<script src=” jquery-1.11.1.min.js”></script>

 

odete na google adresu: https://developers.google.com/speed/libraries/devguide i odatle iskopirate kod

za biblioteku koja vas zanima. U nasem slucaju:

 

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

 

 

 

Zasto treba koristiti jQuery?

 

Postoji nekoliko razloga zbog cega je “lakse” koristiti jQuery od genericki napisanog Java Scripta. U vecini slucajeva kod je kraci. Pogledajmo primer:

Da bi Java Script sintaksom pristupili nekom elementu sa ID-jem moj_div i pridruzili mu odredjenu CSS klasu, kreiracemo sledeci izraz:

document.getElementById(‘moj_div’).className=’neka_klasa’;

Isto ovo u jQuery sintaksi postizemo izrazom:

jQuery(‘#moj_div’).addClass(‘neka_klasa’);

 

Ono sto je jednostavnije u jQuery sintaksi je sto se elementima pristupa slicno kao pri definisanju CSS selektora, na primer:

jQuery(‘p.opis’) – pristupicem osvim p elementima klase opis na stranici

ili

jQuery(‘.opis’) – pristupicemo svim elementima klase opis na stranici

ili

jQuery(‘li’) – pristupicemo svim li elementima na stranici

 

Ako primecujete, u jQuery sintaksi sve sto treba da navedete je:

. za klasu

# za ID ili

p.opis za ime taga

 

umesto da u Java Script sintaksi kucate:

 

document.getElementByClass(‘neka_klasa’);

document.getElementById(‘neki_id’);

 

 

Ono sto je zaista dobro u jQuery sintaksi je da mozete kombinovati mnoge selektore iz CSS-a, ukljucujuci i pseudo selektore. Na primer:

jQuery(‘li:last’) izabrace poslednji element na strani

jQuery(“p:contains(‘paketi)”) izabrace p elemente koji u svom sadrzaju imaju rec paketi (contains je sluzbena rec jQuery-ja)

Ove stvari, narocito poslednju je mnogo teze, ili sa mnogo vise koda postici koriscenjem uobicajene Java Script sintakse.

 

NAPOMENA: Cesto cete, na pocetku jQuery izraza umesto reci jQuery videti dolarski znak $. jQuery(‘p’).addClass(‘neka_klasa’); moze da se zapise i kao $(‘p’).addClass(‘neka_klasa’);

 

Jos jedan od predosti koriscenja jQuery-ja su njegove ugradjene akcije kao na primer hide. Ukoliko zelite da uklonite neki element, na primer sadrzaj p taga, napisacete:

$(‘p’).hide(3000);

Ovo govori da se sakrije sadrzaj p elemenata u roku od 3 sekunde. Takve stvari je moguce postici u JavaScriptu sa mnogo vise koda.

Jos jedan primer akcije bio bi fadeOut. Time element izbledi u nekom vremenskom periodu. To sa Java Script-om moze da se postigne ali na mnogo tezi nacin.

 

Kako bi videli kako izmena nekih stvari funkcionise u kombinaciji sa dogadjajima koriscenjem jQuery, uzecemo primer promene sadrzaja elementa na stranici ukoliko korisnik klikne na njega.

<p>Pocetni tekst</p>

 

$(‘p’).click(function(){

$(‘p’).text(‘Ovo je izmenjeni tekst’);

});

 

Klikom na paragraf, tekst se automatski zamenjuje tekstom “Ovo je izmenjeni tekst”.

 

Postoji jedna zanimljiva stvar kod ovog izraza. Ukoliko kod napisemo koriscenjem sluzbene reci this umesto p

 

$(‘p’).click(function(){

$(this).text(‘Ovo je izmenjeni tekst’);

});

 

jQuery ce tacno znati da treba da izmeni tekst na paragrafu na koji je korisnik kliknuo. Sledeci primer bi bio koriscenje efekta u istom primeru:

 

$(‘p’).click(function(){

$(this).fadeOut(2000);

});

 

Ako kliknemo na bilo koji paragraf, samo taj paragraf ce nestati u roku od 2 sekunde.

 

Pandam komandi window.onload u jQury sintaksi je:

 

$(document).ready(function(){

//neki jQuery kod

});

 

Za razliku od window.onload komande, $(document).ready(function(){ //neki kod }); se moze kreirati vise puta na strani i sav kod ce biti izvrsen.

 

 

 

 

MODERNIZR

 

Modernizr je Java Script biblioteka koja ispituje postojanje podrske za odredjene elemente HTML verzije 5 i CSS verzije 3 i u skladu sa podrskom u tom pretrazivacu izvrsava neki JavaScript kod. Da bi je koristili, kao i u slucaju jQuery-ja, potrebno je povezati je sa postojecim dokumentom web strane.

  1. Odete na http://modernizr.com/download
  2. Kliknete na development verziju
  3. Na sledecoj strani ostavite sve od ponudjenog i kliknete Generate
  4. Na istoj strani ispod dugmeta na koje ste kliknuli, bice generisan fajl koji treba da postavite na vasem sajtu, tj. u okviru head sekcije HTML dokumenta na kome cete je koristiti

 

Ova biblioteka ustvari kreira objekat Modernizr cija svojstva mozemo da koristimo.

Dacemo jedan primer koriscenja na web strani unutar JS koda.

Zelimo da ispitamo da li pretrazivac u kome prezentujemo web stranu podrzava VIDEO tag (novi tag u verziji HTML5) i u skladu sa tim da li podrzava ili ne, izvrsimo odgovarajuci kod. To cemo napisati kao:

 

if (Modernizr.video){

//izvrsi kod koji se oslanja na postojanje video taga

}else{

//izvrsi kod koji se NE oslanja na postojanje video taga

}

 

 

 

 

 

 

 

 

 

 

REGULAR EXPRESSIONS

 

Regular expressions su izrazi koji sluze utvrdjivanju da li neki string sadrzi odredjene karaktere ili sledi neka pravila.

Najvise se koristi pri proveri unosa od strane korisnika programa ili web stranice. Primeri su:

  • proveri da li email adresa uneta od strane korisnika ima znak @
  • proveri da li broj karaktera u unosu JMBG-a ima 13 karaktera
  • da li uneta web adresa sadrzi bar jednu tacku u nizu
  • itd…

 

Postoje dva dela. Prvi je kreiranje samog regular expression uslova a drugi njegova primena na odredjeni element.

Regular expressions su ustvari Java Script objekat kao sto su Array,itd. i ima svoja svojstva i metode. Kreira se kao promenljiva, na primer

var mojaRE = /zdravo/;

 

mada postoji i duzi nacin:

 

var mojaRE = new RegExp(“zdravo”);

 

Mi cemo koristiti prvu. Ovo je prvi deo gde kreiramo sablon cije postojanje ispitujemo. Dalje, imamo promenljivu koja glasi:

 

var recenica = ‘Uvek gledam da se hranim zdravo’;

 

Ukoliko zelimo da proverimo da li u promenljivoj recenica postoji sablon “zdravo”, to cemo napisati kao:

 

if (mojaRE.test(recenica)){

alert(‘’Postoji zdravo u okviru recenice!’);

}else{

alert(‘Nazalost, rec zdravo ne postoji u okviru date recenice!’);

}

 

Ovde je kljucna rec test koja ustvari proverava da li string mojeRE postoji u promenljivoj recenica i predstavlja metodu objekta RegExp.

Prethodni primer predstavlja jednostavno koncipiranu RE. Postoje posebni znaci koji se koriste u kreiranju RE. Na primer:

 

/^zdravo/; znaci da se rec zdravo mora nalaziti na pocetku niza karaktera

/zdravo$/; znaci da se rec zdravo mora nalaziti na kraju niza karaktera

/zdrav+o/; znaci da se slovo v mora nalaziti bar jednom ili vise puta u reci zdravo. Konkretno, to znaci da bi reci zdravo,zdravvo,zdravvvvo sve odgovarale uslovu, tj. bile validne i posmatrane kao istinite

/zdrav*o/; znaci da se slovo v moze nalaziti nula, jedan ili vise puta u reci . Konkretno, to znaci da bi reci zdrao,zdravo,zdravvo,zdravvvvo sve odgovarale uslovu, tj. bile validne i posmatrane kao istinite

/zdrav?o/; znaci da se slovo v moze nalaziti nula puta ili jednom u reci . Konkretno, to znaci da bi samo reci zdrao i zdravo odgovarale uslovu, tj. bile validne i posmatrane kao istinite

 

/zdravo|dovidjenja/ ovde je validno ako u tekstu postoji zdravo ili dovidjenja kao string

 

/zdr..o/ dve tacke znace da su dozvoljena bilo koja dva karaktera izmedju zdr i o

 

/\wdravo/ – \w znaci da moze biti bilo koji alfanumericki karakter ili donja crta _

/\bzdravo/ – \b znaci da ispred reci zdravo mora da bude ili prazno polje (space) ili da pocinje na novoj liniji

/[mbk]oja/ – [mbk] znaci da ispred oja moze da stoji ili m ili b ili k pa bi reci moja, boja ili koja bile validne

 

Kao sto vidite u prethodnim primerima, koristiti RegExp nije bas jednostavno iz prostog razloga sto ima puno sintakse koju treba savladati. Jedino sto je bitno je da znate kako se definisu i kako proveravaju. Sintaksu ionako mozete naci na webu i nije nesto sto treba znati napamet.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

KORISCENJE FIREBUG-A U PETLJI (7 CHAPTER DEBUGGING JAVA SCRIPT)

 

Zadatak 1

 

U ovom zadatku kreiracemo kod koji ce biti u stanju da prepozna da li je sirina ekrana promenjena na neku vrednost (u nasem slucaju granica je 600px) i da u skladu sa tim primeni odgovarajuca CSS pravila. Tacnije, kada je sirina pretrazivaca iznad 600px, bice ucitan bogat.css koji u slucaju da korisnik dinamicki smanji prozor ili ga gleda na ekranu manje sirine od 600px (na primer, telefon) ucita ogoljen.css

NAPOMENA: Ovde se necemo baviti kreiranjem HTML strane i CSS pravilima. Ono sto zelimo je da se taj dogadjaj ‘uhvati’ i zameni set pravila koje odgovaraju sirini ekrana.

 

 

Ono sto nas zanima je kako da pri smanjenju ekrana ispod 600px zamenimo ovaj red koda:

<link type=”text/css” rel=”stylesheet” href=”bogat.css”>

 

sa redom:

<link type=”text/css” rel=”stylesheet” href=”ogoljen.css”>

 

Da bi ovo postigli, prvo sto cemo uraditi je da dodelimo id ovom link tagu (da, bas to J) kako bi mogli da mu pristupimo preko getElementById iskaza. Tada ce link izgledati ovako:

 

<link id=” myCSS” type=”text/css” rel=”stylesheet” href=”bogat.css”>

 

Ono sto treba da znamo je da postoji dogadjaj resize koji se primenjuje na DOM element window pa cemo to iskoristiti za pozivanje funkcije ispitivanje_sirine..

 

window.resize = function(){

prilagodi();

}

 

Sada definisemo funkciju ispitivanje_sirine i u prvih nekoliko redova ispitujemo sirinu ali tako sto prvo proveravamo u kom pretrazivacu se nalazimo. To ne radimo direktno vec preko sintakse koju svaki od njih ima za davanje informacije o sirini prozora. Zavisno od pretrazivaca, prvo ispitujemo da li postoji parametar innerWidth. Ukoliko ne postoji sledeci pretrazivac treba da ima dva elementa: documentElement i clientWidth, i treci koji podrazumeva samo clientWidth kao parametar.

 

function prilagodi() {

var width = 0;

if (window.innerHeight) {

width = window.innerWidth;

} else if (document.documentElement && document.documentElement.clientHeight) {

width = document.documentElement.clientWidth;

} else if (document.body) {

width = document.body.clientWidth;

}

 

Nakon sto to utvrdimo bavimo se upitom da li je pomenuta sirina manja od 600px i ako jeste linku dodeljujemo vrednost ogoljen.css za atribut href. U suprotnom, za href atribut mu dodeljujemo bogat.css stil.

 

if (width < 600) {

document.getElementById(“myCSS”).setAttribute(“href”, “ogoljen.css”);

} else {

document.getElementById(“myCSS “).setAttribute(“href”, “bogat.css”);

}

}

 

Postoji jos jedna stvar koju bi trebalo definisati. Ako bi ostavili da se funkcija ispitivanja_sirine dogadja samo uz dogadjaj resize, na malim ekranima bi se, po defaultu otvarao bogat.css. Zasto? Zato sto pri ucitavanju strane na malom ekranu nije doslo do dogadjaj resize. Iz tog razloga, potrebno je ovu funkciju pozvati i pri osnovnom dogadjaju – window.onload pa ce konacan kod, stavljen u okviru jednog HTML dokumenta izgledati ovako:

 

<!DOCTYPE html>

<html>

<head>

<title>Izmena CSS stilova</title>

<link id=”myCSS” type=”text/css” rel=”stylesheet” href=”bogat.css”>

</head>

<body>

 

<h1>Naslov dokumenta</h1>

<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of “de Finibus Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, “Lorem ipsum dolor sit amet..”, comes from a line in section 1.10.32.</p>

<script>

function prilagodi() {

var width = 0;

if (window.innerHeight) {

width = window.innerWidth;

} else if (document.documentElement && document.documentElement.clientHeight) {

width = document.documentElement.clientWidth;

} else if (document.body) {

width = document.body.clientWidth;

}

if (width < 600) {

document.getElementById(“myCSS”).setAttribute(“href”, “ogoljen.css”);

} else {

document.getElementById(“myCSS”).setAttribute(“href”, “bogat.css”);

}

}

 

 

 

window.onresize = function () {

prilagodi();

};

window.onload = function () {

prilagodi();

};

 

</script>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

AJAX & Java Script

 

Ajax je tehnologija kojom se asinhrono (bez ponovnog ucitavanja strane) mogu zatraziti podaci sa servera I prikazati u delu strane predvidjene za to. Najveca prednost ove tehnologije je u ustedi u kolicini poslatih podataka, kako kod inicijalnog ucitavanja tako i svakog naknadnog.

Ajax je skup tehnologija ali se njegova implementacija svodi na kreiranje I manipulisanje posebnim JavaScript objektom XMLHttpRequest putem koga se ucitavaju podaci iz razlicitih vrsta dokumenata. Ti dokumenti mogu biti tekstualnog tipa, xml, html i JSON (Java Script Object Notation).

 

Ucitavanje TXT dokumenata

 

Pogledajmo jedan primer u kome cemo u div koji se nalazi unutar html fajla ucitati sadrzaj tekstualnog fajla demo.txt koriscenjem AJAX metode.

HTML fajl koji koristimo u primeru je prilicno jednostavan:

 

<!DOCTYPE html>

<html>

<head>

<title>Ajax i Java Script</title>

<script src=”TXTajax.js”></script>

</head>

<body>

<div id=”popuni”></div>

</body>

</html>

 

Jedino sto u njemu postoji su dva reda, jedan kojim ucitavamo TXTajax.js (fajl u kome cemo uraditi AJAX procesuiranje) I trenutno prazan div sa id-jem popuni u koji cemo ucitati sadrzaj fajla demo.txt. Fajl podaci.txt sadrzi samo nekoliko reci.

 

Java script fajl TXTajax.js izgledace ovako:

 

var zahtev = new XMLHttpRequest();

zahtev.open(‘GET’,’podaci.txt’);

zahtev.onreadystatechange = function(){

if(zahtev.status === 200 && zahtev.readyState === 4){

var izmeni = document.getElementById(‘popuni’);

izmeni.innerHTML = zahtev.responseText;

}

};

zahtev.send();

 

 

 

Ucitavanje XML dokumenata

 

HTML kod:

 

<!DOCTYPE html>

<html>

<head>

<title>Ajax i Java Script</title>

<meta charset=”utf-8″>

</head>

<body>

<div id=”popuni”></div>

<script src=”XMLajax.js”></script>

</body>

</html>

 

 

JS kod:

 

var zahtev = new XMLHttpRequest();

zahtev.open(‘GET’,’podaci.xml’);

 

zahtev.onreadystatechange = function(){

 

if(zahtev.status === 200 && zahtev.readyState === 4){

 

var autori = zahtev.responseXML.getElementsByTagName(‘author’);

 

var izlaz = “<ul>”;

for(var i = 0; i < autori.length; i++){

izlaz += “<li>” + autori[i].firstChild.nodeValue + “</li>”;

}

izlaz += “</ul>”;

document.getElementById(‘popuni’).innerHTML = izlaz;

}

}

zahtev.send();

 

 

 

XML document:

<?xml version=”1.0″?>

<catalog>

<book id=”bk101″>

<author>Gambardella, Matthew</author>

<title>XML Developer’s Guide</title>

<genre>Computer</genre>

<price>44.95</price>

<publish_date>2000-10-01</publish_date>

<description>An in-depth look at creating applications

with XML.</description>

</book>

<book id=”bk102″>

<author>Ralls, Kim</author>

<title>Midnight Rain</title>

<genre>Fantasy</genre>

<price>5.95</price>

<publish_date>2000-12-16</publish_date>

<description>A former architect battles corporate zombies,

an evil sorceress, and her own childhood to become queen

of the world.</description>

</book>

<book id=”bk103″>

<author>Corets, Eva</author>

<title>Maeve Ascendant</title>

<genre>Fantasy</genre>

<price>5.95</price>

<publish_date>2000-11-17</publish_date>

<description>After the collapse of a nanotechnology

society in England, the young survivors lay the

foundation for a new society.</description>

</book>

<book id=”bk104″>

<author>Corets, Eva</author>

<title>Oberon’s Legacy</title>

<genre>Fantasy</genre>

<price>5.95</price>

<publish_date>2001-03-10</publish_date>

<description>In post-apocalypse England, the mysterious

agent known only as Oberon helps to create a new life

for the inhabitants of London. Sequel to Maeve

Ascendant.</description>

</book>

<book id=”bk105″>

<author>Corets, Eva</author>

<title>The Sundered Grail</title>

<genre>Fantasy</genre>

<price>5.95</price>

<publish_date>2001-09-10</publish_date>

<description>The two daughters of Maeve, half-sisters,

battle one another for control of England. Sequel to

Oberon’s Legacy.</description>

</book>

<book id=”bk106″>

<author>Randall, Cynthia</author>

<title>Lover Birds</title>

<genre>Romance</genre>

<price>4.95</price>

<publish_date>2000-09-02</publish_date>

<description>When Carla meets Paul at an ornithology

conference, tempers fly as feathers get ruffled.</description>

</book>

<book id=”bk107″>

<author>Thurman, Paula</author>

<title>Splish Splash</title>

<genre>Romance</genre>

<price>4.95</price>

<publish_date>2000-11-02</publish_date>

<description>A deep sea diver finds true love twenty

thousand leagues beneath the sea.</description>

</book>

<book id=”bk108″>

<author>Knorr, Stefan</author>

<title>Creepy Crawlies</title>

<genre>Horror</genre>

<price>4.95</price>

<publish_date>2000-12-06</publish_date>

<description>An anthology of horror stories about roaches,

centipedes, scorpions and other insects.</description>

</book>

<book id=”bk109″>

<author>Kress, Peter</author>

<title>Paradox Lost</title>

<genre>Science Fiction</genre>

<price>6.95</price>

<publish_date>2000-11-02</publish_date>

<description>After an inadvertant trip through a Heisenberg

Uncertainty Device, James Salway discovers the problems

of being quantum.</description>

</book>

<book id=”bk110″>

<author>O’Brien, Tim</author>

<title>Microsoft .NET: The Programming Bible</title>

<genre>Computer</genre>

<price>36.95</price>

<publish_date>2000-12-09</publish_date>

<description>Microsoft’s .NET initiative is explored in

detail in this deep programmer’s reference.</description>

</book>

<book id=”bk111″>

<author>O’Brien, Tim</author>

<title>MSXML3: A Comprehensive Guide</title>

<genre>Computer</genre>

<price>36.95</price>

<publish_date>2000-12-01</publish_date>

<description>The Microsoft MSXML3 parser is covered in

detail, with attention to XML DOM interfaces, XSLT processing,

SAX and more.</description>

</book>

<book id=”bk112″>

<author>Galos, Mike</author>

<title>Visual Studio 7: A Comprehensive Guide</title>

<genre>Computer</genre>

<price>49.95</price>

<publish_date>2001-04-16</publish_date>

<description>Microsoft Visual Studio 7 is explored in depth,

looking at how Visual Basic, Visual C++, C#, and ASP+ are

integrated into a comprehensive development

environment.</description>

</book>

</catalog>

 

 

Ucitavanje JSON dokumenata

 

HTML kod:

<!DOCTYPE html>

<html>

<head>

<title>Ajax i Java Script</title>

<meta charset=”utf-8″>

</head>

<body>

<div id=”popuni”></div>

<script src=”JSONajax.js”></script>

</body>

</html>

 

 

JS kod:

var zahtev = new XMLHttpRequest();

zahtev.open(‘GET’,’podaci.json’);

 

zahtev.onreadystatechange = function(){

 

if(zahtev.status === 200 && zahtev.readyState === 4){

var sve= JSON.parse(zahtev.responseText);

 

var izlaz = “<ul>”;

for (var key in sve){

izlaz +=”<li>” + sve[key].name + “</li>”;

}

izlaz +=”</ul>”;

}

document.getElementById(‘popuni’).innerHTML= izlaz;

};

 

zahtev.send();

 

 

JSON document:

[

{

“name”:”Barot Bellingham”,

“shortname”:”Barot_Bellingham”,

“reknown”:”Royal Academy of Painting and Sculpture”,

“bio”:”Barot has just finished his final year at The Royal Academy of Painting and Sculpture, where he excelled in glass etching paintings and portraiture. Hailed as one of the most diverse artists of his generation, Barot is equally as skilled with watercolors as he is with oils, and is just as well-balanced in different subject areas. Barot’s collection entitled \”The Un-Collection\” will adorn the walls of Gilbert Hall, depicting his range of skills and sensibilities – all of them, uniquely Barot, yet undeniably different”

},

{

“name”:”Jonathan G. Ferrar II”,

“shortname”:”Jonathan_Ferrar”,

“reknown”:”Artist to Watch in 2012″,

“bio”:”The Artist to Watch in 2012 by the London Review, Johnathan has already sold one of the highest priced-commissions paid to an art student, ever on record. The piece, entitled Gratitude Resort, a work in oil and mixed media, was sold for $750,000 and Jonathan donated all the proceeds to Art for Peace, an organization that provides college art scholarships for creative children in developing nations”

},

{

“name”:”Hillary Hewitt Goldwynn-Post”,

“shortname”:”Hillary_Goldwynn”,

“reknown”:”New York University”,

“bio”:”Hillary is a sophomore art sculpture student at New York University, and has already won all the major international prizes for new sculptors, including the Divinity Circle, the International Sculptor’s Medal, and the Academy of Paris Award. Hillary’s CAC exhibit features 25 abstract watercolor paintings that contain only water images including waves, deep sea, and river.”

},

{

“name”:”Hassum Harrod”,

“shortname”:”Hassum_Harrod”,

“reknown”:”Art College in New Dehli”,

“bio”:”The Art College in New Dehli has sponsored Hassum on scholarship for his entire undergraduate career at the university, seeing great promise in his contemporary paintings of landscapes – that use equal parts muted and vibrant tones, and are almost a contradiction in art. Hassum will be speaking on \”The use and absence of color in modern art\” during Thursday’s agenda.”

},

{

“name”:”Jennifer Jerome”,

“shortname”:”Jennifer_Jerome”,

“reknown”:”New Orleans, LA”,

“bio”:”A native of New Orleans, much of Jennifer’s work has centered around abstract images that depict flooding and rebuilding, having grown up as a teenager in the post-flood years. Despite the sadness of devastation and lives lost, Jennifer’s work also depicts the hope and togetherness of a community that has persevered. Jennifer’s exhibit will be discussed during Tuesday’s Water in Art theme.”

},

{

“name”:”LaVonne L. LaRue”,

“shortname”:”LaVonne_LaRue”,

“reknown”:”Chicago, IL”,

“bio”:”LaVonne’s giant-sized paintings all around Chicago tell the story of love, nature, and conservation – themes that are central to her heart. LaVonne will share her love and skill of graffiti art on Monday’s schedule, as she starts the painting of a 20-foot high wall in the Rousseau Room of Hotel Contempo in front of a standing-room only audience in Art in Unexpected Places.”

},

{

“name”:”Constance Olivia Smith”,

“shortname”:”Constance_Smith”,

“reknown”:”Fullerton-Brighton-Norwell Award”,

“bio”:”Constance received the Fullerton-Brighton-Norwell Award for Modern Art for her mixed-media image of a tree of life, with jewel-adorned branches depicting the arms of humanity, and precious gemstone-decorated leaves representing the spouting buds of togetherness. The daughter of a New York jeweler, Constance has been salvaging the discarded remnants of her father’s jewelry-making since she was five years old, and won the New York State Fair grand prize at the age of 8 years old for a gem-adorned painting of the Manhattan Bridge.”

},

{

“name”:”Riley Rudolph Rewington”,

“shortname”:”Riley_Rewington”,

“reknown”:”Roux Academy of Art, Media, and Design”,

“bio”:”A first-year student at the Roux Academy of Art, Media, and Design, Riley is already changing the face of modern art at the university. Riley’s exquisite abstract pieces have no intention of ever being understood, but instead beg the viewer to dream, create, pretend, and envision with their mind’s eye. Riley will be speaking on the \”Art of Abstract\” during Thursday’s schedule”

},

{

“name”:”Xhou Ta”,

“shortname”:”Xhou_Ta”,

“reknown”:”China International Art University”,

“bio”:”A senior at the China International Art University, Xhou has become well-known for his miniature sculptures, often the size of a rice granule, that are displayed by rear projection of microscope images on canvas. Xhou will discuss the art and science behind his incredibly detailed works of art.”

}

]

 

 

Kako bi ovo uradili sa jQuery sintaksom?

 

Zaprvao, jedino sto bi morali da promenimo je java script kod. On bi izgledao ovako:

 

$.getJSON(‘podaci.json’, function(podaci) {

var izlaz = ‘<ul>';

$.each(podaci, function(key, val){

izlaz +='<li>’ + val.name + ‘</li>';

});

izlaz +='</ul>';

$(‘#popuni’).html(izlaz);

});

 

Za slucaj da unutar diva sa id-jem popuni imamo jos neki tekst, umesto html(‘izlaz’) koristili bi append ili prepend metod.

 

 

 

 

Pozivanje AJAX-a u slucaju nekog dogadjaja

 

 

Ovako napisan kod izvrsava se prilikom ucitavanja strane. TO je bas bilo nesto sto nismo zeleli da se desava J. Da bi kod imao smisla, pogledacemo kako da ga iniciramo u slucaju nekog dogadjaja.

 

Ako pogledamo poslednji primer, narocito js kod, videcemo da se on uvek izvrsava, tj. odmah po pozivanju iz html-a. Da bi kontrolisali kada se kod izvrsava, sav kod cemo staviti unutar neke funkcije cije cemo iniciranje definisati kao klik na dugme. Za to nam treba I mala izmena u html delu, tj. dodavanje dugmeta na koje cemo kliknuti kako bi prouzrokovali izvrsenje koda.

 

HTML ce sada izgledati ovako:

<!DOCTYPE html>

<html>

<head>

<title>Ajax i Java Script</title>

<meta charset=”utf-8″>

</head>

<body>

Klikni za dobijanje spiska autora <input id=”klik” type=”button” value=”Klik”>

<div id=”popuni”></div>

<script src=”JSONajax.js”></script>

</body>

</html>

 

A JS kod:

klik.onclick = function (){

 

var zahtev = new XMLHttpRequest();

zahtev.open(‘GET’,’podaci.json’);

 

zahtev.onreadystatechange = function(){

 

if(zahtev.status === 200 && zahtev.readyState === 4){

var sve= JSON.parse(zahtev.responseText);

 

var izlaz = “<ul>”;

for (var key in sve){

izlaz +=”<li>” + sve[key].name + “</li>”;

}

izlaz +=”</ul>”;

}

document.getElementById(‘popuni’).innerHTML= izlaz;

};

 

zahtev.send();

 

}

 

 

 

Isto bi se moglo primeniti I u slucaju TXT i XML primera.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Zadatak: Kreiranje interaktivnog search-a sa slikama i tekstom

 

U ovom primeru kreiracemo search stranu koja ce podatke ucitavati iz JSON dokumenta a pomocu jQuery komandi suzavati search sa svakim otkucanim slovom.

 

Za ovaj zadatak imamo pripremljen JSON dokument i slike u folderu images. Sve ostalo cemo napraviti.

Prvo cemo pogledati HTML dokument koji predstavlja nasu search web stranicu. Kod je prilicno jednostavan, tj. sadrzi samo input polje i ucitava potrebne java script dokumente.

 

<!DOCTYPE html>

<html lang=”en”>

<head>

<title>Pretraga podataka AJAX</title>

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

<meta charset=”utf-8″>

</head>

<body>

<div id=”searcharea”>

<label for=”search”>Label search</label>

<p>Enter a name or info about speaker</p>

<input type=”search” name=”search” id=”search” placeholder=”name or info”>

</div>

<div id=”update”></div>

<script src=”jquery.js”></script>

<script src=”script.js”></script>

</body>

</html>

 

U okviru diva sa id-jem update bice prikazani celokupni rezultati pretrage, pa nam njegov id treba u js dokumentu.

 

Dalje, imamo JSON dokument sa svim podacima. Njegov izgled je dat ispod.

[

{

“name”:”Barot Bellingham”,

“shortname”:”Barot_Bellingham”,

“reknown”:”Royal Academy of Painting and Sculpture”,

“bio”:”Barot has just finished his final year at The Royal Academy of Painting and Sculpture, where he excelled in glass etching paintings and portraiture. Hailed as one of the most diverse artists of his generation, Barot is equally as skilled with watercolors as he is with oils, and is just as well-balanced in different subject areas. Barot’s collection entitled \”The Un-Collection\” will adorn the walls of Gilbert Hall, depicting his range of skills and sensibilities – all of them, uniquely Barot, yet undeniably different”

},

{

“name”:”Jonathan G. Ferrar II”,

“shortname”:”Jonathan_Ferrar”,

“reknown”:”Artist to Watch in 2012″,

“bio”:”The Artist to Watch in 2012 by the London Review, Johnathan has already sold one of the highest priced-commissions paid to an art student, ever on record. The piece, entitled Gratitude Resort, a work in oil and mixed media, was sold for $750,000 and Jonathan donated all the proceeds to Art for Peace, an organization that provides college art scholarships for creative children in developing nations”

},

{

“name”:”Hillary Hewitt Goldwynn-Post”,

“shortname”:”Hillary_Goldwynn”,

“reknown”:”New York University”,

“bio”:”Hillary is a sophomore art sculpture student at New York University, and has already won all the major international prizes for new sculptors, including the Divinity Circle, the International Sculptor’s Medal, and the Academy of Paris Award. Hillary’s CAC exhibit features 25 abstract watercolor paintings that contain only water images including waves, deep sea, and river.”

},

{

“name”:”Hassum Harrod”,

“shortname”:”Hassum_Harrod”,

“reknown”:”Art College in New Dehli”,

“bio”:”The Art College in New Dehli has sponsored Hassum on scholarship for his entire undergraduate career at the university, seeing great promise in his contemporary paintings of landscapes – that use equal parts muted and vibrant tones, and are almost a contradiction in art. Hassum will be speaking on \”The use and absence of color in modern art\” during Thursday’s agenda.”

},

{

“name”:”Jennifer Jerome”,

“shortname”:”Jennifer_Jerome”,

“reknown”:”New Orleans, LA”,

“bio”:”A native of New Orleans, much of Jennifer’s work has centered around abstract images that depict flooding and rebuilding, having grown up as a teenager in the post-flood years. Despite the sadness of devastation and lives lost, Jennifer’s work also depicts the hope and togetherness of a community that has persevered. Jennifer’s exhibit will be discussed during Tuesday’s Water in Art theme.”

},

{

“name”:”LaVonne L. LaRue”,

“shortname”:”LaVonne_LaRue”,

“reknown”:”Chicago, IL”,

“bio”:”LaVonne’s giant-sized paintings all around Chicago tell the story of love, nature, and conservation – themes that are central to her heart. LaVonne will share her love and skill of graffiti art on Monday’s schedule, as she starts the painting of a 20-foot high wall in the Rousseau Room of Hotel Contempo in front of a standing-room only audience in Art in Unexpected Places.”

},

{

“name”:”Constance Olivia Smith”,

“shortname”:”Constance_Smith”,

“reknown”:”Fullerton-Brighton-Norwell Award”,

“bio”:”Constance received the Fullerton-Brighton-Norwell Award for Modern Art for her mixed-media image of a tree of life, with jewel-adorned branches depicting the arms of humanity, and precious gemstone-decorated leaves representing the spouting buds of togetherness. The daughter of a New York jeweler, Constance has been salvaging the discarded remnants of her father’s jewelry-making since she was five years old, and won the New York State Fair grand prize at the age of 8 years old for a gem-adorned painting of the Manhattan Bridge.”

},

{

“name”:”Riley Rudolph Rewington”,

“shortname”:”Riley_Rewington”,

“reknown”:”Roux Academy of Art, Media, and Design”,

“bio”:”A first-year student at the Roux Academy of Art, Media, and Design, Riley is already changing the face of modern art at the university. Riley’s exquisite abstract pieces have no intention of ever being understood, but instead beg the viewer to dream, create, pretend, and envision with their mind’s eye. Riley will be speaking on the \”Art of Abstract\” during Thursday’s schedule”

},

{

“name”:”Xhou Ta”,

“shortname”:”Xhou_Ta”,

“reknown”:”China International Art University”,

“bio”:”A senior at the China International Art University, Xhou has become well-known for his miniature sculptures, often the size of a rice granule, that are displayed by rear projection of microscope images on canvas. Xhou will discuss the art and science behind his incredibly detailed works of art.”

}

]

 

 

 

 

 

 

Java Script dokument je ono sto nas zanima. Ovde ga dajemo u celosti a ispod pocinjemo sa objasnjenjima.

 

$(‘#search’).keyup(function(){

var searchField=$(‘#search’).val();

var myExp= new RegExp(searchField, ‘i’);

$.getJSON(‘data.json’, function(data){

var output = ‘<ul class=”searchresults”>';

$.each(data, function(key,val){

// ovaj if iskaz govori da li karaktere koje kucamo mozemo naci u tekstu name taga koji se trenutno ucitava ili njihove biografije

if(val.name.search(myExp) != -1 || val.bio.search(myExp) != -1){

output +='<li><h2>';

output +=val.name;

output +='</h2>';

output +='<img src=”images/’ + val.shortname + ‘_tn.jpg” alt=”‘ + val.name + ‘” >';

output +='<p>’ + val.bio + ‘</p>';

output +='</li>';

}

});

output +='</ul>';

$(‘#update’).html(output);

});

 

});

 

 

 

Java Script – deo po deo

 

 

Prva linija je kreirana u jQuery sintaksi i omogucava da se celokupan kod izvrsava u slucaju dogadjaja keyup (momenat nakon sto pritisnemo taster i otpustimo ga) i odnosi se na polje sa id-jem search –

 

$(‘#search’).keyup(function(){

 

Dalje, definisemo promenljivu koja ce hvatati tekst, tj. niz karaktera koje korisnik kuca. Njena vrednost se update-uje svaki put kada korisnik otkuca neko slovo iz prostog razloga jer se nalazi unutar keyup funkcije. Njena vrednost ce nam trebati kada budemo poredili da li se tekst koji kucamo nalazi u imenima (name svojstvo JSON dokumenta kao i u sekciji sa biografskim podacim – bio)

 

var searchField=$(‘#search’).val();

 

Nakon toga, kreiramo novu promenljivu koja proverava vrednosti promenljive i spremna je za kasnije uporedjivanje, tj. ovako napisana, ova promenljiva ima vrednost -1 ukoliko se pronadje poklapanje sa unetim nizom karaktera.’ i’ u Izrazu znaci da ne obraca paznju da li su mala ili velika slova u pitanju.

 

var myExp= new RegExp(searchField, ‘i’);

 

Sad sledi sekcija kojom se ucitavaju podaci iz JSON dokumenta prolazeci kroz petlju each (jQuery) i ispisuju se u vidu neuredjene liste <ul>. Podaci koje ucitavamo su iz JSON polja name, shortname i bio a linkove ka slikama gradimo kroz manipulisuci sa imenom i prezimenom osobe iz polja shortname.

 

$.getJSON(‘data.json’, function(data){

var output = ‘<ul class=”searchresults”>';

$.each(data, function(key,val){

 

 

Dalje imamo if iskaz koji proverava da li se u okviru stavke name i bio koje ucitava nalazi string koji je otkucan i ako jeste, on ima vrednost -1 i record se ispisuje. Ukoliko ga nema, petlja each ide na sledeci.

if(val.name.search(myExp) != -1 || val.bio.search(myExp) != -1){

output +='<li><h2>';

output +=val.name;

output +='</h2>';

output +='<img src=”images/’ + val.shortname + ‘_tn.jpg” alt=”‘ + val.name + ‘” >';

output +='<p>’ + val.bio + ‘</p>';

output +='</li>';

}

});

output +='</ul>';

 

Na kraju imamo red koji u div sa id-jem update smesta sve podatke uskladistene u promenljivu output koja ustvari predstavlja niz.

 

$(‘#update’).html(output);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn