Java Script - Skripta

Uvod

JavaScript je skript jezik koji je razvila kompanija Netscape Communications radi poveanja interaktivnosti Web stranica. Web browser-i koji podravaju JavaScript interpretiraju kd. JavaScript dodaje interaktivnost Web stranici na strani klijenta. Pri pisanju JavaScript kda moe se koristiti ma koji ASCII editor.Za na kurs zbog jednostavnosti koristiti emo program Dreamweaver 8.0.

Polazni naziv JavaScript jezika bilo je LiveScript, ali u saradnji Netscape-a i Sun-a, ime je izmjenjeno u JavaScript, zbog injenice da Java i JavaScript budu jezici Internet programiranja.

Razlike izmeu Jave i JaveScript-a

Java je objektno orijentisani programski jezik, namjenjen razvoju aplikacija za sisteme na raunarskim mreama. Aplikacija napisana u Javi prenosiva je izmeu razliitih platformi, to Javu i ini specifinom.U Javu su ugraeni brojni sigurnosni mehanizmi: memorija nije dostupna niti jednom Java programu.Svi bajt kdovi preneseni mreom se provjeravaju u cilju pronalaenja neeljenih izmjena na putu od servera do klijenta.Onemogueno je da program uljez kloniranjem klasa unese destruktivni kd u program i itd. Pojavom Jave dolo je do znatnog poboljsanja komunikacije u Internet svijetu. Osim to su se otvorile mogunosti interaktivne komunikacije i web stranice su poprimile dinaminiji oblik.

Java Script je kompaktan i objektno zasnovan skriptni jezik namjenjen za razvoj klijent Internet aplikacija.Programski kd upisuje se direktno na HTML stranicu. WEB BROWSER-I KOJI PODRAVAJU JavaScript interpretiraju kd i obezbjeuju irok raspon interaktivnosti i efekata na Web stranama.Java Script posjeduje relativno mali broj tipova podataka kao to su : numeriki, boolean i string podaci.Takoe, podrava funkcije bez posebnih zahtjeva za deklarisanjem.

Poreene Java Script-a i Java-e dato je sljedeom tabelom.

Java Script Java

Ne kompajilira se, ve samo interpretira kod klijenta.

Kompajlira se na serveru pre izvrenja kod klijenta.

Objektno zasnovan. Koristi postojee objekte, bez klasa ili nasljeivanja.

Objektno orjentisan. Appleti sadre objekte sastavljene od klasa sa nasljeivanja.

Kd je integrisan u HTML. Applet je izdvojen iz HTML-a.

Tip promjenljive se ne deklarie. Tip promjenljive mora biti deklarisan.

Dinamika povezanost. Objektne reference provjeravaju se u run-time.

Statika povezanost. Objektne reference moraju postojati u vrijeme kompajliranja.

Zatien. Ne moe zapisivati na hard disk. Zatien. Ne moe zapisivati na hard disk.

Skripta-JavaScript 2

Adis Alihodi

Naini ukljuivanja JavaScript-a unutar HTML dokumenta

1. u sekciji ... unutar ...

2. u sekciji ... unutar tagova ... 3. u sekciji ... ili ... unutar HTML

elementa. Tada se ne moraju koristiti tagovi ... 4. u posebnom fajlu sa ekstenzijom .js. Npr. ako se eli ukljuiti fajl pod

nazivom primjer.js onda se u tekuem HTML dokumentu treba ukljuiti sljedee :

document.write(" Prvo ukljucenje!")

Naini izvravanja skripta unutar tagova ...

ako je skript ukljuen u zaglavlju, ignorisan je do poziva ako je skript ukljuen u tijelu, rezultat se prikazuje na Web strani ako je skript rukovalac dogaaja, isti e se izvriti kad se desi dogaaj


Adis Alihodi

Promjenljive, tipovi podataka, konverzija , operatori

Za ime promjenljive, treba se ispotovati sljedee :

prvi znak imena mora biti slovo engleske abecede ili uobiajena podvlaka ("_"),

ime moe sadrati brojeve i slova engleske abecede, u imenu velika i mala slova se razlikuju, u imenu kljune rijei (for, if, else, class, byte, int...) ne mogu se

koristiti

Sljedei tipovi podataka e se najee koristiti :

numeriki (npr: 3.14159 ...) logiki (Boolean) - (true / false) stringovi (npr: "Pozdrav studentima!") null (specijalne kljune rijei s null vrijednou)

U stringovima je dozvoljeno koristiti sljedee specijalne karaktere:

\b = pomjeraj za jedno mjesto ulijevo (backspace) \f = pomjeraj za jedan red dolje (form feed) \n = pomjeraj na poetak novog reda (new line character) \r = simulacija pritiska na taster Enter \t = simulacija pritiska na taster Tab

Konverzija u interpreterskom jeziku JavaScript obavlja se automatski , ako drugaije ne bude deklarisano. Naime, JavaScript nije strogo tipiziran i ne zahtjeva posebno deklarisanje tipova podataka, te e se konverzija obavljati automatski kao to je ve reeno.

Osnovni nain za deklarisanje promjenljivih:

var broj1 = 42; var tekst = "Pozdrav!";

No, moemo deklarisanje postii i bez kljune rijei var ovako :

broj1 = 42 tekst = "Pozdrav!"

Generalno, u kombinaciji broja i stringa, Java Script konvertuje broj u string to je ilustrirano sljedeim primjerom :

x = "Upisali ste broj " + 54 y = 54 + " je odgovor na Vas unos."


Adis Alihodi

Kao rezultat dobijamo da su i x i y stringovi.

Za konverziju stringa u broj, koriste se sljedee funkcije:

eval - procjenjuje string i ako je mogue pretvara ga u broj, parseInt - konvertuje string u cijeli broj (integer), ako je mogue, parseFloat - konvertuje string u floating-point broj, ako je mogue.

Aritmetiki operatori

Operacija Opis

X + Y X - Y X * Y X / Y X % Y

X++ ++X X-- --X

- sabiranje - oduzimanje - mnoenje - dijeljenje - ostatak dijeljenja X sa Y (modul) - postfiksno uveanje za 1 - prefiksno uveanje za 1 - postfiksno umanjenje za 1 - prefiksno umanjenje za 1

Relacijski operatori

Operacija Opis

X > Y X < Y X >= Y X


Adis Alihodi

Sintaksa :

(uslov) ? izraz1 : izraz2

Primjer :

status = (godina >= 7) ? "placaju" : "besplatno"

Ako je uslov istinit (true), izraz ima vrijednost izraz1, u suprotnom ima vrijednost izraz2.

Kontrola toka , iskazi

if...else struktura

Sintaksa :

if (izraz1){ ...iskazi... } else if (izraz2) { ...iskazi... } else { ...iskazi... }

switch...case struktura

Sintaksa :

switch ( izraz)

{

case izraz 1: ...iskazi...; break;

case izraz 2: ...iskazi... ; break;

case izraz 3: ...iskazi... ;break;

case izraz 4: ...iskazi...; break;

...

default : ...iskazi...

} Primjer : Sljedei primjer ilustruje upotrebu if petlje /* oznaka za poetak Java Scripta */


Adis Alihodi

var datum = new Date(); /* promjenljivoj datum se pridruuje tekui datum */ var sat = datum.getHours(); /* u promjenljivu sat se prihvata tekui as */ if (sat > 5 && sat < 13){ /* logika provjera */ document.write('Dobro jutro!') /* BODY + ispis poruke */ } if (sat > 12 && sat < 19){ /* ako je as vei od 12 i manji od 19 */ document.write('< body bgcolor ="green">Dobar dan!') } if (sat > 18 || sat < 6){ /* ako je as vei od 18 ili manji od 6 */ document.write('< body bgcolor ="red">Dobro vee!') }--> /* oznaka za kraj Java Scripta */

Navedeni primjer postavlja odgovarajuu pozadinu i ispisuje poruku u HTML dokumentu u zavisnosti od tekueg sata. Unutar zagrada naredbe document.write(...) moe se postaviti bilo koji HTML tag, tekst ili sve to kombinovati s vrijednostima svojih promjenljivih ili ve postojeih funkcija u JavaScriptu.

for petlja

Sintaksa :

for (inicijakizacija;uslov;inkrementiranje;){ ...iskazi... }

Primjer : Sljedei primjer ilustruje upotrebu for petlje

for...in petlja

for (promjenljiva in objekt) { ... iskazi... }

while petlja

while (izraz){ ...iskazi...; }

do...while petlja


Adis Alihodi

do { ...iskazi...; } while (izraz);

with iskaz

with (objekt) { ...iskazi... }

Na primjer, matematikim funkcijama mora prethoditi objekat Math. Sljedei primjer podrazumjeva Math ispred PI, cos() i sin(). with (Math) { a = PI / 2; x = cos(a); y = sin(a); }

Iskaz break prekida tekuu while ili for strukturu i nastavlja iza nje.

i = 0; n = 0; while (i < 5) { i++ if (i == 3) { break; } else { n += i } }

Iskaz return i iskaz function Primjer funkcije koja izraunava kvadrat broja. function kvadratBroja( x ) { return x * x; } x = kvadratBroja(5); /* poziv funkcije */ document.write("Kvadrat od 5 je " + x);

Iskaz new definie novi objekt na bazi postojeeg. Sljedei primjer promjenljivoj datum pridruuje tekui datum.

var datum = new Date();

Iskaz this je referenca na tekui objekt.


Adis Alihodi

Donji primjer definie da se klikom na objekt koji poziva funkciju SlucajanBroj(), a kao parametar prenosi se naziv tekue forme, tj. this.form.

onClick=" SlucajanBroj(this.form) ";

Iskaz var slui za opciono definisanje promenljivih .

var broj1 = 0, tekst1="proba" ; Objekti, metode, svojstva i dogaaji

Svaka web stranica posjeduje objekte:

window: top-level objekt; sadri svojstva primjenjiva na cjelokupan prozor, location: sadri svojstva tekue URL lokacije history: sadri svojstva prethodno posjeenih URL document: sadri svojstva sadraja tekueg dokumenta, kao to su naziv (title), boja

pozadine (bgcolor), boja slova(fgcolor),forme itd.

Primjer svojstava:

location.href = "http://www.pmf.unsa/ /proba.html" //lokacija dokumenta document.title = "Probni dokument" //naziv dokumenta (title) document.fgColor = #000000 //boja slova document.bgColor = #FFFFFF //boja podloge history.length = 7 //koliko posljednjih dokumenta se "pamti" u history

Browser moe kreirati objekte bazirane na sadraju stranice, npr.:

document.mojaforma //forma document.mojaforma.Check1 //check polje na formi document.mojaforma.Button1 //dugme na formi

Oni mogu imati svojstva kao to su:

document.mojaforma.action = "http://www.pmf.unsa.ba"; document.mojaforma.method = get document.mojaforma.length = 5 document.mojaforma.Button1.value = "Klikni ovdje" /*vrijednost dugmeta*/ document.mojaforma.Button1.name = dugme1 /* ime dugmeta*/ document.mojaforma.text1.value = "sadraj tekst polja" document.mojaforma.text1.name = TekstPolje1 document.mojaforma.Check1.defaultChecked = true document.mojaforma.Check1.value = on document.mojaforma.Check1.name = CheckPolje1

Mnogi objekti imaju metode koje pokreu dogaaje.Npr, button objekt ima Click() metodu koja emulira klik mia na dugme. Napomenimo da je Event Handler rukovodilac dogaajem.O rukovodiocu dogaajem bie vie rijei u narednim poglavljima.Sljedea tabela e nam ukazati na neke metode koje e nam biti od velike vanosti u daljem radu.


