Vjebe 6JavaScript

Kreiranje prilagoenih objekata

Ukoliko kreiramo skript koji radi sa bazom podataka pretplatnika, trebalo bi nam nekoliko odvojenih promjenjivih za svaku osobu u bazi podataka, promjenjiva za ime, adresu, za telefonski broj itd.Upotreba nizova donekle poboljava situaciju, ali je opet potrebno kreirati niz za imena, za telefonske brojeve, za adrese itd.

Sa objektima moemo napraviti promjenjive koje skladite baze podataka logiki. Nazovimo takav objekat Kartica. Svaki pretplatnik e imati osobine za ime, adresu i broj telefona (kod kue i na poslu). Objektu se mogu dodati i metode za prikazivanje ili rad sa informacijama.Prvi korak pri kreiranju objekta je njegovo imenovanje i osobine. Objekat smo nazvali Kartica. On ima sledee osobine:ImeAdresaBroj_kod_kuceBroj_na_poslu

Prvi korak u upotrebi ovog objekta u JavaScript programu je pravljenje funkcije koja kreira novi objekat-Kartica. Ova funkcija je nazvana constructor-om za objekat i slui za postavljanje objekta u poetni poloaj.Slijedi constructor funkcija za objekat Kartica.

function Kartica(Ime, Adresa, Broj_kod_kuce, Broj_na_poslu){this.Ime=Ime;this.Adresa=Adresa;this.Broj_kod_kuce=Broj_kod_kuce;this.Broj_na_poslu=Broj_na_poslu;}

Komanda this se koristi uvijek kada kreiramo definiciju objekta i koristi se za pozivanje tekueg objekta-onog koji je kreiran preko funkcije Kartica.Sada je potrebno kreirati metodu za rad sa objektom Kartica. Svi objekti Kartica imaju iste osobine, pa je izabrana funkcija koja prikazuje osobine u jasnom formatu. Ovu funkciju nazivamo Odstampaj_karticu.

function Odstampaj_karticu() {linija1=Ime: + this.ime + \n;linija2=Adresa: + this.adresa + \n;linija3=Broj kod kuce: + this.broj_kod_kuce + \n;linija4=Broj_na_poslu: + this.broj_na_poslu+ \n;document.write(linija1, linija2, linija3, linija4);}

Komanda this se koristi za pozivanje tekuih osobina objekata.Odstampaj_karticu() funkcija ita osobine iz tekueg dokumenta (preko this komande), prikazuje svaku sa zaglavljem i prelazi na novu liniju.Sada imamo funkciju koja prikazuje karticu, ali to jo nije potpuna metoda objekta Kartica. Poslednje to treba uraditi jeste da napravimo dio funkcije Odstampaj_karticu za objekte Kartica. Sada izmjenjena definicija funkcije glasi:

function Kartica(ime, adresa, broj_kod_kuce, broj_na_poslu) {this.ime=ime;this.adresa=adresa;this.broj_kod_kuce=broj_kod_kuce;this.broj_na_poslu=broj_na_poslu;this.odstampaj_karticu=odstampaj_karticu;}

Sada emo upotrijebiti definiciju objekta i metode koju smo kreirali. Da bismo upotrijebili definiciju objekta kreiramo novi objekat. To radimo preko komande new. U naem primjeru to su sledei iskazi:

Brano = new Kartica("Branislav Matkovic", "Patkovaca", "055-231-400", "055-231-401");Zeljko = new Kartica("Zeljko Masanovic", "Pilica", "055-231-401", "055-231-403");Milan = new Kartica("Milan Roncevic", "Brcko", "049-231-404", "049-231-404");Kreirali smo nove objekte pod imenima: Brano, Zeljko, Milan.Prilikom definisanja objekta bilo je potrebno samo pozvati funkciju Kartica() i da joj dodijelimo potrebne osobine istim redom kao u definiciji.

Nakon to smo kreirali objekte: Brano, Zeljko i Milan, upotrebljavamo metodu Odstampaj_karticu() za prikazivanje informacija.

Brano.Odstampaj_karticu();Zeljko.Odstampaj_karticu();Milan.Odstampaj_karticu();

