U ovom tutorijalu ćemo se upoznati sa osnovama JavaScript programskog jezika. Poželjno je minimalno znanje HTML-a pre početka ovog tutorijala.
Sadržaj |
JavaScript nazivaju izvršnim jezikom web-a.
JavaScript je objektno orjentisan programski jezik namenjen dinamičkoj izradi web sajtova. Koristi se u milionima web sajtova za poboljšanje funkcionalnosti, validaciju formi, detekciju browsera, asinhronu komunikaciju sa serverom i još mnogo toga. Razvijen je 1995. godine od strane Netscape-a i koristi se kao client-side (klijent zasnovan) internet programski jezik. To znači da se njegova obrada vrši na korisnikovom računaru u samom browser-u čime se postiže veća brzina rada, web aplikacije odgovaraju brže na korisnikove akcije i samim tim se postiže veća efikasnost.
Predstavlja skripting jezik, što u prevodu znači lagan programski jezik.
Napomena: JavaScript nije isto što i JAVA programski jezik. Jedine sličnosti koje imaju je početno ime i ništa više.
JavaScript se u HTML dokument može ubaciti na dva načina. Pisanjem direktno u HTML kod ili smeštanjem u poseban fajl (ekstenzija ".js") koji se potom poziva u HTML dokumentu. Oba načina su pravilna i ne postoji razlika u radu skripta. Pozivanje spoljnog fajla je dobro u slučajevima kada se jedna ista skripta koristi u više stranica.
Browser čita HTML stranicu i prikazuje elemente onako kako oni nailaze. Kada naiđe na skript u stranici, obavlja se njegovo izvršavanje pre nego što se nastavi čitanje ostalih elemenata (tekst, slike...).
<html>JavaScript pisan u HTML dokumentu
<body>
<script type="text/javascript">
document.write("Ovo je moj prvi JavaScript!");
</script>
</body>
</html>
<script type="text/javascript" src="/js/neka-skripta.js"></script>
JavaScript pozvan iz zasebnog fajla
Postoje različiti načini pozivanja JavaScript koda, tj. različita mesta gde se on može smestiti u stranici. Prvi način je da se Java Script kod stavi u <head> sekciji, dok je drugi način smeštanje unutar <body> sekcije dokumenta. Kod prvog načina skripta se učitava odmah, još pre učitavanja čitave stranice, dok se kod drugog načina skripta izvršava čim browser naiđe na nju. Moguće je postaviti neograničen broj skripti u stranicu, bilo da se radi o prvom ili drugom slučaju.
Jedna od osnovnih stvari koju morate da znate su komentari unutar koda. Komentari se koriste radi lakšeg snalaženja u kodu, i kao podsetnici. To je način da sami sebi ostavljate poruke u toku programiranja, kao i da olakšate programiranje onome ko nasledi vaš kod.
Mogu se koristiti na dva načina:// ovo je komentar u jednoj liniji koda
/* Ukoliko zelite da napravite veći komentar
koji zauzima više redova, učiničete to ovako */
JavaScript kao i ostali programski jezici, koristi promenljive da bi zapamtio vrednosti, tako da se one kasnije mogu koristiti u drugim delovima programa. Promenljive su imena koja se povezuju sa ovim upamćenim vrednostima. Na primer, promenljiva imeKorisnika se može koristiti da čuva vrednost koju korisnik unese.
Imena promenljivih mogu da počinju velikim slovima (A - Z), malim slovima (a - z), ili donjom crtom (_). Preostali karakteri mogu da se sastoje od malih i velikih slova, donje crte, ili cifara od 0 do 9.
Primeri naziva promenljivih:
brojPorudzbina_id123
ZBIR
Slika5
form_submit
JavaScript je case-sensitive, što znači da obraća pažnju na velika i mala slova. To znači da promenljiva nazvana zbir ukazuje na različitu vrednost od promenljivih ZBIR, Zbir, itd. Zbog toga je veoma važno obratiti pažnju na korišćenje malih i velikih slova u nazivima promenljivih.
JavaScript za razliku od nekih drugih programskih jezika ne zahteva specificiranje tipa vrednosti promenljive, on to čak i ne dozvoljava. Ista promenljiva može da se koristi za smeštanje različitih tipova vrednosti u njoj, kao što su redosled simbola koji u stvari predstavljaju string (Hello world!), celi brojevi (52), vrednosti realnog broja (3.14) ili logičke vrednosti (true, false). Java Script interpretator automatski konvertuje tip podataka koji se nalazi u promenljivoj.
Deklarisanje promenljivih se vrši oznakom var:
var x;
var y = 86;
var odobrenje = true;
var modelAuta = "Peugeot 206";
Prilikom pravljenja promenljivih, moguće ih je napraviti prazne ili im odmah dodeliti vrednost, kao što je prikazano u primeru. Kod dodeljivanja teksta vrednost se stavlja između navodnika, dok se kod brojeva i logičkih vrednosti navodnici ne koriste.
Promena vrednosti u promenljivoj se vrši ponovnim dodeljivanjem nove vrednosti toj promenljivoj.
Postoje dve vrste promenljivih:
- Lokalne promenljive
- Globalne promenljive
Lokalne promenljive se oznakom var definišu unutar neke funkcije i dostupne su samo unutar iste, dok se globalne promenljive definišu izvan funkcije i njima se može pristupiti iz bilo koje funkcije. Ukoliko se pak promenljiva definiše unutar funkcije bez oznake var, ona će tada biti globalna.
Pre ovog primera pogledajte prvo šta su funkcije.
function test() {
var a = 5;
}
var b = a + 10;
/* dolazi do greške jer je promenljiva a
dostupna samo unutar funkcije test() */
Ovde imamo primer lokalne promenljive a koja je definisana unutar funkcije test(). Samim tim ova promenljiva a će biti dostupna samo unutar te funkcije. Ukoliko se pozove izvan funkcije test() ona neće biti dostupna i doći če do pucanja koda, tj. do prestanka izvršenja skripte.
Medjutim, ukoliko promenljivu a definišemo izvan funkcije, ona će biti globalna i moći će joj se pristupiti iz bilo koje funkcije.
var a = 5;
function test() {
var b = a + 10;
}
Takodje, ako promenljivu a definišemo unutar funkcije, ali bez oznake var ona će biti dostupna iz bilo kog dela skripte.
function test() {
a = 5;
}
var b = a + 10;
Nizovi su objekti koji imaju mogućnost smeštanja višestrukih vrednosti. Dakle, to je posebna promenljiva koja može da sadrži više od jedne vrednosti u isto vreme.
Sastoje se iz naziva niza i indeksa koji predstavlja element niza i koji je uvek broj. Indeks drugim rečima predstavlja redni broj niza i nalazi se izmedju uglastih zagrada.
niz[0]niz[1]
niz[2]
niz[3]
...
Nizovi se mogu deklarisati na više načina. Možete im dodeljivati vrednosti odmah prilikom deklaracije ili naknadno u toku daljeg programiranja. Što se tiče indeksa, indeksni brojevi se mogu definisati svojevoljno ili se mogu numerisati automatski. Prilikom automatskog indeksiranja indeksni brojevi imaju rastuću vrednost i uvek nastavljaju od poslednjeg definisanog indeksnog broja.
Napomena: kod automatskog indeksiranja, indeks uvek počinje od 0
// deklaracija praznih nizova
var automobil = new Array();
// ili
var automobil = [];
// deklarisanje niza koji će imati 10 elemenata
var automobil = new Array(10);
// deklarisanje niza čiji indeks počinje od 10
var automobil = [10];
// deklaracija niza sa dodeljivanjem vrednosti
var automobil = new Array("BMW","Mazda","Yugo");
// ili
var automobil = ["BMW","Mazda","Yugo"];
/* dodeljivanje vrednosti nizu gde vi odredjujete indeks
(pretpostavlja se da ste prethodno deklarisali niz) */
automobil[1] = "BMW";
automobil[3] = "Mazda";
automobil[7] = "Yugo";
// dodeljivanje vrednosti nizu sa automatskim indeksom
automobil[] = "BMW";
automobil[] = "Mazda";
automobil[] = "Yugo";
Pristupanje elementu u nizu se vrši preciziranjem imena niza i rednog broja elementa u njemu.
Promena vrednosti u nizu sa odredjenim indeksom se vrši isto kao i kod promenljivih, ponovnim dodeljivanjem nove vrednosti nizu sa željenim indeksom.
Ukoliko niste upoznati sa radom ni jednog drugog programskog jezika, isprva najverovatnije nećete shvatiti svrhu nizova, medjutim nizovi su od izuzetnog značaja u svim programskim jezicima. Više o njihovom konkretnom korišćenju u naprednijem tutorijalu.
Operator se koristi za transformisanje jedne ili više vrednosti u jednu rezultujuću vrednost. Vrednosti na koje se operator primenjuje nazivaju se operandi. Kombinacija operatora i njegovih operanada poznata je kao izraz.
JavaScript radi sa operatorima koji su podeljeni u sledeće kategorije:
- aritmetički operatori
- logički operatori
- operatori poređenja
- operatori stringova
- operatori dodele
Aritmetički operatori u stvari predstavljaju matematičke operatore koji se koriste za razna izračunavanja.
| Operator | Opis |
|---|---|
| + | sabiranje |
| - | oduzimanje |
| * | množenje |
| / | deljenje |
| ++ | inkrementacija |
| -- | dekrementacija |
Logički operatori se koriste za izvođenje logičkih (Boolean) operacija nad logičkim operandima.
| Operator | Opis |
|---|---|
| && | logičko I |
| || | logičko ILI |
| ! | logička negacija |
Operatori poređenja se koriste za određivanje kada su dve vrednosti jednake, ili za poređenje numeričkih vrednosti, na primer da bi se ustanovilo koja je vrednost veća od druge.
| Operator | Opis |
|---|---|
| == | jednako |
| === | strogo jednako |
| != | nije jednako |
| !== | strogo nije jednako |
| < | manje |
| <= | manje ili jednako |
| > | veće |
| >= | veće ili jednako |
String operatori se koriste za izvođenje operacija nad stringovima. Trenutno je u upotrebi samo jedan operator (+). Koristi se za spajanje dva stringa nadovezivanjem. Na primer, "ab" + "cd" proizvodi "abcd".
Operatori dodele se koriste za dodeljivanje i ažuriranje vrednosti promenljivih.
| Operator | Primer | Isto kao |
|---|---|---|
| = | x = y | |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
Logički iskazi predstavljaju logičke konstrukcije za proveru odredjenih uslova.
Najjednostavniji oblik logičkog iskaza je if iskaz. On koristi operatore poredjenja kako bi izvršio proveru uslova, i veoma je jednostavan za korišćenje. Dakle, ukoliko je ispunjen uslov iz zagrade izvršava se kod.
if(x == 1) {
// kod za izvršenje ako je x jednako 1
}
if(x > 1) {
// kod za izvršenje ako je x veće od 1
}
Proširena verzija ovog iskaza je if...else iskaz. Radi isto kao i običan if iskaz, stim što ima dodatu opciju else koja omogućava izvršenje nekog koda ukoliko uslov iz if iskaza nije ispunjen.
if(x == 1) {
// kod za izvršenje ako je x jednako 1
} else {
// kod za izvršenje kada x ima bilo koju drugu vrednost
}
Još naprednija varijanta if iskaza je if...else if...else iskaz. On predstavlja ništa drugo do kombinovanje gore navedenih iskaza.
if(x == 0) {
// kod za izvršenje ako je x jednako 0
} else if(x == 1) {
// kod za izvršenje ako je x jednako 1
} else {
// kod za izvršenje kada x ima bilo koju drugu vrednost
}
Drugi logički iskaz je switch iskaz, koji je po svojoj funkciji veoma sličan if iskazu. Koristi se ukoliko imamo više provera odredjenih vrednosti. Prvo mu prosledjujemo neku promenljivu koja se zatim uporedjuje sa različitim vrednostima. Ukoliko se vrednost poklapa izvršava se zadati kod. Koristimo break naredbu da sprečimo nepotrebni nastavak ostalih poredjenja. Naredba default je ekvivalent naredbi else iz if iskaza i služi da izvrši neki kod ukoliko ni jedan od uslova nije ispunjen.
switch(x) {
case 1:
// kod za izvršenje ukoliko je x jednako 1
break;
case 2:
// kod za izvršenje ukoliko je x jdnako 2
break;
default:
// kod za izvršenje ukoliko ni jedan od gornjih uslova nije ispunjen
}
Petlje predstavljaju naprednije logičke iskaze. One imaju sposobnost da istu radnju ponavljaju dok god je neki uslov ispunjen. Postoje dve vrste petlji, for i while petlje.
For petlja se koristi kada unapred znate koliko puta bi radnja trebalo da se ponavlja. Sintaksa for petlje izgleda ovako:
for(var=početna_vrednost; var<=završna_vrednost; var+uvećanje_vrednosti) {
// kod za izvršenje
}
U for petlji postoje tri parametra koji su odvojeni tačkom i zarezom. Prvi parametar predstavlja promenljivu koja ima neku početnu vrednost. Drugi parametar predstavlja uslov izvršenja petlje. Treći parametar predstavlja uvećanje vrednosti. Pošto sve ovo verovatno izgleda konfuzno, pogledajmo konkretan primer:
for(var i = 0; i <= 10; i++) {
// kod za izvršenje
}
Dakle, promenljivoj i smo dodelili početnu vrednost 0. Petlja će se izvršavati samo ukoliko je i manje ili jednako 10. Nakon svakog izvršenja petlje i se povećava za 1, što znači da će petlja biti izvršena 11 puta jer je početna vrednost 0 koju takodje brojimo.
Napredniji vid for petlje je for...in petlja. Ona se koristi za operacije nad elementima niza ili objekta, stoga pogledajte prvo šta su objekti. Sintaksa izgleda ovako:
for(promenljiva in niz/objekat) {
// kod za izvršenje
}
Dakle, ova petlja se izvršava za svaki element u nizu ili objektu. Ukoliko niz ili objekat sadrži 20 elemenata, petlja će se izvršiti 20 puta.
While petlja se koristi kada je potrebno da izvršavate neki kod dok god je uslov istinit. Petlja će biti izvršena samo ako je uslov ispunjen. Sintaksa izgleda ovako:
while(uslov) {
// kod za izvršenje
}
Uslov može biti bilo kakva provera, kao kod if iskaza. Primeri:
while(a == 5) {
// kod za izvršenje
}
while(name == 'John') {
// kod za izvršenje
}
while(x <= 10) {
// kod za izvršenje
}
Dakle, petlja će se izvršavati dok god je uslov ispunjen, tj. dok god promenljiva ne promeni vrednost unutar petlje. Zbog toga pazite da ne napravite beskonačnu petlju koja će blokirati browser.
Još jedna varijanta while petlje je do...while petlja. Razlika izmedju obične while petlje i do...while petlje je u tome što se kod while petlje ona izvršava samo ako je uslov ispunjen, dok se do...while petlja izvrši jednom pre provere uslova.
do {
// kod za izvršenje
} while(uslov);
Da bi sprečili da se ceo kod JavaScript-a izvrši prilikom učitavanja stranice koriste se funkcije. Funkcije su delovi programskog koda koji se izvršavaju samo kada su pozvani. Funkcije mogu biti pozvane sa bilo kojeg mesta na stranici. Mogu biti smeštene i u <head> i u <body> odeljak, s tim da je bolje smeštati ih u <head> sekciju, kako bi bili sigurni da je skripta učitana od strane browser-a pre nego što je pozvana.
Funkcije se definišu oznakom function i sastoje se od imena funkcije, prosledjenih parametara koji se nalaze izmedju zagrada, i izraza funkcije koji se nalaze izmedju vitičastih zagrada. Parametri funkcije su u stvari promenljive koje se prosledjuju datoj funkciji prilikom njenog pozivanja.
function imeFunkcije(var1, var2, ...) {
// kod funkcije...
}
Funkcija može biti pozvana bilo kad i bilo gde u dokumentu. Može se pozivati iz HTML elemenata ili iz drugih funkcija u samom JavaScriptu. Često se prave funkcije koje imaju generalnu svrhu i mogu se koristiti u drugim skriptama (primer validacija formi), ili se zbog lakoće pisanja ili same potrebe, skripta deli u odeljke tj. više funkcija, koje se izvršavaju jedna za drugom ili po potrebi pozivaju jedna drugu.function prvaFunkcija() {
// kod funkcije...
}
// primer pozivanja funkcije iz neke druge funkcije
function drugaFunkcija() {
prvaFunkcija();
}
Mogu da se koriste za kao povratne i nepovratne, tj. one koje vraćaju obradjeni podatak ili one koji imaju namenu da samo izvrše nešto bez povratne informacije.
Ukoliko su povratne, koriste naredbu return kojom vraćaju odredjeni podatak.
function saberi(a, b) {
return a + b;
}
var zbir = saberi(6, 15);
Objekat predstavlja elemente sa skupom vrednosti. Ove vrednosti mogu biti primitivni tipovi podataka, drugi objekti ili funkcije.
Najbolje objašnjenje kako se prave i izgledaju objekti možete videti kroz primer.
var auto = {
vrsta: "limuzina", // vrednost (string)
vrata: 5, // broj
nov: true, // logička vrednost
motor: { // objekat
snaga: '185hp',
zapremina: 1.5
},
potrosnja: function(a, b) { // funkcija
return a + b;
}
}
Kao što smo rekli objekat u sebi može da sadrži funkcije. Ove funkcije nazivaju se motode. Njima, kao i svim ostalim elementima iz objekta se pristupa pomoću tačke (.), tj. dodavanjem tačke i imena željenog metoda iza imena objekta.
// pristupanje funkciji (metodi) potrosnja unutar objekta auto
auto.potrosnja(8,100);
// pristupanje drugom objektu koji sadrži promenljivu snaga unutar objekta auto
auto.motor.snaga;
Elementima unutar objekta možemo pristupiti i pomoću uglastih zagrada [ ] na sledeći način:
auto["vrsta"];
Ukoliko ste upoznati sa nekim drugim programskim jezikom kao što je recimo PHP, dati primer vam može ličiti na niz koji se naziva asocijativni niz, tj. niz koji za svoj indeks ima ime umesto broja.
Kao i u većini ostalih jezika i u JavaScript-u postoje biblioteke. Biblioteka predstavlja skup gotovih funkcija koje imaju širu primenu, i time omogućava korisniku lakše programiranje.
Primenjuju se kod DOM pristupa i manipulacija, olakšavanja i ubrzavanja programiranja, proširivanja funkcionalnosti pomoću gotovih komponenti, itd...
Zahvaljujući bibliotekama, ne moramo više da pišemo višenamenske funkcije od nule.
Neke od popularnijih JavaScript biblioteka su jQuery, MooTools, Prototype, i mnoge druge...
![Web Arena [at] Blink](/images/stories/web-arena-at-blink/thumb-small.jpg)