Adis Alihodi

Event (dogaaj) Nastaje kada korisnik... Event Handler blur izae iz fokusa elementa forme onBlur click klikne na elementu forme ili na link onClick

change podesi/promjeni vrijednost "text", "textarea" ili izabranog elementa onChange

focus ue u fokus nekog elementa forme onFocus

load uita stranicu u browser onLoad mouseover pomjera pokaziva mia preko linka ili "anchora" onMouseOver select izabere "input" polje elementa forme onSelect submit izvri "submit" (slanje) forme onSubmit unload "napusti" stranicu onUnload

Zadatak : Napisati JavaScript kod koji e omoguiti ispis datuma posljednje izmjene koja se desila na web strani. Rjeenje : Rezultat ispisa: kraj primjera

Objanjenje : Naredbom document.write() unutar Java Scripta se u dokument ispisuje HTML kod ili korisniki tekst. U gore navedenom primjeru svojstvo document.lastModified vraa datum i vrijeme posljednje izmjene dokumenta. Tekst i naredbe HTML-a se stavljaju unutar navodnika. Funkcije Java Scripta i HTML iskazi meusobno se povezuju znakom plus (+).

Prikaz informacija o dokumentu

Dokument se u JavaScriptu tretira kao objekat koji predstavlja sadraj prozora ili okvira. Ovaj objekat ima svojstva koja specifikuju informacije o dokumentu: njegov URL, njegove boje, datum kada je posljednji put modifikovan, URL dokumenta koji ga je pozvao, i slino. Ovaj objekat ima i vie metoda koji podravaju dinamiko pisanje u dokument (metod document.write() koji je koriten u prethodnom primjeru), otvaranje novog dokumenta, zatvaranje postojeeg itd.

ta je rezultat rada sljdeeg Java Script kda? Zato? Otvorite dokument u Fire Fox-u ili IE browser-u.

Primjer 2 Dokument: document.write(document.title);


Adis Alihodi

URL: document.write(document.URL); Posljednja izmjena: document.write(document.lastModified);

Objekat document, objekat ( trenutno prikazani HTML dokument )

Primjerak objekta tipa document je smjeten u polje document objekta tipa window. U specijalnom sluaju, kada se referie objekat tipa document tekueg prozora (onog u kome se izvrava JavaScript program) moe se izostaviti referisanje objekta window . Navedimo neka svojstva vezana za dokument!

Svojstva Opis alinkColor Niska koja specifikuje boju aktivirane veze. Moe biti postavljena u zaglavlju HTML

dokumenta ili kao vrijednost artibuta ALINK elementa anchors[] Niz sidra u dokumentu; po jedan element za svaku vezu polaska. anchors.length Cio broj koji moe samo da se ita i koji specifikuje broj elemenatu u nizu anchors[]. applets[] Niz Java objekata u dokumentu.Po jedan element za svaki applets.length Cio broj koji moe samo da se ita i koji specifikuje broj elemenatu u nizu applets[]. bgColor Niska koja specifikuje boju pozadine dokumenta. Na poetku se postavlja kao vrijednost

artibuta BGCOLOR elementa cookie Niska,ija je vrijednost 'cookie', koji je pridruen dokumentu. domen Niska koja specifikuje Internet domen sa koga je dokument. Koristi se iz razloga

bezbijednosti. embeds Niz Java objekata, po jedan element za svaki koji se pojavljuje u dokumentu. embeds.length Cio broj koji moe samo da se ita i koji specifikuje broj elemenata u nizu embeds[]. fgColor Niska koja specifikuje boju teksta dokumenta. Moe biti postavljena u zaglavlju HTML

dokumenta ili kao vrijednost artibuta TEXT elementa forms[] Niz Form objekata, po jedan element za svaki koji se pojavljuje u dokumentu. forms.length Cio broj koji moe samo da se ita i koji specifikuje broj elemenata u nizu forms[] image[] Niz Image objekata, po jedan element za svaki koji se pojavljuje u dokumentu. image.length Broj elemenata u nizu images[]. lastModified Niska koja moe samo da se ita i koja specifikuje datum posljednje izmjene dokumenta

(onaj koji prijavljuje web server). linkColor Niska koja specifikuje boju neposjeenih veza dokumenta. Moe biti postavljena u

zaglavlju HTML dokumenta ili kao vrijednost artibuta LINK elementa . links[] Niz Link objekata, jedan za svaku hipertekstualnu vezu u dokumentu. links.length Cio broj koji moe samo da se ita i koji specifikuje broj elemenata u nizu links[]. location Sinonim za svojstvo URL. Nije isto to i objekat locaton, window.location plugins[] Sinonim za niz embeds[]. plugins.length Broj elemenata u nizu plugins[] ili embeds[]. referrer Niska koja moe samo da se ita i koja specifikuje URL dokumenta koji je sadrao vezu

koja je referisala tekui dokument. title Niska koja moe samo da se ita, a koja specifikuje sadraj etikete dokumenta. vlink Niska koja specifikuje boju posjeenih veza dokumenta. Moe biti postavljena u

zaglavlju HTML dokumenta ili kao vrijednost artibuta LINK elementa . url Niska koja moe samo da se ita, a koja specifikuje URL dokumenta. vlinkColor Niska koja specifikuje boju posjeene veze. Moe biti postavljena u zaglavlju HTML

dokumenta ili kao vrijednost artibuta VLINK elementa .

Metode : clear() - metoda koja brie sadraj dokumenta, close() - metoda koja zatvara tok dokumenta koji je otvoren metodom open(), open() - metoda koja otvara tok u koji se moe upisivati sadraj dokumenta,


Adis Alihodi

write() - metoda koji ubacuje specifikovanu nisku ili niske u dokument koji se trenutno parsira ili u toku dokumenta koji je otvoren metodom open(). writeln() - metoda koji je identian sa write() samo to dodaje izlazu karakter za novi red.

JavaScript posjeduje izvjestan skup predefinisanih objekata: Date, Array, Math.

Razmotrimo ih na primjeru objekta Date. Novi objekat se kreira upotrebom operatora new. Sljedei primjer ilustruje tu pojavu

: var danas =new Date();

Sljedee metode za objekat Date se koristite pri manipulaciji sa objektom:

getHours(), setHours() - za dobijanje i postavljanje asova getMinutes(), setMinutes() - za dobijanje i postavljanje minuta getMonth(), setMonth() - za dobijanje i postavljanje mjeseca

Primjer : Napisati JavaScript kod koji ilustruje upotrebu metoda za dobijanje asova,minuta i mjeseca.

Rjeenje :

var sada =new Date(); document.write("Vrijeme je:" + sada.getHours() + ":" + sada.getMinutes() + ""); document.write("Datum je:" + sada.getDate() + "." + (sada.getMonth()+1) + "." +(2000 + sada.getYear()));

Zadatak : Napisati Java Script kd koji e kao naslov nivoa 2 (H2 ) ispisati naziv dana u nedjelji i datum u formi DD.MM.GGGG. (na primjer: srijeda, 28.05.2008.).

Rjeenje :

Datum i formular //funkcija za obradu dananjeg datuma function Datum_danas() { var sada = new Date(); // novi objekat Date, dananji datum i vrijeme var dani =new Array("nedjelja","ponedjeljak","utorak","srijeda","etetvrtak","petak","subota"); //novi objekat Array var i = sada.getDay(); //metoda za dobijanje rednog broja dana var dan_u_n = dani[i]; //naziv dana u sedmici


Adis Alihodi

var dan_u_m= sada.getDate(); // metoda za dobijanje rednog broja dana u mjesecu var m = d.getMonth() + 1; //metoda za dobijanje rednog broja mjeseca var g = d.getFullYear(); //metoda za dobijanje godine document.write(dan_u_n + ", " + dan_u_m + "." + m + ". " + g + ". " ); } //poziv funkcija za obradu dananjeg datuma Datum_danas();

Zadatak : Napisati Java Script kd koji e kao naslov nivoa 3 (H3 ) ispisati broj dana do kraja godine Rjeenje : Broj dana do kraja godine var danas = new Date(); // dananje vrijeme i datum var kraj_god = new Date(); // kraj godine var kraj_god.setMonth(11); // je u decembru var kraj_god.setDate(31); // 31. dana u mjesecu // Koliko ima milisekundi izmeu 31.12. i dananjeg dana var razlika = kraj_god.getTime() - danas.getTime(); // A koliko je to dana razlika = Math.floor( razlika/ (1000*60*60*24) ); document.write("Broj dana do kraja godine je :" + razlika + "!!!");

Objanjenje : Prethodni JavaScript program koristi dva objekta tipa Date i to : danas i kraj_god. Za postavljanje datuma za kraj godine koriste se ugraeni metodi ovog objetka, setMonth() i setDate(). Metoda getTime() vraa vrijednost objekta tipa Date izraenu u milisekundama. Ona se moe koristiti za izraunavanje intervala izmeu dva datuma ili vrijemena koji su u istoj vrijemenskoj zoni. Vidjeli smo da se u programu koristi i specijalni objekat Math. Math objekat obuhvata matematike funkcije i konstante. Njegov metod floor() vri zaokruivanje realnog broja na prvi manji cio broj.Koristi se na sljedei nain :


Adis Alihodi

Math.konstanta ili Math.funkcija

Navedimo neke korisne konstante koje emo koristiti u ovoj skripti :

E konstanta gdje je e osnova prirodnog logaritma LN10 - prirodni logaritam od 10 LN2 - prirodni logaritam od 2 LOG10E - Logaritam od e s osnovom 10 LOG2E - Logaritam od e s osnovom 2 PI - Konstanta pi SQRT1_2 - 1 kroz kvadratni korjen iz 2 SQRT2 - kvadtratni korjen iz 2

Sljedee funkcije bie nam neophodne tokom pisanja JavaScript koda :

abs() - Rauna apsolutnu vrijednost acos() - Rauna arc cosinus asin() - Rauna arc sinus atan() - Rauna arc tangens atan2() - Rauna ugao izmeu x ose i take ceil() - Zaokruuje na prvi vei cijeli broj cos() - Rauna cosinus exp() - Rauna eksponent od e floor() - Zaokruuje na prvi manji cijeli broj log() - Rauna prirodni logaritam max() - Vraa vei od dva broja min() - Vraa manji od dva broja pow() - Rauna xy random() - Rauna sluajan broj round() - Zaokruuje na najblii cio broj sin() - Rauna sinus sqrt() - Rauna kvadratni korjen tan() - Rauna tangens

Zadatak (Za studente) : Napiite Java Script program koji e u sluaju da vam je danas roendan prikazati kao naslov nivoa 3 poruku : "Danas vam je roendan", a u suprotnom prikazati poruku o tome koliko dana je proteklo ili koliko dana je preostalo da Vaeg roendana ove godine.

Zadatak : Ako elimo da neka slika bude vidljiva samo do odreenog datuma, onda tag za ukljuivanje slike pod nazivom slika.jpg () ukljuujemo akko je tekui datum manji od datuma isteka slike.


Adis Alihodi

Rjeenje :

Primjer slike koja je vidljiva samo do odreenog datuma /* datum do kada elite da slika bude vidljiva - 30. 12. 2009 */ provjeraIsteka("December 30, 2009");

