3 Java Script Uvod 2012 Full PDF 17892

Visoka kola strukovnih studija za informacione i komunikacione tehnologije Beograd
WEB Programiranje
JavaScript - Uvod
Serverski klijentski jezici

Web orijentisani programski jezici podeljeni su na serverske i klijentske Serverski jezici se izvravaju na web serveru, i nakon njihovog prevoenja, browseru se alje HTML kod Serverski jezici su sloeniji, i mogu da rade sa serverima baza podataka Klijentski jezici su prostiji, i realizuju se kod korisnika u browseru. Zahtevom za web stranom, stranom, HTML kod se dobija od strane web servera, i nakon interpretacije u browseru se prikazuju korisniku Kod klijentskih jezika, jezika, integrisanih u HTML stranu, stranu, je vidljiv za korisnika (PageSource) dok serverskih nikada nije.
O script jezicima
Script jezici nisu pravi pravi programski je jezici, zici, jer nemaju svoje samostalno okruenje, i najee se integriu u ili sa nekim drugim programskim jezikom Jednostavni su za uenje Razumljiva sintaksa Predstavnici: Programski: Programski :Basic, Logo, Logo, Sistemski: Sistemski : Perl, REXX, TCL, sh sh, , bash, tcsh, tcsh, csh, csh, Procesorski: Procesorski : makro jezici, jezici, Web: Web : JavaScript, VisualBasic Script, Script, ASP Script, PHP
JavaS Java Script

Pie se u standardnim programima (okruenjima) za pisanje HTML HTML-a, lak je za uenje i skoro svi svi, , napisa napis ani, ni, Java skriptovi na webweb-u su besplatni Obezbeuje vrlo visok nivo interaktivnosti Ugraen je u sve poznatije web itae, pa ga svi i itaju bez potrebe da se instaliraju posebni programi Proceduralno i objektno je orijentisan Ne kompajlira se posebno, nego u skupu HTML HTML-a Sin Sint taksa je slina Javi, C-u i C++ C++-u JavaScript je CasECasE-sensitive sensitive!!! !!! U HTML ko kodu se odvaja tagovima <script></script>
JavaScript - Java
Pojavili su se istovremeno Potpuno razliiti pristupi pristupi aktiviranju stranica Razliiti proizvoai (Netscape i Sun) esto ih korisnici meaju JavaScript nije Java ! JavaScript ne moe da se izvrava samostalno ili u bilo kom drugom okruenju sem u web itau Java apl aplet et je varijanta Jave koja se poziva u sam prostor web itaa, i koja je donekle celina za sebe
JAVA objektni programski jezik

programski jezik potrebno kompajlirati kd platformno nezavisan kd upotrebljava klase koje moraju biti dostupne ili unutar kompajliranog kda ili kod korisnika na kompjuteru potpuno objektno ori orijentisan
Razlike
JAVA
programski jezik stroga definicija varijabli puni objektni kd stroga provera polja varijabli objektna struktura izvoenja Java klase
JavaScript
skript jezik slobodna definicija varijabli delimino objektni kd bez provere polja varijabli vertikalna struktura izvoenja JavaScrip objekti
Redosled izvravanja izvravanja

