JavaScript podsetnik za Web DOM
Ovde ćemo na jednom mestu skupiti više (obimnijih) tema iz JavaScripta i opisati ih u najkraćim crtama. Posmatrajte ovaj tekst kao kratki vodič za preživljavanje... Nešto najosnovnije što nam je potrebno kako bismo "prohodali" u web DOM programiranju.
Naravno, preporučujemo vam da obavezno savladate JavaScript kako biste na najbolji mogući način programirali klijentske web aplikacije.
JavaScript na web stranici
Najjednostavniji način uvođenja JavaScript programa na web stranicu je korišćenjem oznake <script>. Ova oznaka se može navesti bilo gde na stranici, a bilo bi najbolje ako bismo je smestili unutar <head> odeljka.
<script>
...JavaScript program
</script>
Ipak, najpreporučljivije je da se JavaScript izdvoji u zaseban fajl ili više njih. O ovim stvarima možete čitati u tekstu Uvođenje JavaScript-a na web stranicu.
U JavaScriptu možemo imati različite naredbe i izraze, deklaracije i pozive funkcija. Možemo kreirati sopstvene ili koristiti već gotove objekte. Ono što će nam na samom početku biti potrebno je da shvatimo promenljive, funkcije i objekte, kako bismo makar započeli rad i proizveli kakav takav efekat na web stranici. Praktično sve sa čime radimo će biti označeno tzv. identifikatorom. Identifikator je praktično naziv nečega - npr. "a", "X", "document" i sl.
Jedan od najvažnijih koncepata svakog programskog jezika je rad sa izrazima. JavaScript nije izuzetak. Izrazi mogu biti aritmetički (matematička izračunavanja), logički (logičke operacije) ili čak tekstualni (povezivanje tekstova) - sve zavisno od toga sa kakvim se tipovima podataka radi, odnosno, kog tipa je rezultat izraza. Evo nekoliko primera izraza koji "prolaze" JavaScriptu:
157 / (78.3 + x) * z // aritmetički
!(a || b) && c // logički
txt = a + "px" // tekstualni
JavaScript funkcije
Funkcije su potprogrami koji se izvršavaju po pozivu. To znači da u funkcije smeštamo neke delove programa za koje želimo da se izvrše tek kasnije. Funkcije su strašno praktične u JavaScriptu iz više razloga:
- već pomenuto odlaganje izvršenja programa
- ako neki deo programa treba izvršiti više puta i to čak i sa različitim podacima
- korišćenje funkcija jako olakšava programiranje zasnovano na događajima
- funkcije omogućavaju objektno-orijentisano programiranje u JavaScriptu
- funkcije se mogu prosleđivati čak i kao parametri drugim funkcijama, a mogu biti čak i vraćene kao vrednost
Ovde ćemo se baviti samo najosnovnijim mogućnostima rada sa funkcijama. Funkcija se deklariše jednostavno, navođenjem ključne reči function, posle koje se navodi naziv funkcije, praćen otvorenom i zatvorenom zagradom. Naredbe koje se zadaju unutar funkcije, navode se unutar vitičastih zagrada.
function naziv() {
...naredbe unutar funkcije
}
Zagrade koje se stavljaju posle naziva funkcije ne služe samo za ukras - unutar njih se mogu smestiti parametri funkcije. U JavaScriptu se parametri navode kao lista identifikatora, što u praksi znači spisak promenljivih odvojenih zarezima.
function naziv(param, param, ...) {
...naredbe unutar funkcije
}
Parametri su način da se funkciji prenesu neke vrednosti, odnosno da funkcija može raditi sa drugačijim podacima, svaki put.
A da bi funkcija radila, potrebno je negde navesti poziv funkcije. Poziv funkcije se zadaje tako što navedemo naziv funkcije i u zagradi, spisak vrednosti koje odgovaraju parametrima koje smo naveli prilikom deklaracije funkcije.
naziv(vrednost, vrednost, ...)
Ako funkcija nema parametre, stavljaju se samo zagrade.
naziv()
Preko parametara program može nešto da "kaže" funkciji. Isto tako i funkcija može nešto da "kaže" programu, preko povratne vrednosti, koja se navodi posle direktive return, na kraju funkcije. Ovo je važno napomenuti, pošto se funkcija završava kada naiđe na tu naredbu, čak iako posle nje postoji još naredbi.
function naziv(lista parametara) {
...naredbe unutar funkcije
return vrednost;
}
Ako vas zanima malo obimniji uvod na ovu temu, pročitajte naš tekst o JavaScript funkcijama.
Rad sa funkcijama
Da vidimo prvo kako bismo zadali jednu jednostavnu funkciju bez parametara. U ovom primeru ćemo napraviti funkciju bojaTeksta() koja menja boju teksta (u crvenu) HTML elementu identifikovanom kao "blok".
// deklaracija funkcije
function bojaTeksta() {
document.getElementById("blok").style.color = "red";
}
// poziv funkcije
bojaTeksta();
Ovako gledano, nemamo neki boljitak od korišćenja funkcije - samo smo više kucali, a mogli smo prosto da zadamo samo naredbu koja menja boju.
Funkcije sa parametrima
Međutim, hajde da pokušamo da napravimo funkciju tako da možemo da zadamo kom elementu se menja boja. To bi značilo da u funkciju uvodimo parametar.
// deklaracija funkcije
function bojaTeksta(ident) {
document.getElementById(ident).style.color = "red";
}
// pozivi funkcije
bojaTeksta("blok");
bojaTeksta("tekst");
Naravno u HTML delu bi situacija trebala da bude npr. ovakva:
<div id="blok">
...sadržaj
</div>
<div id="tekst">
...sadržaj
</div>
Ovo je sada već malo korisnije - funkcija kao parametar prima neki tekst koji se smešta u promenljivu ident. Taj tekst treba da bude neka postojeća identifikacija nekog HTML elementa (da bi sve uopšte funkcionisalo).
Sada ima smisla pozivati funkciju i više puta, pošto joj prosleđujemo različite parametre - pri prvom pozivu obojiće se tekst DIV elementa sa identifikacijom "blok", a pri drugom pozivu, elementa koji je identifikovan kao "tekst".
Do sada je ova funkcija bojila tekst samo u crvenu boju. Šta mislite, da li bismo mogli da napravimo funkciju još univerzalnijom, pa da boji tekst zadatog elementa u zadatu boju? Pogađate, dodaćemo još jedan parametar - za boju.
// deklaracija funkcije
function bojaTeksta(ident, boja) {
document.getElementById(ident).style.color = boja;
}
// pozivi funkcije
bojaTeksta("blok", "red");
bojaTeksta("tekst", "#4a8");
Sada se pri prvom pozivu elemenat "blok" boji u crvenu boju, a elemenat "tekst" u boju #4a8.
Funkcije koje vraćaju vrednost
U ovom slučaju ćemo probati da napravimo funkciju koja ne samo što ima parametre, nego i vraća vrednost. U pitanju je sasvim prosta funkcija mnozenje() koja množi dva broja. Napravićemo lokalnu promenljivu proizvod u koju smeštamo rezultat množenja dva broja koji se zadaju preko parametara a i b.
Ovde nam je u stvari zanimljiva poslednja naredba funkcije, u kojoj koristimo direktivu return kako bi funkcija "vratila" vrednost u izraz odakle se poziva. U ovom slučaju vraćamo vrednost promenljive proizvod. Mogli smo odmah i da "vratimo" vrednost celog izraza - return a * b, bez korišćenja pomoćne promenljive.
// deklaracija funkcije
function mnozenje(a, b) {
var proizvod = a * b;
return proizvod;
}
// pozivi funkcije
var prvi = mnozenje(5, 4);
var drugi = 45 + mnozenje(3, prvi);
Prvi poziv funkcije je prost izraz dodele gde izračunavamo proizvod brojeva 5 i 4 i taj rezultat smeštamo u promenljivu prvi. Drugi poziv je unutar izraza u kome sabiramo broj 45 i vrednost množenja broja 3 i vrednosti iz promenljive prvi. Onda sve to smeštamo u promenljivu drugi.
JavaScript objekti
Objekat je "konglomerat" koji se sastoji od svojstava (vrednosti) i metoda (delova programa). Svojstva mogu biti promenljive ali i čitavi pod-objekti, dok su metodi u stvari funkcije koje pripadaju objektu.
Svakom pripadajućem elementu objekta pristupamo korišćenjem tačke posle naziva objekta.
objekat.element
Za sada se bavimo samo time kako koristiti već gotove objekte. Malo detaljnije o tome pisali smo u tekstu JavaScript objekti. O tome kako se prave objekti, možete pročitati u JavaScript poglavljima koja se bave objektno-orijentisanim programiranjem - Kreiranje JavaScript objekta.
Korišćenje objekata
Na primer, objekat location ima svojstvo href. To je adresa (URL) stranice na kojoj se trenutno nalazimo. Ova adresa se može čitati, ali i menjati.
// čitamo URL stranice i smeštamo ga u promenljivu adresa
var adresa = location.href;
// zadajemo novu adresu - web čitač će da napusti trenutnu stranu i učita novu
// efekat je kao da smo kliknuli na link
location.href = "http://www.webnstudy.com";
Svojstva mogu da budu i podobjekti, odnosno čitavi objekti sa sopstvenim svojstvima i metodima. Primer bi bio podobjekat body objekta document koji reprezentuje sam <body> element. Unutar svakog elementa imamo i podobjekat style koji predstavlja CSS inline stil tog elementa. Svojstva tog objekta su CSS atributi koje možemo da podesimo iz JavaScripta, kao npr svojstvo color kojim zadajemo boju teksta elementa.
// ovako bismo zadali da boja teksta celog dokumenta bude plava
document.body.style.color = "blue";
Metode unutar objekata pozivamo praktično kao da su funkcije. Na primer, objekat window ima metod alert(). Ovaj metod otvara prozorčić u kome se vidi zadati tekst.
Kao i svaka funkcija, i metodi mogu vratiti neku vrednost, koju možemo koristiti direktno ili je dodeliti nekoj promenljivoj i koristiti kasnije. Tipičan primer bi bio metod getElementById() objekta document koji kao rezultat vraća referencu na određeni elemenat iz HTML dela dokumenta, koji je identifikovan zadatim parametrom.
// otvara se prozorčić sa porukom "Ovo je poruka"
window.alert("Ovo je poruka");
// pronalazimo element označen kao "blok" i referencu smeštamo u promenljivu obj
var obj = document.getElementById("blok");
Promenljive u JavaScriptu
Promenljiva je praktično "kontejner" koji sadrži neku vrednost. Ova vrednost može biti npr. tekstualna ili numerička. Takođe, postoji i jedan vrlo važan poseban tip vrednosti - objekat. promenljiva ne može "sadržati" objekat već u tom slučaju predstavlja referencu na taj objekat u memoriji.
Promenljivu uvodimo u program korišćenjem ključne reči var. Možemo samo navesti promenljivu (ili listu promenljivih), a možemo je i definisati (dodeliti joj neku vrednost).
var promenljiva;
var p1, p2, p3;
var prom = vrednost;
var p1=vrednost, p2=vrednost;
O svemu ovome smo detaljnije pisali u tekstu Promenljive u JavaScriptu.
Reference
Kao što smo već pomenuli, reference ne sadrže zaista neki objekat, već samo predstavljaju vezu sa objektom koji se nalazi negde u memoriji. Svakom objektu u JavaScriptu pristupamo preko reference. Na jedan objekat može pokazivati i više referenci.
Promenljive i reference
Refernce "funkcionišu" kao promenljive (deklarišu se isto sa var), u nekim situacijama nećete ni primetiti razliku, ali razlika postoji i suštinska je. Pogledajte primer.
var a = 120;
var b = a;
a += 5;
// Kakve su vrednosti promenljivih?
- Prvo smo kreirali promenljivu a i u nju smestili vrednost 120.
- Zatim smo kreirali promenljivu b i poistovetili je sa promenljivom a.
- Onda smo vrednost promenljive a povećali za 5 na 125.
Sada je pitanje, koje se vrednosti nalaze u kojoj promenljivoj? Promenljiva a je originalno bila 120, a posle je povećana za 5 i sada ima vrednost 125.
Promenljiva b je na početku dobila vrednost promenljive a, znači 120, ali to je to - te dve promenljive više nemaju nikakve veze - kada povećamo a, b će ostati nepromenjeno, tj. 120.
Pogledajte sada ponašanje referenci
var a = document.getElementById("blok");
var b = a;
a.style.color = "red";
// Kakve su boje tekstova blokova a i b
- Prvo smo kreirali promenljivu a i za nju povezali elemenat blok iz HTML-a.
- Zatim smo kreirali promenljivu b i poistovetili je sa promenljivom a.
- Onda smo boju teksta bloka a promenili u crvenu (red).
Jasno, boja teksta bloka a je crvena, ali kada bismo sada proverili i boju teksta bloka b, takođe bi bila crvena - a i b su samo reference na jedan isti objekat u memoriji. Šta god da uradimo sa promenljivom a, odraziće se i na promenljivu b.
Kada je promenljiva - promenljiva, kada referenca? Pa, uvek kada se u promenljivu smesti neka primitivna vrednost (običan broj ili tekst) - to je obična promenljiva. Ako u promenljivu "smestimo" objekat, to je uvek referenca.
Globalne i lokalne promenljive
Promenljive imaju takozvanu oblast važenja. Mogu da važe samo u funkciji u kojoj se nalaze ili u celom programu (pa ih onda mogu koristiti sve funkcije). Generalno je pravilo da izbegavamo globalne promenljive, ali vrlo često to ne možemo da postignemo - jednostavno treba nam mogućnost da čuvamo podatak na globalnom nivou.
Promenljiva je lokalna samo ako smo je deklarisali unutar funkcije korišćenjem var. Lokalne promenljive su dostupne (imaju vrednost) samo unutar funkcije, ili bolje reći, tokom izvršavanja funkcije. kada se funkcija završi, lokalne promenljive se gube.
Oblast važenja promenljivih
Evo primera koji bi trebao da razjasni šta je globalno, a šta lokalno.
var a = 120; // globalno
var b = 70; // globalno
fun(b); // ne zaboravite - sve što se dešava u funkciji, dešava se tek kada je pozovemo
function fun(p) {
var b = 30; // lokalno b - nema veze sa globalnom promenljivom b koja u funkciji nije dostupna
var c = 40; // lokalno c - ne postoji van funkcije
a = 150; // radimo sa globalnom promenljivom a
x = 130; // globalno x - uvedeno je u funkciji, ali bez var
p += 5; // parametar funkcije je lokalna promenljiva
}
Da li se promenljiva b menja ako u funkciji promenimo vrednost promenljive p? U ovom slučaju ne, jer se promenljive prenose po vrednosti, ali da ne zaboravite da se objekti prenose po referenci, što znači, da je b bio neki objekat, sve što bismo u funkciji radili sa p, odrazilo bi se na globalno b.