Zadatak (Za studente) : Napiite kd koji e do datuma 31.12.2009. prikazivati na Web stranici sliku slika1.jpg, a nakon tog datuma na istom mjestu e se prikazivati slika slika2.jpg. To je korisno, ako, na primjer, radite sajt za neku firmu i ako ste sigurni da e ona do 31.12.2009. biti na lokaciji koju prikazuje slika slika1.jpg, a nakon 31.12.2009. na lokaciji koju prikazuje slika2.jpg .

Boja pozadine u funkciji od vrijemena

Pozadina Web stranice se postavlja unutar HTML oznaka , gdje BGCOLOR oznaava boju pozadine (od #000000 do #FFFFFF u RGB modelu boja), TEXT oznaava boju slova (od #000000 do #FFFFFF u RGB modelu boja). Obino se za boju teksta i boju pozadine uzimaju kontrasne boje ili boje sa razliitim brightnes tonom, npr. bijela slova na crnoj pozadini, crna slova na utoj pozadini.JavaScript Vam moe pomoi da Vaa stranica izgleda dinaminije i da se njen izgled vie puta mijenja u toku posjeta u okviru jednog dana, ako postignete da se boje pozadine mijenjaju danju, u podne, nou, ujutru itd. Kao i u prethodnom primjeru, vano je vrijednost tekueg dana smjestiti ili storirati u neku promjenljivu i onda primjeniti ugraene JavaScript funkcije za dobijanje tekueg vrijemena. Sljedei primjer ilustruje gore ispriano.

Zadatak : Napiite Java Script program koji e mjenjati pozadinu web strane u zavisnosti od vrijemena.Naime, ako je izmeu 5 i 6 sati ujutro jedna boja pozadine, izmeu 7 i 8 sati ujutro, druga boja pozadine, izmeu 9 i 17 sati, trea boja pozadine, izmeu 18 i 19 sati,etvrta boja pozadine, izmeu 20 i 21 sat,peta boja pozadine, izmeu 22 i 4 sata,esta boja pozadine.


Adis Alihodi

Rjeenje :

Primjer izbora boje podloge (BODY BGCOLOR) zavisno od doba dana

II nain uz pomo dogaaja onLoad Primjer mjenjanja pozadine


Adis Alihodi

} --> Primjer izbora boje podloge (BODY BGCOLOR) zavisno od doba dana

Zadatak (Za studente) : Napiite JavaScript kd koji e u neparne vrijednosti asova ispisivati bijela slova na crnoj pozadini, a u parne vrijednosti asova ispisivati plava slova na zelenoj pozadini.

Objekat Date

Ovaj objekat slui za manipulaciju nad datumom i vrijemenom. Postoje sljedei oblici konstruktora za ovaj objekat i to su :

Date(), Date(milisekunde), Date(datumkaoniska), Date(godina,mjesec,dan), Date(godina,mjesec,dan,cas,minuti,sekunde)

U prvom sluaju imamo konstruktor bez argumenata.Kada napravimo instancu ovaog objekta sa new Date(),tada kreiramo objekat tipa Date koji je postavljen na tekue vrijeme i na tekui datum (odnosno, sistemsko vrijeme i sistemski datum). Slino za ostale tipove konstruktora. Napomena : Objekat Date se moe koristiti i kao obina funkcija (bez new konstruktora). Tada, ako se koristi bez argumenata, vraa nisku koja predstavlja lokalni datum i vrijeme. Opiimo znaenje gore datih argumenata za konstrukture sa parametrima :

milisekunde - Broj milisekundi izmeu eljenog datuma i ponoi 1. januara 1970. po grinickom vrijemenu.

datumkaoniska - Argument koji specifikuje datum , eventualno, vrijeme kao nisku u obliku mjesec dan godina cas:minuti:seku- - nde. Npr: "May 29, 2008 22:05:18"

godina - Godina kao etvorocifreni ceo broj mjesec - Mjesec specifikovan kao cio broj od 0 (januar) do 11 dan - Dan u mjesecu specifikovan kao cio broj od 1 do 31 cas - as specifikovan kao cio broj od 0 do 23 minuti - Minuti specifikovani kao cio broj od 0 do 59 sekunde - Sekunde specifikovane kao cio broj od 0 do 59

Novo kreirani objekat je tipa Data.


Adis Alihodi

Sljedei primjer ilustruje upotrebu etiri konstruktora. danas = new Date(); novaGodina = new Date("January 1, 2008 00:30:00"); novaGodina = new Date(2008, 1, 1) ; novaGodina = new Date(2008, 1, 1, 0, 0, 0); Objekat Data obskrbljen je sljedeim metodama :

getDate() -Vraa dan u mjesecu objekta tipa Data. getDay() -Vraa dan u nedjelji objekta tipa Data. getHours()-Vraa polje asova objekta tipa Data. getMinutes()-Vraa polje minuta objekta tipa Data. getMonth()-Vraa polje mjeseca objekta tipa Data. getSeconds()-Vraa polje sekundi objekta tipa Data. getTime() -Vraa internu reprezentaciju u milisekundama objekta tipa Data. getTimezoneOffset()-Vraa vrijemensku razliku u minutama izmeu datuma i

GMT (grinickog vrijemena). getFullYear()-Vraa 4-cifreno polje godine objekta tipa Data. parse()-Parsira reprezentaciju datuma kao niske i vraa isti datum u obliku

milisekundi setDate() - Postavlja polje dana u mjesecu objekta tipa Data. setHours()- Postavlja polje asova objekta tipa Data. setMinutes()- Postavlja polje minuta objekta tipa Data. setMonth() - Postavlja polje mjeseca objekta tipa Data. setSeconds()-Postavlja polje sekundi objekta tipa Data. setTime() -Postavlja polja objekta tipa Data koritenjem formata u obliku

milisekundi. setFullYear()- Postavlja polje godine objekta tipa Data. toGMTString()-Konvertuje datum u nisku koristeci GMT vremensku zonu (grinicko

vreme). toLocalString()-Konvertuje datum u nisku koristei lokalnu vrijemensku zonu. UTC()- Konvertuje numeriku specifikaciju datuma i vrijemena u format u obliku

milisekundi.

Objekat Math

Svaki element Web strane predstavlja objekat JavaScripta. Objekat Math je ugraen

u Java Script, te se ne mora zasebno kreirati , jer postoji u svakom skriptu. Ranije je smo spomenuli objekat Math , a sada emo dati karakterizaciju istog. Osobine objekata Math su matematike konstante , a metode objekta su matematike funkcije. . Objekat Math posjeduje sljedee konstante :

Math.E - osnova prirodnog logaritma, e Math.PI - odnos obima kruga i prenika


Adis Alihodi

Metode objekta Math su sljedee :

Math.cos - rauna kosinus broja Math.max - prihvata dva broja i vraa vei Math.abs - rauna apsolutnu vrijednost broja Math.round - zaokruuje na cio broj Math.random - bez argumenta, vraa sluajan broj izmeu 0 i 1

Zadatak : Napiite Java Script program kojim ete postii da vaa stranica ne bude monotona, tj. da vrite sluajan odabir pozadine prilikom auriranja stranice .

Rjeenje :


Adis Alihodi

Dijaloki prozori Osobine dijalokih prozora su sljedee :

prikazuje se u prvom planu, na odreenom mjestu, posljedica su nekog dogaaja, omoguuju:

1. upozoravanje korisnika 2. izbor - potvrivanje ili otkazivanje 3. unoenje traenih informacija

obavezuju na neku akciju Postoje sljedei dijaloki prozori i to :

alert prompt confirm

Dijaloki prozor realizovan upotrebom metode alert

Ova metoda prikazuje tekst kroz dijalog box.Parametar metode moe biti :

1. konstantni string, npr. alert('niska karaktera'); 2. ime promenljive, npr. alert(ime_promenljive); 3. konkatenacija, npr. alert('niska karaktera' + ime_promenljive);

Primjer : Napisati JavaScript kod koji e demostrirati upotrebe metode alert.

Rjeenje :

main();

Dijaloki prozor realizovan upotrebom metode confirm

Ova metoda prikazuje tekst kroz dijalog boks.Parametar metode je tekst kao kod metode alert.Ova metoda omoguuje izbor dugmadi : "OK" i "Cancel".Metoda vraa true za OK, a false za Cancel .


Adis Alihodi

Dijaloki prozor realizovan upotrebom metode prompt

Ova metoda slui za prikupljanje informacija od korisnika.Ona ima dva parametra i to :

tekst poziva i podrazumijevani tekst u polju unosa

Npr : prompt('Postavite svoje pitanje','podrazumjevani string');

Metoda prompt ima dva dugmeta : OK i Cancel. Metoda vraa unijeti string ili null ako korisnik nita ne unese .

Primjer : Napisati JavaScript kod koji e demostrirati upotrebe metode prompt.

Rjeenje :

Prompt i promjenljive

Napomena : Napomenimo da namjena dijaloga alert i confirm jeste u sluaju kada se korisniku trebaju prikazati neke informacije izvan WEB stranice. Ako se od korisnika (izvan polja forme na web stranici) eli prihvatiti neki podatak, tada se koristiti metoda prompt.

Primjer : Napisati JavaScript kod koji e demostrirati upotrebe sve tri metode.

Rjeenje :

Primjer poziva razliitih vrsta dijaloga:


Adis Alihodi

Zadatak : Napiite Java Script program kojim ete demonstrirati upotrebu sva tri dijaloga koristei se pri tome sa if ... else strukturom .

Rjeenje : Primjer upotrebe sva tri dijaloga uz if-else strukturu Primjer poziva razliitih vrsta dijaloga:

Zadatak : Napiite Java Script program kojim ete demonstrirati upotrebu metode confirm i metode open. Rjeenje : function potvrdiLink() { if (confirm("Jeste li sigurni da elite da se poveete na sajt fakulteta?")) { open("http://www.pmf.unsa.ba"); }} Ovo je strana koja sadri JavaScript Klikni na adresu pretrage;

Zadatak (Za studente) : Napiite JavaScript kd koji e kao reakcija na dogaaj Click sadrati confirm dijalog i ako korisnik klikne ok, otvoriti sajt fakulteta, a ako klikne na cancel, izdati alert sa porukom pritisnuli ste dugme cancel.

Upis podataka u elemente forme

Upotreba formulara i funkcija

Nakon to je uitana Web strana, ponekad je zgodno omoguiti posjetiocu povratnu informaciju na toj strani. Primjera radi, omoguiti posjetiocu da vri sabiranje brojeva.Ilustracija istog data je u sljedeem primjeru.


Adis Alihodi

Primjer :

function izracunaj(nazivForme) { if (confirm("Da li elite raunanje?")) /* ako korisnik na upit odgovori s "Yes" */ nazivForme.rezultatPolje.value = Eval(nazivForme.upisnoPolje.value) /* upis rezultata u polje formulara */ else alert("Hvala, zbogom do naredne posjete!") /* u suprotnom, daje ovu poruku... */ }

Unesite izraz: Rezultat izraza:

U gornjem primjeru confirm predstavlja dijalog sa upitom koji se javlja nakon klika na dugme "Izraunaj" , a alert predstavlja dijalog za odgovor koji se javlja ukoliko u confirm dijalogu posjetilac odgovori sa "No".

Ispis u statusnu liniju Statusna linija predstavlja dio podruja u dnu navigatora u kome su vidljive informacije o URL nekog linka i slino. Kako statusna linija jeste objekt navigatora, onda se njom moe upravljati, odnosno u nju upisivati podatke. Svaki objekat tipa window ima sljedea dva svojstva: status i defaultStatus. Prvi sadri sadraj statusne linije browser-a, a drugi daje osnovni sadraj statusne linije koji se, eventualno, mijenja pod uticajem nekih dogadjaja. Ako elimo da kao osnovni sadraj pie Dobro doli napiimo sljedee : defaultStatus="Dobro doli!!!";

