3 Java Script

JavaScript
Programiranje Internet aplikacija dr Nenad Jovanovid 2009. godina

N. Jovanovid, 2009
UVOD
JavaScript je jezik koji je namenjen upotrebi na webu kako bi definisao dinamike sadraje na web stranici. Slubeno ime JavaScripta je ECMAScript. Standard je donela organizacija ECMA International (European Computer Manufacturers Association) 1997 god., a ISO ga je prihvatio 1998 god. Jezik je razvio Brendan Eich za Netscap Navigator 2.0 (1996.). JavaScript kod se izvrava u web browser-u, pa se ovakav oblik programiranja naziva programiranje na klijentskoj strani (eng. client side scripting). Vano: JavaScript i Java su dva razliita jezika sa slinom sintaksom.
N. Jovanovid, 2009
JavaScript moe
Da ubaci dinamiki sadraj na web stranicu Da reaguje na dogaaje (npr. klik mia, . . . ) Da ita i menja sadraj HTML dokumenta Da izvri validaciju podatka Da detektuje koji browser korisnik koristi ...
N. Jovanovid, 2009
OSNOVE
JavaScript je case sensitive odnosno razlikuje velika i mala slova. Komande se razdvajaju prelaskom u novi red ili znakom ;. Znak ; na kraju linije nije obavezan, ali je uobiajen. Blokovi se (kao i u Javi) odvajaju vitiastim zagradama { i } . Komentari (kao u Javi) piu se unutar oznaka /* i */ ili nakon //.
N. Jovanovid, 2009
Gde staviti JavaScript kod?

