Java Script

1

JavaScriptJavaScriptProgramiranje Internet aplikacija

dr Nenad Jovanović2009. godina

© N. Jovanović, 2009

2

UVODUVOD

• JavaScript je jezik koji je namenjen upotrebi na webu kako bi definisao dinamičke sadržaje na web stranici.

• Službeno 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 izvršava u web browser-u, pa se ovakav oblik programiranja naziva programiranje na klijentskoj strani (eng. client side scripting).

• Važno: JavaScript i Java su dva različita jezika sa sličnom sintaksom.

©© N. Jovanović, 2009 N. Jovanović, 2009

3

JavaScript može…JavaScript može…

• Da ubaci dinamički sadržaj na web stranicu• Da reaguje na događaje (npr. klik miša, . . . )• Da čita i menja sadržaj HTML dokumenta• Da izvrši validaciju podatka• Da detektuje koji browser korisnik koristi• ...


4

OSNOVEOSNOVE

• 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 uobičajen.

• Blokovi se (kao i u Javi) odvajaju vitičastim zagradama ”{ i } ”.

• Komentari (kao u Javi) pišu se unutar oznaka /* i */ ili nakon //.


5

GGdde e staviti JavaScriptstaviti JavaScript kod? kod?

• JavaScript se ubacuje unutar HTML dokumenta. To možemo izvesti na dva načina.

• Prvi način, koji je pogodan za kratke kodove, je da kod ubacimo unutar tagova

<script type="text/javascript"> i </script>• Veće kodove možemo snimiti unutar

posebne “.js ” datoteke, i onda ga unutar HTML dokumenta uključiti pomoću

<script src="skript.js" />


6

Načini izvršenja skripta unutar taga <SCRIPT>...</SCRIPT>Načini izvršenja skripta unutar taga <SCRIPT>...</SCRIPT>

• Ako je skript uključen u zaglavlju (head), ignorisan je do poziva

• Ako je skript uključen u telu (body), rezultat se prikazuje na web strani

• Ako je skript rukovalac događaja (handler), skript će se izvršiti kad se desi događaj


7

Primer 1Primer 1

<html><head>

<title>Prva JavaScript stranica</title></head><body>

<script type="text/javascript">document.write("<h1>Dobar dan!</h1>");

</script></body>

</html>


8

Primer 2Primer 2

<html> <head> <title>Prva JS stranica</title> </head> <body> <script type="text/javascript" src=“dok.js"> </script> </body></html>


9

dok.jsdok.js

document.write("<h1>Dobar dan! </h1>");


10

PROMENLJIVEPROMENLJIVE

• Pravila za imenovanje:– prvi znak mora biti slovo engleske abecede ili donja

crta ("_")– mogu sadržati brojeve i slova engleske abecede– velika i mala slova se razlikuju, ali, uobičajeno je da se

pišu malim slovima!– ključne reči (for, if, else, class, byte, int...) ne mogu se

koristiti u nazivu identifikatora• Promenljive nemaju tipove tj. u svaku

promenljivu možemo smestiti vrednosti bilo kog tipa. (Vrednosti imaju tipove!)


11

Deklarisanje promenljivihDeklarisanje promenljivih

var a;var x = 5;var auto ="Volvo";

• Promenljive možemo deklarisati na bilo kom mestu u kodu.

• Promenljive se ne moraju deklarisati. • U slučaju da promenljiva nije

deklarisana, njeno prvo korišćenje smatra se deklaracijom.


12

Aritmetički oAritmetički operatoriperatori


13

Logički oLogički operatoriperatori


14

Operatori dodeleOperatori dodele


15

SelekcijeSelekcije

• if..else kao u Javi• switch kao u Javi


16

If ... elseIf ... else

if (uslov){ ...blok A...}else { ...blok B...}

• omogućuje uslovno izvođenje dela programa ako je zadovoljen odgovarajući izraz

• else grana se izvršava ako ni jedan od prethodnih izraza nije zadovoljen


uslov

blok A blok B

17

PrimerPrimer 3 3

<SCRIPT LANGUAGE="JavaScript"> </SCRIPT>


18

Uslovni izraziUslovni izrazi

• Uslovnim izrazom možemo prihvatiti jednu od dve vrednosti navedene u uslovu. Evo sintakse i primera:

(uslov) ? izraz1 : izraz2status = (prosek <= 8) ? "placaju" : "besplatno"

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


19

switchswitch

switch (izraz){case konstanta1:

...naredbe... break

case konstanta2: ...naredbe... break

default: ...naredbe ako nije zadovoljen ni jedan uslov

}