Ovaj kratak JavaScript program postavlja string "Dobro doli " kao osnovni sadraj statusne linije. Umjesto defaultStatus u programu moe da stoji i eksplicitno window.defaultStatus, to znai da je defaultStatus svojstvo objekta window, ali to je i tekui i jedini otvoreni prozor pa se on ne mora navoditi.


Adis Alihodi

Window objekat - prozor ili okvir web-browsera U sklopu sljedee tabele navesti emo atribute za objekat window .

Atributi Opis closed Bulovska vrijednost koja moe samo da se ita i koja specifikuje da li je prozor zatvoren. defaultStatus Znak koji moe da se ita i u koji moe da se pie i koji specifikuje pretpostavljenu

vrijednost koja se pojavljuje u statusnoj liniji. document Referenca objekta document koji je sadran u prozoru. frames[] Niz okvira koji su sadrani u prozoru history Referenca objekta history za ovaj prozor. java Referenca objekta javapackage koji je na vrhu hijerarhije imena paketa za jezgro

java* paketa koji ine Java jezik. length Broj elemenata u nizu frames[]. Isto to i frames.length. Moe samo da se ita. location Referenca objekta location za ovaj prozor Math Referenca objekta koji uva razliite matematike funkcije i konstante. name Znak koji sadri ime prozora. Ime se, po elji, specifikuje prilikom otvaranja prozora uz

pomo metode open() navigator Referenca objekta navigator koji se primjenjuje na ovaj i sve ostale prozore netscape Referenca objekta javapackage koji je na vrhu hijerarhije imena paketa za jezgro

netscape* paketa od Netscape-a. opener Svojstvo koje moe da se ita i u koje moe da se pie, a koje referie objekat window

koji je pozvao open() metodu za kreiranje ovog prozora. Packeges Referenca objekta javapackage koji je na vrhu hijerarhije imena paketa. parent Referenca roditeljskog prozora ili okvira tekueg prozora. self Referenca samog prozora. Sinonim za window. status Znak koji moe da se ita i u koji moe da se pie i koji specifikuje tekui sadraj

statusne linije. sun Referenca objekta JavaPackage koji je na vrhu hijerarhije imena paketa za jezgro

sun* paketa koji ine Java jezik. top Referenca prozora na najviem nivou koji sadri tekui prozor. Korisno samo ako je

tekui prozor okvir. window Referenca samog prozora. Sinonim za self.

U sklopu sljedee tabele navesti emo metode za objekat window . Metode Opis alert() Prikazuje jednostavnu poruku u dijalokom prozoru. blur() Pomjera fokus sa prozora najvieg nivoa browsera. clearTimeout() Prekida operaciju koja treba da se izvri po isteku nekog definisanog intervala. close() Zatvara prozor. confirm() Postavlja u dijalokom prozoru pitanje koje zahtijeva odgovor "da" ili "ne". focus() Fokusira prozor koji je na najviem nivou browsera. open() Kreira i otvara novi prozor. prompt() Trai da se unese jednostavan string u dijalokom prozoru. scroll() Proizvodi klizanje dokumenta koji je prikazan u prozoru. setTimeout() Izvrava kd nakon isteka nekog definisanog intervala.Ova metoda ima dva argumenta:

Prvi argument funkcije je znak koji predstavlja JavaScript kd koji treba izvriti, a drugi neki interval, zadat u milisekundama, poslije ijeg isteka taj kd treba izvriti.

U sklopu sljedee tabele navesti emo dogaaje za objekat window . Dogaaji Opis onblur() Poziva se kada prozor vie nije u fokusu.


Adis Alihodi

onerror() Poziva se kada doe do greke u izvravanju JavaScript kda. onfocus() Poziva se kada se prozor fokusira. onLoad() Poziva se kada je dokument ili skup okvira potpuno uitan. onUnload() Inae. Primjer : Napiimo JavaScript kod koji omoguava da se ispisuju podaci u statusnu liniju nakon kliknutog prvog dugmeta na formi i uklanjaju nakon kliknutog drugog dugmeta na formi.

Rjeenje :

Ako koristite Firefox i ne vidite pozdravnu poruku iz ovog primjera u statusnoj liniji, jedan od naina da omoguiite ispis poruka u statusnoj liniji je da otiete na: "Tools -> Options -> Content -> Enable JavaScript / Advanced -> ekirajte change status bar text" .

Zadatak (Za studente) : Napiite JavaScript kd koji kao pretpostavljenu vrijednost status linije ispisuje dananji datum u formi : DD/MM/GGGG

Zadatak :< Napisati Java Script kd koji istovremeno ispisuju tekst Pozdrav i u statusnu liniju i u polje formulara, a nakon 20 sekundi uklanja tekst i izdaje alert poruku. HTML>

Rjeenje : () + 1; var d = datum.getDate(); var t = d + '/' + m + '/' + y;


Adis Alihodi

forme */ alert("Prolo je 20 sekundi i tekst je obrisan\niz statusne trake i polja forme!"); } // -->

Objanjenje : Naredbom window.status = "..." ispisuje se podatak u statusnu liniju. Funkcijom setTimeout("obrisi()",20000) zadrava se dalje izvrenje za 20 sekundi, nakon ega se poziva funkcija obrisi().

Zadatak : Napisati JavaSkript koji e prikazivati tano vrijeme u obliku: HH:MM:SS, na primjer: 08:12:28

Rjeenje :

Casovnik


Adis Alihodi

Fade Background Igranje sa bojama pozadine

Zadatak : Napisati JavaScript kod koji e nam demostrirati kako se boja pozadine mijenja. Rjeenje :