JavaScript se ubacuje unutar HTML dokumenta. To moemo izvesti na dva naina. Prvi nain, koji je pogodan za kratke kodove, je da kod ubacimo unutar tagova <script type="text/javascript"> i </script> Vee kodove moemo snimiti unutar posebne .js datoteke, i onda ga unutar HTML dokumenta ukljuiti pomou <script src="skript.js" />
N. Jovanovid, 2009
Naini izvrenja skripta unutar taga <SCRIPT>...</SCRIPT>
Ako je skript ukljuen u zaglavlju (head), ignorisan je do poziva Ako je skript ukljuen u telu (body), rezultat se prikazuje na veb strani Ako je skript rukovalac dogaaja (handler), skript de se izvriti kad se desi dogaaj
N. Jovanovid, 2009
Primer 1
<html> <head> <title>Prva JavaScript stranica</title> </head> <body> <script type="text/javascript"> document.write("<h1>Dobar dan!</h1>"); </script> </body> </html>
N. Jovanovid, 2009
Primer 2
<html> <head> <title>Prva JS stranica</title> </head> <body> <script type="text/javascript" src=dok.js"> </script> </body> </html>
N. Jovanovid, 2009
dok.js
document.write("<h1>Dobar dan! </h1>");
N. Jovanovid, 2009
PROMENLJIVE
Pravila za imenovanje:
prvi znak mora biti slovo engleske abecede ili donja crta ("_") mogu sadrati brojeve i slova engleske abecede velika i mala slova se razlikuju, ali, uobiajeno je da se piu malim slovima! kljune rei (for, if, else, class, byte, int...) ne mogu se koristiti u nazivu identifikatora
Promenljive nemaju tipove tj. u svaku promenljivu moemo smestiti vrednosti bilo kog tipa. (Vrednosti imaju tipove!)
N. Jovanovid, 2009
Deklarisanje promenljivih
var a; var x = 5; var auto ="Volvo";
Promenljive moemo deklarisati na bilo kom mestu u kodu. Promenljive se ne moraju deklarisati. U sluaju da promenljiva nije deklarisana, njeno prvo korienje smatra se deklaracijom.
N. Jovanovid, 2009
Aritmetiki operatori
N. Jovanovid, 2009
Logiki operatori
N. Jovanovid, 2009
Operatori dodele
N. Jovanovid, 2009
Selekcije
if..else kao u Javi switch kao u Javi
N. Jovanovid, 2009
If ... else
if (uslov){ ...blok A... } else { ...blok B... }
uslov
blok A
blok B
omoguduje uslovno izvoenje dela programa ako je zadovoljen odgovarajudi izraz else grana se izvrava ako ni jedan od prethodnih izraza nije zadovoljen
N. Jovanovid, 2009
Primer 3
<SCRIPT LANGUAGE="JavaScript"> <!-var datum = new Date(); var sat = datum.getHours(); if (sat > 5 && sat < 13){ document.write('<BODY BGCOLOR="blue">Dobro jutro!') } if (sat > 12 && sat < 19){ document.write('<BODY BGCOLOR="green">Dobar dan!') } if (sat > 18 || sat < 6){ document.write('<BODY BGCOLOR="silver">Dobro vee!') } --> </SCRIPT>
N. Jovanovid, 2009
Uslovni izrazi
Uslovnim izrazom moemo prihvatiti jednu od dve vrednosti navedene u uslovu. Evo sintakse i primera:
(uslov) ? izraz1 : izraz2 status = (prosek <= 8) ? "placaju" : "besplatno"
Ako je uslov istinit (true), izraz ima vrednost izraz1, u suprotnom ima vrednost izraz2.
N. Jovanovid, 2009
switch
switch (izraz){ case konstanta1: ...naredbe... break case konstanta2: ...naredbe... break default: ...naredbe ako nije zadovoljen ni jedan uslov }
N. Jovanovid, 2009
Primer 4
<html> <head> </head> <body> <script type="text/javascript"> var datum=3; switch(datum){ case 1:{ document.write("Ponedeljak!"); break } case 2:{ document.write("Utorak!"); break } case 3:{ document.write("Sreda!"); break } case 4:{ document.write("Cetvrtak!"); break } case 5:{ document.write("Petak!"); break } default:{ } </script> </body> </html> }
document.write("Pogresan unos!");
N. Jovanovid, 2009
Petlje
for kao u Javi while kao u Javi do..while kao u Javi postoji i for..in petlja, koja omogudava efikasne iteracije sa lanovima niza.
N. Jovanovid, 2009
for (inicijalizacija; test; inkrement){ ...niz naredbi... } inicijalizacija, na poetku petlje - inicijalizuje promenljivu (varijablu) na poetku izvoenja svake iteracije proverava se test uslov; ako je uslov istinit, izvoenje se nastavlja inae se prekida na kraju svake iteracije izvrava se trei izraz povedava/smanjuje broja
N. Jovanovid, 2009
Primer 5
<html> <head></head> <body> <SCRIPT LANGUAGE="JavaScript"> for (var i = 1; i <= 10; i++){ document.write('Vrednost i = ' + i); document.write("<br>"); } </SCRIPT> </body> </html>
N. Jovanovid, 2009
Zadatak
Odtampati sve parne brojeve od 0 do 100
N. Jovanovid, 2009
Zadatak
Izraunati faktorijel broja N
N. Jovanovid, 2009
while
while (uslov) { ...niz naredbi... }
blok A
uslov
uslov se proverava na poetku izvoenja, a petlja se izvrava sve dok je zadovoljen zadati uslov ako uvslov nije zadovoljen na poetku, program nede ni udi u petlju
N. Jovanovid, 2009
do ... while
do {
blok A
...niz naredbi...
} while (uslov);
uslov
uslov se proverava na kraju izvoenja petlje ak i ako izraz nije zadovoljen program de barem jednom izvriti petlju
N. Jovanovid, 2009
break
prekida tekudu while ili for strukturu i nastavlja iza nje. i = 0; n = 0; while (i < 5) { i++ if (i == 3) { break} else { n += i } }
N. Jovanovid, 2009
continue
while (uslov) { if (izraz1) { break; } else { continue; } } break slui za prekidanje izvoenja petlje i nastavak izvoenja programskog koda iza petlje continue vrada izvoenje petlje na poetak
N. Jovanovid, 2009
Primer 6
<html> <head></head> <body> <script type="text/javascript"> var i=0; while (i<=10) { if (i<=4) { document.write('Vrednost i=' + i + '<br />'); i=i+1; continue; } else { break; } document.write("KRAJ PETLJE"); } </script> </body> </html>
N. Jovanovid, 2009
Zadatak
Stampati brojeve od 0 do 100. Svaki paran broj odstampati u novom redu.
N. Jovanovid, 2009
Funkcije
Funkcije se definiu slino kao u Javi, ali kako promeljive nemaju tipove, ne navode se tipovi argumenata niti tip povratne vrednosti
// funkcija sa 3 argumenta: function naziv_funkcije(var1, var2, var3){ ... telo funkcije ... return vrednost } // funkcija bez argumenata: function naziv_funkcije2(){ ...telo funkcije }
Funkcija moe (ali ne mora) da ima povratnu vrednost. Vrednost se vrada pomodu naredbe return. Kako bi bili sigurni da se funkcija nee izvravati dok ne bude pozovana, potrebno je drati njihove definicije unutar head taga
N. Jovanovid, 2009
Primer 7
<html> <head></head> <body> <script type="text/javascript"> var a1=3; var b1=5; var rez = povrsina(a1, b1); document.write('Povrsina pravougaonika je ' + rez); function povrsina(a,b) { return a*b; } </script> </body> </html>
N. Jovanovid, 2009
Zadatak
Napisati funkciju fakt(n), koja izraunava faktorijel broja n
N. Jovanovid, 2009
NEW iskaz
definie novi objekt na bazi postojedeg.
Donji primer promenljivoj datum pridruuje tekudi datum:

var datum = new Date();
N. Jovanovid, 2009
THIS iskaz
referenca na tekudi objekt.
Donji primer definie da se klikom na objekt poziva funkcija slucajniBroj() , a kao parametar se prenosi naziv tekude forme (this.form): onClick="slucajniBroj(this.form)"
N. Jovanovid, 2009
Nizovi
Sadre skup podataka koji je definisan u okviru jedne promenljive Niz se kreira pomodu rei new i konstruktora array() na slededi nain: var imeNiza= new Array(); arrayObjectName = new Array([element0, element1, ..., elementn]) Svaki podatak u okviru niza se naziva element
N. Jovanovid, 2009
Pristup elementima niza

Brojanje elemenata u okviru niza startuje sa indeksom nula (0) Indeks:
Numerika pozicija elementa u okviru niza
Pojedinanom elementu se pristupa tako to se navodi njegov indeks u okviru srednjih zagrada
N. Jovanovid, 2009
Dodeljivanje vrednosti lanovima

Dodeljivanje vrednosti pojedinanom lanu niza se izvrava na isti nain kao i dodela vrednosti standardnoj promenljivoj Jedina razlika je to se mora navesti indeks elementa kome se eli pristupiti Veliina niza se moe dinamiki menjati
N. Jovanovid, 2009
Primer 8
<html> <body> <script type="text/javascript"> var auto= new Array(); auto[0] = "Mazda"; auto[1] = "Audi"; auto[2] = "BMW"; for (i=0; i<auto.length; i++){ document.write(auto[i] + "<br />"); } </script> </body> </html>
N. Jovanovid, 2009
Zadatak
Napisati skript koji sortira niz X po opadajudem redosledu.
N. Jovanovid, 2009
Primer 9: String
<html> <body> <script type="text/javascript"> var txt = "Hello World!"; document.write("<p>Big: " + txt.big() + "</p>"); document.write("<p>Small: " + txt.small() + "</p>"); document.write("<p>Bold: " + txt.bold() + "</p>"); document.write("<p>Italic: " + txt.italics() + "</p>"); document.write("<p>Fixed: " + txt.fixed() + "</p>"); document.write("<p>Strike: " + txt.strike() + "</p>"); document.write("<p>Fontcolor: " + txt.fontcolor("green") + "</p>"); document.write("<p>Fontsize: " + txt.fontsize(6) + "</p>"); document.write("<p>Subscript: " + txt.sub() + "</p>"); document.write("<p>Superscript: " + txt.sup() + "</p>"); document.write("<p>Link: " + txt.link("http://www.pr.ac.rs") + "</p>"); document.write("<p>Blink: " + txt.blink() + " (ovo ne redi u IE, Chrome, Safari)</p>"); </script> </body> </html>
N. Jovanovid, 2009
Objekti HTML dokumenta

JavaScript moe pristupati elementima HTML dokumenata Objekti su definisani HTML DOM-om (Document Object Model)
razvijen je od strane W3C-a
N. Jovanovid, 2009
DOM - Document Object Model