Validacija forme pomou JavaScript-aPomou JavaScript-a se moe izvriti provjera da li je korisnik popunio ispravno formu prije njenog slanja serveru. Ovo se naziva validacijom forme. Npr, ako je u formu korisnik unio e-mail adresu, moete kreirati obraiva dogaaja koji e provjeriti da li je forma korektno popunjena prije obrade ostatka forme.Postoje dva osnovna naina za validaciju forme i to server-side (upotrebom, PHP-a, ASP-a) i client-side (veinom upotrebom JavaScript-a).Server-side validacija je mnogo sigurnija, ali i zahtjevnija za kodovanje.

Server-side validacija forme

Client-side validacija je laka i bra (browser se ne mora konektovati na server kako bi izvrio validaciju forme, tako da korisnik trenutno zna da li je neto propustio prije unosa u formu.

U validacija1 emo provjeriti da li je polje forme popunjeno (samo jedno, tekstualno polje).Zadatak validacija1 jeste da se provjeri da li je korisnik unio ime prije prosleivanja podataka iz forme serveru (nekom cgi skriptu).U funkciji validate_form(), koristi se varijabla valid, za provjeru da li je forma korektno popunjena. Ako provjera preko if uslova ne bude uspjena (korisnik nije unio nita u polje za unos teksta), korisnik e se upozoriti sa alert boksom i varijabla valid e poprimiti false.

Vraamo vrijednost valid varijable onSubmit() obraivau dogaaja. Ako je njena vrijednost true forma e se poslati serveru, a ako je false tada forma nee biti poslata.U primjeru validacija2 je uraen kompleksniji primjer validacije ne samo teksualnog polja, ve i radio dugmeta i ek boksa i padajueg menija.Vrijednost selectedIndex poinje brojanje od nule.Varijabla valid e biti jednaka false ako bilo koji od gornjih sluajeva ne bude zadovoljen, tako da se forma tada nee proslijediti serveru.

CookiesCookies je prvobitno kreirao Netscape kako bi dao memoriju web stranicama i browser-ima. HTTP protokol, preko kojeg se vri transfer web stranica do vaeg browser-a na zahtjev browsera za nekom stranicom je state-less, to znai da kad jednom server poalje stranicu browser-u na njegov zahtijev, server to ne zapamti. Svaka naredna posjeta istoj stranici se odvija kao da se to desilo prvi put. To moe biti naporno iz vie razloga. Server ne pamti da li ste se identifikovali prilikom pristupa zatienoj stranici, korisnike prioritete, niti bilo ta drugo. Tamo gdje se zahtijevaju personalizovane informacije to moe predstavljati veliki problem.

Sa razvojem Interneta i e poslovanja, javila se potreba da podaci o online kupcima budu sauvani. Informacije kao npr. podaci o prethodnim narudbinama kupaca, preferencije kupaca, ID kupaca, registracioni brojevi kupaca su morale biti negdje uskladitene,a priroda HTTP protokola to nije omoguavala. Netscape je jo 1994. godine reio taj problem tako to je uveo cookie fajlove. Cookie je lokalni fajl koji se koristi za skladitenje informacija na lokalnom raunaru. Cookie je trajan, u smislu, da se ne brie pri resetovanju ili gaenju raunara. Ovaj fajl uva podatke o sesiji izmeu browsera klijenta i drugih raunara na mrei. Ideja o cookie fajlovima je postala veoma popularna i danas cookie je podrava veina browser a.

Cookie fajlovi mogu da personaliziju Web stranu i da je uine user friendly. Oni uvaju bitne informacije o jeziku koji govori korisnik, o npr. muzikim preferencijama koje korisnik gaji, o broju posjeta korisnika sajtu, prate robu koju su korisnici stavili u virtuelnu potroaku korpu i jo mnogo toga. Meutim, cookie fajlovi mogu biti i uznemirujui i dosadni i esto se postavlja pitanje sigurnosti jer se nepoznati fajlovi snimaju na hard disk posjetilaca sajta. Ako korisnici ne vole i ne ele cookie fajlove na svom raunaru, cookie ji mogu da se iskljue. Naredna slika prikazuje kako se vri iskljuivanje (disabling) cookie fajlova u browser u Internet Explorer-a (IE).

Struktura cookieaCookie fajlove browser u najee alje CGI (Common Gateway Interface) program na serverskoj strani preko HTTP zahteva (HTTP requests) i odgovarajuih HTTP zaglavlja (HTTP headers), ali sa JavaScript - om, moete setovati cookie je na lokalnom browser u, i na taj nain eliminiete potrebu da CGI program rukuje cookie fajlovima i posledica toga je smanjenje angaovanja servera. Default - ni ivotni vijek cookie fajlova je duina tekue sesije.

Atributi cookie fajlovaKada setujete cookie fajl, vano je da razumijete elemente od kojih se cookie sastoji. Cookie sadri parove ime/vrijednost, kao i skup opcionih atributa koji odreuju datum do kada cookie traje (expiration date), domen (domain), putanju (path) i da li cookie mora da se poalje preko sigurnosnih komunikacionih kanala HTTPS (HyperText Transfer Protocol Secure). Svi navedeni atributi se dodjeljuju kao stringovi.

document.cookie=name=value; expires=date; path=path;domain=domainname; secure"; Primjer document.cookie = id=Bob; expires=Monday, 29-Nov-09 12:00:00GMT; domain=bbb.com; path=/; secure;

Sintaksa je veoma striktna i ne moe se mijenjati. Dakle prvo ide:Par ime-vrijednostTaka zarez pa razmakDatum isteka cookie-a u korektnom formatuPonovo taka zarez, razmak.....

Ime (name)Cookie tekst se sastoji od imena cookie fajla i sauvane vrijednosti. To moe biti ID sesije, korisniko ime, ili bilo ta drugo, to elite da sauvate.

Format nameofcookie=value; Primjerid=456;email=joe@abc.com;name=Bob;Nemojte da mijeate vrijednost sa nazivom cookie a. Ime cookie fajla je s lijeve strane znaka jednakosti, a tekst koji se uva je s desne strane znaka. Vrijednost koja se dodeljuje je tipa string.

Ako elite da dodijelite vie vrijednosti jednom stringu, morate koristiti jedinstvene karaktere da biste odvojili dodijeljene vrijednosti, kao npr. Marko*Markovic*011. Sa JavaScript om takoe moete koristiti ugraenu metodu escape() koja vraa URL kodiran string koji je prihvatljiv za browsere

Datum isteka cookie ja (Expiration date)Cookie fajl obino istie kada se tekua browser sesija zavri. Meutim, moete sami definisati datum isteka cookie fajla:

Format;expires=Weekday, DD-MON-YY HH:MM:SS GMTPrimjer;expires= Friday, 15-Mar-04 12:00:00 GMT

Ime domena (Domain Name)Ime domena, koje se obino ne koristi, pokazuje domen na koji se cookie odnosi. Informacija o domenu govori browseru kojem domenu e cookie da se poalje. Ime domena dozvoljava da cookie fajl dijeli vie servera, a ne da je pristup cookie ju ogranien na samo jedan server.

Format; domain=domain_name; domain=http://somedomain.com Primjer; domain=kajinsky.com; domain=http://kajinksy.com

Putanja (Path)Putanja omoguava odreivanje direktorijuma u kojem e cookie biti aktivan. Ako elite recimo da se cookie poalje samo do stranica u direktorijumu cgi-bin, potrebno je postaviti putanju do /cgi-bin. Obino se stavi da je path=/, to znai da je cookie validan u itavom domenu.Format ; path=pathnamePrimjer; path=/home

Zatien (Secure)Ako je cookie zatien (secure), on mora da se alje kroz sigurne komunikacione kanale preko HTTPS (Secure HyperText Transfer Protocol).

Format; secure

Kreiranje cookie fajla u JavaScript-uCookie-i se mogu kreirati, itati i brisati pomou JavaScript-a. To se radi pomou osobine document.cookie. Da bismo dobili sve prethodno setovane cookie koristimo ovakvu sintaksu:

var x = document.cookie;Sada emo razmotriti kako da setujemo cookie.Osobine prilikom setovanja cookie-a smo objasnili ranije, u nastavku emo dati primjer setovanja cookie-a:

Primjer:document.cookie= username=John; expires=28/11/2009 00:00:00;

Prethodnim kodom se postavlja cookie pod imenom username, sa vrijednou John, koji e istei 28. novembra 2009.Meutim za setovanje cookie-a se ee uzima Date.toGMTString() metod. Ovdje treba voditi rauna da kod ovog formata brojanje mjeseci poinje od 0, tako da je novembar 10.Prethodni kod sada izgleda:

document.cookie=username=John; expires= + cookie_date:toGMTString();

Sada emo postaviti jo jedan cookie :

document.cookie= logged_in=yes;

Ovim kodom se postavlja cookie pod imenom logged_in sa vrijednou yes. Poto nije postavljen datum isteka, cookie e istei pri zatvaranju sesije.Pri dodjeljivanju string tipa name=value, cookie atributu, ne smiju se koristiti prazna mjesta, taka zarez ili zarez. Funkcija escape() e kodirati string objekat kroz konvertovanje svih karaktera koji nisu alfanumeriki u njihov heksadecimalni ekvivalent, sa znakom % ispred, npr, %20 predstavlja space.

Da bi se slale informacije izmeu servera i browsera, browser kodira URI podatke, to se naziva URI kodiranje. Poto Internet browseri rukuju cookie fajlovima, cookie stringovi mogu biti kodovani sa JavaScript ugraenom funkcijom escape().Funkcija unescape() konvertuje URI-kodiran string natrag u svoj originalni format.Primjer:

document.cookie= username + = + escape(John) + ;expires=28/11/2009 00:00:00,

Funkcija za setovanje cookie-a

function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure) { var cookie_string = name + "=" + escape ( value ); if ( exp_y ) { var expires = new Date ( exp_y, exp_m, exp_d ); cookie_string += "; expires=" + expires.toGMTString(); } if ( path ) cookie_string += "; path=" + escape ( path ); if ( domain ) cookie_string += "; domain=" + escape ( domain ); if ( secure ) cookie_string += "; secure"; document.cookie = cookie_string; }