Postupna promjena boje pozadine function DecUHexa(DecBr) { var hexa = "0123465789abcdef"; x = Math.floor(DecBr / 16); h = hexa.charAt(x); x = DecBr % 16; h += hexa.charAt(x); return h; } function HexaUDec(HexaBr) { var hexa = "0123465789abcdef"; h = HexaBr.charAt(0); i = hexa.indexOf(h); x = i * 16; h = HexaBr.charAt(1); i = hexa.indexOf(h); x += i return x; } function Mijenjaj_boju() { cr = document.bgColor.substring(1,3); //intenzitet crvene boje ze = document.bgColor.substring(3,5); //intenzitet zelene boje pl = document.bgColor.substring(5); //intenzitet plave boje cr = HexaUDec(cr)+8; ze = HexaUDec(ze)+8; pl = HexaUDec(pl)+8; if ((pl >= 255) && (ze >=255)) {ze = 0; pl = 0;} else if (pl >= 255) {pl = 0; cr = cr - 8;} else {cr -= 8; ze -= 8;} cr = DecUHexa(cr); ze = DecUHexa(ze); pl = DecUHexa(pl); document.bgColor= "#" + cr + ze + pl; window.setTimeout("Mijenjaj_boju()",40) } defaultStatus="Posmatraj kako se mijenja boja pozadine"; Koja boja pozadine je najljepa?

Objanjenje : Gornji porgram generira pojavljivanje crvenog ekrana koji postepeno mijenja boju. Gornji kod ilustruje vie mogunosti JavaScript jezika. Prije svega, program koristi rukovanje dogaajem onLoad. U ovom sluaju kod se sastoji od samo jednog iskaza kojim se poziva funkcija Mijenjaj_boju() koja je definisana izmeu tagova i . Funkcija Mijenjaj_boju() mijenja vrijednost boje pozadine dokumenta pomou svojstva bgColor u odnosu na objekat document. Poetna vrijednost ovog svojstva zadaje se u okviru


Adis Alihodi

taga kao vrijednost atributa BGCOLOR. Vrijednost se zadaje kao string oblika #RRGGBB u kojoj se iza znaka # navodi est heksadekadnih cifara, od kojih prve dvije specifikuju crveni spektar, druge dvije zeleni a poslijednje dvije plavi. U okviru funkcije Mijenjaj_boju(), boja pozadine se shvata kao jedan trocifreni broj u brojnom sistemu sa osnovom 256. Vrijednost svojstva bgColor uzima redom svaku osmu vrijednost u ovom brojnom sistemu (ako bi se uzimala svaka vrijednost, prikazivanje razliitih boja ilo bi isuvie sporo). Funkcija Mijenjaj_boju(), prije svega ilustruje koritenje metode substring() objekta tipa string. Ovdje se metod primjenjuje na string document.bgColor. Ovaj metod iz stringa vadi podstring. Metod ima dva argumenta: prvi je poetna pozicija podstringa u stringu, a drugi prva pozicija iza zavrne pozicije podstringa u stringu. Odbrojavanje pozicija u stringu poinje brojem 0. U stringu koji oznaava RGB zapis boje, na poziciji 0 nalazi se znak #, a na pozicijama 1 i 2 heksadecimalni zapis crvenog spektra. Stoga su argumenti funkcije substring() za izdvajanje heksadecimalnog zapisa crvenog spektra 1 i 3. Objekat String

Ovaj objekat slui za manipulaciju nad stringovima.Jedan od najee koritenih oblika za konstruktor je dat sa :

String(vrijednost)

Npr: var ime=new String('Adis');

Kao povratna dobivena vrijednost novo kreiranog string objekta jeste ponovo string objekat. Jako korisno svojstvo string objekta je svojstvo length.Svojstvo length nam kae koliko imamo karaktera u stringu.

Npr: var prezime=new String('sahman'); var brojkar=prezime.length; // kao rezultat vraa 6

U sklopu sljedee tabele navesti emo metode za objekat string .

Metode Opis anchor() Vraa kopiju stringa u okruenju taga . big() Vraa kopiju stringa u okruenju taga . blink() Vraa kopiju niske u okruenju taga . bold() Vraa kopiju stringa u okruenju taga . charAt() Vadi karakter sa date pozicije u stringu. fixed() Vraa kopiju stringa u okruenju taga . fontcolor() Vraa kopiju stringa u okruenju taga . fontsize() Vraa kopiju stringa u okruenju taga . indexOf() Trai karakter ili podstring u stringu. italics() Vraa kopiju stringa u okruenju taga . lastIndexOf() Trai unazad string ili podstring u stringu. link() Vraa kopiju stringa u okruenju taga . small() Vraa kopiju stringa u okruenju taga . split() Konvertuje string u niz karaktera, koristei neki karakter kao graninik. sub() Vraa kopiju stringa u okruenju etiketa . substr() Vraa podstring iz stringa od pozicije 1. argumenta na duini 2. argumenta substring() Vadi podstring iz stringa. sup() Vraa kopiju stringa u okruenju taga . tolowerCase() Vraa kopiju stringa u kojoj su sva slova pretvorena u mala slova. toUppaerCase() Vraa kopiju stringa u kojoj su sva slova pretvorena u velika slova.


Adis Alihodi

Stringovi koji predstavljaju heksadecimalni zapis boje, cr, ze i pl, prevode se u decimlne vrijednosti sa kojima se moe raunati (sabirati i oduzimati), koritenjem funkcije HexaUDec(). Kako se svaki spektar boje zapisuje dvocifrenom heksadecimalnom vrijednou, on se pretvara u decimalnu vrijednost, na primjer u sluaju crvenog spektra, na slijedei nain:

cr10 = cr0 * 16 + cr1

Ova funkcija ilustruje koritenje jo dvije metode objekata tipa string, a to su : charAt() i indexOf(). Prva metoda izdvaja karakter iz stringa na datoj poziciji koji je argument metode, a druga sravnjuje string sa datim karakterom ili podstringom. U funkciji HexaUDec() prvo se iz stringa kao argumenta metode, izdvaja karakter na nultoj poziciji a zatim se odreuje njegova pozicija u stringu koju ine sve cifre heksadecimalnog brojnog sistema, ureene po svojim rastuim vrijednostima. Na taj nain se, u stvari, dobija brojana vrijednost cifre. Ova vrijednost se mnoi s osnovom brojnog sistema 16, jer je to cifra na poziciji 161. Slian postupak se ponavlja i za cifru na prvoj poziciji u stringu, koja predstavlja cifru na poziciji 160 u heksadecimalnom brojnom sistemu. Jednom prevedene u brojeve, promjenljive koje predstavljaju tekue boje osnovnog spektra uveavaju se po koraku 8 - uveavanje po manjem koraku mijenja neznatno boje i promjena se teko uoava. Boje se mijenjaju tako to se prvo mijenjaju boje samo plavog spektra, i tek kad se sve one iscrpe (t.j., kada se premai vrednost 256),mijenja se boja zelenog spektra s time da se boja plavog spektra vraa na poetak (vrijednost = 0). Cio postupak se ponavlja, sve dok se ne iscrpe sve kombinacije boja plavog i zelenog spektra (t.j., sve dok i jedna i druga vrijednost premae vrijednost 256) kada se mijenja boja crvenog spektra s tim da se boje i plavog i zelenog spektra vraaju na poetak. Kada se u okviru if-else iskaza odrede nove decimalne vrijednosti boja osnovnog spektra treba ih ponovo pretvoriti u heksadecimalne vrijednosti. To obavlja funkcija DecUHex(). Cifra na poziciji 161 dobija se kao cjelobrojni dio kolinika decimalne vrijednosti i broja 16 (za odrevanje cjelobrojne vrijednosti koristi se matematika funkcija Math.floor), dok se cifra na poziciji 160 dobija kao ostatak pri dijeljenju decimalne vrijednosti i broja 16 (za odreivanje ostatka pri dijeljenju koristi se operator %). Ovako odreene vrijednosti heksadecimalnih cifara pretvaraju se u uobiajeni heksadecimalni zapis primjenom metode charAt() na string hexa, koji sadri sve cifre heksadecimalnog brojnog sistema, ureene u rastuem redosljedu. Od ranije znamo da iskaz :

document.bgColor= "#" + cr + ze + pl;

stvarno mijenja boju pozadine dokumenta.

Ako elimo postii da se boja pozadine mijenja u konstantinim vrijemenskim intervalima, onda emo koristi metod setTimeOut() objekta window koji izvrava neki JavaScript kod poslije isteka nekog specifikovanog vrijemena. Prvi argument funkcije je string koji predstavlja JavaScript kd koji treba izvriti, a drugi vrijemenski interval, zadat u milisekundama, poslije ijeg isteka taj kod treba izvriti. U naem primjeru, kd koji treba izvriti je sama funkcija Mijenjaj_boju() u okviru koje se i poziva metod setTimeout(). Dakle, funkcija Mijenjaj_boju() poziva samu sebe.

Zadatak : Prepraviti gore dati JavaScript kod koji e nam omoguiti da se vatromet zaustavi pritiskom na dugme Zaustavi se.


Adis Alihodi

Rjeenje :

Funkciju Mijenjaj_boju() modifikujete dodavajui dio koda na kraj iste: id = window.setTimeout("Mijenjaj_boju()",40); return id;

Ova promjena uvodi promjenljivu id koja identifikuje postavljeni Timeout (jedan prozor moe imati vie Timeout-a za razne dogaaje). Identifikacija tajm-auta je vrijednost koju vraa poziv funkcije setTimeout(). Ovom izmjenom tu istu vrijednost vraa i poziv funkcije Mijenjaj_boju(). Napisati jo jednu funkciju : function Obrisi() { window.clearTimeout(id); }

Na kraj dokumenta, ispred taga dodati slijedei sadraj: Klikni kada elis da prekine vatromet

Zadatak : Prepraviti gore dati JavaScript kod koji e nam omouiti da se vatromet zaustavi pritiskom na dugme Zaustavi se i da se pri tome ispie heksadecimalna vrijednost tekue boje pozadine. Rjeenje :

Funkciju Obrisi() modifikujete dodavajui sljedei kod na poetku iste :

document.pozadina.boja.value=document.bgColor;

U formular koji je ve uveden na kraju dokumenta, unijeti jo jedno ulazno polje, iza postojeeg dugmeta i to :

Zadatak : Prepraviti gore dati JavaScript kod koji e nam omoguiti da poslije prekida vatromet , isti se moe nastaviti. Rjeenje :

Na kraj dokumenta, ispred taga , dodati slijedei sadraj: Klikni ako eli da nastavi vatromet

Zadatak : Prepraviti gore dati JavaScript kod koji e nam omoguiti da se u nekom manjem prozoru uva prethodno izabrana boja, tako da se moe uporediti sa drugim bojama koje se pojavljuju na ekranu.


Adis Alihodi

Rjeenje :

U funkciji Obrisi(), ispred iskaza kojim se tajm-aut anulira, dodati slijedee iskaze: prozor = window.open("","mali","status,resizable,width=300,height=200"); var d = prozor.document; d.write(""); d.write("RGB = " + document.bgColor + ""); d.close();

Tada bi funkcija Obrisi() trebala da ima ovakav oblik : function Obrisi() { document.pozadina.boja.value=document.bgColor; prozor =window.open("","mali","status,resizable,width=300,height=200"); var d = prozor.document; d.write(""); d.write("RGB = " + document.bgColor + ""); d.close(); window.clearTimeout(id); }

Objanjenje : Izgled ekrana je na poetku nepromjenjen. Kada se prvi put klikne na dugme Zaustavi se, otvorie se novi, mali prozor. Boja pozadine tog prozora bie ista kao na prvobitnom prozoru - to je izabrana boja. Ako se pritisnete na dugme Nastavi boja na velikom prozoru poinje da se mijenja, dok boja malog prozora ostaje nepromjenjena. Pored ve poznatih stvari, ovaj dio programa koristi metod close() objekta document. Ovaj metod prikazuje cio sadraj dokumementa koji je ve napisan, a jo nije prikazan. Kada se cio html-dokument ispisuje korisei metod document.write(), neophodno je koristiti document.close() da bi njegov sadraj bio prikazan.

Zadatak : Prepraviti gore dati JavaScript kod koji e nam omoguiti da se u nekom manjem prozoru prikazuje vie izabranih boja, a ne samo jedna.

Rjeenje : Da bi smo rijeili ovaj problem koristit emo okvire. Prepraviti emo gore dati kod na nain da odmah iza taga dodamo slijedee iskaze: // kreiraj i otvori novi prozor prozor = window.open("","mali","status,resizable,width=300,height=200"); // dinamiki kreiraj okvire u tom novom prozoru // koristei specijalni URL about:blank da bi smo dobili prazne okvire prozor.document.write(''); prozor.document.write(''); prozor.document.write(''); prozor.document.write(''); prozor.document.write(''); prozor.document.write('');


Adis Alihodi

// niz okvira kroz koji se krui okviri = new Array(prozor.Okvir1,prozor.Okvir2, prozor.Okvir3, prozor.Okvir4); BrOkvira = 0; // tekuci broja okvira

Funkciju Obrisi() modifikovati emo na sljedei nain : function Obrisi() { document.pozadina.boja.value=document.bgColor; okviri[BrOkvira].document.write(""); okviri[BrOkvira].document.write("RGB = " + document.bgColor + ""); okviri[BrOkvira].document.close(); BrOkvira = (BrOkvira + 1) % 4; // Uveaj broja okvira window.clearTimeout(id); }

Objanjenje : Izgled ekrana je na poetku nepromjenjen, osim to se mali prozor izdijeljen na etiri okvira pojavljuje odmah na poetku . Okviri su na poetku prazni i bijeli. Kada se prvi put klikne na dugme Zaustavi me, prvi okvir e dobiti izabranu boji i u njemu e se ispisati RGB vrijednost te boje. Kada se sljedei put klikne na ovo dugme drugi okvir e ispisati vrijednost tekue boje i tako redom. Prikazivanje boja u okvirima vrti se u krug, tako da kada se peti put klikne na dugme Zaustavi me boja se prikazuje u prvom okviru, esti put u drugom i tako dalje.Ovaj dokument koristi JavaScript program koji dinamiki generie okvire u novom, malom prozoru. To se postie viestrukom primjenom metode write za dokument u novom prozoru (prozor). Svaki od novo genirisanih okvira dobija ime kroz vrijednost atributa NAME: Okvir1, Okvir 2, Okvir 3, Okvir 4. Okviri su na poetku prazni, tj. ne sadre nikakav dokument, jer je vrijednost atributa SRC specijalni URL about:blank. U programu se zatim uvodi niz okviri koji sadri reference otvorenih okvira: prozor.Okvir1,prozor.Okvir2, prozor.Okvir3, prozor.Okvir4. Specijalna promenljiva BrOkvira sadrati e u toku rada programa indeks tekueg okvira u nizu okviri.U funkciji Obrisi() se sada metod write primjenjuje na dokument iz tekueg okvira koji se referie preko odgovarajueg elementa niza okviri[BrOkvira]. Broja okvira uvecava se iskazom BrOkvira = (BrOkvira + 1) % 4. U ovom iskazu primjenjuje se operator % koji rauna ostatak pri cijelobrojnom dijeljenju. Tako kada broja BrOkvira dostigne vrijednost 3, a to je indeks etvrtog okvira u nizu okviri, ovaj iskaz izraunava kao novu vrijednost brojaa 0.

Objekat Array

Ovaj objekat slui za manipulaciju sa unaprijed poznatim brojem elemenata nekog tipa. Drugim rijeima, objekat array je fiksni kontejner. Postoje sljedei oblici konstruktora za ovaj objekat i to su :

Array(), Array(vel), Array(element0,element1,...,elementn)


Adis Alihodi

Argument vel nam daje potreban broj elemenata u nizu. Vrijednost svojstva length konstruisanog niza postavlja se na vel. Dalje , argumente element0,element1,...,elementn moemo zamisliti kao listu od dvije ili vie proizvoljnih vrijednosti. Kada se konstruktor Array poziva sa ovakvim argumentima onda e elementi novokreiranog niza imati redom vrijednosti koje su zadate listom argumenata a svojstvo length e imati vrijednost broja argumenata u listi. Kao povratna vrijednost upotrebe konstruktora Array dobijamo novo inicijalizovan niz. Kada se Array() pozove bez argumenata, svojstvo length niza koji se kreira postavlja se na 0.Inae, svojstvo length nam daje koliko lanova niz moe da ima.

Npr 1: var niz=new Array(); var duzinaniza=niz.length; // kao rezultat vraa 0

Npr 2: var niz1=new Array('1','2','3'); var duzinaniza1=niz1.length; // kao rezultat vraa 3

Objekat Array obskrbljen je sljedeim metodama :

join - Konvertuje sve elemente niza u string i vri spajanje reverse - Obre na licu mjesta sve elemente niza sort - Sortira na licu mjesta sve elemente niza

Zadatak : Napisati JavaScript kod koji e nam omoguiti da u nekoliko navrata sluajnim odabirom pogaamo jedan od ponuenih gradova .

Rjeenje : Igrica : Moj omiljeni grad


Adis Alihodi

{ pokusaj = prompt("Moj omiljeni grad je : SA ili NI ili TZ ili ZE ili NS?","**"); if (pokusaj.toUpperCase() == gradovi[slucbroj]) { alert("Pogodili ste moj omiljeni grad!"); } else { alert("Netano! Pokuajte ponovo."); } } } //--> Pogodite koji je to moj omiljeni grad sluajnim odabirom

Otvaranje prozora i objekti unutar njega

Kontrola otvaranja prozora se realizuje na slijedei nain:

window.open("proba.htm", "naziv", "menubar=no, toolbar=no, location=no, directories=no, status=no, scrollbars=yes, resizable=yes, copyhistory=no, width=400, height=100");

Unutar window.open(...) postoje tri para navodnika (oznaeni razliitim bojama), unutar kojih se nalaze slijedei podaci:

unutar prvog para navodnika upisuje se putanja do .html stranice koja se eli otvoriti (ili se ostavi prazno za blank),

unutar drugog para navodnika upisuje se opcionalni naziv stranice (nije obavezno) unutar treeg para navodnika upisuju se objekti browsera koje elimo ukljuiti

(=yes) ili iskljuiti (=no), te definiemo veliinu novog prozora. Evo popisa nekih od tih objekata:

Objekat Objanjenje menubar meni u browseru (File, Edit...) toolbar funkcijske ikonice u navigatoru location prozori za upis lokacije directories meni za direktorijume status statusna linija (dolje) scrollbars klizai unutar prozora resizable mogunost promjene veliine copyhistory praenje kretanja (history)


Adis Alihodi

width irina prozora (u pixelima) height visina prozora (u pixelima)

Navedimo jo funkcija pomou kojih se mogu saznati jo podataka ili postaviti odreeni parametar:

Objekat Objanjenje window.location screen.height window.resizeTo(x,y) screen.width window.moveTo(x,y) screen.availHeigh window.resizeBy(x,y) screen.availWidth setTimeout("funkcija()",50) href="javascript:funkcija()" screen.height visina prozora screen.width irina prozora screen.availHeigh preostala mogua visina screen.availWidth preostala mogua irina href="javascript:funkcija()" poziv funkcije kao pomou linka

Primjer : Napisati jednostavan Javascript kod za otvaranje novog prozoria

Rjeenje :

Kreiranje novog prozora

Klikom na ovaj link otvarate novi prozor !

U gornjem primjeru definisana je funkcija OtvoriProzor() koja otvara prozor veliine 400x100 pixela, bez toolbara, scrollbara, prozora za lokaciju i statusne trake.Samu funkciju pozivamo sa onClick="return otvoriProzor()" unutar taga, gdje se dogaaj onClick aktivira kada kliknemo miem na dati link.

Otvaranje prozora i ispis u njega Od samog otvaranja prozora manje-vie namamo nikakve koristi ako u njega ne bi smo mogli neto i upisati. Podatke upisujemo naredbom: document.write("tekst ili html naredbe");

Primjer : Napisati jednostavan Javascript kod za otvaranje novog prozoria i upis u isti proslijeujui mu kao parametar slijedee : mojTekst, slikaPozadine, bojaTeksta,


Adis Alihodi

vrstaSlova, velicinaSlova.Npr: 'Tekst u novom prozoru...', 'D:\slika.jpg', '#000000', 'Times New Roman', 5.

Rjeenje :

Primjer otvaranja sloenijeg prozora.

U gornjem primjeru onClick poziva funkciju SlozeniProzor() i prenosi joj slijedee parametre redom:

mojTekst - tekst koji e se pojaviti u novom prozoru slikaPozadine - slika za podlogu novog prozora bojaTeksta - boju teksta u novom prozoru vrstaSlova - vrstu slova u novom prozoru velicinaSlova - veliinu slova u novom prozoru

Nadalje, prompt upit u funkciji SlozeniProzor() omoguava nam da od korisnika prihvatimo neki podatak i potom ga ispiemo u na dokument.


Adis Alihodi

Primjer : Napisati jednostavan Javascript kod za otvaranje novog prozoria i upis u isti uzimajui podatke iz tekstualne datoteke .

Rjeenje :

function ZatvoriProzor() { mojProzor = this.window; mojProzor.close(); return false; } function OtvoriProzor() { // UWD je folder gdje se nalaze html fajlovi, tu vam se nalazi i datoteka : fajl.txt window.open("http://localhost/UWD/fajl.txt", "", "toolbar=no, location=no, directories=no, status=no, menubar=no, scroolbars=yes, width=400, height=200") return false; } Primjer otvaranja i zatvaranja prozora... Otvori novi prozor Zatvori glavni prozor

Zadatak(Za studente) : Analizirajte ta radi sljedei kod


Adis Alihodi

for(var i = 0; i 255) return "ff";

else return "" + hexa[Math.floor(i/16)] + hexa[i%16]; } function PostaviBGCOLOR(r, g, b) {

var hr = hexBrojBOJE(r), hg = hexBrojBOJE(g), hb = hexBrojBOJE(b); document.bgColor = "#"+hr+hg+hb; /* postavka boje pozadine! */ }

//-->

Primjer postupne promjene boje podloge.

Otkrivanje informacija o navigatoru

Ako elite saznati podatke o posjetiocu web strane, onda se, na primjer, mogu iskoristiti informacije o objektu navigator. Objekat navigator ima sljedea svojstva :

Atributi Objanjenje appCodeName Kd browser-a appName Ime browsera appVersion Verzija browsera mimeTypes[] Niz objekata MimeType koji opisuje koje

Mime tipove prepoznaje i podrava browser. mimeTypes.length Broj stavki u nizu mimeTypes[]. plugins[] Niz objekata Plugin koji opisuje

instalirane prikljuke.


Adis Alihodi

plugins[].length Broj stavki u nizu plugins[]. userAgent String koji browser- prosljeuje u zaglavlju

HTTP zahtjeva.

Objekat navigator ima sljedee metode :

Metode Objanjenje javaenabled() Testira da li browser podrava i da li je

omoguio Javu. plugins.refresh Provjerava novo ukljuene prikljuke,

ubacuje ih u niz plugins[] i po potrebi ponovo puni dokument koristei te nove prikljuke.

Primjer : Napisati Javascript code, koji nam daje osnovne informacije o objektu browser.

Rjeenje :

Osnovni podaci o browseru Podaci o browseru Navigator objekt sadri sljedee informacije o browseru koji koristite. document.write("Code Name: " + navigator.appCodeName); document.write("App Name: " + navigator.appName); document.write("App Version: " + navigator.appVersion); document.write("User Agent: " + navigator.userAgent); document.write("Language: " + navigator.language); document.write("Platform: " + navigator.platform); Primjer : Napisati Javascript code, koji nam daje osnovne informacije o objektu document.

Rjeenje :

Podaci o dokumentu Podaci o dokumentu Document objekt sadri slijedee informacije:


Adis Alihodi

document.write("document.lastModified: " + document.lastModified); document.write("document.hostName: " + document.hostname); document.write("document.tagName: " + document.tagName); document.write("document.location: " + document.location); document.write("document.location.href: " + document.location.href); document.write("document.location.protocol: " + document.location.protocol); document.write("document.location.host: " + document.location.host); document.write("document.location.hostName: " + document.location.hostName); document.write("document.location.port: " + document.location.port); document.write("document.location.pathname: " + document.location.pathname); document.write("document.location.search: " + document.location.search); document.write("document.location.hash: " + document.location.hash); Zadatak : Napisati Javascript kod koji otvara dokument neki.html u novom prozoru, potom pronalazi sve linkove unutar istog i ispisuje ih u neki drugi novi prozor.Nakon toga automatski zatvara dokument iz kojeg je ekstrahovao linkove, tj. zatvara prvi novi prozor. Rjeenje :

Neka je sadraj dokumenta neki.html dat sa :

Prikaz nekakvih linkova Otiite na yahoo.com klikom na ovaj link Otiite na google.com klikom na ovaj link Otiite na metak.com klikom na ovaj link Otiite na pmf.unsa.ba klikom na ovaj link Sadraj glavnog html fajla :


Adis Alihodi

function VratiMiLinkove() { noviProzor=window.open("neki.html") // otvara neki.html ( nalazi u se u folderu gdje su svi podaci) u novi prozor prazanProzor=window.open("","","status=yes,scrollbars=yes,width=400,height=500") /*otvaranje praznog prozora*/ prazanProzor.document.write("Spisak linkova:") /*upis podataka u prazan prozor*/ var tekuciLink; for (var i = 0; i < noviProzor.document.links.length; i++) { tekuciLink = noviProzor.document.links[i]; prazanProzor.document.write(i + 1 + ". " + tekuciLink + "") } noviProzor.close() /*zatvaranje prozora neki.html*/ } -->

Primjer : Napisati Javascript code, koji nam daje osnovne informacije o objektu screen , kao to su : irina (width), visina (height), broj boja (colorDepth) i broj pixela (pixelDepth) .

Rjeenje :

irina ekrana: Visina ekrana: ColorDepth....: PixelDepth.....:


Adis Alihodi

document.mojaForma.poljePixela.value = screen.pixelDepth; } PrikaziPodatke(); //-->

Efekti u radu sa tekstom i grafikom

Primjer : Napisati Javascript code, koji nam omoguava da tekstu damo zanimljive efekte u vidu graduiranja teksta.

Rjeenje :


Adis Alihodi

document.write ('' + mojTekst.substring (i,i+1) + ''); } } //--> Hijerarhija teksta.