HTML DOM je W3C standard koji definie kako se web stranica reprezentira pomodu skupa objekata. HTML DOM nije deo JavaScripta, nego se radi o posebnom standardu koji koriste scrip jezici, pa tako i JavaScript. Svakom elementu na stranici pridruen je jedan objekt koji ima svoja svojstva i metode pomodu kojih moemo baratati njime. Listu HTML DOM objekata moete nadi na
http://www.w3schools.com/js/js_obj_htmldom.asp
N. Jovanovid, 2009
N. Jovanovid, 2009
DOM objekti
objekti (objects) imaju odgovarajuda svojstva (properties) sa odreenim vrednostima (values)
body.bgColor="red" - svojstvo odreuje da je boja pozadine tela dokumenta (body objekta) crvena
objekti reaguju na dogaaje (events)

onclick="novaBoja()" dogaaj "klik" mia pozvade funkciju "novaBoja() koja de promeniti boju pozadine izabranog objekta
N. Jovanovid, 2009
dokument
forme
slike
linkovi
telo
N. Jovanovid, 2009

Osnovni objekti HTML dokumenta:
document - svojstva sadraja tekudeg dokumenta (naziv (title), boja podloge (bgcolor), forme,... ); form - svojstva odgovarajude forme; button - svojstva odgovarajudeg dugmeta; text - svojstva odgovarajudeg teksta; link - svojstva odgovarajudeg linka; this pseudoobjekt koji se koristi za pristup onom HTML elementu iz kog se javascript program poziva
<input name="polje1" type="text" value="12" onClick="prikazi('this.value')" />
N. Jovanovid, 2009
Objekti, metodi, svojstva i dogaaji

Svaka web stranica poseduje objekte:
window: top-level objekt; sadri svojstva primenjiva na celokupan prozor, location: sadri svojstva tekude URL lokacije history: sadri svojstva prethodno posedenih URL document: sadri svojstva sadraja tekudeg dokumenta, kao to su naziv (title), boja pozadine (bgcolor), forme
N. Jovanovid, 2009

Primer svojstava:
location.href = "http://www.xxx.yy/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 poslednjih dokumenta da "pamti" u history
N. Jovanovid, 2009

Pretraiva moe kreirati objekte bazirane na sadraju stranice, npr.:
document.mojaforma //forma document.mojaforma.Check1 //check polje na formi document.bojaforma.Button1 //taster na formi
N. Jovanovid, 2009

Objekti mogu imati svojstva kao to su:
document.mojaforma.action = "http://www.mm.xx/primeri/obrada.html" document.mojaforma.method = get document.mojaforma.length = 5 document.mojaforma.Button1.value = "Klikni ovde" document.mojaforma.Button1.name = taster1 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
N. Jovanovid, 2009

Mnogi objekti imaju metode koje emuliraju dogaaje. Npr, button objekat ima click metod koji emulira klik mia na tasteru...
N. Jovanovid, 2009
N. Jovanovid, 2009
Primer 11: ispis datuma poslednje izmene web strane

<HTML> <HEAD></HEAD> <BODY> Rezultat ispisa:<BR> <SCRIPT LANGUAGE="JavaScript"> <!-document.write("Datum poslednje izmene:"+document.lastModified+"<BR>") --> </SCRIPT> kraj primera </BODY> </HTML>
N. Jovanovid, 2009
JavaScript objekti
JavaScript poseduje izvestan skup predefinisanih objekata: Date, Array, Math. Razmotrimo ih na primeru objekta Date.
Najpre, novi objekat se kreira upotrebom operatora

NEW: danas =new Date(); Date poseduje metode koji se mogu koristiti pri manipulaciji
objektom:
getHours(), setHours() za dobijanje i postavljanje asova getMinutes(), setMinutes() za dobijanje i postavljanje minuta getMonth(), setMonth() za dobijanje i postavljanje meseca
N. Jovanovid, 2009
.... sada =new Date(); document.write('Vreme je:' + sada.getHours() + ':' + sada.getMinutes() + '<br>'); document.write('Datum je:' + sada.getDate() + '/' + (sada.getMonth()+1) +'/' +(2000 + sada.getYear()));
N. Jovanovid, 2009
Primer 12
<HTML> <HEAD> <SCRIPT> <!-var slika = '<IMG SRC="sl1.gif">' var datum = new Date() function proveraIsteka(datumIsteka){ var datIsteka = new Date(datumIsteka) if (datum.getTime() <= datIsteka.getTime()) { document.write(slika); document.write("<HR>slika ce biti vidljiva do dana:<BR>" + datIsteka); } else { document.write("<HR>slika je bila vidljiva do dana:<BR>" + datIsteka); } } //--> </SCRIPT> </HEAD> <BODY> <H4>Primer slike koja je vidljiva samo do odredjenog datuma...</H4> <SCRIPT> /* datum do kada zelite da slika bude vidljiva - 31. 12. 2011.! */ proveraIsteka("December 31, 2011") </SCRIPT></BODY> </HTML> N. Jovanovid, 2009
Zadatak
Napisati JavaScrip kod koji uporeuje zadati datum sa dananjim datumom.
N. Jovanovid, 2009
Primer: vremensko menjanje boje pozadine