20

PrimerPrimer 4 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:{document.write("Pogresan unos!");

}}

</script></body></html>


21

PetljePetlje

• for kao u Javi• while kao u Javi• do..while kao u Javi• postoji i for..in petlja, koja omogućava efikasne

iteracije sa članovima niza.


22

for (inicijalizacija; test; inkrement){ ...niz naredbi...

}

– inicijalizacija, na početku petlje - inicijalizuje promenljivu (varijablu)

– na početku izvođenja svake iteracije proverava se test uslov; ako je uslov istinit, izvođenje se nastavlja inače se prekida

– na kraju svake iteracije izvršava se treći izraz - povećava/smanjuje brojač


23

PrimerPrimer 5 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>


24

ZadatakZadatak

• Odštampati sve parne brojeve od 0 do 100


25

Zadatak Zadatak

• Izračunati faktorijel broja N


26

whilewhile

while (uslov) {...niz naredbi...

}

• uslov se proverava na početku izvođenja, a petlja se izvršava sve dok je zadovoljen zadati uslov

• ako uvslov nije zadovoljen na početku, program neće ni ući u petlju


uslovblok A

27

do ... whiledo ... while

do {

...niz naredbi...

} while (uslov);

• uslov se proverava na kraju izvođenja petlje• čak i ako izraz nije zadovoljen program će barem

jednom izvršiti petlju


uslov

blok A

28

breakbreak

prekida tekuću while ili for strukturu i nastavlja iza nje.

i = 0;n = 0;while (i < 5) {

i++ if (i == 3) { break}else { n += i }

}


29

continuecontinue

while (uslov) {if (izraz1) {

break;}else {

continue;}

}• break služi za prekidanje izvođenja petlje i nastavak izvođenja

programskog koda iza petlje• continue vraća izvođenje petlje na početak


30


<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>


31

ZadatakZadatak

• Stampati brojeve od 0 do 100. Svaki paran broj odstampati u novom redu.


32

FunkcijeFunkcije

• Funkcije se definišu slično 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 može (ali ne mora) da ima povratnu vrednost.• Vrednost se vraća pomoću naredbe return.• Kako bi bili sigurni da se funkcija neće izvršavati dok ne bude

pozovana, potrebno je držati njihove definicije unutar head taga


33

PrimerPrimer 7 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>


34

ZadatakZadatak

• Napisati funkciju fakt(n), koja izračunava faktorijel broja n


35

NEW iskazNEW iskaz

definiše novi objekt na bazi postojećeg.

• Donji primer promenljivoj datum pridružuje tekući datum:

var datum = new Date();


36

THIS iskazTHIS iskaz

• referenca na tekući objekt.

• Donji primer definiše da se klikom na objekt poziva funkcija slucajniBroj() , a kao parametar se prenosi naziv tekuće forme (this.form):

onClick="slucajniBroj(this.form)"


37

NizoviNizovi

• Sadrže skup podataka koji je definisan u okviru jedne promenljive

• Niz se kreira pomoću reči new i konstruktora array() na sledeći način:

var imeNiza= new Array();arrayObjectName = new Array([element0,

element1, ..., elementn])

• Svaki podatak u okviru niza se naziva element


38

PriPrisstup elementima nizatup elementima niza

• Brojanje elemenata u okviru niza startuje sa indeksom nula (0)

• Indeks:– Numerička pozicija elementa u okviru niza

• Pojedinačnom elementu se pristupa tako što se navodi njegov indeks u okviru srednjih zagrada


39

Dodeljivanje vrednosti članovimaDodeljivanje vrednosti članovima

• Dodeljivanje vrednosti pojedinačnom članu niza se izvršava na isti način kao i dodela vrednosti standardnoj promenljivoj

• Jedina razlika je što se mora navesti indeks elementa kome se želi pristupiti

• Veličina niza se može dinamički menjati


40

PrimerPrimer 8 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>


41

ZadatakZadatak

• Napisati skript koji sortira niz X po opadajućem redosledu.


42

PrimerPrimer 9 9: String: 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>


43

Objekti HTML dokumentaObjekti HTML dokumenta

• JavaScript može da pristupi elementima HTML dokumenata

• Objekti su definisani HTML DOM-om (Document Object Model)– razvijen je od strane W3C-a


44

DOM - DOM - Document Object ModelDocument Object Model

• HTML DOM je W3C standard koji definiše kako se web stranica reprezentira pomoću 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 pridružen je jedan objekt koji ima svoja svojstva i metode pomoću kojih možemo baratati njime.

• Listu HTML DOM objekata možete naći na http://www.w3schools.com/js/js_obj_htmldom.asp