Objanjenje : Funkcija GenerirajGradaciju() se poziva sa parametrima: GenerirajGradaciju(eljeni tekst, veliina slova, vrsta slova, osnovna

boja) .

Zadnji broj u funkciji GenerirajGradaciju () predstavlja osnovnu RGB boju i moe biti:

0 - za crveni tekst , 1 - za zeleni tekst , 2 - za plavi tekst

Primjer : Napisati Javascript code, koji nam omoguava da neki tekst u statusnoj liniji skrolujemo na vrh svake 100 ms.

Rjeenje : Skrolovanje poruke u statusnoj liniji poruka = "Skrolovanje poruke u statusnoj liniji"; /*sadrzaj stringa statusne linije */ poruka = "... ..." + poruka; pos = 0; //tekuca pozicija stringa poruka function SkrolujTekst() { window.status = poruka.substring(pos, poruka.length) + poruka.substring(0, pos); //string je sastavljen od dijela poruke od pozicije pos do kraja + nastavljen dijelom poruke od poetka do pozicije pos pos++; if (pos > poruka.length) pos = 0;// ako je tekua pozicija vea od duzine poruke, vratiti se na poetnu poziciju 0 window.setTimeout("Skroluj()",100);


Adis Alihodi

} SkrolujTekst(); Skrolovanje poruke u statusnoj liniji Pratite tekst u statusnoj liniji!!!

Primjer : Napisati Javascript code, koji nam omoguava da bilo koji sadraj dokumenta skrolujemo na vrh svake 10 ms.