Pozadina web stranice se postavlja unutar HTML oznaka
<BODY BGCOLOR="#0000FF" TEXT="#FFFFFF">
gde 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 boje teksta i boju pozadine uzimaju kontrastne boje ili boje sa razliitim brightness tonom, npr. bela slova na crnoj pozadini, crna slova na utoj pozadini... JavaScript moe da pomogne da web stranica izgleda dinaminije i da se njen izgled vie puta menja u toku poseta u okviru jednog dana, ako postignete da se boje pozadine menjaju danju, u podne, nodu, ujutru,...
N. Jovanovid, 2009
Primer 13
<HTML><HEAD> </HEAD><BODY> Primer izbora boje podloge (BODY BGCOLOR) zavisno od doba dana....<br> <SCRIPT LANGUAGE="JavaScript"> <!-var datum = new Date(); /* prihvatanje tekuceg datuma u promenljivu */ var sati = datum.getHours(); /* prihvat tekuceg cas u promenljivu */ if (sati > 4 && sati < 7){ document.write('<BODY BGCOLOR="#0000FF" TEXT="#FFFFFF">Sada je izmedju 5 i 7 sati ujutro...') } if (sati > 6 && sati < 9){ document.write('<BODY BGCOLOR="#0088FF" TEXT="#FFFFFF">Sada je izmedju 7 i 9 sati ujutro...') } if (sati > 8 && sati < 18){ document.write('<BODY BGCOLOR="#808080" TEXT="#FFFFFF">Sada je izmedju 9 i 18 sati...') } if (sati > 17 && sati < 20){ document.write('<BODY BGCOLOR="#FFA500" TEXT="#FFFFFF">Sada je izmedju 18 i 20 sati...') } if (sati > 19 && sati < 22){ document.write('<BODY BGCOLOR="#FF55FF" TEXT="#FFFFFF">Sada je izmedju 20 i 22 sat...') } if (sati > 21 || sati < 5){ document.write('<BODY BGCOLOR="#FF0000" TEXT="#FFFFFF">Sada je izmedju 22 i 5 sata u...') N. Jovanovid, 2009 } //--> </SCRIPT> </BODY> </HTML>
Primer14: izbor slike pozadine

<HTML> <HEAD></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-var podloga1 = "sl1.gif" var podloga2 = "sl2.gif" var podloga3 = "sl3.gif" var slucajnibroj=Math.round(5*Math.random()) if (slucajnibroj < 2) podloga = podloga1 else if (slucajnibroj < 4) podloga = podloga2 else podloga = podloga3 document.write('<BODY BACKGROUND="'+podloga+'">') //--> </SCRIPT> </BODY> </HTML>
N. Jovanovid, 2009
popup box-ovi
Okvir (prozor) - prikazuje se u prvom planu, na odreenom mestu Posledica nekog dogaaja Omoguduje: Upozoravanje korisnika Izbor - potvrivanje ili otkazivanje Unoenje traenih informacija Obavezuje na neku akciju Jednostavan mehanizam otklanjanja greaka Sadri vrednost jedne promenljive Metode: alert(), confirm(), prompt()
N. Jovanovid, 2009
Metoda alert
Prikazuje tekst - parametar metode u prozoru sa dugmetom OK Parametar: konstantni string:
alert('niska karaktera'); ime promenljive: alert(ime_promenljive);
Konkatenacija:
alert('niska karaktera' + ime_promenljive);
N. Jovanovid, 2009
Metoda confirm
Prikazuje tekst - parametar metode; Omoguduje izbor: dugme "OK", "Cancel" Metod vrada true za OK, false za Cancel Zadavanje OK, Cancel akcija
Primer: Potvrivanje: zadavanje OK, Cancel akcija