Ova funkcija za postavljanje cookie-a bez datuma isteka e izgledati kao npr:

set_cookie ( "username", "John Smith" ); Da bi se postavio cookie sa datumom isteka od 28 novembra 2009, koristit emo sledeu notaciju:

set_cookie ( "username", "John Smith", 2009, 10, 29 );

Da bi se postavio cookie sa datumom isteka i sa domenom elated.com, ali bez putanje:

set_cookie ( "username", "John ", 2009, 10, 29, ", "elated.com", "secure" );

Funkcija za brisanje cookie-aPomou naredne funkcije cookie se moe obrisati postavljanjem vremena isteka funkcije na 1s u prolosti.

function delete_cookie ( cookie_name ) { var cookie_date = new Date ( ); // current date & time cookie_date.setTime ( cookie_date.getTime() - 1 ); document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString(); }

Moete koristiti kod u prethodnom primjeru za brisanje cookie-a, s tim to promijenite ime cookie-a:

delate_cookie(username);

Da biste dobili sve prethodno setovane cookie za trenutni dokumnet, koristit emo osobinu document.cookie.

var x=document.cookie;

Ovim dobijamo string koji sadri listu parova name/value koji su odvojeni taka zarezom za sve cookie koji su validni za trenutni dokument.

Primjerusername=John; password=abc123

U ovom primjeru prethodno su setovana dva cookie-a i to username sa vrijednou John i password sa vrijednou abc123.

Na ovaj nain emo dobiti sve validne (koji jo vae) cookie, ali to veinom nije cilj. Da bi se dobio samo jedan koristit emo sledeu funkciju:

function get_cookie ( cookie_name ) { var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' ); if ( results ) return ( unescape ( results[2] ) ); else return null; }

Funkcija koristi regularni izraz da pronae ime i vrijednost cookie-a za koji smo zainteresovani.Rezultat se potom vraa kroz unescape() funkciju koja konvertuje sve escaped karaktere natrag u normalu. Ako ne postoji vraa se null vrijednost

PrimjerDa bismo dobili cookie sa vrijednou username koristimo:var x = get_cookie (username)U primjeru kuki1.html kreiran je prompt boks u koji unosite vae ime prilikom prve posjete, potom se ime memorie u cookie i prikazuje na stranici prilikom naredne posjete.

Otvorite stranicu u novom prozoru. Prvi put prilikom posjete stranici, trai se od vas da unesete vae ime koje se memorie u cookie. Ako posjetite stranicu opet, vae ime se uzima iz cookie-a i prikazuje na stranici.Zatvorite potom prozor, a potom ponovo otvorite novi. Jo uvijek se prikazuje vae ime koje se dobilo iz cookie-a.Vrijeme isteka cookie-a je postavljeno na jednu godinu u odnosu na tekui datum, to znai da e browser zapamtiti vae ime ak i ako ga zatvorite i ponovo otvorite.Moete izbrisati cookie preko Forgot about me linka, kojim se poziva delate_cookie() funkcija i ponovo aktivira prompt za unos imena.