Rjeenje : var tekucaPozicija=0, alt=1, pozicija1=0, pozicija2=-1 function InicijalizujMe() { Skroliraj(); } function Skroliraj() { setInterval("SkrolProzor()",10) } function SkrolProzor() { if (document.all) temp=document.body.scrollTop; else temp=window.pageYOffset; if (alt==0) alt=1; else alt=0; if (alt==0) pozicija1=temp; else pozicija2=temp; if (pozicija1!=pozicija2) { if (document.all) tekucaPozicija=document.body.scrollTop+1; else tekucaPozicija=window.pageYOffset+1; window.scroll(0,tekucaPozicija); } else { tekucaPozicija=0; window.scroll(0,tekucaPozicija); } } window.onload=InicijalizujMe(); Primjer skrolovanja dokumenta... for (var i = 1; i


Adis Alihodi

Primjer : Napisati Javascript code, koji nam omoguava da bilo koji tekst zumiramo u rastuem poretku na vrh svake milisekunde (ms) u zavisnosti od Explorera.

Rjeenje :


Adis Alihodi

size="'+VelicinaFontaRijeci[z]+'" face="Arial">' + Rijeci[brojac] + '' } z++; Tajmer1=window.setTimeout('PokreniMe()',Milisekundi) } else PodesiMe(); } } function ZaustaviMe() { if ((ImeBrowsera=="Netscape" && VerzijaBrowsera>=4) || (ImeBrowsera=="Microsoft Internet Explorer" && VerzijaBrowsera>=4)) { window.clearTimeout(Tajmer1); window.clearTimeout(Tajmer2); } } function PodesiMe() { if (BrowserJeNetscape) { document.layers['Sloj'].document.writeln('') document.layers['Sloj'].document.close(); } else Sloj.innerHTML=''; if(brojac Primjer zumiranja teksta

Primjer : Napisati Javascript code, koji nam omoguava da posjetiocu ponudimo meni slika bez potrebe da se stranica ponovo uitava .

Rjeenje :


Adis Alihodi

if ((navigator.appVersion.substring(0,3) >= Netscape && navigator.appName == 'Netscape') || (navigator.appVersion.substring(0,3) >= Explorer && navigator.appName.substring(0,9) == 'Microsoft')) return true; else return false; } --> Slika 1 Slika 2 Slika 3

Primjer : Napisati Javascript code, koji omoguava korisniku da pomjera zadate slike po ekranu .

Rjeenje :


Adis Alihodi

{ if (N) { ob.moveTo((e.pageX-X), (e.pageY-Y)); } else { ob.pixelLeft = event.clientX-X + document.body.scrollLeft; ob.pixelTop = event.clientY-Y + document.body.scrollTop; return false; } } } function OtpustanjeMisa() { /* Rukovodilac dogadjaja mouse up ili otpustanje misa */ ob = null; } document.onmousedown = StiskanjeMisa; document.onmousemove = PomjeranjeMisa; document.onmouseup = OtpustanjeMisa; //--> Ove slike moete pomjerati miem!

Primjer : Napisati Javascript code, koji omoguava korisniku da zumira i dezumira zadatu sliku na ekranu pritiskajui na dagmad Poveaj i Smanji respektivno.

Rjeenje : function ZumirajSliku(i) { if (i == 1) /* poveanje slike */ { document.slika1.width = document.slika1.width * 1.20; document.slika1.height = document.slika1.height * 1.20; }


Adis Alihodi

else if (document.slika1.width >60 && document.slika1.height > 60) /* smanjenje slike */ { document.slika1.width = document.slika1.width * 0.80; document.slika1.height = document.slika1.height * 0.80; } }

Primjer : Napisati Javascript code, koji omoguava korisniku da se bilo koji tekst koji zada pomjera za kursorom mia dok isti pomjerate po ekranu.

Rjeenje : .spanstyle { COLOR: black; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; FONT-WEIGHT: bold; POSITION: absolute; TOP: -50px; VISIBILITY: visible }


Adis Alihodi

if (Zastavica == 1 && document.all) { for (i =Rijec.length - 1; i >= 1; i--) { xpos[i] = xpos[i - 1] + Korak; ypos[i] = ypos[i - 1]; } xpos[0] = x + Korak; ypos[0] = y; for (i = 0; i < Rijec.length - 1; i++) { var thisspan = eval("span" + (i) + ".style"); thisspan.posLeft = xpos[i]; thisspan.posTop = ypos[i]; } } else if (Zastavica==1 && document.layers) { for (i =Rijec.length - 1; i >= 1; i--) { xpos[i] = xpos[i - 1] + Korak; ypos[i] = ypos[i - 1]; } xpos[0] = x + Korak; ypos[0] = y; for (i = 0; i < Rijec.length - 1; i++) { var thisspan = eval("document.span" + i); thisspan.left = xpos[i]; thisspan.top = ypos[i]; } } var Tajmer = setTimeout("PomjeriSlova()", 10); } //-->


Adis Alihodi

Mogunost grafike i animacije Mapirane slike

Postoje dva tipa mapiranih slika i to :

na strani klijenta - radi rastereenja servera, linkovana oblast slike je definisana unutar HTML dokumenta i

na strani servera - HTTP serveru se prenose koordinate zona na koju se kliknulo, na osnovu kojih on vraa dokument ije dovlaenje je zahtjevano.Ovaj nain implementacije opteruje server, korisnik ne vidi taan URL zahtjevanog dokumenta.Napomenimo da kod starog naina mapiranja mapa slike i povezani URL-ovi su se nalazili na serveru, te je format mape slike zavisio od HTTP servera.

Java Script mehanizam mapiranja na strani klijenta odvija se kroz sljedee korake:

1. Kreiranje mape (GIMP, PhotoShop, Paint) 2. Definisanje mape upotrebom taga MAP (bie ilustrovano sljedeim primjerom) 3. Ukljuiti mapiranu sliku u dokument upotrebom taga IMG i atributa USEMAP

bie ilustrovano sljedeim primjerom) 4. Koritenje dogaaja onMouseOver i onClick. onMouseOver za prikazivanje

teksta u statusnoj liniji , dok dogaaj onClick za pozivanje neke ugraene ili korisniki napisane funkcije .

Napomenimo, da nije loa praksa da prilikom pomjeranja pokazivaa mia preko nekog linka, kao rezultat neto ispiemo u statusnu liniju. Npr :

Link

Kaimo jo da iskaz return true; je neophodan da ne dopusti da se statusna linija (sa URL-om) prepie nakon prikaza URL-a, tj. ne postoji nain da poruku window.status briete (npr. sa window.status=" " ) sve dok ne bude prikazana neka druga poruka.

Takoe recimo jo da dogaaj onClick nam omoguava da pozovemo neku funkciju kada pritisnemo miem na neki link. Npr :

Link

Dakle, onClick procedura za obradu dogaaja se pokree prije web strane sa linkom koja je uitana unutar pretraivaa. Ovo je uglavnom korisno ako se prave uslovne hiperveze ili ako se eli prikazati odbijanje prije pokretanja web strane sa linkom.

Primjer : Napisati Javascript code, kojim se kreira mapa na strani klijenta koja posjeduje menije za izbor zona. Takoe trebate omoguiti da prelaskom preko zone , naziv zone se prikazuje u statusnu liniju,a klikom na zonu kao rezultat se u tekstualno polje ispie ime zone.


Adis Alihodi

Rjeenje :

Mapiranje slika

function Azuriraj(stanje) { document.form1.text1.value = stanje; } Mapa slike na strani klijenta Naredna mapa slike koristi JavaScript funkcije u svojim zonama. Kretanjem kroz zone prikazuju se informacije u statusnoj liniji. Odabiranje zone klikom navodi se naziv zone u tekstualnom polju ispod mape. Odabrana zona: Primjer : Napisati Javascript code, kojim se omoguava da se prikaz slike na web strani mijenja zavisno od prelaza mia preko nje, tj. prelazak mia preko neke slike,generira pojavljivanje druge slike umjesto postojee. Rjeenje :

Primjer izbora boje podloge zavisno od doba dana....


Adis Alihodi

Rollover efekat Naredne slike e se promjeniti prelaskom mia preko njih. Inae, obje slike su hiperveze, tj. veze ka drugim objektima (kliknite da vidite!).

Napomena : Korisna osobina JavaScript-a je dinamina promjena slika, kao to su jednostavne animacije, izmjena slika prelaskom mia, prekrivanje i otkrivanje asovnika i kalendara itd. Prikaz slika na Web strani se odvija u nizu. Izmjenom lanova niza, jedna slika se moe zamjeniti drugom, tj. sadraj se moe dinamiki mijenjati i bez upotrebe layer-a. No, ovim mehanizmom se mogu samo izmjeniti postojee slike, ali se ne mogu dodavati nove slike. Takoe, uitavanje slika sa servera moe biti neefikasno u sluajevima kada slike zauzimaju dosta prostora.

O objektu Image

Objekat image kao to od ranije znamo je dijete objekta document.Svaki image objekat posjeduje osobine:

border, complete (true/false), height, width , hspace, vspace, name, src

Najvaznija i najea osobina koja se koristi jeste osobina src. Objekat image ne posjeduje metode.

Postoje tri dogaaja za obradu koji su u upotrebi:

dogaaj onLoad se deava nakon uitavanja slike dogaaj onAbort se deava ako posjetilac prekine uitavanje web strane

prije uitavanja slike dogadjaj onError se deava ako nije pronaen fajl sa slikom ili nije

ispravan

Vano : U radu sa slikama veoma vano je osigurati da imate sliku gotovo uvijek uitanu tokom otvaranja stranice ak i u sluajevima kada je konekcija jako spora, tj. kada se radi o brzini modema.Da bi to postigli kreirati emo objekat image naredbom new odredivi sliku koja e se uitati i koju emo kasnije smjestiti u ke memoriju. Npr :


Adis Alihodi

var slika=new Image(); slika.src="slika1.jpg";

Zadatak( za studente) : Analizirati ta radi sljedei kod. Da li je sljedei kod ispravan? Obrazloiti u oba sluaja. Jedan primjer animacije /* Globalne promjenljive */ var RBrAktuelneSlike=0; var pozDesnogDijela=1; // uva poziciju desnog dijela pokrenute slike, jer dio pterhodne slike moe da viri u slijedeoj var RBrSlike=0; /* Sadri vrijednosti 0..4, oznaava redni broj slike proba0 koja je trenutno pokrenuta */ var RBrVanjskeSlike=0; /* funkcija koja ucitava dijelove animacije 1 slajd unaprijed */ function PrikaziMe() { var slike=new Array('slika1','slika2','slika3','slika4','slika5','slika6','slika7','slika8'); for(var i=0;i8) { RBrSlike=4; document.images[RBrAktuelneSlike].src="proba0.jpg"; RBrAktuelneSlike = (RBrAktuelneSlike + 1) % 5; pozDesnogDijela = (RBrAktuelneSlike + 1) % 5; } RBrVanjskeSlike=RBrSlike-5; if ( RBrVanjskeSlike


Adis Alihodi

Primjer animacije

Kontrola ponaanja plug-in u JavaScript-u Plug-in je dodatak browser-u koji dozvoljava upotrebu dodatnih tipova informacija: zvuk, video, itd. Trenutno postoji vie stotina plug-inova dostupnih za browser-e. Na primjer: Adobe's Acrobat plug-in radi podrke precizno formatiranog unakrsng teksta ili Macromedia's Shock Wave i Flash plug-inovi radi podrke animaciji i videu. Da bi omoguili ukljuiti fajl koji koristi plug-in u Web dokumentu, prinueni smo da koristimo tag .

Primjer : Ukljuiti zvuni fajl pod imenom zvuk.wav u html dokument gdje nee biti reprodukcije vie puta , ve samo jednom.

Rjeenje :

Objasnimo ta znae gore dati atributi :

src omoguava zadavanje url-a za zvuni fajl hidden- zadaje (ne)vidljivost objekta; bez ovog atributa prikazuje se kontrolna tabla za