N. Jovanovid, 2009
Primer 15
<html> <head> <script language="JavaScript" type="text/javascript"> function confirmLink() { if (confirm("Jeste li sigurni da zelite da se povezete na sajt XX?")) { open(xx.html"); } } </script> <title> Ovo je strana koja sadrzi JavaScript </title> </head> <body> <a href="http://www.google.com" onClick="confirmLink();">Klikni na adresu pretrage</a>; </body> </html>
N. Jovanovid, 2009
Metod prompt
Prikupljanje informacija od korisnika Dva parametra: tekst poziva, podrazumevani tekst u polju unosa prompt('Postavite ovde svoje pitanje','podrazumevani string'); Dugme OK, Cancel Metod vrada uneti string, ili NULL ako korisnik nita ne unese ALERT i CONFIRM dijalozi su ved prikazani u prethodnim primerima. Dakle, njihova svrha je dijalog s korisnikom, u smislu da se korisniku u posebnom dijalogu (izvan web stranice) prua neka informacija. Ako se od korisnika (izvan polja formulara na web stranici) eli prihvatiti neki podatak, tada se koristi PROMPT.
N. Jovanovid, 2009
Primer16
<HTML> <HEAD></HEAD> <BODY> <FORM> Primer poziva razliitih vrsta dijaloga:<br> <INPUT TYPE="button" VALUE="Dijalog PROMPT!" ONCLICK="prompt('Ovo je dijalog PROMPT!\nUnesite svoje ime:')"> <INPUT TYPE="button" VALUE="Dijalog ALERT!" ONCLICK="alert('Ovo je dijalog ALERT!')"> <INPUT TYPE="button" VALUE="Dijalog CONFIRM!" ONCLICK="confirm('Ovo je dijalog CONFIRM!\n Nastavak?')"> <BR> </FORM> </BODY> </HTML>
N. Jovanovid, 2009
Primer 17
<html> <head></head> <body> <script type="text/javascript"> var a=prompt("Vase ime ", "ime"); var b=confirm("Zelite li da nastavite "+a); if (b==true) { alert("Dobrodosli "+a); document.write("Dobar Vam dan "+a+ "!"); } else { document.write("Dovidenja "+a); } </script> </body> </html>
N. Jovanovid, 2009
Primer 18
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function izracunaj(nazivForme) { if (confirm("Da li zelite racunanje?")) nazivForme.rezultatPolje.value = eval(nazivForme.upisnoPolje.value) else alert("Hvala, dovidjenja do naredne posete!") } </SCRIPT> </HEAD> <BODY> <FORM> Unesite izraz: <INPUT TYPE="text" NAME="upisnoPolje" SIZE=15 > <INPUT TYPE="button" VALUE="Izracunaj" onClick="izracunaj(this.form); return true;"> <BR> Rezultat izraza: <INPUT TYPE="text" NAME="rezultatPolje" SIZE=15 > <BR> </FORM> </BODY> </HTML>
N. Jovanovid, 2009
Zadatak
Napisati JavaScript kod koji na osnovu poluprecnika kruga, koji korisnik unosi pomodu prompt dijaloga, izraunava obim kruga i rezultat prikazuje u alert dijalogu
N. Jovanovid, 2009
Zadatak
Napisati JavaScript koji simulira kalkulator
N. Jovanovid, 2009
U slededem primeru istovremeno se ispisuje tekst Pozdrav i u statusnoj liniju i u polju formulara, a nakon 20 sekundi tekst se uklanja sa oba mesta i prikazuje alert poruka.
N. Jovanovid, 2009
Primer 19
<head> <title>Untitled Document</title> <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-function ispisi(tekst, forma) { window.status = tekst; /* ispis u statusnu liniju */ forma.ispisnoPolje.value = tekst; /* ispis u polje formulara */ setTimeout("obrisi()",20000); /* poziv funkcije "obrisi" nakon 20 sec */ } function obrisi() { window.status=""; /*brie ispis u statusnoj liniji */ mojaForma.ispisnoPolje.value = ""; /*brie ispis u polju forme */ alert("Prolo je 5 sekundi i tekst je obrisan\niz statusne trake i polja forme!"); /* parametar \n odreuje prelaz u novi red! */ } // --> </SCRIPT> </HEAD> <BODY> <FORM NAME="mojaForma"> <INPUT TYPE="button" VALUE="Kliknite za ispis teksta pozdrava u statusnu liniju i polje formulara" onClick="ispisi('Pozdrav!',this.form);return true;"> <INPUT TYPE="text" NAME="ispisnoPolje" SIZE=15 > </FORM> </BODY> </HTML>
N. Jovanovid, 2009
Otvaranje prozora i objekti unutar njega

Kontrola otvaranja prozora se realizuje na slededi 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 unutar kojih se nalaze slededi podaci: unutar prvog para navodnika upisuje se link na .html stranicu koja se eli otvoriti (ili ostavlja prazno za blank); unutar drugog para navodnika upisuje se opcionalni naziv stranice (nije obavezno); unutar tredeg para navodnika upisuju se objekti itaa (browsera) koji se ele ukljuiti (=yes) ili iskljuiti (=no), te definie veliina novog prozora. Evo popisa nekih od tih objekata:
N. Jovanovid, 2009
menubar
toolbar
location directories status scrollbars resizable copyhistory width height
meni u pretraivau (File, Edit, ) funkcijske ikone u navigatoru prozor za upis lokacije meni za direktorijume statusna linija klizai unutar prozora mogudnost promene veliine pradenje kretanja (history) irina prozora (u pikselima) visina prozora (u pikselima)
N. Jovanovid, 2009
Takoe postoji odreeni broj funkcija pomodu kojih se mogu saznati neki podaci ili postaviti odreeni parametar: window.location lokcija dokumenta window.resizeTo(x,y) povedaj prozor do x,y window.moveTo(x,y) premesti prozor na x,y window.resizeBy(x,y) povedaj prozor za x,y piksela setTimeout("funkcija()",50) poziv funkcije nakon 50 ms screen.height visina prozora screen.width irina prozora screen.availHeight preostala moguda visina screen.availWidth preostala moguda irina href="javascript:funkcija()" poziv funkcije kao linka
N. Jovanovid, 2009
Primer 20
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function otvoriProzor() { window.open("", "", "toolbar=no, location=no, directories=no, status=no, scrollbars=no, width=400, height=100"); return false; } --> </SCRIPT> </HEAD> <BODY> Ovo je primer <A HREF="" onClick = "return otvoriProzor()">otvaranja prozora.</A> </BODY> </HTML>
N. Jovanovid, 2009
U ovom primeru definisana je funkcija otvoriProzor() koja otvara prozor veliine 400x100 piksela, bez toolbara, scrollbara, prozora za lokaciju i statusne trake... Samu funkciju pozivamo sa onClick="return otvoriProzor()" unutar <A HREF=...> (onClick svojstvo se aktivira kada kliknemo miem na dati link).
N. Jovanovid, 2009
Naravno, od samog otvaranja prozora i ne bi imali neke koristi ako u njega ne bi mogli neto i upisati. Podatke upisujemo naredbom:
document.write("...tekst ili html naredbe...");
N. Jovanovid, 2009
Primer 21
<HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-function otvoriProzor() { noviProzor = window.open("", "", "toolbar=no, location=no, directories=no, status=no, width=400, height=100"); text = "Prvi red teksta u novom prozoru.<BR><B>Drugi red teksta.</B><BR>Tredi red..." noviProzor.document.write(text); return false; } --> </SCRIPT> </HEAD> <BODY> Ovo je primer otvaranja <A HREF="" onClick="return otvoriProzor()">prozora</A> i upis podataka u njega. </BODY> </HTML>
N. Jovanovid, 2009
Primer 22: upis iz tekstualne datoteke i zatvaranja prozora

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function zatvoriProzor() { mojProzor = this.window; mojProzor.close(); return false; } function otvoriProzor() { window.open("t1.txt", "", "toolbar=no, location=no, directories=no, status=no, menubar=no, scroolbars=yes, width=400, height=200") return false; } </SCRIPT> </HEAD> <BODY> Primer otvaranja i zatvaranja prozora...<br><br> <A HREF="" onClick="return otvoriProzor()">Otvori novi prozor</A> <BR><BR> <A HREF="" onClick="return zatvoriProzor()">Zatvori glavni prozor</A> <BR><BR> </BODY> </HTML>
N. Jovanovid, 2009
Primer23: Provera ispravnosti e-mail adrese

<html> <head><title>Provera e-mail adrese</title> <script type="text/JavaScript"> function proverimail() { var imali = document.forma1.mail.value.indexOf("@"); if (imali == -1) { alert("E-mail adresa nije ispravna!"); return false; } } </script> </head> <body> <form name="forma1" method="post" onSubmit="return proverimail()" > E-mail adresa: <br /> <input type="text" size="30" name="mail" /> <br /> Text: <br /> <textarea name="tekst" rows="10" cols="40"></textarea> <br /> <input type="submit" value="Poalji" /> </form> </body> </html>
N. Jovanovid, 2009
Primer 24 pomeranje elemenata

<html> <head> <title> Pomeranje elementa </title> <script type = "text/javascript"> function pomeri(elemenat, gore, levo) { dom = document.getElementById(elemenat).style; dom.top = gore + "px"; dom.left = levo + "px"; } </script> </head> <body> <form action = ""> <p> x kordinata: <input type = "text" id = "levoKord size = "3" /> <br /> y kordinata: <input type = "text" id = "goreKord size = "3" /> <br /> <input type = "button" value = "Pomeri sliku" onclick = "pomeri('testSlika', document.getElementById('goreKord').value, document.getElementById('levoKord').value) /> </p> </form> <div id = "testSlika" style = "position: absolute; top: 115px; left: 0;"> <img src = "sl1.jpg" alt = "(Slika)" /> </div> </body> </html>
N. Jovanovid, 2009
Primer 25 - Validacija
<html><head> <script type="text/javascript"> function validacijaPolja(field,alerttext) { with (field) { if (value==null||value=="){ alert(alerttext);return false; } else { return true; } } } function validacija(forma) { validacijaPolja(forma.ime,"morate uneti ime"); validacijaPolja(forma.prezime,"morate uneti prezime"); } </script></head><body> <form> Ime: <input type="text" name="ime" size="30" > Prezime: <input type="text" name="prezime size="30" > <input type="button" value ="Proveri" onClick="validacija(this.form);"> </form></body></html>
N. Jovanovid, 2009
Zadatak
Za stranicu realizovanu u datom primeru izvriti proveru da li su sva tekstualna polja uneta
N. Jovanovid, 2009
Zadatak
Napisati JavaScript stranicu koja prikazuje tekst polje i jedno dugme. Pritiskom na dugme tekst koji predstavlja broj i koji se unosi unutar tekst polja se prihvata i zbir cifara broja se prikazuje korisniku u novom prozoru.
N. Jovanovid, 2009
Zadatak
Napisati kod HTML/JavaScript stranice koja prikazuje tri tekst polja i jedno dugme. U tri tekst polja korisnik unosi datum (dan, mesec i godinu, po jedan podatak u svako tekst polje). Pritiskom na dugme upisati u tekst polja sutranji datum.
N. Jovanovid, 2009

3 Java Script

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

3 Java Script

Uploaded by

Copyright:

Available Formats

JavaScript

Programiranje Internet aplikacija dr Nenad Jovanovid 2009. godina

Gde staviti JavaScript kod?

Naini izvrenja skripta unutar taga <SCRIPT>...</SCRIPT>

Donji primer promenljivoj datum pridruuje tekudi datum:

Pristup elementima niza

Dodeljivanje vrednosti lanovima

Objekti HTML dokumenta

DOM - Document Object Model

objekti reaguju na dogaaje (events)

Objekti HTML dokumenta

Objekti HTML dokumenta

Objekti, metodi, svojstva i dogaaji

Objekti, metodi, svojstva i dogaaji

document.fgColor = #000000 //boja slova

Objekti, metodi, svojstva i dogaaji

Objekti, metodi, svojstva i dogaaji

Objekti, metodi, svojstva i dogaaji

Primer 11: ispis datuma poslednje izmene web strane

Najpre, novi objekat se kreira upotrebom operatora

Primer: vremensko menjanje boje pozadine

Primer14: izbor slike pozadine

Primer: Potvrivanje: zadavanje OK, Cancel akcija

Otvaranje prozora i objekti unutar njega

Primer 22: upis iz tekstualne datoteke i zatvaranja prozora

Primer23: Provera ispravnosti e-mail adrese

Primer 24 pomeranje elemenata

You might also like