45©© N. Jovanović, 2009 N. Jovanović, 2009

46

DOM objektiDOM objekti

– objekti (objects) imaju odgovarajuća svojstva (properties) sa određenim vrednostima (values)body.bgColor="red" - svojstvo određuje da je boja pozadine

tela dokumenta (body objekta) crvena

– objekti reaguju na događaje (events)onclick="novaBoja()" – događaj "klik" miša pozvaće funkciju

"novaBoja() koja će promeniti boju pozadine izabranog objekta


47


dokument

forme slike linkovi telo


48


• Osnovni objekti HTML dokumenta:– document - svojstva sadržaja tekućeg dokumenta (naziv

(title), boja podloge (bgcolor), forme,... );– form - svojstva odgovarajuće forme;– button - svojstva odgovarajućeg dugmeta;– text - svojstva odgovarajućeg teksta;– link - svojstva odgovarajućeg 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')" />


49

Objekti, metodi, svojstva i događaji Objekti, metodi, svojstva i događaji

• Svaka web stranica poseduje objekte:

– window: top-level objekt; sadrži svojstva primenjiva na celokupan prozor,

– location: sadrži svojstva tekuće URL lokacije – history: sadrži svojstva prethodno posećenih URL – document: sadrži svojstva sadržaja tekućeg dokumenta,

kao što su naziv (title), boja pozadine (bgcolor), forme


50

Objekti, metodi, svojstva i događajiObjekti, metodi, svojstva i događaji

• 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


51


• Pretraživač može kreirati objekte bazirane na sadržaju stranice, npr.:

document.mojaforma //forma

document.mojaforma.Check1 //check polje na formi

document.bojaforma.Button1 //taster na formi


52


• 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 = "sadržaj tekst polja" document.mojaforma.text1.name = TekstPolje1 document.mojaforma.Check1.defaultChecked = true document.mojaforma.Check1.value = on document.mojaforma.Check1.name = CheckPolje1


53


• Mnogi objekti imaju metode koje emuliraju događaje.

• Npr, button objekat ima click metod koji emulira klik miša na tasteru...


54©© N. Jovanović, 2009 N. Jovanović, 2009

55

PrimerPrimer 11: 11: ispis datuma poslednje izmene web straneispis datuma poslednje izmene web strane

<HTML> <HEAD></HEAD> <BODY> Rezultat ispisa:<BR>

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT> kraj primera

</BODY> </HTML>


56

JavaScript objektiJavaScript 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


57

.... sada =new Date(); document.write('Vreme je:' + sada.getHours() + ':' + sada.getMinutes() + '<br>');

document.write('Datum je:' + sada.getDate() + '/' + (sada.getMonth()+1) +'/' +(2000 + sada.getYear()));


58

PrimerPrimer 12 12<HTML> <HEAD> <SCRIPT> </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>


59

ZadatakZadatak

• Napisati JavaScrip kod koji upoređuje zadati datum sa današnjim datumom.


60

Primer: vremensko menjanje boje pozadinePrimer: vremensko menjanje boje pozadine

• Pozadina web stranice se postavlja unutar HTML oznaka <BODY BGCOLOR="#0000FF" TEXT="#FFFFFF">

• gde BGCOLOR označava boju pozadine (od #000000 do #FFFFFF u RGB modelu boja), TEXT označava boju slova (od #000000 do #FFFFFF u RGB modelu boja).

• Obično se za boje teksta i boju pozadine uzimaju kontrastne boje ili boje sa različitim brightness tonom, npr. bela slova na crnoj pozadini, crna slova na žutoj pozadini...

• JavaScript može da pomogne da web stranica izgleda dinamičnije i da se njen izgled više puta menja u toku poseta u okviru jednog dana, ako postignete da se boje pozadine menjaju danju, u podne, noću, ujutru,...


61

PrimerPrimer 13 13<HTML><HEAD> </HEAD><BODY>

Primer izbora boje podloge (BODY BGCOLOR) zavisno od doba dana....<br><SCRIPT LANGUAGE="JavaScript">

</SCRIPT> </BODY> </HTML>


62

PrimerPrimer1414: : izbor slike pozadineizbor slike pozadine

<HTML><HEAD></HEAD><BODY><SCRIPT LANGUAGE="JavaScript">

</SCRIPT> </BODY>

</HTML>


63

popup boxpopup box-ovi-ovi

• Okvir (prozor) - prikazuje se u prvom planu, na određenom mestu

• Posledica nekog događaja • Omogućuje: – Upozoravanje korisnika – Izbor - potvrđivanje ili otkazivanje – Unošenje traženih informacija – Obavezuje na neku akciju – Jednostavan mehanizam otklanjanja grešaka – Sadrži vrednost jedne promenljive – Metode: alert(), confirm(), prompt()


64

MetodMetodaa alert 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);