putanje/zaustavljanje zvuka autostart- kontrolie putanje zvuka pri uitavanju html dokumenta loop- omoguava nam ponavljanje zvuka controls- zadaje tip kontrolne table koja se koristi ako hidden nije odreen. Zadate

vrijednosti mogu biti console (za veu kontrolu), smallconsole (za manju kontrolu), playbutton (Play dugme).

width, height - zadaju veliinu kontrolne table (ako nije skrivena)

Ako elimo da nam imamo beskonanu reprodukciju, onda emo pisati :

Tag vrijedi samo za IE. Ako elimo da postignemo efekat da nam odreeni zvuni fajl se emituje recimo deset puta (ovo vrijedi samo za IE) onda piemo :

Pomou taga postiemo da u HTML dokument ubacujemo objekte pout slike, dokumenta ili apleta. On dozvoljava zadavanje parametara za ugraivanje zvuka. Tag ima sljedee atribute :


Adis Alihodi

type-zadaje tip Internet medij podataka. data-zadaje URL objekta width,height -zadaje veliinu objekta

Sljedei primjer ilustruje tu pojavu.

Primjer : Ukljuiti zvuni fajl pod imenom zvuk.wav u html dokument koristei tag gdje nee biti reprodukcije vie puta , ve samo jednom.

Rjeenje :

MIME tipovi

Multi-namjensko proirenje Internet pote (MIME- Multipurpose Internet Mail Extesnsions) je standard za klasifikovanje razliitih tipova fajlova i njihov prenos putem Interneta.

Primjer MIME tipova koji su do sada koriteni:

html - (MIME tip je text/html) tekst - (MIME tip je text/plain) gif - slika (MIME tip je image/gif)

VANO : Kada Web server poalje dokument browser-u, on u zaglavlju sadri MIME tip dokumenta. Ako browser podrava MIME tip, onda se prikazuje sadraj fajla. Inae se nude opcije za download.

Napomenimo jo da objekat navigator.plugins je niz sa unosom za svaki plug-in instaliran u browser-u. Svaki unos posjeduje osobine:

name - naziv plug-ina filename - izvrni fajl koji je uitan za instaliranje plug-ina description - opis plug-ina, dobijen od programera mimeTypes - niz sa jednim unosom za svaki MIME tip podran od strane plug-ina

Primjer : Napisati JavaScript kod koji e omoguiti da se detektuje koji plug-inovi postoje unutar browsera prije uitavanja strane koja posjeduje plug-in sadraj .

Rjeenje : Plug-In lista


Adis Alihodi

Lista postojeih Plug-In-ova Pomou objekta navigator.plugins detektovana je lista postojeih plug-in-ova Naziv Plug-ina Naziv Fajla Opis for (i=0; i


Adis Alihodi

Reprodukovanje i zaustavljanje zvuka function sviraj(broj) { document.embeds[broj].play(); } function zaustavi(broj) { document.embeds[broj].stop(); } Reprodukovanje i zaustavljanje zvuka

Zadatak (Za studente) :Napisati JavaScript kod koji slian gore datom, s' tim to ete imati dva dugmeta kao sliice, koja e vam predstavljati dugmad za reprodukovanje i zaustavljanje zvuka respektivno.Moete proiriti va program da lii na media player!

Zadatak :Napisati JavaScript kod koji e vam simulirati rad klavira sa 13 dirki . Rjeenje : Simulacija klavira sa 13 dirki function SvirajNotu(nota) { document.embeds[nota].play(); } JavaScript klavir


Adis Alihodi

Klikom mia na dirke klavira proizvodi se odgovarajui zvuk.

Objanjenje : Gornji primjer koristi skript koji detektuje klik pokazivaa mia na dirku klavira (sliku bijele.gif ili crne.gif) i proizvodi zvuk odgovarajue note. Dakle, za 13 nota jedne oktave na klavijaturi kreirani su zvuni fajlovi (WAV je format fajla u kome Windows memorie zvuke uzorkovane kao zvune talase. Jedan minut zvuka zauzima 644 KB ili ak 27 MB, zavisno od uestanosti uzorkovanja, zavisno od toga da li zvuk je stereo i da li se za svaki uzorak koristi 8 ili 16 bita). Efekat sviranja prstima na klaviru se postie klikom pokazivaa mia na sliku dirke, to su dirke ukljuene u HTML dokument kao hiperveze, na primjer:

Oznakom img prikazuje se crna dirka, linkovana u tagu A sa #, tj. to je odredite linka nakon klika miem. Time se spreava browser-u da uita neku drugu stranicu.JavaScript koji je zaduen za putanje odgovarajueg zvuka glasi : function SvirajNotu(nota) { document.embeds[note].play(); }

Funkcija SvirajNotu() prihvata kao parametar redni broj note od 0 do 12 i koristi metodu play() iz objekta document.embeds za reprodukciju zvuka. Svaki ugraeni objekat u dokumentu je predstavljen elementom u embeds nizu. Niz embeds je document dijete. Kako konkretan primjer ne radi sa 88 dirki, ve sa 13, to su oni predstavljeni od strane


Adis Alihodi

document.embeds[0] do document.embeds[12] .Osobine i metode objekta embed zavise od plug-ina koji se koristi. U ovom primjeru u sluaju LiveAudio plug-in postoje metode play() i stop() za kontrolu audio izlaza. Vano : Teko je podrati sve plug-inove, a njihovom upotrebom moete izgubiti jedan dio posjetilaca Vae Web strane koji posjeduju browser koji nema instaliran plug-in za npr. zvune fajlove koje koristite, te treba voditi rauna o tome. Savjet je da se obskrbite sa besplatnim plug-inovima za pristup Vaim Web stranicama.


Adis Alihodi

Formulari

Tagove koje smo do sada razmatrali omoguavaju samo da se formira hipertekstualni dokument koji e se razgledati navigatorom. No, navigator ima mogunost slanja podataka ka web-serveru kako bi se ti podaci kasnije obradili. Ova mogunost se ostvaruje preko koncepta formulara (ili obrasca, engl. form). Formular doputa da se razvije sumea (eng. interface) izmeu korisnika i servera: korisnik popunjava formular i alje ga ka serveru. Polazei od podataka iz formulara vri se odgovarajua obrada na serveru, a o rezultatima korisnik eventualno biva obavijeten. Sljedea slika demostrira gore ispriano.

Obavjetavanje se ostvaruje tako to server generie dokument u HTML-u koristei se informacijama iz formulara i vraa ga korisniku preko navigatora ili preko e-pote. Osnovna razlika izmeu razgledanja neke strane i formulara se ogleda u tome to je za "obinu" hipertekstualnu stranu dovoljno "kliknuti" na hiper-vezu sa adresom x da bi se prelo sa tekueg na dokument na adresi x dok se kod formulara uspostavlja veza sa adresom x nekog programa na serveru. Preko formulara mogu se ostvariti razliite aplikacije kao to su:

upiti nad bazama podataka ili na pretraivaima; identifikacija pristupa odreenom servisu servera; elektronska trgovina (prijem narudbe i regulisanje naina plaanja); obavjetavanje o promjenljivim podacima (npr. vrijeme polaska aviona odreenog

datuma, i sl.)

Forme u HTML-u

Forme slue za prikupljanje informacija od posjetilaca web stranice. Forme se specificiraju unutar taga iji su atributi action (sa vrijednou koja moe biti e-mail adresa onoga ko prikuplja informacije ili vrijednost moe biti neki drugi skriptni fajl) i method (ija vrijednost moe biti POST ili GET. Na formularu moe postojati vei broj kontrola koje se zadaju odgovarajuim tagovima.

Za unos vee koliine teksta koristi se tag iji su atributi name (odreuje naziv kontrole), te rows i cols (odreuju broj redova, odnosno kolona teksta). Tag je sloen i tekst koji se stavi izmeu ulaznog i izlaznog taga se inicijalno pojavljuje u polju za unos.

Sljedei tip kontrole su liste za selekciju, a tag za listu je . Pojedine stavke liste se navode pod tagom . Atributi taga su name (kojim se zadaje


Adis Alihodi

ime kontrole), size (kojim se odreuje veliina kontrole, ako nije naveden, kontrola e biti u obliku padajue liste) i multiple (koji ako postoji odreuje da je mogue istovremeno selektovati vie stavki iz liste). Atributi taga su value (vrijednost koja e biti pridruena nazivu liste ako je ta opcija selektovana) i selected (koji odreuje da li je opcija inicijalno selektovana).

Postoji grupa kontrola koje se navode tagom, a meusobno se razlikuju na osnovu atribut type. Prva od njih je tekstualno polje koje omoguava unos jedne kolone teksta, ima vrijednost jednaku text i ostale atribute: name (odreuje ime kontrole), value (sadri tekst koji se inicijalno pojavljuje u kontroli), size (odreuje veliinu kontrole) i maxlength (odreuje maksimalan broj slova koja se mogu unijeti u polje).

Sljedea kontrola koja se navodi tagom ima checkbox za vrijednost type atributa i njome se ukljuuje ili iskljuuje odreena stavka u izbor.Atributi ovog taga su name (ime kontrole), value (vrijednost koja e biti proslijeena ako je data stavka izabrana) i checked (ako postoji, odreuje da ta stavka inicijalno bude selektovana).

Slina prethodnoj kontroli je kontrola sa radio tipom.Parametri su isti ali je razlika u tome to vie ovakvih dugmadi mogu imati isto ime i samo jedno od dugmadi unutar grupe dugmadi sa istim imenom moe biti selektovano.

Posljednje dvije kontole koje se zadaju tagom imaju za atribut type vrijednosti reset, odnosno submit i slue za vraanje svih kontrola unutar forme na poetne vrijednosti, odnosno za odailjanje unosa. Jedini dodatni parametar ovih kontrola je value ija vrijednost odreuje tekst koji e se pojaviti na odgovarajuim dugmiima.

JavaScript i formulari

Svaki formular HTML dokumenta je predstavljen u JavaScript-u objektom form koji ima isti naziv kao i vrijednost atributa name u oznaci za definisanje formulara. Alternativno se moe koristiti niz forms za pozivanje formulara. Ovaj niz sadri specifinosti svakog elementa poev od indeksa nula. Na primjer, ako prvi formular ima naziv form1, onda se moe imenovati na sljedea dva naina :

document.form1 ili document.forms[0]

Svaki form objekat posjeduje atribute ili osobine definisane tagom .Navedimo ih :

action - vrijednost atributa encoding - MIME tip odreen atributom ENCTYPE (ako je uopte potreban) length - ukupan broj elemenata formulara method - metoda za predavanje formulara GET/POST target - odreuje prozor u kom se prikazuje rezultat formulara

Objekat form ima dvije procedure za obradu dogaaja onSubmit i onReset. Iskazi koji su odreeni za onSubmit dogaaj pozivaju se prije podataka formulara koji se predaju na obradu.


Adis Alihodi

Primjer : Napisati JavaScript kod za provjeru unosa u smislu duine unosa.Dakle, trebate imati tri tekstualna polja i to : za ime,adres i telefon.Za ime moramo imati bar 1 karakter, za adresu bar 3 karaktera, za telefon bar 4 karaktera.Na kraju podatke iz tekstualnih polja poslati na odreenu e-mail adresu.

Rjeenje : Primjer formulara u JavaScript-u function ProvjeraUnosa() { if (document.form1.ime.

Java Script - Skripta

Documents

Transcript of Java Script - Skripta