Kod napisan u Java Scriptcript-u pie se izmeu taga <script language="JavaScript"> i </script> Ovo HTMLHTML-u znai da ko kod koji sledi ne prikazuje kao tekst na ekranu nego izvrava iskaze Ukoliko browser ne moe da izvrava Java Script, uvodi se zabrana prikazivanja napisanog ko koda korisniku postavljanjem operatora <!  >, Ovi simboli se ne prevode kod browsera koji podravaju Java Script HTML ko kod se izvrava redosledom kojim je i pisan Kada se naie na script, redosled pisanja se takoe zadrava Ukoliko u ScriptScript-u postoje neki prekidi ili obavetenja, sav dalji ko kod se ne izvrava dok korisnik ne odreaguje pravilno
JavaScript kod
Mo Moe e biti napisan direktno unurat HTML koda u head ili body tagu <html>
<head> <script language=JavaScript> Neki kod JavaScriptJavaScript-a </script> </head> <body> Sadrzaj </body> </html>
Moe biti pozvan iz nekog eksternog fajla (koji je prethodno kreiran sa ektenzijom .js)
<html> <head> <script language=JavaScript src=fajl.js> </script> </head> <body> Sadrzaj </body> </html>
Definisanje promenljivih
Promenljive se de definiu iza rezervisane rei var var se mora pisati malim slovima Imena svih promenljivih i funkcija su keysensitive Ime promenljive ne sme biti naziv rezervisane rei Ako se dodeljuje niz simbola iza promenljive se pie =Pera =Pera Promenljiva ne sme sadr sadrati ati znakove za razmak Promenljiva mora poeti slovom ili _
Operacije
Isti na nain upotrebe kao i u CC-u +, -, *, / ++, --, --, in/dekrementiranje Operatori koji se nala nalaze ispred promen promenljive znae da se prvo obavi operacija pa tek onda dodela vrednosti, dok iza promenljive znai da se prvo dodeli vrednost pa se vri operacija Logiki Logi ki operatori su I(&& I(&&), ), ILI(||) ILI(||) i NE(!) var a=1; b=a++; (b=1, a=2) b=++a; (b=2, a=2)
Komentari
Rei Rei ili cele reenice koje se ne prevode zovu se komentari. Komentari mogu biti jednoredni ili vieredni. Slue za opisivanja tekueg k kda kako programeru da bi se lake snaao tako i drugima koji ko kod koriste.
1. 2.
Jednoredni komentar je sve to je posle // Vieredni komentar je sve izmeu /* i */ Pisanjem JavaScript koda u HTML komentarima se esto praktikuje, i na taj nain se obezbeuje da se originalni JavaScript kod ne prikazuje korisniku u sluaju neke greke ili nemogunosti browsera da ga interpretira
Ispisivanje
U svakom jeziku "prva" prva" i najkorienija naredba je naredba za ispisivanje U HTMLHTML-u ovaj ko kod ne postoji, nego je dovoljno samo napisati tekst, u nekoj liniji ko koda, van taga i on se prikazuje na ekranu U JavaScriptJavaScript-u naredba za ispis je document.write Iza nje u zagradama, pod znacima navoda treba definisati tekst koji se prikazuje, ili promenljivu van document.write( document.write ( ) Posle svake komande scripta pie se ; Ako se ispis oekuje u posebnom prozoru metod je alert, alert , dok je sintaksa ista kao i kod document.write
Primer
<html> <body> <p> Ovo je prvi deo teksta koji se ispisuje kreiran u klasicnom htmlhtml -u</p> <script language="JavaScript"> <!  > </script> <p> Nastavak teksta u klasicnom htmlhtml-u, ali nakon izvrsavanja Java scriptscript-a jer je pre njega napisan</p> </body> </html>
Prikaz
Format document.write
Kao argument naredbe document.write mogu se pojaviti znakovni nizovi, promenljive i neki tagovi HTML koda. Kada se koristi vi vie od jednog tipa objekata za ispis, vezuju se znakom "+" (konkatanacija stringa) Primer var a=1; var b="Pera b="Pera" " document.write docume nt.write(" (" Peric "+b+"ima "+b+"ima vise od od"+a+" "+a+"godine godine" " +"<p>"); document.write( document.write (Ime Ime je: <b><i <b><i> +b+</ +b+</i i></b>);
Unos
Unos nekog teksta i njegovo njegovo dalje prosleivanje vr vri i se pomou elemenata HTML formulara Pored toga JavaS JavaScript nudi poboljane naine za unos Pandam ispisu u posebnom prozoru je upis u posebnom Ovo je omogueno metodom prompt Sintaksa naredbe je prompt("argument1","argument2") argument1 - predstavlja poruku koja koja se prikazuje prikazuje korisniku argument2 - predstavlja tekst koji se korisniku inicijalno pojavljuje (opciono ko korienje) rienje)
Primer
<HTML> <BODY> <script language = "JavaScript"> prompt("Unesite prompt(" Unesite tekst i pritisnite OK:"," OK:","Tekst Tekst") ") </script> </BODY> </HTML>
Dodela un unetog teksta promenljivoj

Nakon napravljenog ula ulaznog znog prozora za unos ostaje da se podatak koji se upie negde smesti Ovo se radi definisanjem promenljive kojoj se dodeljuje upisana vrednost ili tekst <HTML> <BODY> <script language = "JavaScript"> var unetitekst = prompt("Unesite prompt("Unesite tekst i pritisnite OK:"," OK:","Tekst Tekst") ") </script> </BODY> </HTML>
Pitanje sa dve opcije

Confirm je metod koji predstavlja predstavlja pitanje pitanje sa dve opcije (OK i Cancel) Vrednost promenljive kojoj se dodeli ovaj metod moe biti True True, , ako je izabran OK, tj. False za Canc Can cel Sintaksa je confirm (" ("Zelite da napustite sajt ? " ") )
Dodela vrednosti metoda Confirm