65

MetodMetodaa confirm confirm

• Prikazuje tekst - parametar metode; • Omogućuje izbor: dugme "OK", "Cancel" • Metod vraća true za OK, false za Cancel • Zadavanje OK, Cancel akcija

• Primer: Potvrđivanje: zadavanje OK, Cancel akcija


66

PrimerPrimer 15 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>


67

Metod prompt 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 vraća uneti string, ili NULL ako korisnik ništa ne unese • ALERT i CONFIRM dijalozi su već prikazani u prethodnim primerima. Dakle,

njihova svrha je dijalog s korisnikom, u smislu da se korisniku u posebnom dijalogu (izvan web stranice) pruža neka informacija. Ako se od korisnika (izvan polja formulara na web stranici) želi prihvatiti neki podatak, tada se koristi PROMPT.


68

PrimerPrimer1616

<HTML> <HEAD></HEAD> <BODY> <FORM> Primer poziva različitih 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>


69


<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>


70

PrimerPrimer 18 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>


71

ZadatakZadatak

• Napisati JavaScript kod koji na osnovu poluprecnika kruga, koji korisnik unosi pomoću prompt dijaloga, izračunava obim kruga i rezultat prikazuje u alert dijalogu


72

ZadatakZadatak

• Napisati JavaScript koji simulira kalkulator


73

• U sledećem 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.


74

PrimerPrimer 19 19<head><title>Untitled Document</title><HTML> <HEAD> <SCRIPT language="JavaScript">  </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>


75

Otvaranje prozora i objekti unutar njegaOtvaranje prozora i objekti unutar njega

• Kontrola otvaranja prozora se realizuje na sledeći način: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 sledeći 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 trećeg para navodnika upisuju se objekti čitača

(browsera) koji se žele uključiti (=yes) ili isključiti (=no), te definiše veličina novog prozora. Evo popisa nekih od tih objekata:


76

• menubar meni u pretraživaču (File, Edit, …)• toolbar funkcijske ikone u navigatoru• location prozor za upis lokacije• directories meni za direktorijume• status statusna linija• scrollbars klizači unutar prozora• resizablemogućnost promene veličine• copyhistory praćenje kretanja (history)• width širina prozora (u pikselima)• height visina prozora (u pikselima)


77

• Takođe postoji određeni broj funkcija pomoću kojih se mogu saznati neki podaci ili postaviti određeni parametar:– window.location lokcija dokumenta– window.resizeTo(x,y) povećaj prozor do x,y– window.moveTo(x,y) premesti prozor na x,y– window.resizeBy(x,y) povećaj prozor za x,y piksela– setTimeout("funkcija()",50) poziv funkcije nakon 50 ms– screen.height visina prozora– screen.width širina prozora– screen.availHeight preostala moguća

visina– screen.availWidth preostala moguća širina– href="javascript:funkcija()" poziv funkcije kao linka


78

Primer 20Primer 20<HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript">



</SCRIPT>

</HEAD> <BODY>

Ovo je primer <A HREF="" onClick = "return otvoriProzor()">otvaranja prozora.</A> </BODY> </HTML>


79

• U ovom primeru definisana je funkcija otvoriProzor() koja otvara prozor veličine 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 mišem na dati link).


80

• Naravno, od samog otvaranja prozora i ne bi imali neke koristi ako u njega ne bi mogli nešto i upisati. Podatke upisujemo naredbom: document.write("...tekst ili html naredbe...");


81

Primer 21Primer 21<HEAD>

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

</HEAD> <BODY>

Ovo je primer otvaranja <A HREF="" onClick="return otvoriProzor()">prozora</A> i upis podataka u njega.

</BODY> </HTML>


82

Primer 22Primer 22:: upis iz tekstualne datoteke i zatvaranja prozora 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>


83

PrimerPrimer2323: : PProvera ispravnosti e-mail adreserovera 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="Pošalji" /> </form> </body></html>


84

Primer 24 – pomeranje elemenataPrimer 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>


85

Primer 25 - ValidacijaPrimer 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>


86

ZadatakZadatak

• Za stranicu realizovanu u datom primeru izvršiti proveru da li su sva tekstualna polja uneta


87

ZadatakZadatak

• 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.

•


88

ZadatakZadatak

• 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 sutrašnji datum.

Documents

Java Script