Najbrži način da napišete Javascript za svoju stranicu je da se poslužite nekim pametnijim programom za izradu web stranica koji ima ugrađene čarobnjake za izradu najčešćih i najkorištenijih javascripti.
Danas je najkorišteniji takav program Adobe Dreamweaver, no postoji i niz drugih pa i besplatinih programa koji imaju tu mogućnost. Mi ćemo demonstrirati nekoliko osnovnih mogućnosti Dreamweavera.
U Dreamweaveru to se zove Behavior
Dakle, da bismo krenuli s radom otvorit ćemo panel Behaviors (Window > Behaviors). Nove akcije dodajemo tako da kliknemo na znak + te biramo jedno od "ponašanja" (Behavior= ponašanje) sa izbornika. Nakon toga zadaju se potrebni argumenti.
Objektno-orjentirani jezik
Prije no što krenemo u isprobavanje, treba napomenuti da je Javascript tzv. objektno-orjentirani jezik i što to zapravo znači. To znači da javascript programe pokreću događaji vezani uz pojedine objekte na stranici.
Objekt na stranici može biti bilo koji tag odnosno element stranice, npr slika, link, element obrasca, odlomak itd.
Događaji vezani uz taj objekt su različita zbivanja s njim ili interakcije s korisnikom, npr kad je element učitan s poslužitelja (onLoad), kad korisnik pređe pokazivačem preko tog elementa (onMouseOver), kad se pokazivač smjesti u pojedini element obrasca (onFocus), itd.
Tri koraka
Zbog toga u većini slučajeva prije no što kliknemo na + u Behaviors panelu, treba odabrati element stranice uz kojeg će biti vezan događaj na kojeg će nova skripta reagirati. Nakon toga se određuje vrsta akcije i zadaju potrebni parametri, a tek nakon toga koji je to događaj koji će pokrenuti akciju.
Prvi primjer - Rollover
Napravit ćemo malu stranicu na kojoj se nalazi slika. Kad korisnik pređe pokazivačem preko nje, slika će se zamijeniti (bit će prikazana druga slika). Gotovi efekt možete vidjeti ovdje, a datoteke za samostalni rad skinite odavde:
Sve skinute datoteke stavite u istu mapu te otvorite prvu (nedovršenu) stranicu. U nju je postavljena slika, no efekt još nije zadan.
zadavanje ID-a slike
Svaki element stranice koji radi s Javascriptom obavezno treba imati zadan i ID, pa tako i naša slika.
Da bismo ga zadali kliknemo na sliku ta ID slike jednostavno zadamo u Properties panelu kao što je demonstrirano na lijevoj ilustraciji (upišemo logo1).
Zadavanje akcije
U panelu Behaviors kliknemo na + i odaberemo swapImage .
Nakon što smo odabrali swapImage otvara se dijalog u kojem trebamo zadati slijedeće:
- za Images odaberemo Image "logo1",
- za polje Set source kliknemo na Browse i odaberemo drugu sliku (jsLogo2.png)
- potvrdimo obje opcije (Preload images i Restore Images onMouseOut)
- u Behaviors panelu bi tad stanje trebalo biti kao na donjoj manjoj slici. U mnogim slučajevima je nakon zadavanja akcije potrebno kliknuti ime događaja te odabrati ispravan događaj s ponuđene padajuće liste. To u ovom slučaju nije potrebno (ispravno je zadan događaj onMouseOver).
- To bi ujedno bio i treći korak za zadavanje javascripta. Sad možemo spremiti datoteku i isprobati efekt - moralo bi raditi!
Prije no što nastavimo s drugim efektima, potrebno je malo prokomentirati dobiveno.
Zbog toga što smo prilikom zadavanja potvrdili opciju Restore Images onMouseOut u Properties panelu vidimo dvije umjesto jedne očekivane akcije. Ova druga - dodatna kaže da kad se pokazivač makne sa slike treba vratiti prethodnu sliku. Obje akcije su vezane na isti element stranice (sliku), ali reagiraju na dva različita događaja.
Korisno je malo pogledati i kod, da vidimo što se tamo zapravo dogodilo:
Unutar zaglavlja stranice (unutar <head> i </head> tagova) dodan je slijedeći kod:
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Vidimo da kod započinje i završava tagom <script>, a vrsta skripte zadana je argumentom type="text/javascript". U zaglavlju su zapravo zadane funkcije, a u analizu njihovog koda nećemo ovaj puta ulaziti. Možemo prepoznati slijedeće funkcije:
- MM_swapImage() - funkcija za zamjenu slika
- MM_swapImgRestore() - funkcija za vraćanje prvotne slike
- MM_preloadImages() - funkcija koja učita slike i prije rollover efekta kako bi on bio brži
- MM_findObj(n, d) - funkcija kojom se služe druge funkcije za pronalaženje elemenata na stranici
Unutar tijela dokumenta tag img je "narastao" i sad izgleda ovako:
<img src="/jsLogo1.png" alt="Pređi pokazivačem preko slike" name="logo1" width="221" height="102" id="logo1" onmouseover="MM_swapImage('logo1','','jsLogo2.png',1)" onmouseout="MM_swapImgRestore()" />
Dakle, vidimo da su za sliku definirani događaji i povetani sa funkcijama iz zaglavlja. Događaji su onmouseover i onmouseout. Slično se događa i kod zadavanja drugih skripti kao što ćemo uskoro i vidjeti.
I sam tag <body> je porastao i sad izgleda ovako:
<body onload="MM_preloadImages('jsLogo2.png')">
To zapravo znači slijedeće: čim se učitaju svi elementi stranice (body onload), poziva se funkcija koja dodatno učita i sliku potrebnu za rollover (funkcija MM_preloadImages). Ukoliko to ne napravimo, slika za rollover će se početi učitavati tek kad se pređe pokazivačem preko originalne slike, a to bi usporilo efekt.
Drugi primjer - provjera obrasca
Javascript se vrlo često koristi za provjeru obrazaca. Obično to funkcionira tako da se pritiskom na dugme za slanje podataka prvo vrši javascript provjera upisanog u različita polja. Ako je sve dobro popunjeno, podaci se šalju, a ako nije dobro popunjeno, javascript otvara mali prozor u kojem daje izvješće o greški.
Ovaj put nema polaznih datoteke - radimo sve od nule. Ipak rezultat možemo pogledati ovdje.
Napravimo novu stranicu. Na nju ubacimo tri polja za unos teksta (text field) i nazovemo ih redom "ime", "starost" i "adresa". Natpisi uz svako polje ne moraju odgovarati imenima polja, zadat ćemo ih momoću tagova label: "ime i prezime", "starost (broj godina)" i "e-mail adresa". Prilikom zadavanja prvog polja Dreamweaver će nas upitati želimo li dodati Form tag na što treba potvrdno odgovoriti.
Na kraju obrasca treba dodati i dugme (Button) za slanje podataka. Nazovemo ga "Pošalji", te mu to zadamo i kao vrijednost (Value) pomoću panela Properties.
Ono što bismo htjeli je da se pritiskom na pošalji pokrene Javascript provjera unešenog.
Kliknemo na dugme "Pošalji", a nakon toga na Behaviors panelu na + te odaberemo akciju "Validate Form". Pojavi se dijalog na čijem vrhu je polje Fields.
Za sva polja uključimo opciju Required, to znači da ih je sva potrebno popuniti. Ukoliko neko polje ostane nepopunjeno, nakon provjere javascript će dojaviti grešku.
Polja ispod toga omogućuju da preciziramo kakav tip podataka očekujemo. U slučaju unosa neodgovoarajuće vrste podataka, javascript ponovo dojavljuje grešku. Ukoliko ne razumijemo, opcije su: Anything - bilo što, Number - broj, Email address - adresa elektroničke pošte i Number from... to ... (broj od do).
Prije no što isprobamo, treba još za obrazac zadati stranicu koja će prihvatiti podatke, odnosno koja će se otvoriti nakon uspješnog slanja podataka iz obrasca. Da biste to napravili kliknite bilo gdje u obrascu, zatim kliknite na tag form u maloj statusnoj traci ispod samog radnog prostora kao na slici.
Potrebno je zadati parametar Action, i tu možete upisati bilo koje ime svojih (lokalnih) ili objavljenih stranica.
Ukoliko obrazac bude dobro ispunjen, nakon klika na "Pošalji" otvorit će se upravo stranica zadana parametrom Action.
Ako smo sve ovo do sad opisano i napravili, spremimo stranicu i pogledamo je u pregledniku. Ako ne napišemo ništa u polja a kliknemo na Pošalji dobijemo slijedeći prozorčić:
Dakle, stvar funkcionira, no poruke su na engleskom što nam vjerojatno ne odgovara. Ukolko bismo htjeli da poruke budu na hrvatskom, moramo malo izmijeniti kod u javascript funkciji:
prebacimo se u pogled koda, pronađemo javascript funkciju MM_validateForm() u zaglavlju stranice i zamijenimo slijedeće njene dijelove:
- ' must contain an e-mail address.\n' zamijenimo sa ' mora sadržavati adresu elektroničke pošte.\n',
- ' must contain a number.\n' zamijenimo sa ' mora sadržavati broj.\n',
- ' must contain a number between '+min+' and '+max+'.\n' zamijenimo sa ' mora sadržavati broj između'+min+' i '+max+'.\n'
- 'The following error(s) occurred:\n' zamijenimo sa 'Došlo je do slijedećih grešaka:\n'
Nakon zamjena spremimo stranicu i isprobamo. Radi uz poruke na hrvatskom jeziku!
Ostali čarobnjaci
Osim sa ovih nekoliko isprobanih, Dreamweaver dolazi sa još podosta drugih čarobnjaka za Javascript, odnosno drugih ponašanja. Spomenimo najznačajnije:
- Call JavaScript - za lakše zadavanje skripti koje ste napisali sami ili skinuli s neta
- Change Property - za izmjenu svojstava nekog elementa stranice
- Check Browser - omogućava provjeru korisnikova preglednika i redirekciju na osnovu te provjere
- Check Plugin - za provjeru instalacije Flasha ili Shockwave-a na računalu
- Control Shockwave Or Flash - omogućava kontrolu Flash ili Shockwave multimedije pomoću Javascripta
- Drag AP Element - omogućava da korisnik može premiještati (povlačiti) apsolutno pozicionirani element na stranici
- Go To URL - otvara novi sadržaj sa zadanog URLa. Korisno za rad s Frame-ovima.
- Jump Menu i Jump Menu Go služe za izradu izbornika gdje izbor pojedine stavke znači odlazak na neku zadanu stranicu
- Open Browser Window - otvara zadani URL u novom prozoru kojem možete zadati mnoga svojstva.
- Play Sound - za sviranje zvukova
- Popup Message - iskače prozorčić s porukom
- Set Nav Bar Image - za rad s vlastitim izbornicima koji se satoje od slika
- Set Text Of Frame - za promjenu sadržaja (ne mora biti samo tekst, mogu bilo koji tagovi) nekog Frame-a na stranici
- Set Text Of Container - kao i gornje, ali se može primijeniti na bilo koji tag koji može sadržavati druge tadove (npr <div>)
- Set Text Of Status Bar - postavlja zadani tekst u statusnu traku
- Set Text Of Text Field - postavlja zadani tekst u tekstno polje obrasca
- Show-Hide Elements - skriva ili prikazuje neki element stranice
Svi se koriste na način sličan pokazanom u prethodnim prijerima, a ako vam što nije jasno, proučite Help i drugu dokumentaciju.
Ponavljanje
Što treba zapamtiti iz ove lekcije:
- javascript je objektno-orjentirani jezik: javascript programe pokreću događaji vezani uz pojedine objekte na stranici
- Zadavanje Javascripta Dreamweaverovim čarobnjakom ide u tri koraka: 1. odabir elementa, 2. odabir akcije i 3. odabir događaja koji pokreće akciju
- Dreamweaver u zaglavlje HTML dokumenta zapisuje Javascript funkcije, a kod koji ih poziva nalazi se u tijelu dokumenta, unutar taga onog elementa koji reagira na određeni događaj
- Dreamweaver ima čarobnjake za mnogo najčešćih uporaba Javascripta.