Kako je rezultat metoda Confirm logi logika ka promenljiva, ona se mora ispitati nekim uslovom Najee se ispituje naredbom If Primer: ("Zelite da napustite sajt ? " ") )) if if( (confirm (" {alert("Dovidjenja !")} else {alert("Vracamo se na sadrzaj sajta.")}
Rad sa datumom i vremenom

Svaki programski jezik ima posebnu grupu naredbi za rad sa datumom i vremenom. Klijentski jezici, ove informacije dobijaju od sistemskog vremena klijentskog rauna, dok serverski od web servera. Na taj nain pogreno setovano vreme na klijentskom raunaru uzrokuje rad sa takvim pogrenim podacima, pa je sigurnije koristiti serversko vreme. Sa druge strane, serversk vreme dolazi od web servera koji moe biti bilo gde u svetu, i u drugoj vremenskoj zovi, pa ni ono nije uvek pouzdano za pojedine namene. Realno, koriste se oba vremena, sa ciljem da sve to moe da se odradi kod klijenta tu bude odraeno i da se server to manje optereuje.

U Java scriptu postoji mogunost dohvatanja informacije o svim detaljima vezanim za datum i vreme (dan, sat, minut, godina, mesec, ime dana, vremenska zona, PM/AM, PM/AM, itd.). Rad sa ovim informacijama moe se posmatrati kroz dva pravca delovanja: njihovo dohvatanje (get) i postavljanje (set) Pomou new Date(); dohvata se celokupan zapis sa svim detaljima o datumu i vremenu. Smetanjem svih ovih podataka u lokalnu promenljivu, a pomou posebnih metoda, izdvajaju se pojedine informacije od znaaja. Na primer trenutni sati kao: var datum = new Date(); var sat = datum datum.getHours .getHours(); ();

<SCRIPT LANGUAGE="JavaScript"> var datum = new Date(); var datum_dan = datum.getDate datum.getDate(); (); var var var var dan = datum.getDay datum.getDay(); (); sat = datum.getHours datum.getHours(); (); minut = datum.getMinutes datum.getMinutes(); (); sekund = datum.getSeconds datum.getSeconds(); ();
var mesec = datum.getMonth datum.getMonth(); (); var godina = datum.getYear datum.getYear(); (); </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> datum = new Date("January 13, 1998 12:15:44"); datum.setDate(14) </SCRIPT>
Kontrole toka i petlje

Sintaksa preuzeta preuzeta ili slina slina CC-u If If-else, Switch, For, While, Do While, With, Break . .. if ( (uslov uslov) ) { ta se radi; radi; ... } else { ta se radi; radi; ... }
if ( (uslov uslov) ) { ta se radi; radi; ... } else if { ta se radi; radi; ... } else { ta se radi; radi; ... }
switch(x) { case a: ta se radi; radi; break; case b: ta se radi radi; ; break; }
IF kontrola toka
<SCRIPT LANGUAGE="JavaScript"> <!  --> </SCRIPT>
If -else if - else
if(broj<5) {alert("Uneti broj je manji od 5 !!!")} else {alert("Uneti broj je veci ili jednak od 5 !!!")} if (user == ) ) {alert ("Niste popunili polje: Korisnicko ime");} else if (password == ) ) {alert ("Niste popunili polje: Lozinka");} . else {alert ("Polja user i password nisu prazna");} if (user != ) ) { alert (Popunili ste polje: User"); if (password != ) ) {alert (Popunili ste i polje: Password");} else {alert (Morate popuniti i podatak o passwordpassword-u");} } else {alert (Morate popuniti podatak o useruser-u");}
switch
<SCRIPT LANGUAGE="JavaScript"> <!  --> </SCRIPT>
Petlje
for (osnovni izraz; uslov; uslov; pove poveanje) { ta se radi; radi; ... } while (uslov (uslov){ ){ ... ta se radi...;} radi...;} do { ...iskazi...; } while (uslov);
FOR petlja
<SCRIPT LANGUAGE="JavaScript"> <!  --> </SCRIPT>
Promenljiva vrednost i =1 Promenljiva vrednost i =2 . . . Promenljiva vrednost i =10
while
var i=1; while(i<=10){ document.write(Promenljiva document.write( Promenljiva vrednost i = + i+ "<br>"); i=i+1; }
do - while
var i=1; do { document.write(Promenljiva document.write( Promenljiva vrednost i = + i+ "<br>"); i=i+1; } while(i<=10)
try try-catch
Kao i u drugim jezicima, i u Java Scriptu se koristi trytry-catch iskaz Primer: <script type="text/javascript type="text/javascript"> "> function ispis() ispis() { try { alert( lert(Pozdrav Pozdrav!"); !"); } catch(err) { alert( lert(Greka Greka!+ !+ err.message ); } } </script>
JavaS Java Script funkcije

JavaScript se pie kroz klasine funkcije JavaS Svaka funkcija mora imati ime koje se kasnije poziva, i zapoinje rezervisanom reju function Ukoliko funkcija nema ulazne i izlazne promenljive pored imena funkcije pie se () Telo funkcije kod same funkcije pie se unutar zagrada { } Svaki red ko koda mora se zavriti sa ; Na kraju funkcije pie se rezervisana re return ako se eli vraanje u glavni program Naredba return oznaava kraj ko koda funkcije i vraa se u program na mesto gde je funkcija pozvana
Primer funkcije
Funkcija bez ulaznih i izlaznih parametara function obavestenje() obavestenje() { alert (Tekst na prozoru za obavestenje); return; }
Nakon pozivanja ove funkcije kod generie poruku Tekst na prozoru za obavestenje u posebnom prozoru.
Realizacija ff-je - automatski ako je unutar Body
<html> <body> <script language="JavaScript"> <! <! function obavestenje() obavestenje() {alert (Tekst na prozoru za obavestenje); return;} Pozivanje funkcije mora biti u //-//--> > scriptu inae e se ovo shvatiti kao </script>
deo html koda i ispisati kao i bilo koja druga reenica.
</body> </html>
Pozivanje funkcije
<html> <head> <script language="JavaScript"> <! <! function obavestenje() obavestenje() {alert (Tekst na prozoru za obavestenje); return;} //-//--> > Funkcija se automatski poziva </script> kada se doe do tog reda HTML </head> koda <body> <script language="JavaScript"> obavestenje obavestenje() () </script> <input type="button" value="Pozovi value="Pozovi f f-ju" ju" onclick="obavestenje onclick="obavestenje()"> ()"> </body> </html> Funkcija se poziva kada se klikne
na taster Pozovi f-ju
Funkcije sa parametrima
Ako funkcija treba da ima neke parametre sa kojima radi" radi" oni se definiu unutar zagrada kod imena funkcije function sabiranje (a,b) oekuje kao ulazne parametre dve promenljive: a i b. Ove promenljive se definiu svaki put kada se funkcija poziva function sabiranje (a,b) { alert (Sada (Sada se vrsi sabiranje brojeva a i b); return a+b; a+b; } Po Pozivanjem zivanjem funkcije Zbir=sabiranje(10,35); u promenljivoj Zbir e biti vrednost 45
Primer
Ulazni podaci function average(a,b,c average(a,b,c) ) { var total; total = a+b+c; a+b+c; return total/3; }
Izlazni podatak
Primer - Pozivanje funkcije

function average(a,b,c) { var total; total = a+b+c; return total/3; } ..
start
x=4; y=3; z=2; answer=average(x,y,z); alert(answer);
Pozivanjem funkcije x y z se menja sa a b c
this
Vrlo esto se funkcija poziva iz nekog od elemenata forme U tim situacijama funkciji se prosleuje neki podataka vezan za konkretan element forme (na primer, sadraj unetog teksta u tekstualno polje) Tada se moe koristiti this kao <input type="text" name=ime name=ime" " value="" on onChange Change= =f_ja f_ja(this. (this.value value)"> )"> U tom sluaju dogaaj promene sadraja nekog tekstualnog polja pozvae funkciju f_ja i automatski joj proslediti sadraj unetog teksta U nekim browserima mo moe e da pravi probleme!!!
Rad sa elementima formulara
Objeka Objek at document

Svaki HTML dokument koji je uitan u browser (a tu se i dokumenti koje korisnik ne mora inicijalno da vidi) postaju document objekti U Java scriptu objeka objekat document ukazuje na celu stranicu u kojoj se ovaj deo kod aktivira, i slui da se pomou scripta svaki od pojedinanih elemenata prozove Na taj nain je web stranica predstavljena kroz skup svih elemenata te strane (tagova, tj. slika, teksta, linkova, objekata itd.) a objekat document ih sve objedinjuje
Interakcija korisnika i web strane

Jedini nain da korisnik ima interakciju sa sajtom je promenom: 1. Kroz elemente formi (formulara), pri emu na ovaj nain jedino moe da unese ili oznai bilo kakav sadraj 2. Dogaaja (detektovanje karakteristinih faza u radu web strane ili aktivnosti korisnika, npr. Uitavanje strane, klik miem na neko mesto, prelazak miem preko neke oblasti itd.) Iz tog razloga obe pomenute stavke se mogu realizovati i pomou Java ScriptScript-a
Upravljanje elementima formulara

Svaki od formulara ima elemente koji se popunjavaju ili ozna na avaju od strane korisnika Cilj je te podatke prihvatiti, proveriti i na kraju obraditi sa nekim ciljem Ovo se moe uraditi i serverskim jezikom, ali je bolje klijentskim sve proveriti, pa tek ako je sve u skladu sa oekivanim formatom, to i proslediti serveru. Prvi korak je povezivanje HTML forme sa skript jezikom i dodeljivanje tih podataka nekim promenljivim u skript jeziku, pa onda dalji rad kroz skript jezik Jedan od najeih naina je upotreba Java Scripta
Pristup elementu forme

Bilo kom elementu forme moe se pristupiti na dva naina: 1. Pomou HTML atributa id var x= x=document.getElementById( document.getElementById(element_id element_id) ) 2. Pomou HTML atributa name var y=document. y=document.form_name.element_name form_name.element_name Na ovaj nain element forme je prozvan a ono to se od njega zahteva dobija se primenom odreenih svojstava (name, value, length, selected, itd.)
Upravljanje sadrajem
Prvi korak je pristup objektu document Drugi korak je prozivanje konkretnog elementa formulara pomou name ili id atributa Trei korak je definisanje svojstva koje se primenjuje Npr. Dohvatanje unetog sadraja
1. Pomou HTML atributa id var x= x=document.getElementById( document.getElementById(element_id element_id) ).value .value 2. Pomou HTML atributa name var y=document. y=document.form_name.element_name.value form_name.element_name.value
Upravljanje sadrajem
Kao i u drugim programskim jezicima, moe se dvosmerno dodeljivati sadraj 1. Iz elementa formulara u promenljivu
var x= x=document.getElementById( document.getElementById(element_id element_id) ).value .value; ;
2. Iz promenljive u element formulara

document.getElementById( document.getElementById (element_id element_id) ).value .value = x; Ovo je pandam metodima get() i set()
Kontrola elementa tipa TEXT

<form name="formular"> Tekstualni box <input type="text" name="mika" id="mika1 value="Pocetno value=" Pocetno"> "> </form>
mika je skriveno ime, a Pocetno rec koja e inicijalno biti ispisana u text boxbox-u.
Ako se promenljive definiu kao:
Tada je: aaa=mika (bbb=Pocetno) var aaa=document.formular.mika.name; aaa=document.getElementById(mika1).name; bbb=Neki tekst (ccc=7) var bbb=document.formular.mika.value; ccc=10 var ccc=document.formular.mika.value.length;
Kontrola elementa tipa CHECK BOX

<form name="formular name="formular"> "> " name="mika1" value="nesto1" id=a1> id=a1> Check box 1<input type="checkbox type="checkbox" Check box 2<input type="checkbox type="checkbox" " name="mika2" value="nesto2 value="nesto2id id=a2 =a2 checked> </form>
mika1/2 i nesto1/2 su skriven mika1/2 skrivena a imena imena, , a checked oznaava koji box je inicijalno ekiran.
Ako se promenljive definiu kao: document.getElementById(a1) var aaa=document.formular.mika1.name; var bbb=document.formular.mika1.value; var ccc=document.formular.mika2.name; var ddd=document.formular.mika2.value; var eee=document.formular.mika1.checked; var fff =document.formular.mika2.checked;
Tada je: aaa=mika1 bbb=nesto1 ccc=mika2 ddd=nesto2 (eee=False) eee=True (fff=True) fff=True
Kontrola elementa tipa Select

<form name="formular name="formular"> "> Nacin placanja placanja:<select :<select name=" name="placanje placanje" " id=lista id=lista> > <option value="1">Gotovina value="1">Gotovina</option> </option> <option value="2"> Kartica Kartica</option> </option> <option value="3"> Pouzecem Pouzecem</option> </option> </select> </form>
1,2 i 3 su skrivene skrivene vrednosti.
Ako se promenljive definiu kao: document.getElementById(lista) var aaa=document.formular.placanje.selectedIndex; var bbb=document.formular.placanje.options[1].text; var ccc=document.formular.placanje.options[1].value; var ddd=document.formular.placanje.options [document.formular.placanje.selectedIndex].text; var eee=document.formular.placanje.options [document.formular.placanje.selectedIndex].value;
Tada je: aaa=1 bbb=Kartica ccc=2 ddd=Kartica (ddd=Gotovina) eee=2 (ddd=1)
Kontrola elementa tipa Radio

<form name="formular name="formular"> "> " name="mika1" value="nesto1 id=b1> Radio 1<input type="radio type="radio" Radio 2<input type=" type="radio radio" " name="mika1" value="nesto2"checked> </form>
Tada su mika mika1 1 i nesto1/2 skriven skrivena a imena imena, , a checked oznaava koji box je inicijalno ekiran.
Ako se promenljive definiu kao: document.getElementById(b1) var aaa=document.formular.mika1[0].name; var bbb=document.formular.mika1[1].value; var ccc=document.formular.mika1[1].name; var ddd=document.formular.mika1[0].value; var eee=document.formular.mika1[0].checked; var fff =document.formular.mika1[1].checked;
Tada je: aaa=mika1 bbb=nesto2 ccc=mika1 ddd=nesto1 (eee=False) eee=True (fff=True) fff=False
PrimerPrimer Za datu sliku napisati HTML kod koji je realizuje uz kontrolu Java skriptom. Skript treba da proveri da li je za uneti Username, unet i odgovarajui Password1 tj. Password2. Ako jeste korisniku treba dozvoliti da izborom jednog od tri linka u padajuem meniju doe do nekog od tri strane klikom na Ulaz na sajt. Smatrati da ove strane postoje i da su imenovane sa prvi.html, dugi.html i treci.html . Ako se ne slau sve tri rei treba izbaciti obavetenje o pogrenom logovanju. Napisati Java skript kod koji izvrava gore navedene uslove ako je do sada registrovano dva korisnika sa podacima: <html> <head> <title>Provera</title> <script language="JavaScript"> function provera(){ var x1=document.info.ime.value; var x2=document.info.sifra1.value; var x3=document.info.sifra2.value; var y1=document.info.sajtovi.options[document.info.sajtovi.selectedIndex].value; if((x1=="Joca" & x2=="Joca1" & x3=="Joca2") || (x1=="Ana" & x2=="Ana1" & x3=="Ana2")) { if(y1=="prvi"){window.open("prvi.html")} else if(y1=="drugi"){window.open("drugi.html")} else if(y1=="treci"){window.open("treci.html")} } else {alert("Uneti podaci nisu tacni !!!")} } </script></head>
Ispitni zadatakzadatak- nastavak

<body> <p><b>Primer upotrebe identifikacije</b></p> <hr> <b>Licne informacije:</b> <br><br> <form name="info" > User name:<input type="text" name="ime"><br><br> Password1:<input type="password" name="sifra1"><br><br> Password2:<input type="password" name="sifra2" <br><br><br> Sajt kome se pristupa: <select name="sajtovi"> <option value="prvi">Prvi</option> <option value="drugi">Drugi</option> <option value="treci">Treci</option> </select> <br><br><br><br><br> <input type="button" name="potvrdi" value="Ulaz na sajt" onClick="provera()"> <input type="reset" name="odustani" value="Brisanje podataka"> </form> </body> </html>
<html>
Pristupanje pomou IDID-a
<head> <script type="text/javascript"> function ispis (){ document.write (document.getElementById('1').value); document.write("<br>"); document.write (document.getElementById('2').checked); document.write (document.getElementById('3').checked); document.write("<br>"); document.write (document.getElementById('4').checked); document.write (document.getElementById('5').checked); document.write (document.getElementById('6').checked); document.write("<br>"); }
<body> <form> <input type="button" value="Ispis"onClick="ispis()"><br> 1<input type="text" id="1"><br> 2<input type="radio" name ="grupa" id="2"> 3<input type="radio" name ="grupa" id="3"><br> 4<input type="checkbox" id="4"> 5<input type="checkbox" id="5"> 6<input type="checkbox" id="6"><br> <select id="789"> <option> 7 </option> <option> 8 </option> <option> 9 </option></select></form></body></html>
</script> </head>
Otvaranje/zatvaranje Otvaranje /zatvaranje novog prozora

Kreiranje novog prozora u kome se otvara neka stranica u HTML kodu, se najee obavlja kroz funkciju koja se poziva u eljenoj prilici Novootvoreni prozor ima mogunost da se kontrolie po veliini zadavanjem visine i irine, ili zatvori definisanjem njegovog imena po kome se proziva Primer function otvaranjenovogprozora(){ otvaranjenovogprozora(){ var prozor=window.open window.open("1.html", ("1.html", "height=300, width=200")} function za zatvaranjenovogprozora() tvaranjenovogprozora(){ { prozor.close()}
Dogaaji
Dogaaji definiu nain, vreme i mesto obavljanja neke od operacija onAbort prekid uitavanje slike onBlur izlazak iz fokusa elemenata obrasca, prozora ili forme onClick klik miem onChange promena vrednosti u obrascu onError greka pri uitavanju onFocus davanje ulaznog fokusa prozoru onLoad uitavanje web stranice onMouseout pomeranje mia van aktivnog dela linka onMouseOver pomeranje mia u aktivnom delu linka onReset aktiviranje tastera reset u obrascu onSelect aktiviranje polja za unos u obrascu onSubmit aktiviranje tastera submit u obrascu onUnload naputanje web strane
onFocus - onFocus dogaaj nastupa kada korisnik klikne na check kutiju.
Dogaaji
Dogaaji i tagovi kojima se mogu dodeliti
Dogaaji po tagovima
<A> click ( (onClick onClick) ) mouseOver (onMouseOver) onMouseOver) mouseOut (onMouseOut) onMouseOut) <AREA> mouseOver (onMouseOver) onMouseOver) mouseOut (onMouseOut) onMouseOut) <BODY> blur ( (onBlur onBlur) ) error ( (onError onError) ) focus ( (onFocus onFocus) ) load ( (onLoad onLoad) ) unload ( (onUnload onUnload) ) <FORM> submit ( (onSubmit onSubmit) ) reset ( (onReset onReset <IMG> abort ( (onAbort onAbort) ) error ( (onError onError) ) load ( (onLoad onLoad) ) <INPUT TYPE = "button"> click ( (onClick onClick) ) <INPUT TYPE = "checkbox"> click ( (onClick onClick) ) <INPUT TYPE = "reset"> click ( (onClick onClick) ) <INPUT TYPE = "submit"> click ( (onClick onClick) ) <INPUT TYPE = "text"> blur ( (onBlur onBlur) ) focus ( (onFocus onFocus) ) change ( (onChange onChange) ) select ( (onSelect onSelect) ) <SELECT> blur ( (onBlur onBlur) ) focus ( (onFocus onFocus) ) change ( (onChange onChange) ) <TEXTAREA> blur ( (onBlur onBlur) ) focus ( (onFocus onFocus) ) change ( (onChange onChange) ) select ( (onSelect onSelect) )
PrimerPrimer <HTML> <BODY>
onAbort
<H4 <H4>Primer onAbort </H </H4 4> <b>Zaustavite ucitavanje slike !</b> <p> <IMG SRC=slika1 SRC=slika1.jpg" .jpg" onAbort="alert('Zaustavili ste ucitavanje slike!')"> </BODY> </HTML>
PrimerPrimer -
on onBlur Blur
<HEAD> <SCRIPT LANGUAGE="JavaScript"> function valid(){ var input=0; input=document.myform.podatak.value input= document.myform.podatak.value; ; if (input<0){ alert("Uneli alert("Uneli ste negativan ceo broj"); broj"); } } </SCRIPT> </HEAD> <BODY> <H4 <H4> Primer onBlur </H4 </H4> Ako unesete negativan broj pojava ALERT dijaloga dijaloga:< :<br br> > <form name="myform name="myform"> "> valid()"> <input type="text" name="podatak name="podatak" " value=" OnBlur=" nBlur="valid()"> </form> </BODY>
PrimerPrimer -
onChange
<HEAD> <SCRIPT LANGUAGE="JavaScript"> function valid(){ var input=0; input=document.myform.podatak.value input= document.myform.podatak.value; ; alert("Vrednost alert(" Vrednost polja je promenjena sa 10 na " + input ); } </SCRIPT> </HEAD> <BODY> <H4 <H4>Primer</H4 >Primer</H4> Promenite vrednost polja sa 10 na neku drugu i pratite desavanja: desavanja: <br br> > <form name="myform name="myform"> "> <input type="text" name="podatak name="podatak" " value="10 onChange="valid() onChange ="valid() > </form> </BODY>
PrimerPrimer -
on onClick Click
<HEAD> <SCRIPT LANGUAGE="JavaScript"> function valid(){ var input=0; input=document.myform.data.value input= document.myform.data.value; ; alert("Pozdrav alert(" Pozdrav " + input + " ! Srecno..."); Srecno..."); } </SCRIPT> </HEAD> <BODY> <H4 <H4> Primer onClick </H </H4 4> Kliknite na dugme nakon unosa imena u text polje:< polje:<br br> > <form name="myform name="myform"> "> <input type="text" name="data" size=10> <INPUT TYPE="button" VALUE="KLIKNITE" onClick="valid()"> onClick="valid()"> </form> </BODY>
PrimerPrimer -
on onReset Reset
<HTML> <BODY> <H4 <H4> Primer onReset </H4 </H4> Molimo Vas, po pop punite text polje i kliknite na dugme reset: <br br> > <form name="myform name="myform" " onReset="alert('OPREZ! onReset="alert('OPREZ! RESETOVALI STE FORMU')"> <input type="text" name="data" value="" size="20"> <input type="reset" Value="Reset" name="myreset name="myreset"> "> </form> </BODY> </HTML>
PrimerPrimer -
OnLoad
<html> <head> <SCRIPT TYPE="text/javascript TYPE="text/javascript" " > <!-<!-function imefunkcije() imefunkcije() { alert("Loaded"); alert( alert( Stranica je uitana itana"); "); } //-//--> > </SCRIPT> </head> <body OnLoad=" oad="imefunkcije imefunkcije()" ()" > </body> </html>
PrimerPrimer -
onMouseOver i onMouseOut
<a href=primer href=primer.html" .html" onMouseOver="document.images[1].src=slika1 onMouseOver="document.images[1].src= slika1.gif';" .gif';" onMouseOut="document.images[1].src=slika2 onMouseOut="document.images[1].src= slika2.gif'; .gif'; > Link koji sada postaje osetljiv </a </a>
s onMouseover=nesto> skola <a href=http://www.ict.edu.r href=http://www.ict.edu.rs </a> Kada korisnik pree pree preko linka skola, aktivirae se funkcija nesto nesto
Rad sa browserbrowser-ima
Browser CodeName: CodeName: navigator.appCodeName Browser Name: navigator.appName Browser Version: navigator.appVersion Cookies Enabled: navigator.cookieEnabled Platform: navigator.platform UserUser -agent header: navigator.userAgent
Nizovi
Rezervisana re Array Niz poinje indeksiranjem elemenata od 0 Pristupanje lanu niza je Imeniza Imeniza[ [pozicija lana niza] niza ] Primer: *itanje vrednosti niza var kota=new kota=new Array(20); var cene=new cene=new Array(100); *Upis u niz cene[5]=200.33 cene [5]=200.33 kota[0]=0.2 kota [0]=0.2
PrimerPrimer Prvi Niz
Unosa i isitavanja nizova

Drugi Niz
var stateEntered = new Array(51) stateEntered stateEntered stateEntered stateEntered ... stateEntered [0] [1] [2] [3] = = = = 1819 1959 1912 1836
var USStates = new Array(51) USStates[0] = Alabama USStates[1] = Alaska USStates[2] = Arizona USStates[3] = Arkansas ... USStates[50] = Wyoming
[50] = 1890
function trazenje_broja_za_unetu_drzavu() { var izabranadrzava = document. Form.unos.value for ( var i = 0; i < USStates.length; i++) { if (USStates[i] == izabranadrzava) {Break;} } alert(Za drzavu + izabranadrzava + broje je + stateEntered[i] ) }
Stringovi - konverzija
Kada se iz tekstualnog polja preu preuzme zme neki podatak (koji je uvek inicijalno tekst) a koji treba da bude brojna vrednost, tada je neophodno izvriti konverziju tog tipa podatka u integer Za to se koristi pars parseInt Primer
var prvi_ prvi_broj= broj= parseInt (document.form.text1.value); var drugi drugi_broj= broj= parseInt (document.form.text2.value); zbir = prvi prvi_ _broj + drugi drugi_broj; broj; document.write (zbir); zbir);
Eval
Funkcija eval() izraunava vrednost datog izraza (izvrava ga kao da je napisan u script kodu)
var a = 5; document.write(eval(1+2)); document.write("<br>"); document.write(eval("1+2")); document.write("<br>"); eval ("c=1; d=3; document.write(c+d)"); document.write("<br>"); document.write(eval(a+2)); document.write("<br>");
String - metodi
Konverzija u velika (*.toUpperCase()) Konverzija u mala slova (*.toLowerCase()) Primer
<SCRIPT LANGUAGE="JavaScript"> var a="Pera"; var x = "Mika".toLowerCase() ; var y = a.toLowerCase(); document.write(x +" " + y); </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> var a="Pera"; var x = "Mika".toUpper "Mika".toUpperCase() Case() ; var y = a.toUpper a.toUpperCase(); Case(); document.write(x +" " + y); </SCRIPT>
String - metodi
Prebrojavanje broja karaktera (*.length) Dohvatanje karaktera na poziciji (*. (*.charAt charAt(x)) (x)) Dohvatanje grupe karaktera od pozicije x do pozicije y (*.substring(x,y (*.substring( x,y) ) Dohvatanje grupe karaktera od pozicije x, u duini od y (*.substr (*. substr( (x,y x,y) ) Primer
<SCRIPT LANGUAGE="JavaScript"> var a="Pera"; var x = a.length ; var y = a.charAt(2); var z = a.substring(1,3); document.write(x +"<br> " + y+ " <br>" + z); </SCRIPT>
String - metodi
Traenje prve pozicije nekog stringa (*.indexOf(string) Traenje (*.indexOf(string)) ) Traenje Tra enje poslednje pozicije nekog stringa (*.lastIndexOf(string) (*.lastIndexOf(string)) ) Traenje prve pozicije nekog stringa poev od zadate pozicije Traenje (*.indexOf(string, (*. indexOf(string, pozicija)) pozicija)) Traenje Tra enje poslednje pozicije nekog stringa poev od zadate pozicije (*.lastIndexOf(string, (*. lastIndexOf(string, pozicija)) pozicija))
var var var var a = "Pera ide rado u skolu"; x = a.indexOf("z") ; y = a.indexOf("e") ; z = a.indexOf("ra") ; var i = a.lastIndexOf("e") ; var j = a.lastIndexOf("ra") ; var m = a.indexOf("o", 15) ; var n = a.lastIndexOf("u") ; document.write(x+" "+y+" "+z+" "+i+" "+j+" "+m+" "+n);
Funkcije za rad sa vremenom

Metodi objekta window: setTimeout() setTimeout () / clearTimeout() clearTimeout() setInterval() setInterval () / clearInterval() clearInterval() Sa setTimeout se neka akcija izvrav izvrava a samo jednom i to nakon nekog zadatog vremena u milisekundama. setInterval() setInterval() se izvrava dok se ne zaustavi kodom !!! var ime= setTimeout ( expression, timeout ); Sa clearTimeout() clearTimeout() seprekida metod setTimeout() setTimeout() pre njegovog izvrenja clearTimeout( clearTimeout (ime) ime)
Klik na taster prikazuje prozor nakon 5 sekundi

<input type="button" name="clickMe" value="Click me and wait!" onclick="setTimeout('alert(\ onclick="setTimeout('alert( \'Surprise!\ 'Surprise!\')', 5000)"/> <html> <head><script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value=c; c=c+1; t=setTimeout("timedCount()",1000); } function stopCount() {clearTimeout(t);} </script></head> <body><form> <input type="button" value="Start count!"onClick="timedCount()"> <input type="text" id="txt"> <input type="button" value="Stop count!"onClick="stopCount()"> </form></body></html>
Broja
Svojstvo innerHTML
Ovim svojstvom se naknadno moe postaviti (definisati) neki novi sadraj odreenog HTML taga (naj (najee ee div ili span) Na ovaj nain u mnogome se moe poveati interaktivnost web strane Dinamika se moe postii korienjem Java ScriptScript -a
innerHTML zamena stringa

<script type="text/javascript type="text/javascript"> "> function promena(){ promena(){ document.getElementById(' document.getElementById ('primer primer'). ').innerHTML innerHTML = Mika'; } </script> <body> <p>Dobrodoli <p> Dobrodoli korisnie <b id=primer id=primer'> '>Pera Pera</b> </b> </p> <input type='button' onclick= onclick=promena promena()' ()' value=Promena value=Promena t eksta'/> eksta '/> </body>
innerHTML zamena stila taga

<script type="text/javascript type="text/javascript"> "> function promena(){ promena(){ var oldHTML = document.getElementById document.getElementById(' ('para paragraf graf'). ').innerHTML innerHTML; ; var newHTML = "<span style='color:#ffffff style='color:#ffffff'>" '>" + oldHTML + "</span>"; document.getElementById('para document.getElementById(' paragraf graf'). ').innerHTML innerHTML = newHTML; newHTML; } </script> <body> <p id='para id='paragraf graf'> '>Dobrodoao Dobrodoao korisnie <b id=korisnik id=korisnik'> '>Pera Pera</b> </b> </p> <input type='button' onclick= onclick=promena promena()' ()' value=Promeni value=Promeni'/> '/> </body>
innerHTML Primer manipulacije sa linkovima

Svojstvo innerHTML postavlja ili vraa vraa tekst linka
<html> <head> <script type="text/javascript"> function PromeniLink() PromeniLink() { document.getElementById('proba document.getElementById(' proba').innerHTML=" ').innerHTML="Novi Novi Link"; Link"; document.getElementById('proba document.getElementById(' proba').href="http://www. ').href="http://www.google google.com"; .com"; document.getElementById('proba document.getElementById(' proba').target="_blank"; ').target="_blank"; } </script> </head> <body> <a id="proba id="proba" " href="http://ict.edu.rs href="http://ict.edu.rs"> ">Visoka Visoka ICT</a> ICT</a> <input type="button" onclick="Promeni onclick="PromeniLink()" Link()" value="Promena value="Promena linka linka"> </body> </html>
Primer
<script type="text/javascript type="text/javascript"> "> var wooYayIntervalId = 0; function wooYayClickHandler ( ) { if ( document.getElementById(" document.getElementById("wooYayButton wooYayButton").value ").value == "Click me!" ) { // Start the timer document.getElementById(" document.getElementById ("wooYayButton wooYayButton").value ").value = "Enough already!"; wooYayIntervalId = setInterval ( " "wooYay wooYay()", ()", 1000 ); } else { document.getElementById(" document.getElementById("wooYayMessage wooYayMessage"). ").innerHTML innerHTML = ""; document.getElementById(" document.getElementById ("wooYayButton wooYayButton").value ").value = "Click me!"; clearInterval ( wooYayIntervalId ); }} function wooYay ( ) { if ( Math.random ( ) > .5 ) { document.getElementById(" document.getElementById ("wooYayMessage wooYayMessage"). ").innerHTML innerHTML = "Woo!"; } else { document.getElementById(" document.getElementById("wooYayMessage wooYayMessage"). ").innerHTML innerHTML = "Yay "Yay!"; !"; } setTimeout ( ' 'document.getElementById document.getElementById(" ("wooYayMessage wooYayMessage"). ").innerHTML innerHTML = ""', 500 ); } </script> <div id="wooYayMessage id="wooYayMessage" " style="height: 1.5em; fontfont-size: 2em; color: red;"> </div> <input type="button" name="clickMe name="clickMe" " id=" id="wooYayButton wooYayButton" " value="Click me!" onclick=" onclick="wooYayClickHandler wooYayClickHandler()"/> ()"/>
Toliko za sada !!!

3 Java Script Uvod 2012 Full PDF 17892

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 Uvod 2012 Full PDF 17892

Uploaded by

Copyright:

Available Formats

Visoka kola strukovnih studija za informacione i komunikacione tehnologije Beograd

Serverski klijentski jezici

JavaS Java Script

JAVA objektni programski jezik

Redosled izvravanja izvravanja

Dodela un unetog teksta promenljivoj

Pitanje sa dve opcije

Dodela vrednosti metoda Confirm

Rad sa datumom i vremenom

Rad sa datumom i vremenom

Rad sa datumom i vremenom

Kontrole toka i petlje

switch(x) { case a: ta se radi; radi; break; case b: ta se radi radi; ; break; }

JavaS Java Script funkcije

Realizacija ff-je - automatski ako je unutar Body

na taster Pozovi f-ju

Primer - Pozivanje funkcije

x=4; y=3; z=2; answer=average(x,y,z); alert(answer);

Pozivanjem funkcije x y z se menja sa a b c

Rad sa elementima formulara

Objeka Objek at document

Interakcija korisnika i web strane

Upravljanje elementima formulara

Pristup elementu forme

2. Iz promenljive u element formulara

Kontrola elementa tipa TEXT

Ako se promenljive definiu kao:

Kontrola elementa tipa CHECK BOX

Kontrola elementa tipa Select

1,2 i 3 su skrivene skrivene vrednosti.

Tada je: aaa=1 bbb=Kartica ccc=2 ddd=Kartica (ddd=Gotovina) eee=2 (ddd=1)

Kontrola elementa tipa Radio

Ispitni zadatakzadatak- nastavak

Pristupanje pomou IDID-a

Otvaranje/zatvaranje Otvaranje /zatvaranje novog prozora

Dogaaji i tagovi kojima se mogu dodeliti

PrimerPrimer <HTML> <BODY>

PrimerPrimer Prvi Niz

Unosa i isitavanja nizova

Funkcije za rad sa vremenom

Klik na taster prikazuje prozor nakon 5 sekundi

innerHTML zamena stringa

innerHTML zamena stila taga

innerHTML Primer manipulacije sa linkovima

Toliko za sada !!!

You might also like